Wysa - A brief case study
Designing for a mental health AI chatbot
UI/UX Design intern
I interned as a UI/UX Designer at Touchkin in the summer of 2017. Touchkin’s primary product is Wysa — A mental health AI chat-bot. I wasn’t a very seasoned designer back then, but I realized that illustrations were a vital part of this product, because:
AI chat can feel very robotic (Oh the irony!). Graphics like images, GIFs, and stickers are a fitting break to the mechanical feel of the user experience of a chat-bot. This gives the AI a human touch. ( Imagine WhatsApp without emojis. Scary.)
I went through several user reviews on Play/App store and found that the cutesy GIFs Wysa occasionally sends can make a sad soul feel 10x (Okay maybe 5x, sue me) times better than before.
At that time, Wysa’s GIFs were not created in-house. We used Chibird’scontent. One of my many missions during this internship was to create a whole new set of GIFs in my own unique style, in-sync with both the product and brand. At the end of my 2-month internship, I’d created almost a 100 GIFs for the chat-bot (it’s true).
Let’s look at illustration trends nowadays (since 2017):
Images tagged ‘illustration’ on Behance
Images tagged ‘illustration’ on Dribbble
Well, lookie here. Designers are slowly but surely adopting flat, isometric styles with bold gradients and vibrant colors. There’s nothing wrong with this; In fact, I swoon over too many such illustrations each day. However, Wysa is a heavily people-centric product (Isn’t everything these days?) and dealing with mental health is a sensitive issue which requires utmost empathy. My manager would always stress on how the entire product was centered around empathy — which is truly the crux of Wysa. All designs should be user-centric, but for Wysa, it was insanely vital because the users themselves were half the product.
‘Empathy’ is the modus operandi of a mental health AI chat-bot
So now I had to empathize with the user through illustrations, presented through GIFs, in an AI chat-bot. Phew. The above trending styles seemed to lack empathy. They were(are) amazing, aesthetic and beautiful UI, but didn’t feel all that “human”.
From my previous works on the product, I already had an understanding of the various user persons. My first thought was — “How would these people relate to graphic images? Keeping in mind that they are unstable, what kind of colors and/or images would they prefer to see?” (I immediately thought of baby and cute cat GIFs — funny and soul soothing 😌).
I presumed that people relate to artwork which looks more like something they themselves would draw (I’m talking about normal, hand-drawn stuff). Logical enough right? I confirmed this assumption from multiple sources including past user activity, reviews, and team inputs.
People loved the existing Chibird’s style. It was simple yet powerful, light yet impactful, and more importantly, they were motivating and uplifting. This was added to my list of inspirations. I went ahead with some research to add more to this list:
A few references collected for various hand-drawn styles and different moods
Two days in and I felt a huge rush of inspiration. I designed the characters using my Wacom One ❤ and Photoshop. As I designed for the content provided by my team, new characters and themes came up. It was an exciting time to be in 👽
*Drum roll* ….aaand here’s a couple of my GIFs and the complete illustration guide:
The sketches and wireframes you’ll see in the next section are all outcomes and ways of solving the many new challenges I(we) faced. I believe this is where the true heart of digital product design lies. Here are some of the challenges I faced (and eventually solved):
Interlinking Community & E-commerce (shopping) posts [ref: Tagged products on Instagram posts]: The clients came up with a concept of “Tagged products”, where users can tag products associated with their selfies/looks which links to the products in the e-comm site. The challenge here was to drive sales without losing user engagement. a) The post can’t be too long b) But the products need to be shown upfront to drive sales c) and there needs to be a selling point (a discount, maybe?). Final Outcome:
Interlinking Community & E-commerce (shopping) posts [ref: Tagged products on Instagram posts]: The clients came up with a concept of “Tagged products”, where users can tag products associated with their selfies/looks which links to the products in the e-comm site. The challenge here was to drive sales without losing user engagement. a) The post can’t be too long b) But the products need to be shown upfront to drive sales c) and there needs to be a selling point (a discount, maybe?).
Groups, Topics or Hashtags?: This was a major challenge till the end since all three compete to be one of the main aspects of a digital community. After quite a bit of research, we settled on Groups, as Topics or Hashtags become very vast in the cosmetics world. a) Groups are very scale-able. b) The learning curve for new users will be steeper for topics or hashtags. c) Hashtags can be explored through posts pulled from Instagram. Final outcome:
User Profile and Beauty Profile: ‘User Profile’ is your usual Settings, Account, Cart, etc. ‘Beauty Profile’ consist of the user's Complexion, Eye Color, Hair Color, etc (This helps other users make better product choices based on similar physical features). Challenges included: What’s the hierarchy? Must it be a separate tab? What are the use cases of viewing someone’s beauty profile? I did come up with a concept, my teammate came up with a better concept though, so we went with that.
Sessions: Imagine you’re a girl of 16–17 yrs (practicing empathy), you love looking like a boss, and you have these makeup model idols you follow and aspire to be like. What if you got a chance to ask them questions, live,1 on 1? OMG. That was the idea behind Sessions. This section required a lot of thought as we had to build it from scratch. But I also think this was a boon as we could experiment more and build it as a standalone module of the community.
There were several other such road blocks that we came across, for which we eventually came up with decent solutions. I’d say this is where most of my work lay and I learned a ton.
Testing & Iterations
After the first round of wireframes, we made InVision prototypes (I thank god for giving us designers InVision). The clients tested this out with their focus group consisting of beauty enthusiasts and influencers of varying ages.
The feedback was surprising — Most of them were confused with the feed format of the home page (Fig.1). So we now had to rethink the onboarding structure of the community after login/signup. After brainstorming, and a couple of sketches and designs later, we came to the conclusion that ‘Looks’ should be the heart of the community. We came up with Fig.2 as the community home page. This breaks traditional onboarding norms and is more of a landing page.
Conclusion - To infinity and beyond
This was my first major project in UI/UX Design. I learnt vast amounts about design, people, time management and teamwork. I was never someone who’d be interested in the area of beauty or fashion, this project put me way out of my comfort zone and pushed me beyond my boundaries. I realised that the true power of designers lie in solving problems for the users, in whichever field it may be.