Care Connect began as a group project over two weeks where we worked together to develop a dedicated platform that medical professionals could use to better manage their mental health. Although it began as a 2 week design sprint I have since used the project to further my own UI skills, each iteration representing new knowledge and skills.
Link to full project briefBuilding the prototype in Figma
Maintaining the appearance of the deliverables
Sourced images and organized design files
Established comprehensive and cohesive design system
Healthcare professionals encounter significant challenges in maintaining their mental well-being, leading to negative emotions that are difficult to manage. A solution is needed to utilize community support and camaraderie to address their mental health concerns effectively and promote positive change.
We propose a confidential platform as a supportive community for healthcare professionals to address their mental health challenges. It will enable them to connect, communicate, and share resources, empowering them to take control of their well-being and lead happier lives.
50 Screener Surveys
16 User interviews
Affinity Map
1 Emergency room doctor
2 Emergency room nurses
1 Surgical technician
6 Nurses
1 Medical student
Through affinity mapping we were able to learn that while medical professionals have resources provided for them by their workplace, they seldom use them for the following reasons:
They feel impersonal in some way
Haven't felt motivated to do so
Have their own resource that they use instead
During the research phase of the project our team gathered and researched a list of related platforms to see what they were doing and what they had to offer. We also looked at community building apps to get a sense of structure and appearance. Click here if you would like to view the full report.
View full Market Research Report
During the first iteration we began with a design studio, it was suggested to us by our instructors and we were anxious to give it a try. I love sketching and drawing my thoughts with pen and ink, however, there appeared to be a barrier in the overall process, perhaps due to the virtual arrangement which stifled the creative flow. Nevertheless, myself and Ziang continued to sketch wireframes with each other to map out the basics before moving into wireframes.
Link to sketches
We collectively agreed that the final product would require both mobile and desktop versions, however due to time constraints we focused on delivering a prototype of the mobile version only.
We also realized that certain aspects of the product wouldn’t be represented by the prototype such ensuring the security and dedication of the platform.
Probably the greatest challenge we faced during the first iteration was collaborating on Figma. With the deadline steadily approaching, each member of the group wanted to be involved in the design process, chaos ensued due to everyone having varied levels of familiarity with Figma. The way we solved this was by giving ownership of the file to Ziang who would produce all the pages under my guidance. Paul would continue to research colors, fonts and source images while Hana began work on the final presentation.
We would frequently split the group in two so that we could produce all the deliverables and maximize the use of our time. Each day we would meet with the rest of the cohort for a stand up meeting to discuss our work, report blockers and share our team progress.
Aside from a user persona which was very useful in helping us make design decisions, we also created a mood board, a journey map, user flows and a MSCW chart. All of these deliverables can be found in the appendix at the end of this case study.
We collectively agreed that the final product would require both mobile and desktop versions, however due to time constraints we focused on delivering a prototype of the mobile version only.
We also realized that certain aspects of the product wouldn’t be represented by the prototype such ensuring the security and dedication of the platform.
Probably the biggest challenge we faced during the first iteration was collaborating on Figma. With the deadline steadily approaching, each member of the group wanted to be involved in the design process, chaos ensued due to varied levels of familiarity with Figma. The way we solved this was by giving ownership of the file to Ziang who would produce all the pages under my guidance. Paul would continue to research colors, fonts and source images while Hana began work on the final presentation.
You want to show others how you’re currently feeling anxious.
Show me how you would go about doing that.
2 out of 5 users failed.
Users made an average of 4 errors
2 Users who failed went to the profile page to change the status
1 User asked if there was a settings page
Simplify the status updating process to just emojis & also replaced the “how are you feeling” button with their profile avatar with an emoji attached to it.
Took away the social links to declutter & made our icons larger
Because you are feeling anxious, you want some real time advice on how to deal with this from your fellow colleagues. Show me how you would do this.
1 out of 5 users failed.
Users made no notable errors.
During this task we noticed that the users had no problems locating the Live Chat Rooms, one user became impatient with the Figma and began clicking around frantically as a way of solving the problem.
No changes based on this task
Now you want to send virtual encouragement someone’s way.
Show me how you would do that.
3 out of 5 users failed the third task:
Users made an average of 3 errors
Users got as far as locating people’s profiles but did not know where to go from there - missing the chat, gift, and more options.
Users were unsure whether they were in a group chat or a direct message.
Users were unsure if they clicked on the gift button on user profile page because it was greyed out
Added green live button on user dropdown button, changed out profile pics to depict multiple people, highlighted gift box icon when clicked on.
Aside from the various user errors that we encountered, we also received feedback on the appearance, each user remarked that the appearance was dull and gloomy, they would refer something brighter and more cheerful.
Even though the usability testing has yielded some satisfying results, we received feedback that the color scheme was gloomy and depressing and it looked as “clunky” as it felt to use.
In an effort to learn the ins and outs of Figma, I delved deep into the wealth of online resources and was immediately inspired by some YouTube channels that would compel me to create a new version of the prototype.
I started from scratch with an 8 point grid and continued to develop dynamic components. I started to experiment with brighter colors and expanded the prototype to include other areas of the app that we didn't have time for during the original sprint.
Since the first iteration of this product I have learned so much about Mobile UX, Design Systems, IOS, Agile and the target audience themselves. I have also gained several mentors in the field who have helped me and offered feedback on my projects.
For the third iteration I started by simplifying the color scheme and developing the brand to include a logo. I took a step back from creating a clickable prototypes so I could fully develop the appearance and explore other user flows. I chose to develop the sign up flow to empathize the welcoming appearance and language.
I have also developed a flow for when a user might contribute a resource (in this case a podcast)
Having a background in graphic design and familiarity with brand standards definitely helped me gain a strong understanding necessary to build a successful design system. Building this project really helped me level up my knowledge and practice using what I had developed. I spent a lot of time researching design systems from other mobile apps that I really liked as well as the way they were developed, maintained and presented.
During the first iteration we selected Nunito at an early stage in the project and it has worked well so far. For further iterations I will likely switch the body copy to Open Sans to create a more sophisticated look and improve the legibility.
In the early stages of the group project the research team agreed that we would use a calming blue color to represent the brand. Through early feedback and further research I eventually worked towards a more vibrant and energetic blue to convey the emotional value of hope and optimism.
Usability testing with a new group of users from the target audience would be the next step with a product like this one. Figma has introduced some new features which I would like to explore so I could myself further developing the design system and testing the design system by reconnecting with Ziang to see if he can design from it successfully.
The original design sprint with my teammates was a fulfilling experience which helped each of us learn more about working together as a team and continuously iterating based on research, testing and feedback.
Since the first iteration of this product I have learned so much about Mobile UX, Design Systems, IOS Design systems, Agile and the target audience themselves. I have also gained several mentors in the field who have helped me and offered feedback on my projects.
Anytime I learn something new that I can apply to this project I use it as a canvas or testing ground to apply new knowledge or skills.
Figma has a great range of YouTube tutorials, I also really enjoyed using Mizko and AM Design
Interaction Design Foundation also really helped me understand more about designing for Mobile as well as the psychology of color
