I recently installed the Yappily App on my friend’s Android Phone. While overall it seems to be scoring good on usability, there are certain quick fixes that could take the user experience from good to great. I couldn’t stop myself from listing them down. I hope the folks at Yappily find this useful. I have looked at this app from 3 lenses:
New vs Returning users
Domain experts vs novices (how familiar are they with shopping online)
Explorers vs Navigators. Explorers don’t know what they want. Navigators know exactly what they’re looking for.
#1 Provide Onboarding
Problem: Users don’t know what to do here.
Victims: New Users, Novices
No Onborading
Lack of onboarding experience makes it difficult for the users to understand what the app is about. The landing fails to set the expectation right. Not all the users are aware of the concept of “social shopping”.
How To Fix
Provide a simple 3 slides onboarding experience which tells the user what to expect and how it works.
Use real images instead of vectors. It’ll work better for the genre.
#2 Provide Clear Login & Register
Problem: Login and Register are confusing
Victims: New Users, Novices
Missing Register
The login area is confusing. The labels used are heterogeneous — One is a question, another an action. The button label is missing the use-case of Register. I feel, there is also a feature missing, there should be a login option using email, as not everyone is comfortable logging in using Facebook.
How To Fix
Provide homogeneous labels eg. Already have an account? New to Yappily?
Enable login via email as well.
Provide clear distinction between login and register.
#3 Do Hand-holding
Problem: User does not know where to go from homepage.
Victims: New Users, Novices, Navigators
Feeling Lost on Homepage
There are way too many options here and user might start wandering aimlessly. The entire 2 level navigation, Filter and Sell are exposed to the user. The cards look bulky and there’s an information overload on the cards. The hierarchy of information is not right. What user would be most interested in is the count & type of items, not the name and image of the user. There are 2 primary actions on the screen. Giving same priority to filter and sell sounds like an afterthought.
How To Fix
Don’t expose the entire navigation upfront. use progressive disclosure, keep it a tap away (at least the second level).
Declutter the cards. Take some stuff out, put it a tap away.
Maintain Hierarchy. Bring most important things up.
Use only 1 primary action: Sell. Figure another placement for filter.
Create an obvious path for user, hand-hold him/her virtually.
Either hide 0 likes, or say “Be the first one to like this!”
#4 Get Rid of Dead-Ends
Problem: There are several screens where user hits a dead end.
Victims: New Users, Novices, Explorers
Hearts: Dead-end
Posts: Dead-end
Comments: Dead-end
The screens above don’t provide any path for the user to go forward from here. The small help-text does not help much. User won’t even be able to find the buttons you’re talking about here.
How To Fix
Take a look at the example from Zivame. Messaging is clear and the broken heart icon helps set the tone. The you “might like widget” gives the users something to go ahead with. Here empty screens are tackled in away where user does not hit a dead end. He/She can go about continuing his journey.
Zivame’s Empty Wishlist: No Dead-end
Late Discovery (Sorry)
There is another way of handling this which I discovered in my second visit to the app. The my feed section has a “Get Started” button, which has a pretty decent and straight forward flow. The wizard is good and progress towards the goal is depicted clearly. Why not use this at other places as well?
My Feed – Get Started
My Feed – Step 1
My Feed – Step 2
#5 Get The Missing Hygiene
Problem: Poor formatting and labelling on screens that need to be usable.
Victims: Everyone
Tabs: Hygiene Missing
Buttons: Hygiene Missing
In the screens above, basic controls are either poorly selected or poorly formatted:
In the filters screen above, the selected tab is barely visible.
Black text on orange background is a poor contrast.
Filter screen, title as well are CTA both read ‘filter’. Cancel is missing.
Location and Area are confusion. Which one is which?
Poor choice of icons – earth for area?
How To Fix
Give highlight color and border-bottom to selected tab.
Use proper contrast. White on Orange.
Make button labels action based, unambiguous.eg. ‘Apply Filter’ instead of ‘filter’
Always provide an obvious way to cancel and clear.
Area can be renamed to availability, with a ‘check’ icon.
#6 Simplify Complex Flows
Problem: Certain flows a pretty complicated and difficult to complete.
Victims: Everyone
Take a look at some screenshots from sell workflow:
Sell – Part 1
This screen opens up on click of sell button. There is a huge inconsistency here:
Some buttons have icons, others don’t. Not sure why?
The main icon is camera, which sets the expectation that the first step will be camera, but it is not.
FAB expands into multiple option buttons, which is an overkill, as every button leads to the same screen anyway.
Multicolor buttons don’t serve any purpose.
Sell – Part 2
I discovered later that this screen comes only for the first time seller. Nonetheless:
It has confusing labels.
By the time user comes here, he has no sense of progress towards goal.
Poorly labeled button does not tell me what’s next
Mentioning that this is one time setup only (or these values will be used as defaults) might be a good idea.
Sell – Part 3
I didn’t go further than this, but this looks like the final step.
However, there is still no indicator that my process is gonna end here.
The entire page looks like a big form, designed for desktop.
Compulsory and Optional things are marked separately, that’s good!
“Optional +” has a bad label, as I already see some optional stuff.
Sell – Part 4
On this screen I was stuck for like 5 seconds and didn’t know what to do.
There’s no reason mentioned why going back requires confirmation.
User does not know what would happen if he clicks yes.
How To Fix
Use wizards for complex flows.
Always let the user knows how many steps are required, and where he is.
Use progressive disclosure. One thing at a time.
Let the user traverse back and forth.
Make CTAs with clear labels, not just ‘submit’. eg. ‘Next’ or ‘Confirm’
Error messages should state what’s wrong and what to expect when you select one of the options.
#7 Layout With a Goal
Problem: The product page of the app seems to lack a direction.
Victim: Business Owner.
This is the screen which is supposed to give you, as a business owner, the conversion. But I think it has the following issues:
There is not motivation for the users to buy this product.
No sure, why “Your location is unavailable” is required at the product page?
The user card is way too cluttered. Lots of icons and just a default text “I Love Shopping on Yappily”. It does not help.
Some count labels are orange, some are grey, none is clickable. It’s confusing.
The upvote button (triangle) is unconventional. Why is it required when you already have a heart? Over-engineering.
How To Fix
Give enough emphasis to the product itself.
Declutter the user card, the seller picture repeats way too many times.
Again, use progressive disclosure, keep unimportant things a tap away.
Make sure your products get better descriptions. User would like to read that before going ahead for a chat.
#8 Bonus Point!
The entire app flow has not been thought through from a new vs. returning user point of view. We need to make the purchase flow super easy considering each and every step:
Trust in the platform
Discoverability of the shops and products
Interest and Desire
Motivation to Buy
Final Action
All the features of the app, need to be weaved together, rather than presenting them as sections. Redundancies need to be removed (too many inactive social icons, zero likes and comments, upvote vs heart, repeating profile images). The app has a strong potential and definitely a lot of scope for improvement.
I know this article might upset a few folks at Yappily, but I have written it with a good intention. I’d love to see the design getting better. If you find this annoying, comment section is open!