MindTales
A Mobile App Design
Finding the right mental health and wellness support for you!
Project
Revamping Mindtales' onboarding and questionnaire flows to deliver a smoother, secure, and compelling experience for users in pursuit of mental health support.
Status
Completed: Collaboratively reviewed native mobile app design solutions with CEO and founder for August 2020 beta launch
My Role
Lead Designer: Research, Usability Testing, Visual Design
Timeline
4 weeks, 45 hours
The Overview
MindTales is an AI-enabled mental health mobile app connecting patients with therapists and providing stigma-free mental health treatment. Patients then receive personalized recommendations on how to improve their health and lifestyle.
My Role
UX/UI Freelance Designer
I conducted competitor analysis, usability testing, and led interaction and visual redesign for MindTales as a freelance UX/UI Designer. The work shown below was completed over the course of 4 weeks, 45 hours. Throughout the duration of the project, I presented findings and solutions to MindTales key stakeholder and CEO.
The Challenge
Improve MindTale’s early designs to make the product more engaging and approachable to users, as they prepare for beta launch.
The Approach
After I received the initial project details, I knew there were going to be several steps to take before I jumped into any re-design solutions:
Build Shared Understanding
As I spoke with Viktorijia, the CEO and cofounder of MindTales, to understand the target audience, what the business needs were, and on what timeline, I was able to organize a 45 hour project scope that established realistic expectations of what could be accomplished and executed when it came to look, feel, and functionality.
Research
I started by looking at four key market competitors that offer similar mental health and wellness services. What were their on-boarding experiences like? What made each unique? What stood out about each one in a positive or negative way? I then reached out to individuals who fell within the target audience of MindTales to conduct usability tests on existing MindTales design to find out what individuals responded to, what confused them, etc.
Competitive Analysis
I was able to download and try three out of the four various types of mental health and wellness mobile apps: Joyable, Sanvello, and 10% Happier. Ginger was the one app I was unable to get past the on-boarding screens, as it is created with an employer partnership in mind.
Joyable and Ginger both offer an on-demand emotional support coach, along with some form of activities or exercises for one to complete on their own time. Sanvello and 10% Happier focus more on offering videos and journeys to help reduce feelings of stress, anxiety, and depression.
While going through each with the UX heuristic principles in mind, I was able to discover some strengths and weaknesses for each competitor:
Usability Testing
Usability testing is so valuable when it comes to designing a product from scratch or modifying an existing one, and with MindTales having an existing prototype, I wanted to make sure I was taking full advantage of the opportunity to understand user needs more clearly.
I reached out to 5 individuals, who fall within MindTales target audience. Individuals who are between the ages of 18-30, who have or are currently using mental health and wellness mobile apps, or have considered seeking mental health and wellness support. I asked each participant to complete a series of tasks, to gather their feedback and impressions on their experience.
Insight
Throughout the 5 usability tests I conducted, every user voiced the importance of being asked questions around having thoughts of suicide. However, they also voiced that the level of importance and severity around how MindTales responds to certain answers needs to amplified.
Areas of Opportunities
After gathering information from competitive research and capturing everyone’s thoughts from usability testing, I mapped testing participant quotes for common themes and ideas:
After running usability tests on the current MindTales design, I re-reviewed each interview and made note of key paint points and comments made around the user flow process.
Identify key problems areas
After I received user feedback, I spent a few more hours going through the existing MindTales app to really identify the key problem areas.
On-boarding screens do not clearly show someone the wonderful benefits and features MindTales has to offer.
User setup screens need to provide more feedback to someone going through the high number of chatbot screens one has to go through for best results.
Therapist profile and book screens have the opportunity to give more information around therapists ratings and de-emphasize call to action buttons that aren’t really in the users control.
Therapist/patient chat screen should take advantage of standard universal communication icons, such as the video camera and phone icon for phone calling and video chat.
Account screen needs to provide text content clarity around progress charts provided
Improvement opportunities
Once I narrowed in on the key problem areas, through competitive research and exploration, I had some initial solution ideas for each identified problem.
The Vision
Confirming the Challenge
I wanted to tackle all of the paint points, but keeping in mind my fixed project timeline, I had to stay focused and choose what was the most important at this time. I started framing some problem statements:
How might we create an intuitive on-boarding process to someone launching the app for the first time?
How might we give feedback to the user throughout the user-setup questions?
How might we reduce the number of screens?
These are all key user experiences that bring someone to find an appropriate therapist they can confide in, as well as tailored exercises that they can complete on their own time.
Ideate
Taking insights from research and aligning with the client stakeholder on the MVP features to move forward with, I began to ideate, sketch, and create wireframes that displayed different design ideas to prototype.
Lo-Fi Sketches
Based on the established pain points, and the solutions in mind, I gathered some inspiration for the UI and sketched options for each.
Sketch ideas from top down: splash screen, on-boarding screen layout iterations, and user-setup/chatbot screen iterations.
Illustrations
After sketching lo-fidelity screens, I started working on illustration iterations for the on-boarding screens. Utilizing some free online resources, I pulled a handful of illustration styles, narrowing down to two different styles that fit within the MindTales brand. Through modifying, additional illustrating, scaling, and coloring, I put together mockups of the on-boarding screen to get in front of the client early for feedback.
Reviewing illustration iterations with MindTales key stakeholder, we focused on the ones that created more of an emotional reaction, while at the same time, clearly articulating what the main benefit was. (Ex: Top far left was for the benefit of talking to a therapist, middle far left for tracking your progress, and bottom, second in from the right, for a library of exercises to do on your own.
Wireframes
Now that I had sketches and illustration iterations in place, I jumped into creating digital wireframes for those focused screens. I had to remind myself that I didn’t need to create every single chatbot screen in wireframe format, but to save those for high-fidelity screens.
Above wireframes, show three On-boarding Screen iterations.
Prototyping
With the designs, framework, and key featured screens decided on, it was time to combine them all into one cohesive prototype. I used Figma both to create hi-fidelity screens, from the on-boarding screens through to the user-setup/chatbot screens, and to build a fully functioning prototype.
Understand MindTales Benefits & Features
MindTales focuses and offers three key features: Users will be able to connect with a therapist through chat, phone, and video; to choose from a curated library of exercises that have been recommended based on their needs; and last but not least, will be able to track their progress over weeks, months, etc., see exercises they’ve completed and conversations they’ve had with therapists.
The on-boarding screens were designed with user control and freedom in mind. Allowing the user to go back and forth between the three feature benefits screen at their own pace, while simultaneously providing them clear visibility as to which screen their own through a carousel feature.
Talk with a Chatbot about Your Current Feelings
Answer a series of questions around how you’re feeling, through a live chatbot, for MindTales to provide you with the best recommendations to get you on a better path.
Across all screens, I wanted to keep the aesthetic focused on the brand through color perception, as well as keeping them minimal to not distract from the main content. I added a pagination progress bar, as well as back arrow button, to each chatbot screen to provide visibility of system status, as well as user control. There is the question as to whether or not these two features are technically possible in a chatbot code.
Encourage Immediate Help
If someone is experiencing thoughts of suicide and communicating that to MindTales, you will be encouraged and recommended to contact local support for immediate assistance.
If someone were to select “yes” that they intend to act on thoughts of suicide, they would immediately get a modal pop up, providing high accountability. Encouraging that person to contact local support rather than move forward in MindTales, where the user has to book a time with a therapist.
Insight
While working on this emergency contact screen, a couple of questions came up:
Is red the right color choice for the call to action button? Green is often used for initiating an out-going call.
I researched how the color red is perceived across different cultures. Similar to western culture, the color red triggers caution and evokes feelings of danger in middle eastern culture. This encouraged my decision to move forward with making the call to action button red, while providing clear text as to what clicking it will do.
2. How do we factor in cultural perceptions of mental health and wellness? If the stakeholder of MindTales plans to offer this app as a global mobile mental health and wellness app, then these questions have to be factored in and addressed accordingly.
I added a location permission modal pop up early into launching the app. By allowing MindTales to access your location, the “contact help” button on the emergency user-setup screen will be able to contact the appropriate support based on your location (Ex. if your location shows you are in the US, it would call the National Suicide Prevention Hotline upon click, vs if your location shows you’re in the Middle East, it will contact a local therapist).
The Conclusion
The initial goal for this project was to Improve MindTale’s early designs to make the product more engaging and approachable to users.
I was able to re-design the on-boarding and user-setup/chatbot screens and present the results of those screens to the CEO of MindTales. She was pleased with the results and the thoughtful approach that was taken when it came to the users needs. For this particular project, I learned the importance of researching and designing for multiple cultures. Those things need to be factored in while designing. Especially with such a serious topic as mental health.
There is so much potential with MindTales and the service they are providing to global users. It’s a good reminder that people around the world deal with mental health and wellness, and in some cultures, it is much less recognized. I am grateful and proud to have worked with this client on this important topic, and strongly believe there is a way to help more people be comfortable seeking out the support they need in the comfort of their home, and a smaller expense.
All information in this project has been approved by the CEO and co-founder of MindTales to be shown, and comply to NDA.