whatsapp icon

WhatsApp UX Experiment 1

Part one of a self project exploring alternative designs and proposing all-new features, designed to make connecting with WhatsApp even easier

Iconography 01

Back, Quote Reply and Forward have all been iconized with white arrows, two of which actually point to the same direction, causing unnecessary confusion and delays in the user experience for more than half the users that I interviewed. I propose reiconizing the Quote Reply button—the least sacred cow of the three—in a way that accurately defines its function without causing any confusion

  • before

    whatsapp ux experiment 01 before
  • after

    whatsapp ux experiment 01 after

Iconography 02

Within established apps, UX maintenance must be subtle, almost under the radar, like here. When selecting more than one message, the following header fades in, with Copy showing after Delete. I suggest keeping a logical order of Copy then Delete

  • before

    whatsapp ux experiment 02 before
  • after

    whatsapp ux experiment 02 after
whatsapp ux experiment 03 after

Wider Send button

Currently, the only way to send a message goes through a little button smaller than the tip of a user's finger. Based on personal experience, I propose widening it by 14 to 16 pixels for better tappability on the fly as well as to allow sending by hitting Enter—a key already within the keyboard from which a user types. It's worth testing whether or not users will find it a more useful purpose for the Enter key than for breaking a line. Evaluating the impact of this possible feature through timed A/B tests combined with physical observation truly excites me!

  • whatsapp ux experiment 04 before
  • whatsapp ux experiment 04 after

Anatomical design

When scrolling up a chat screen, a Back to Bottom button pops up at the bottom right corner. Holding a phablet with their left hand, a user is almost asked to defy the laws of anatomy in order to reach it. Depending on how they like to hold their phone, that may be beyond any possibility. Holding it with the right hand, a user is forced to flex their thumb backwards in order to reach this button, by so putting a lot of stress on the muscles in the area as they were not designed for such a movement.

The fix? I moved the button to the center of the screen, at a horizontal and vertical position that is comfortable for either thumb. I enlarged it for better tappability (from 36px to 44px) and gave it a 75% opacity so it blends better with the messages underneath it. I am thrilled by the thought of researching how these possible features meet users, especially heavy ones.

Swipe image above to see result

Tools Used

sketchSketch
principlePrinciple
photoshopAdobe Photoshop
html5HTML5
css3CSS3