Woebot is a mental health chatbot iOS and Android app intended to deliver CBT and mental health related educational resources. I led the design vision at Woebot Labs, and have wore many hats during my time there.
Making mental health radically accessible
I helped design both the Android and iOS apps. Both of which have gone on to win the 2019 Google Play Award for wellness apps and be featured in the App Store, respectively.
I’ve also designed and implemented the website. I designed and refined our pitch deck that landed us a 8M+ Series A round. I’ve illustrated over 100 unique Woebot branded lesson covers, and over 30 unique Woebot tool icons.
I created the basis for our styleguides. I managed two designers, of which I oversaw the sourcing, and hiring of these two designers, one in-house, and one remote.
Provide clinical help at any moment of the day
Our goal and vision for the company was to deliver CBT & DBT based tools and education to users who turned to Woebot with a problem. Furthermore, this was to be done via a simple and intuitive conversational interface. Our ambitions were to create an app that embraced the unknown and diverse cicrumstances with which our users came to us.
Our high level goals were to:
- Make it fast, easy, and accessible to use for everyone, anywhere.
- Provide simple language and tools to help & educate our users.
- Encourage daily habits and reward or encourage any active participation.
I led the design of Woebot Labs across iOS, Android, Desktop and Web from the beginning of my time at the company in July 2018.
Typically, I worked in a small collaborative team, alongside a Researcher, Content Strategist, Developer(s), and Product Manager.
Due to a very limited resources, I frequently wore many hats in the process, but this changed as I was able to hire more design help.
We released our respective mobile apps in December 2018 and have gone on to win a 2019 Google Play award, a 2M NDIA Grant Award, and a feature in the App Store Today section.
Conversational versus traditional interface
In addition to simply trasnsitioning content & conversations from Facebook Messager’s platform to our own native mobile apps, there was a large decisions about how to handle content, decisions, and conversational routes that are more complex than a simple message bubble.
How we got there
The biggest challenge I faced throughout my time at Woebot was balancing progress on designs, while maintaining transparency and collaboration with the rest of the team. Since every flow or conversational path I touched affected every part of our organization, I needed constant buy‐in from the clinical team to the ML engineers.
Collecting feedback on designs that influenced conversational design was one of the biggest challenges I faced at Woebot. We did not have a robust means of testing conversations, let alone conversational UI (cards, modals, etc..) which made validating certain ideas particularly challenging. This difficulty, at times, led to skepticism about the design process, and the proposed mocks.
However, I observed this challenge fairly early in my time at Woebot, and invested time into creating basic documentation with my PM to help better articulate certain design decisions and rationale. I dramatically improved my ability to communicate not only why I was proposing a specific feature, but how it might improve a specific metric that made sense to a less technical clinical team. I spent a lot of time trying to create more visibility into my decision‐making process, and doing everything I could to help the team understand the design team's vision.
Improving the architecture
We had a fairly unique challenge as a clinical chatbot. Clinicians needed to write a multitude of content and oversee the various paths that this content could be traversed. As an organization, we needed to anonymously collect analytics, track the routes was a user could take, and make sure all paths resolved satisfactorily. This required a well designed CMS to manage content that would be output through various different platforms (specifically mobile and web at this time), and a design to help both content creators/clinicians and creatives manage and deploy their content.
Unfortunately, I cannot share much of the underlying custom CMS due to NDA concerns at this moment, but I worked with the engineering team to help translate an almost maxed google spreadsheet to a fairly basic, but functional CMS. I then began working on the front-facing parts of the mobile apps and a revised website that would hopefully capture some of the latest changes to Woebot.
Validating ideas and dynamic data
As I mentioned earlier, it wasn't always easy to capture the full vision of specific features or communicate conversational design via static Sketch mocks, so I spent quite a bit of time trying to bring my ideas to life via Framer and After Effects; building functional and reusable dynamic components. There was quite a bit of exploration that was never used.
After a lot of deliberation, delayed timelines, and a series of difficult conversations and compromises, we finally reached the next iteration of Weobot.
Scalability and communication issues
The current design system and styleguides were not always as comprehensive and organized. The beginning stages of compiling the mobile apps and creating content were typically a mad dash to establish systems that would be sufficient for that point in time, but flexbile enough to build upon in future iterations.
This would include the mobile apps, the website (future deskop), the internally built Content Management System, the illustrations and brand assets.
Building the system
Despite being the only designer for the first six months, I tried my best to keep the design systems and interface consistent while ensure the brand and approachable style translated across the entire the user experience.
Illustrations to communicate
My digitally painted illustrations centered around the idea of conveying a complex or abstract concept in a simplistic or tangible representation of the conversation you've had with Woebot, or as a placeholder for your current progress. I developed a simple styleguide to help maintain cohesion across multiple categories.
Consistent across platforms
For the first year it was rare to have oppurtunities to step back and reflect upon everything, or organize the mess I had made, but I grew tremendously as a designer having to think about how I would maintain our design system as requirements were constantly changing, knowing that I will eventually have to pass on all of my bad, and sometimes decent, decisions to future design hires. Up until this point, I either inherited and maintained an exisiting system, or I was working at a much smaller scale. This is just an excerpt, but the implementation of the system was an internal website I created that could be easily referenced and edited via markup.
Positive outcomes and much more to do
The launch of the Woebot mobile app on iOS and Android has had a positive impact on our existing and new user’s overall experience, at the time of writing (3-6 months since launch). The biggest challenges we face are continuing to develop features that promote habit and building Woebot into their daily routine. We’re currently re-evaluating how to better surface our deep array of content, and highlight how simple, illustrative, and powerful a tool Woebot can be.
More to come!