Personalized Care
Re-Designed and Re-Energized
Sofia Health
Desktop and Mobile Device Redesign
Let’s Learn About Sofia Health:
Sofia Health is a digital platform connecting consumers with alternative and holistic specialists to address their specific health concerns and, assist with appointments.
Duration: 3 Week Sprint in May - June 2021
Team: Melvin Oliver, Patricia Papadopoulos and Belinda Miller
My Roles: Wire Frames, Moodboards, High Fidelity Prototyping, Style Guide
Tools: Figma, Miro, Trello, Pen and Paper
First Things First!
Let’s see what the problem is
Original Homepage
Original Provider Search Page
Original Product Search Page
Original Footer
We had our first contact with the founder of Sofia Health, Riley Reese to see what her concerns were regarding the website. Riley wanted to enhance the desktop website. She’s been so focused on the practitioner side of the website and signing them up. Now it was time to focus on the patient side. Riley was up for a total site redesign. She wasn’t a fan of the logo, the colors that were used on the logo (she hated the purple!)
Research:
We began by sending out a survey to Sofia Health’s ambassador’s and General Assembly students. The survey was focused on the current user experience and design aspects of the website.
Synthesis:
The next step was to analyze the data gathered from the research made through both surveys.
Our key takeaways:
Users find the navigation too confusing.
On their day to day it is hard for users to book appointments.
9 out of 10 users said they would find a quiz helpful.
6 out of 10 users said they would like to have their files centralized.
Prioritizing The Scope Of Work!
Must Haves:
Attractive, Engaging, & Cohesive theme site-wide
Updated Header and Footer
Sensible Navigation
Updated Login Screen
Should Haves:
Patient Health Quiz
Enhanced booking and messaging capabilities
Streamline landing page
Multiple paths to arrive to desired page
Could Haves:
Formal Intake Form for Patients
Centralized patient document storage
Sophisticated Payment options
Additional practitioner areas & networks
Wont Haves:
Keep the website the same
A cap on pet-related services
Limited product selection (scalability!)
An approach that is not diverse and inclusive
Wireframes:
Home Page Redesign Wireframe and final Prototype
Booking Page Redesign Wireframe and final Prototype
Message Page Redesign Wireframe and final Prototype
Wireframe Usability Testing
Round One
Six users were tested
We used a script to complete certain tasks and performed the testing over Zoom and in person.
• Find a product • Find a practitioner • Log In • Conduct a search
What Worked:
The new Homepage is “welcoming; the bigger main image draws your eye.”
“It’s easy to find what you need on the pages.”
What Didn’t:
“Why are there two search bars on the Homepage?”
Message button on the Appointment Booking page gets lost.
Message page: “It would be nice to have a time and date stamp.”
Now that we have the wireframes completed, it was time to start on the moodboard. Sofia Health needed a new look and feel!
The colors were now complementary and not as bold as before, the photography all had the same feel. We made the fonts easier to read making this 508 compliant.
Now that we had all of this established, it was time to start creating the prototype, after conducting two rounds of usability testing we had the Final Prototype.
Mobile Prototype
Next Steps
Create an “intake form” section.
Create “learn more” page(s).
Build out the calendar to allow multiple bookings.