A non-conversational menu for the initial release of Woebot's iOS app.
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...
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.