MY UX JOURNEY OF DESIGNING THE SOCIAL NETWORK: INSTAHOOK
#UX #mobileapp #humancentereddesign #usercentric #UI #userneeds #ads #empower #reward #designthinking #universitySanDiego #UCsandiego #ixdonline
How could ads in our newsfeed be more gamified even rewarding to us?
Advertising is a huge money-making industry. Yet, as users, we are often puzzled about how ads are serving us. I got curious to learn more about how people browse ads in their newsfeed in social networks.
What do they think about their ads? I interviewed a few people to find out.
STEP 1: Interviewing users: let’s understand the gaps and opportunities!
· First thing, they feel that ads are either too repetitive or not targeted enough to their needs. One interviewee reported that she can hardly know whether the ads are going to be useful or useless, thus she ends up not watching as many as she could.
· Second, they said they miss control and freedom over them. From time to time, one of the interviewees said she even removes them from her feed by tapping on ‘’Hide Ad’’ but not often as it requires a few steps.
· To sum up, the interviewees feel a bit passive in front of their ads not having many choices but to skip or watch them.
Alice reported the options she gets to manage her ads. Not so many!
STEP 2: Getting inspired
Glancing through the ads in social media does not seem an amazing experience for everyone yet. There are gaps to fill out to help the users better navigate through the noise in their newsfeed.
So what can we do to add values to ads for the users? Of course, we need to take into account that ads need to be beneficial both for the users and for the company advertising them.
Let’s spark some ideas by researching what’s out there:
- On Quantic MBA ad (below on the left), I liked the fact an ad can be divided in 2 like with.
- On Linkedin (below on the right), I got inspired by the info mentioned next to the logo brand showing how many followers they have and what friends follow them.
- On Instagram (below on the right), I got inspired by Donate Now button
- On Pinterest (below on the left), I got inspired by the round edges of the ad.
Step 3: Storyboarding — in the users’ shoes to address the solution!
I combined the results of the interviews I conduct with my research and decided to focus my attention on the passive mindset of the users in front of ads in their social networks such as Instagram or Facebook. How could we change ads in our newsfeed to make them fun, even empowering to change our state of mind when looking at ads?
The Point of View I focus on: ‘’Feel impactful, have fun, be rewarded by interacting with your ads in your social networks’’
Follow the story of Martin below on his brilliant idea to make ads fun, interactive, and even rewarding.
Step 4: Prototyping on paper: how could Martin’s story be materialized with an app!
Following Martin’s story, I developed the following new features in a social network called Instahook — see below my paper prototype:
1. watch entirely an ad so the company can commit to a donation to the NGO you selected after watching its ads;
2. get a reward in the form of a coupon to buy a product/service from the company;
3. directly donate on the sponsored ad itself without being redirected on another page;
4. remove an ad easily just by swiping it to the left giving more control to the users over what they see.
Step 5: Highlighting usability issues - the Heuristic evaluation:
The Heuristic Evaluation is a set of 10 thoroughly-thought criteria analyzed to improve and refine the User Interface design before starting the high-fidelity prototype. Thanks to the HE, I discovered the following issues (below a sample of them) and integrated subsequently the changes into my prototype:
- deviation in consistency and standard — the notification button is not standardized thus - difficult to recognize, the button to go backward should be an arrow instead of a cross;
- lack of status visibility — to improve the visibility of how much the users have donated or raised, how many NGOs are supported so far, to feature in the profile page of the users;
- navigation and freedom of use should be eased with the same wording — if you click on the ‘’ discover’’ button, next page should have ‘’Discover’’ in its title; the users should have an edit option to change their selections ;
- help should be provided for some actions with pop-up messages to help the users to navigate and take appropriate actions.
The conclusion of the HE from a participant’s point of view was that the design of the paper prototype is simple, intuitive and lead to the expected outcomes: giving more control and fun to the users over their ads without compromising the objectives of brands.
Step 6: Prototyping with high-fidelity: how to turn the solution into a reality!
After integrating the feedback and testing the paper prototype with different users, it was time to create a digital high-fidelity prototype. To do so, I used Adobe XD. After weeks of iteration with building, testing, integrating the feedback, I had turned the paper prototype into a real product that I named Instahook (see a sample of the screens below):
Review of my Point of View
With newly designed features around ads in the newsfeeds, users feel more impactful and are even attracted to watch ads that were previously overlooked.
- users can support the community after watching an ad;
- they can donate directly to an organization with a simple tap on the heart button located on sponsored ads that support a good cause;
- they can be rewarded with coupons by brands after watching their ads or after donating through their sponsored ads.
Both brands and users feel empowered!
Below the recording of my prototype
SIGN IN YOUR SOCIAL NETWORK — INSTAHOOK
WATCH AN AD UNTIL THE END AND SUPPORT THE COMMUNITY
BE REWARDED BY COMPANY FOR WATCHING THEIR ADS
DONATE JUST BY TAPPING ON THE HEART BUTTON AND SUPPORT THE CAUSE THAT MATTERS TO YOU
An NGO’s profile page showing how much the organization has raised, and its different projects
Anna’s profile page showing the amount she raised for other NGOs and the # of NGOs she supports
Step 7: Testing the prototype with users! The power of feedback
This is the final step to pinpoint the issues encountered by the users to correct them in the digital prototype. In addition, an A/B test is run on usertesting.com (see below) on 1 feature designed in 2 different ways. The objective is to find which of the 2 ways works best for the users.
Both tests (with my friends and with online participants on usertesting.com) were invaluable in improving my prototype from a user’ s point of view.
For instance, through my friend, I discovered that before donating she would like more info about the community she donates to, also the suggested amounts to donate should be smaller to be less intimidating. She also made me realize that the payment method should be displayed in a less obvious spot on the app (e.g in settings) (Thanks Trechelle! 😊).
Through the participants on usertesting.com, I discovered that the switch button ‘’See fewer ads’’ should be displayed from the beginning of the video (even in a deactivated state) and not only once the video is over as lots of users would miss it otherwise.
Without iterating user testings, I would have probably missed small details that make a big difference to the users at the end!
Step 8: Telling about this UX design project
To introduce my project, and to sum up the result of weeks of work, I created a video, see link below — in an attempt to show how ads in our social networks could be impactful even rewarding for the users.
Discover the project below with my video on YouTube
Note on my challenge
The main challenge throughout this project was to find a balanced solution that impact positively and fairly both the users and the brand advertising as their respective needs in term of ads seem opposed at first sight.
Most users want the least ads possible whereas the brands wish to impact the users with more and more ads. I tried to replace the quantity by quality ads bringing values to the users and in turn, to the brands. Less is more!
