Woebot iOS

A 7-day design challenge

A non-conversational menu for the initial release of Woebot's iOS app.

Duration: 1 week (Spring 2018)

About Woebot: Woebot uses brief daily chat conversations, mood tracking, curated videos, and word games to help people manage mental health. It is created by a team, led by a former clinical research psychologist, Alison Darcy from Stanford University. 

The Challenge

Woebot is a mental health chatbot that started in Facebook Messenger ecosystem. Every day, it asks users about their mood and delivers a short lesson to them. This is called “the daily check-in”.

To see if more user autonomy increases engagement, Woebot team asked me to create a menu outside of the chat UI that gives users more control over their experience for the 1st version of their iOS app.

I'm asked to deliver a medium-fidelity mockup of a non-conversational menu that users can...

  • browse available lessons
  • reschedule daily check-ins
  • turn off daily check-ins

Constraint: After my inquiries, I also asked to keep the top navigation bar untouched as the team was planning to implement avatar animations using Airbnb's Lottie Animation Library.

Screenshots of the previous design. Constraint: Keep the top nav bar untouched.


To understand the intentions behind team's hypothesis, I planned a 3-day user research phase that included five user interviews, a Facebook reviews analysis, and a competitive analysis. To specify the problems that easier to solve with higher impact, I mapped my findings into an effort/impact matrix.

I summarized my research into six design goals to solve in my final concept.


Design Explorations

To understand what will be the trade-offs, I sketched prominent navigation patterns and thought them in the context of Woebot.

For example, putting the menu icon on top of the screen makes it harder for both left and right single hand users.


Getting Users’ Feedback on Possible Solutions

Before going to Hi-Fi, I redraw some of the ideas that I explored and asked a couple of people what they think of each idea, then I wrote advantage and disadvantages for each screen.


Selected directions for Hi-Fi from User Tests

As I was getting feedback, I realized that users were in favor of two solutions that don't feel like a menu. I decided to design mid-fi mockups for both.


Defining an Accessible Color Palette

To make the experience more accessible for all users, before starting to design high-fidelity screens, I analyzed color accessibility. I acknowledged that the primary blue shade was failing the AA accessibility standards.

To define the new shade, I used a contrast color analyzer and calculator. As the final tone had richer in black, I also redefine a background blue, which had contrast with Woebot’s character graphics (its body lines).


First High-Fidelity Iteration

My first iteration aimed to provide easy access to daily check-ins, lessons, account information and privacy policy. I iterated on icon/text only styles for lessons page and also played with the color schemes of the modal.


Testing the First Iteration with Users

To quickly test and get feedback for my design, I created a semi-interactive prototype, which I tested it with 5 users through think-aloud sessions.

In each session, I asked participants to “reschedule their check-ins”, “stop their check-ins”, and “learn a lesson about depression” in the prototype while they are speaking aloud what they were thinking.

I realized how putting more than enough information that overwhelmed users, how users tend to ignore the hamburger menu, and icons on the bottom as well as some information architecture issues.

Final Design: Second Iteration

To maintain the focus to the conversation, I designed a menu that behaves like a quick reply panel that is similar to existing iMessages apps. Everytime users click a last-level-menu-item, they are routed back to the conversation so that Woebot can help them.

Besides designing what is required, I also recommended two other useful features that I distilled down from my research: Account and About pages.


Entry Point, Notification: It's time to check-in...

To protect user data and offer privacy, I proposed that Woebot should ask for user authentication (such as TouchID or device password).

To make it feel familiar and lower the learning curve of the UI, I decided to use the send icon from iMessage and visually-inspired by iMessage.

Main Menu: "How can I help?"

In my user tests, some users feel urged to press Woebot itself and missed the menu (?) button. This is partly because the Woebot’s avatar is visually very dominant. I turned this constraint to my advantage by designing the menu to also slide up from the bottom when users click the avatar.

I used icons to make menu items more glanceable in the longer use.

Lessons: “Teach me about…”

Users can easily start a lesson that uses cognitive behavior therapy (CBT) techniques by accessing the lessons.

To give users a sense of progress, I decided to include how many lessons did they do out of total classes as well as when they did them.

Check-ins: “Update my check-in time to…”

Being informed of the user behavior, check-in panels enable users to modify their check-ins or add more than one daily check-in.

To make check-in interaction feel easier for users, I decided to make it as familiar as it can be setting an alarm on iOS.

Stop Check-ins: “Stop checking in with me at…”

Users can remove their check-ins from the individual check-in pages. Since this action is partially destructive for Woebot's business, I used red text.

Add a New Check-in: “Schedule a check-in at…”

While the prototype doesn’t show that there is no delete function for check-ins, this can be solved in many ways such as limiting the daily check-ins or using swipe to delete, the default delete interaction pattern of iOS.

Account: “Help me with my account”

To extend the scope of the challenge, I also incorporated some of the important functionalities that participants raised in my research.

As one of the core values of Woebot is being transparent, it is important to show users that they can always leave it without any trace. Through the account page, users can log out or delete their data. 

About: “Who are you?”

To make it easier to access information about Woebot's identity as some of my participants raised in my research, I also proposed an about page.  This way, users can access the information without having to visit woebot.io.

Going Forward

In this challenge, I learned how to design navigation as part of the conversational interface in a real-life product.

If I had one more week, I’d definitely prototype the fully end-to-end scenario from on-boarding users to accessing menu functions and consider more about the conversational design as well. Then I'd do a more comprehensive user test. Finally, I’d also consider micro interactions as I believe they vastly improve the perceived experience quality of conversational agents through delightful and meaningful animations.