Case Study: Sanuro
A look into my design process for creating Sanuro.
Role: Product Designer
Case Study: UI/ UX Case Study
Tools: Figma, Figjam, Miro
Designing by listening to the user.
For many neurodivergent individuals, wellness can feel overwhelming—scattered resources, overly complex apps, and support that often feels impersonal. I created SANURO— a calming mental health and wellness app designed specifically with neurodivergent users in mind.
My user research revealed three core needs:
• Meaningful health tracking
• Curated content tailored to neurodivergent patterns
• A progress board to celebrate milestones
At the center is Nora, a friendly AI health assistant who guides users like a trusted best friend. For subscribers, SANURO offers additional benefits such as expert appointments, downloadable content, and deeper personalization. Free users can unlock these premium features for a limiited time by simply making progress in the app, ensuring encouragement is built into the experience. Care Guides also gain tools to share content, review patient histories, and provide more comprehensive care.
At its heart, SANURO is built on one belief: seeking help should never feel like another obstacle, it should feel safe, supportive, and uncomplicated.
User Personas
Drawing from my user research, I developed personas that helped me better understand and visualize the people Sanuro is meant to support.
User Flows
My personas and research made it clear that users want straightforward navigation and easy access to essential features. I used these insights as the starting point for building Sanuro’s core user flows.
-
User Story: As a newly diagnosed neurodivergent, I want to log and track my mood, so that I have a better understanding of myself.
Reasoning behind the flows: After logging in to the app, I wanted to give the user different ways to log their health data. I knew that I wanted to give them an option to log their data from the home screen, but also allowing them the same approach through the Check-In page.
-
User Story: As a mindful adult, I want to be able to schedule and chat with a health expert, so that I can ask questions and gain insight about my health without feeling judged.
Reasoning behind the flows: Since this is a subscription feature, I wanted to separate the flow from the home page, so I want to concentrate it on the Expert page and Calendar Dashboard.
-
User Story: As a curious neurodivergent user, I want to access health content so that I can learn how to take better care of myself.
Reasoning behind the flows: I wanted to present users with a few ways to access health content- through the home page and also the media page, to allow for easy access.
Low-Fidelity
Beginning with low-fi sketches helped me experiment freely, clarify the user journey, and shape the fundamental structure of the app.
-
I started designing the essential screens for users to log their health data, focusing on the home page and the process for entering health information.
My user research and analysis of commonalities among various neurotypes indicated that the design and user interface needed to be simple and straightforward, minimizing the number of steps required. This led to the idea of using modals as the primary UI component, allowing users to enter health data and view their history easily.
Building on the design of the modal used on the ‘Check-In’ page, I decided to incorporate a drop-down menu, enabling users to select which tracker they want to use for data entry without needing to navigate back to the main ‘Check-In’ page.
-
After designing my home page and check-in modal, I began hand sketching the essential screens for the consult page and the appointment booking process. I kept my user journey maps, user flows, and sitemaps in mind throughout this process.
For the consult page, I aimed to create a layout that mirrored the home page while clearly showcasing the medical expert's profile photo and essential information.
On the appointment booking screen, I wanted to streamline the process for users by ensuring they wouldn't have to re-enter information already associated with their accounts (such as name, age, birth date, neurotype, etc.). Instead, I decided to have them fill out only the most important details: Expert Availability, Reason for the Appointment, and Communication Style.
-
While I was sketching the desktop version of the AI filter on the 'Learn' screen, I was inspired to apply similar sizing and elements to the mobile version.
My goal for the AI filter was to ensure that users can interact with it just like any other filter, while also accommodating their need to search for content in case a filter does not include the option they are looking for.
Mid-Fidelity
At this stage, I stepped back from my low-fidelity wireframes and focused on resizing my initial elements according to a mobile column grid with 12 columns.
Additionally, I worked on establishing a visual hierarchy by incorporating more white space, which helped make each wireframe less visually overwhelming.
High-Fidelity
As I transitioned into high-fidelity design, my focus shifted toward refining Sanuro’s core user journeys while bringing the brand’s visual identity to life. With the color palette, design language, and component library established, I began shaping the final screens for three essential flows.
-
I transformed my earlier wireframes into clean, simplified screens that reflect SANURO’s calm visual tone.
The goal was to guide users through tracking their well-being and reviewing AI-supported summaries without cognitive overload—clear layouts, thoughtful spacing, and an approachable visual hierarchy were key.
-
I recognized during this flow where my mid-fidelity user flow strayed from Sanuro’s principle of minimizing unnecessary navigation.
To realign with that intent, I redesigned the flow using the existing UI modal component. This allowed the experience to stay lightweight, focused, and consistent across the product.
For the consult page, I aimed to create a layout that mirrored the home page while clearly showcasing the medical expert's profile photo and essential information.
On the appointment booking screen, I wanted to streamline the process for users by ensuring they wouldn't have to re-enter information already associated with their accounts (such as name, age, birth date, neurotype, etc.). Instead, I decided to have them fill out only the most important details: Expert Availability, Reason for the Appointment, and Communication Style.
-
I created high-fidelity wireframes for the media page and integrated the AI-filter feature. During this phase, I renamed the page from ‘Learn’ to ‘Grow’—I felt this name was more in line with the overall brand story and tone of voice.
Usability Testing
The goal of this usability study was to assess how easily users could learn and navigate the prototype. By watching them interact with the app’s key features, I gained insight into their behaviors, expectations, and the areas where the design could be strengthened.
-
Main Objective: Assess navigation efficiency across the main features (logging health data, booking an appointment, and content filtering).
Logging Health Data: Evaluate how easily participants can locate the health logging feature.
Booking an Appointment: Measure how intuitive the scheduling flow is by using modals.
AI Content Filter: Identify any confusion in differentiating between general content filter vs AI-filtered content.
-
Depending on the participants’ location, the study will be conducted either in-person at the participant’s place of residence or remotely for participants located outside the Los Angeles area.
This approach aligns with SANURO’s goal of being supportive for a diverse range of neurodivergent experiences.
-
After completing the usability testing sessions, I carefully compiled my notes and analyzed the recordings, and created a Usability Test Affinity Map. This allowed me to group similar responses and issues people faced while interacting with the prototype, leading to the development of a Rainbow Spreadsheet that outlined the challenges experienced by my participants.
Through this process, I identified five key issues that I needed to address.
-
Issue 1: A majority of participants could not locate the AI content filter.
Severity Level: High
Issue 2: 4 out of 5 participants navigated to homepage to locate 'Expert Recommendations.'
Severity Level: Medium
Issue 3: Several participants tapped on ‘Little Wins’ to access the health tracking feature.
Severity Level: Medium
Issue 4: 3 out of 5 participants tapped on 'My Flow' when locating and scheduling an appointment.
Severity Level: Medium
Issue 5: 3 out of 5 participants stated the text colors in the bottom menu were hard to read.
Severity Level: Low
-
Issue 1: Could not locate the AI content filter.
Suggested Change: Reformat 'Grow' page, so AI filter is included at the top of the page.
Hypothesis: Users will find the 'Care Support' recommendations easier because of similar UI components used through out the design.
Issue 2: Navigated to homepage to locate 'Expert Recommendations.'
Suggested Change: Add ‘Expert Recommendation' section to the Homepage below the ‘For You’ section and in ‘My Flow.’
Hypothesis: Users will navigate to their home screen to find content specifically meant for them.
Issue 3: Tapped on ‘Little Wins’ to access the health tracking feature.
Suggested Change: Adjust the title and description of ‘Little Wins’, and also adjust the position of the progress dashboard on the homepage.
Hypothesis: Users will locate the health tracking feature faster and with fewer incorrect taps when it is repositioned and retitled from ‘Little Wins’ to ‘Milestones.'
Issue 4: Tapped on 'My Flow' when locating and scheduling an appointment.
Suggested Change: Enhance the calendar dashboard to direct users to the Expert tab or allow them to re-book with past medical experts.
Hypothesis: Users will schedule and rebook appointments more efficiently when a calendar dashboard lets them see upcoming sessions, review past care talks, and access care recommendations in one place.
Issue 5: Text colors in the bottom menu were hard to read.
Suggested Change: Update the bottom menu icons and text, so selected icons change to black instead of different colors.
Hypothesis: Users will navigate more efficiently when the bottom menu uses high-contrast black icons/text compared to low-contrast or stylistic treatments.
While making refinements to the prototype, I formed a clearer understanding of what users truly needed: consistency, emotional safety, and clear pathways. The design system is where those learnings come together. It transforms scattered insights into a cohesive visual and behavioral framework—ensuring SANURO remains intuitive and supportive as it grows.
Design System
UI Components
Pattern Library
Images + Voice
Thank you for viewing!
-
Over time, my design has grown a lot through continuous feedback and hands-on testing. Early on, my low- to mid-fidelity prototypes for SANURO introduced a few nonstandard UI elements that, while interesting, distracted from the calming environment I wanted to create and risked adding cognitive overload. After receiving feedback from my tutor and mentor, I refined the visual language and shifted toward more familiar UI patterns in my high-fidelity designs so the experience felt more intuitive and soothing.
User testing also played a big role. Watching people actually move through the flows helped me identify where navigation felt confusing or where extra steps created friction. This led me to streamline interactions, add supporting flows, and make key accessibility improvements. With the round of peer feedback, I was able to strengthen the design and experience.
Overall, the prototyping and testing process taught me how valuable it is to stay open to feedback and let the product evolve. Each iteration made SANURO more usable, functional, and aligned with its purpose
-
There are several key areas I'd like to improve in the current prototype. First, I want to strengthen the onboarding experience by guiding new users through the core features right after they sign up. These walkthroughs will also be accessible in the account profile section, allowing users to revisit them at any time.
Additionally, I plan to build out the Milestones feature, connecting it directly to the user's account profile. The overall goal of this page is to provide a clear view of their achievements, progress, and account status (whether they're on the freemium plan or have a subscription).
I'm hopeful these improvements will reinforce the supportive and engaging experience of SANURO.