![Recording 2023-06-01 at 12.30.19.gif](https://static.wixstatic.com/media/12ca23_1ecc7cc2b6234678a27aba2455053173~mv2.gif)
UpMind
Mobile app and responsive website for a platform, that offers mental health aid for people who can't afford treatment.
Where
San Diego, CA
Role
UX Designer
What
Responsive website, mobile app
Category
Health and wellness
Why
Portfolio project
When
08/22 - 09/22
Overview
Conceptual case study of a project where I designed a platform for a charity organization that includes a mobile app and responsive website.
UpMind is a non-profit organization that offers a solution by partnering with volunteer professionals who can provide mental health aid for free.
What is the problem?
Problem Statement
People who have mental health issues don’t have enough opportunities to receive immediate aid without spending money. It is much harder to improve the quality of life and live a better life without solving mental health issues.
Project Goals
-
Create a convenient and easy way to get mental help online
-
Design a simple app that combines only necessary functions to make mental health aid more accessible
-
Differentiate from competitors by providing better experience and build a platform with recognizable branding
-
Develop a website that helps to increase mobile app downloads via attractive educational features.
Research Summary
I created empathy maps to understand the users I’m designing for and their needs and conducted interviews to discover user’s pain points. A primary user group identified through research was adults who don’t have additional resources to pay for mental health aid and keep ignoring issues.This user group confirmed initial assumptions about UpMind’s target users, but research also revealed that there are more user problems other than lack of simple way to get mental health aid, but also lack of information. That’s why in desktop version we added additional informational resources.
Empathy Map
The empathy mapping process allowed me to gain a deep understanding of the needs, behaviors, and motivations of potential users of the platform, which informed my design decisions throughout the project. By creating an empathy map, I was able to identify users' pain points, goals, and emotions related to the charitable cause and the platform's features, which helped me design a user interface and user experience that aligned with their needs and goals. Overall, the empathy mapping process helped ensure that the platform I designed met the needs of its users and helped the charity organization achieve its goals.
![Group 44 (2).png](https://static.wixstatic.com/media/12ca23_6a694823c5914fb6a2e7ff3935d9d840~mv2.png/v1/fill/w_928,h_552,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Group%2044%20(2).png)
User Persona
![user persona UpMind](https://static.wixstatic.com/media/12ca23_f134aac79fb2453fac68410804181cd0~mv2.png/v1/fill/w_1012,h_542,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/user%20persona%20UpMind.png)
Through conducting extensive user research and analyzing the empathy map, a detailed persona was crafted. With Maddie's needs and goals at the forefront of the design process, a solution was created to effectively address her unique pain points and help her achieve her financial objectives.
Pain Points
To enhance the user experience and meet their requirements, I recognized the areas of struggle by identifying pain points and devised solutions that can effectively address their concerns, ultimately leading to a more pleasurable and satisfying experience.
All-in-one platform
People who want to get mental health aid looking for all-in-one solution with different types of help.
Mental health information
People want to have a trustworthy platform where they can find reliable information about mental health.
Responsive design
UpMind should be available to everyone, so people want to have a dedicated app, and responsive website for different screen sizes.
Ideation
During the Ideation stage, I was using a Crazy Eights technique to generate multiple ideas for the home screen. I’ve selected wireframe #3 and used it in my design.
![Group 31.png](https://static.wixstatic.com/media/12ca23_a78005ee8ed34cf5b31069501dd2303f~mv2.png/v1/fill/w_932,h_584,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Group%2031.png)
Low-fidelity Wireframes
![Group 34 (1).png](https://static.wixstatic.com/media/12ca23_5c43f4a3657f4d089adb3b88c8660a3b~mv2.png/v1/fill/w_954,h_716,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Group%2034%20(1).png)
Style Guides
To ensure design consistency across multiple platforms, including the website and mobile application, I developed a compact design system. This allowed me to maintain a cohesive visual style for the product, regardless of the platform it was being accessed on.
![Slide 4_3 - 3 (4).png](https://static.wixstatic.com/media/12ca23_a922b59d6e9440e79d1795db0d43bc9c~mv2.png/v1/fill/w_446,h_594,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Slide%204_3%20-%203%20(4).png)
![Style guide](https://static.wixstatic.com/media/12ca23_d3fb54aa31d34154b730ae05e0e168a3~mv2.png/v1/fill/w_446,h_594,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Slide%204_3%20-%204%20(5).png)
High-fidelity Prototypes
With the wireframes as my foundation, I developed a polished and refined version of the UpMind app through a high-fidelity prototype. As part of this process, I constructed a functional user interface that facilitated the user flow.
![Screenshot 2023-04-28 151605.png](https://static.wixstatic.com/media/12ca23_01af99b525d84e2cbc4cdbf159ec24cf~mv2.png/v1/fill/w_988,h_694,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202023-04-28%20151605.png)
Mobile App
![Recording 2023-04-28 at 15.27.01.gif](https://static.wixstatic.com/media/12ca23_001b4b02c740494a9b6f5e36ca8c2697~mv2.gif/v1/fill/w_217,h_401,al_c,usm_0.66_1.00_0.01,pstr/Recording%202023-04-28%20at%2015_27_01_gif.gif)
Website
![Recording 2023-04-28 at 15.30.42 (1).gif](https://static.wixstatic.com/media/12ca23_fbc5b1fcc4f741409814d09ff21f16cd~mv2.gif/v1/fill/w_600,h_393,al_c,usm_0.66_1.00_0.01,pstr/Recording%202023-04-28%20at%2015_30_42%20(1)_gif.gif)
Usability Testing
​I have completed two rounds of usability studies. What I found from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and helped to discover what aspects of the mockups needed refining.
Date and time selection
![Book a visit.png](https://static.wixstatic.com/media/12ca23_a4778cc0fb314fae9fe308473c88f249~mv2.png/v1/fill/w_150,h_325,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Book%20a%20visit.png)
![booking wireframe (2).png](https://static.wixstatic.com/media/12ca23_f6d237791a734ced91400bf9bea0dc3e~mv2.png/v1/fill/w_164,h_338,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/booking%20wireframe%20(2).png)
It is easier to select a date via calendar view and also see available time slots for a visit.
Appointment history
![My appointments.png](https://static.wixstatic.com/media/12ca23_328a65216e3c498898f9c41a3d195a84~mv2.png/v1/fill/w_150,h_325,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/My%20appointments.png)
![my appointments low-fi (1).png](https://static.wixstatic.com/media/12ca23_01f34ba5514e4998a30db0b88b0cfcf4~mv2.png/v1/fill/w_182,h_359,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/my%20appointments%20low-fi%20(1).png)
People want to keep their appointment details saved in the app without creating accounts.
Project summary
In designing a mobile app and responsive web design for a charity organization that provides mental health resources for free, I gained valuable skills and insights.
One important lesson from this project was the significance of creating a style guide to maintain consistency across different products. By establishing design guidelines and standards, we ensured that the overall user experience was cohesive and user-friendly.
Moreover, I had the opportunity to practice usability testing and learned how to incorporate user feedback into the product features. This helped us to identify potential issues or challenges that users might face, and make necessary changes to enhance the user experience.
Looking forward, I believe that research plays a critical role in understanding the needs and challenges of our target users. By gaining an in-depth understanding of their problems, we can create solutions that effectively address their needs and improve their quality of life.