Care Connect
Care Connect is a safe community platform where medical professionals can meet, find resources, support each other and better manage their mental health and the rigors of the job
1.First iteration
- Began as a bootcamp group project (2 week design sprint)
- Research phase included user interviews and market research
- Design phase included a design studio session
- Conducted 2 rounds of usability testing
2. Second iteration
- Revision based on user feedback and class critique
- Applied a better grid and design system to create cleaner UI
- Developed dynamic components with properties
- Expanded the working prototype to include more features
3. Third iteration
- Further revision of UI based on feedback from mentors
- Developed branding and refined color system
- Learned to design for IOS
- Developed screens for additional user flows
Overview
Project Brief
Many Americans suffer alone and in silence from a variety of mental health conditions that are undiagnosed, misunderstood and / or stigmatized. While for most of the population mental health awareness is becoming normalized, many of our health professionals hide their conditions due to a fear of losing the trust of their patients, colleagues and employers.
In a field where practitioners are regularly faced with life or death situations and tough conversations, mental acuity is at a premium, while mental health conditions run rampant. Doctors Under the Radar hopes to provide Doctors with a safe community platform where doctors can meet, find resources, support, create groups and events to better manage their mental health and the rigors of the job.
Design Process
User research - Market research (1 weeks)
Build prototype - Usability testing - Presentation (2 weeks)
Build high fidelity prototype based on feedback (2weeks)
Tools Used
User research - Usability Testing - User Persona - Journey Map - Figma - Photoshop - C&C Analysis - Reddit
The team
Design: James Davis, Ziang Gu
- Building the prototype in Figma
- Maintaining the appearance of the deliverables
- Sourced images and organized design files
- Established comprehensive design system
Research: Paul Shin
- Conducted user interviews, usability testing, and market analysis
- Informed design decisions and ensured final product met target audience needs
Project manager: Hannah Miller
- Oversaw daily stand-ups and tracked project deliverables
- Organized final presentation
- Critical in keeping project on track and ensuring everyone worked towards common goal
Dividing the responsibilities allowed for a more efficient and streamlined process. Each member focused on their area of expertise and contributed to the overall success of the project.
Where it began?
When we began work on this project we were really confused by the website that it was linked to. It was poorly designed, lacked architecture and didn’t appear to serve any specific purpose. The brief required that we create a community driven platform to provide medical professionals with a safe community platform where doctors can meet, find resources, support, create groups and events to better manage their mental health and the rigors of the job.
We discussed how we could learn more about how medical professionals manage their mental health and how DUTR might be able to help them do it. We started by sending out screener surveys through groups on Reddit as well as contacting anybody else we knew who worked in the medical field.
Problem
Healthcare professionals face numerous challenges in maintaining their mental well-being, often resulting in negative emotions that they struggle to manage in a healthy manner, or ignore altogether. There is a pressing need for a solution that leverages the power of community and camaraderie to provide healthcare professionals with the support they need to effectively address their mental health concerns and drive positive change.
Solution
To address the mental health challenges faced by healthcare professionals, we propose the creation of a confidential, inviting platform that serves as a supportive community for these individuals. The platform will provide healthcare professionals with the ability to connect, communicate, and exchange resources to help manage their mental well-being. With a focus on fostering a welcoming and supportive environment, this solution will empower healthcare professionals to take control of their mental health and lead happier, more fulfilling lives.
User research
50 Screener Surveys/16 User interviews
1 Emergency room doctor
2 Emergency room nurse
1 Surgical technician
6 Nurses
1 Medical student
Qualitative data findings
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
Another common thread was how important the camaraderie in the workplace was a strong motivator during difficult times
View the full Affinity Map in FigJam
User persona
The user interviews really helped us to develop a user persona to help us understand better about who we were designing for
Market research.
Market research goals
- Discover what other related platforms were doing and what they had to offer
- Look at other community building apps to get a sense of their structure and appearance
Competitors / Comparators
- NAMI & Shwartz Center: Are organizations that aim to raise mental health awareness by providing support by providing resources & educating the public
- Spring Health: A mental health platform that employers provide for their employees. They provide members to digital exercises via mobile app, tailored coaching/therapy, as well as employee assistance services when it comes to paying for these services.
- Keener: An app primarily for nurses to better manage their mental health through reflection. They also provide resources for dealing with certain mental health topics.
Next door
• Ability to send virtual gifts, integration of notifications
• Ability to quickly contribute something or organize an event
• Very clean and intuitive feed that features contributions that should appeal to the user
Meetup
• Explore section for finding meet-ups by time/proximity
• Very simple and intuitive interface between both mobile app and desktop
• Home is the user/profile rather than a feed or discover page
• Ability to create immediately
• Very Similar navigation to Next door
• Inbox/notifications are shared in the navigation
• Facebook has some great design features but we also discussed how we can avoid becoming a typical social network app
Discord
• Intuitive and useful chat features
• Very clever and secure onboarding process
• Unique conversation interface
How might we design a secure and engaging platform that prioritizes the privacy and voice of medical professionals, providing access exclusively to verified individuals, while delivering safe and accurate information to manage stress and burnout?
Creating the MVP
We committed a great deal of time and thought into delivering the minimum viable product. Based on the many features that comparators offer, 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 won't be represented by the prototype such ensuring the security and dedication of the platform.
Iteration 1: The challenges and benefits of collaboration
One of my favorite parts of this whole projects was when we began sketching out ideas and solutions. We ran a design studio exercise to ensure that we all contributed creativity and generated fresh ideas off of each other. Ziang and myself kept sketching together regularly until we were ready to move into Figma.
Problems surfaced with four people all trying to create one product but with different approaches, it felt really disorganized since we all had different skill levels. At this point it made sense for us to enforce our delegated responsibilities to avoid catastrophe. Ziang and myself had an excellent working relationship and he had learned the basics of Figma very quickly so we agreed that he would be the producer and I would drive the design decision making, Paul meanwhile branched off to research colors and fonts that could be used in the design system. Hannah began setting up participants for the usability tests as well as organizing the final presentation.
Design Goals
- Simple and straightforward architecture
- Clean and intuitive navigation
- Features should be easily to utilize
- Users to really feel like they’re part of something special and also secure
- Ability to share all types of resources - files, photos and even videos
Some of the more recent sketches
The sitemap has remained the same throughout the projects, however, based on recent feedback we will need to revisit the profile/personal section
Early sketches that Ziang and I created while conducting a design studio
Sketching to design a clean and intuitive navigation system
Iteration 2: Organizing the chaos and further exploration
Learning how to use Figma was difficult at first. Having spent most of my career using Adobe Suite I naturally approached designing as if it was a different version of Illustrator or InDesign. Obviously I was dissatisfied with the appearance of the prototype we had created. 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.
I delved into the wealth of online resources and I was immediately inspired by some YouTube channels that would compel me to create a new version of the prototype with the following
- More vibrant and cheerful color palette
- 8 point grid system and revised type sizes
- Dynamic components
*While Figma is an excellent Prototyping tool, sometimes these links do not work as planned, please contact me immediately if this link appears broken or the prototype doesn't do anything!!
Usability testing
Test plan
We gave 5 users 3 tasks
Task 1: You want to show others how you’re currently feeling anxious. Show me how you would go about doing that.
Task 2: 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.
Task 3: Now you want to send virtual encouragement someone’s way. Show me how you would do that.
First round
2 out of 5 users failed the first task: change their status
Made an average of 4 mistakes
Changes Made:
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.
3 out of 5 users failed the third task: engage with another user by sending them some encouragement via virtual gift or DM
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.
Changes Made:
Took away the social links to declutter & made our icons larger
Second round
5 out of 5 users passed all 3 tasks
3 out of 5 users were unsure which emoji stood for which emotions
2 out of 5 users were unsure whether they were in a group chat or a direct message
1 out of 5 users were unsure if they clicked on the gift button on user profile page because it was greyed out
Changes Made:
Added green live button on user dropdown button, changed out profile pics to depict multiple people, highlighted gift box icon when clicked on.
Iterations 3: Further refinement, continuous improvement
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.
As a visual designer with years of experience using design software, I was fascinated by Figma as well as the medium of mobile technology. Since then I have been focused on developing skills in these areas and have used this project to apply new skills and introduce them, each time creating further iterations that make the product more professional in appearance as well as more inviting and attractive to the user.
I continuously seek feedback from my mentors and peers as well as following helpful channels on Youtube in order to keep up with trends and updates.
Key learnings
• Usability testing. The most valuable part of this was seeing the results of the usability tests for both functionality and qualitative feedback.
• Figma Skills - Dynamic buttons - Grid Set up
• Creating a cohesive design system
• Preparing files for developer handoff
Next Steps
I continue to use this project as a canvas where I can apply many of the new UI skills I acquire. I really enjoy exploring and experimenting to see how much more I can expand the concept. A few ideas include
- Chat page
- Creating virtual gift icons
- Developing a desktop version
I also plan on collaborating further with the original team, I would like to test my design system and see if they could take the styles I created and produce something that fits with the aesthetic that I have nurtured.
Appendix
Helpers
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
tired of reading, or would you like to learn more? click
JAMES DAVIS
