top of page


Designed for local communities.

The Proposal.

The Context

The Challenge

According to the white paper of NYC, mental illness exacts a devastating social and economic cost on New Yorkers and the communities. More than 1 million New Yorkers remained uninsured and New York ranks seventh among states on coverage.

People are not connected to the right care when they need it and much of the care is not delivered properly. 
Moreover, people are not familiar with where and how they can find available services with affordable costs.


UX Researcher, UX Designer


UX Design
Information architecture
Design for social good


01/2023, 12-week duration
  • To find a solution for local citizens in NYC to discover proper mental health resources.

  • ​To make the process of searching intuitive and easy-to-use.

  • The Net Promoter Score (NPS) for MindKit stands at 50, as reported by potential users who participated in our survey.

  • The feedback received from potential users overwhelmingly reflects a strong positive sentiment towards MindKit.

Research - what are the challenges?

Secondary research.

I conducted secondary research into the challenges faced by residents of NYC in finding and accessing mental health services. The secondary research provides me with a broad overview of the context and challenges.


  • Mental health varies across the city: providers are unevenly distributed across the city’s communities and vary significantly by borough (McKinsey & Company Report).
  • Lack of diversity in provider population: 84.2% of psychologists identify as White, in a city with a population that is 32% White, 29% Latinx, 22% Black, and 14% Asian.
  • Self-identified needs: The majority of individuals recognizing their needs do so independently or with support from family and friends.
  • Difficulties with finding services: Individuals expressed challenges in locating guidance on service-seeking, navigating service access processes, and connecting with understanding providers. (Rand Health Q. 2022).
  • Difficulties with identifying providers: Considerations of cost, quality of service and staff, communication, and integration of systems prevent people from accessing resources.

Research - What tools are used?

Offline Survey. 

I then conducted an offline street survey to explore individuals' approaches to accessing mental health services.
To accommodate the survey's street distribution, I employed a succinct questionnaire, focusing solely on essential inquiries pertaining to their use of tools and methods, devices preferred, and feedback with the process.
I only recorded answers from people who had looked for mental health help, and 16 responses were collected.


  • Google and Bing emerged as the predominant tools for seeking mental health resources. Users commonly enter their specific requirements in the search bar, assess various results, and explore potential links for further information.
  • For people who have health insurance plans offered by employers, they also have the option to search with in-network provider directories.
  • The government-provided mental health locator isn't the primary choice for all participants.
  • 15/16 participants used mobiles to look for help.
  • Among 13 participants seeking online assistance, 7 noted excessive sponsored content and unprofessional-looking services, causing difficulty in selection. Additionally, 3 participants disregarded service distinctions, opting based on intuition.
Screen Shot 2023-03-31 at 8.47.04 PM.png
Bing_logo_(2016) 1.png

Research - Users.

Who are the users?

5 Interviews were conducted with local citizens on their experiences seeking support. I made a user quadrant to categorize users with similar backgrounds. Based on the quadrant, I can define the general profiles of potential users and pave the way for developing personas.
User Quadrant.png

What did they say?

Following the user quadrant, I organized research findings into an empathy map. This helps me figure out general pain points for further design.
Empathy Map.png

What are the Pain points found?

Unfamiliar with available wellness resources
Do not know which resource works better for their situations
Concerns about whether  the insurance plan will cover the resource he/she is looking for

"Where to FIND"

"What I NEED"

"How to ACCESS"


Empathize - Personas.

To further clarify the needs and goals, I created 3 personas to represent typical user groups and developed their user stories and user journeys based on the user quadrant in the primary research.

Empathize - User Journey Map.

After careful consideration, I chose to focus on Lily's case to further develop the project, as Lily's case represents the basic and typical needs of users seeking mental health support, making her an ideal candidate for designing the core support.

The following map describes Lily's user journey with the current solution:
the Google search engine. After creating a user journey map for Lily's case, I identified potential opportunities and insights that could be explored further. 


"How might we design a solution to help local citizens effectively find, evaluate, and access mental health resources?" 

Define - Problem Statement.

Busy professionals like Lily need timely mental health support to maintain a healthy work-life balance. However, finding suitable services and scheduling appointments can be time-consuming and require offline activities.

Improving access to mental health support can provide timely assistance and save individuals the time and effort required to search for suitable resources. 

Define - Hypothesis.

At the heart of MindKit's design philosophy should be a mobile-first approach, recognizing that users are more likely to access mental health services on their phones. In emergency situations, mobile devices are often the quickest and most convenient means of seeking help. Moreover, a responsive website should work as an alternative for users who do not have access or are not willing to download the app. 

Lily needs an app with a comprehensive collection of mental health resources and filter features that enable her to quickly find suitable services based on her specific needs and receive prompt assistance.

Define - Feature Prioritization.

Based on the primary research findings and hypothesis, I brainstormed possible features and did affinity mapping to help me organize and categorize related features.
AffinityMapping_How to find, evaluate, and access.jpg
AffinityMapping_account, accessibility, and others.jpg

Prioritize features.

Keeping the defined persona in focus, I employed the MoSCoW model to prioritize features. This approach helped eliminate unnecessary components, effectively addressing the current issues at hand.
Features Prioritization.png
Fnal Design

The Solution.


Landing & Log in
  • Emergency notice can be accessed without log in to account, saving time for users in crisis.
  • 2 Ways to log in: either via one time password or username.
Landing page - Log in
  •  Users are able to sign up by providing their phone numbers and get a one-time password.
  •  After verifying the phone number, they can set up accounts with full name and passwords.
  •  Additional information such as insurance plan and personal information can be added later in "My Profile".
Sign Up with OTP
Sign up - set account
  •  Introduce users to the basic features when they first land on homepage.
  •  Users are free to skip the instruction at any step.
