You are here : Home > Blog > 7 Things Yappily Should Do ...

7 Things Yappily Should Do For Better UX

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

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

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

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

Hearts: Dead-end

Posts - Dead End

Posts: Dead-end

Comments - 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.

Empty Wishlist : No Dead-end

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?

yappily-get-started-0

My Feed – Get Started

yappily-get-started-1

My Feed – Step 1

My Feed - Step 2

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

Tabs: Hygiene Missing

Buttons: 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 - Step 1

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 Step 2

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 - Step 3

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 - Step 4

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.

yappily-product-1

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!

2 Comments

  1. Ravi Tej

    That’s a great post. This helps a lot to develop us even better. We always need a feedback from user perspective to know, if we are on the same page. We have changed a lot of things in the app now. It’d be great if you give a look at it and let us know what you think about it. Looking for a great progress! Thanks a lot.

    Reply
    1. Udit

      Thanks Ravi! Yes, I see a couple of screens have changed since I started writing this article about a week back. You are moving at a fast pace!

DROP A COMMENT

Your email address will not be published.

Udit Khandelwal