Onboarding instruction
Homepage & General search
  • A warm greeting message to welcome users.
  • Simple and clear titles to help users navigate through useful sections.
  • When users click on the search bar, they will be moved to the search page. If they have no idea about what keywords they are looking for, they can follow the guided search.
Homepage - general search with keywords
  • Guided search includes 4 questions that lead users go through a basic search process.
  • After going through the 4 steps, service types, problems, location, and visit time have been set automatically.
Search with sequential questions.

Search with sequential questions
Results Page & Filters
  • Users are able to see the locations of services with the map.
  • On the result page, users can use advanced filters to specify requirements based on personal needs.
List of results and filters
Service Overview
  • Service overview includes rating, location and distance, service provider, accepted insurances, services provided, populations, contact information, open hours, and reviews.
  • Users can also download a pdf overview of the service by clicking on "download".
Service overview and service details
  •  An appointment notification will appear on the top of home page if users have visits today.
  • The color of today's visit is darker than future visits, better notifying users of the appointments.
  • By clicking on "Upcoming" or "View All", users can see the calendar and all upcoming visits.
  • By clicking on each visit, users can see more details about the visit or edit their visits on the service website.
Upcoming Visits
Notifications of upcoming visits and visit details.

Prototype - High Fidelity Prototypes.

  • Log in / Sign up process
  • Search with keywords
  • Search with guided search
  • Service Overview
From Log in to Search
  • Sort by
  • Distance
  • Time
  • Cost
  • All filters
Filters on Result page
  • Search All services
  • Look for help from saved services
  • Emergency information and contacts
  • Upcoming visits
Search by categories, saved, and emergency

Design - Colors and Fonts.

After exploring several different colors, I finally decided to use the dark blue and bright orange as the secondary and accent colors for Mindkit, providing both a cozy but professional vibe. The design of all cards and buttons were checked to meet WCAG 2.0 Level AA conformance.

The fonts I chose were Lato and Mulish families, which are all sans serif fonts that can be clearly identified on mobile devices.
Color Palette.png
Type System.png



Ideate - Search Feature.

How to make the search process effective, intuitive, and accurate for local citizens? 


Search by

When users search by categories, they only need a general direction for what they are looking for.
SEARCH CATEGORIES for browsing potential resources
Rectangle 39.png


Guided sequential

With sequential search, users will go through a step-by-step search process with questions asking users to think about.
GUIDED SEARCH for users unfamiliar with mental health services
Rectangle 39.png


Search with

With keywords in mind, users can quickly find top matched resources.
KEYWORDS SEARCH for users with clear goals
Rectangle 39.png

Ideate - User Flow.

After figuring out the search methods that will be provided to users, I made a user flow to clarify how users will do the search and user flows for other features. The search flow presented below can be divided into "Search" and "Decision" phase, which they will be using search functions and making decisions with repeated adjustments and browsing separately.
User flow - search

Prototype - Sitemap.


Ideate - On Paper.

With the 3 different approaches to the search process in mind, I start to ideate with Crazy Eights, generating multiple quick ideas for the home page.

From there, I selected the most promising elements from the eight concepts and integrated them into a cohesive design. With a solid foundation in place, I began creating paper wireframes to further refine the user experience and prepare for testing.
Group 168 (1).png

Prototype - Digital Wireframes.

Version 1 - Wireflow.

Using the sitemap as a guide, I developed v.1 digital wireframe flow that streamlines the search process for users like Lily. Given her primary goal of quickly finding the best mental health resources to fit her needs, the flow includes the general search method and the guided search process.
Version1. wireflow

Version 2 - Wireflow.

After testing the version 1 prototype with 3 potential users in one-on-one interviews, I revised the wireframes to make the flow more natural and easy to use.
Version 2.wireflow

What have been changed?

Changes_landing page
Changes_sequential search
Changes_service overview


How do users think about it?

Test - Usability testing.

The prototypes were tested with the 3 potential users who have participated in testing before. Tasks were assigned to them and I collected their behaviors, questions, and interactions during the testing.


  • All participants were able to complete all assigned tasks with little friction.
  • Participants expected to view the large map and nearby services.
  • Participants expected to be able to slide the horizontal filter bar to set more filters.


  • While sliding down the map section, users can now view the expanded map and interact with it. Sliding the screen up will return users to the default results page, which displays a split screen with half map and half results.
  • The horizontal filter bar is designed to display only the most frequently used filters. Further research is required to determine which filters could be added here.


50 NPS Score, 7/12 Promoters who are willing to recommend!

After the changes were made, I posted the link to the finalized prototypes on Reddit in online communities to collect feedback. Out of the 12 participants, 11 were interested in the proposal, and 7 of them indicated that they would recommend the product if it were to be released.
资源 1_3x-8.png

Looking Forward.

1. More User Testing

More tests should be done to evaluate the project. 

2. Accessibility options

For accessibility considerations, this project should explore on dark mode and responsive website design for users who do not have access to mobiles.

3. Research on editing personal medical care profile

As a mental health services assistive app, MindKit must allow users to create their own medical
care profile, uploading insurance information, and medical history. It is essential to research more
on the protection of data and privacy.



Mobile-first Philosophy

MindKit was developed with a mobile-first philosophy at the forefront, which allowed me to leverage the unique capabilities of mobile devices to optimize functionality and user experience. Through this process, I gained a deeper understanding of how to design with the user in mind and identify features that can have a greater impact on mobile devices, such as emergency contacts.

Moving forward, I will continue to explore the potential of targeted devices and prioritize user scenarios and needs to deliver more impactful and effective designs. By staying focused on the user and utilizing the latest design techniques and technologies, I am confident in my ability to create products that truly enhance people's lives.
bottom of page