Case Study: MedX
At RED Academy, we not only learn the technical skills we need as UX designers, but we are also taught the value of soft skills, particularly teamwork for our first group project. We were assigned teams that we’ll work with to complete a specific project within a two-week timeframe.
The Opportunity
Vancouver’s walk-in clinics and medical services centres are often burdened with long wait lines and the process of booking an appointment can be difficult for people to go through, especially those with busy lives.
There is an opportunity to make health services and access to them easier, and a more pleasant experience for residents of the Greater Vancouver Area.
There are multiple issues with the way the system is currently structured:
- how people go about booking an appointment at a clinic
- discover information about available services
- go through their appointment and access their medical information, such as test results and their medical profile
Our goals for this project were to:
- enable users to discover the closest and best clinics
- educate users on medical centres, walk-in clinics and their respective services
- enable users to register for an appointment for a medical service
- enable users to access their medical data
- create a stress-free and clean mobile experience
Team Strategy
As a team, we applied a Scrum framework to manage this project. During sprint planning, we prioritized all our deliverables, and decided how we were to implement each of them in a certain amount of time.
We focused on one or two goals a day, worked on our individual tasks, and meet each day to assess our progress.
At the end of the sprint, the work should be potentially shippable: ready to hand to a client, or show to a stakeholder.
Research (user + domain)
On the first day working on this project, we brainstormed survey questions for Vancouver’s local residents, and posted them on Facebook.
Our key findings following:
- walk-in clinics and family doctors were the most used medical services
- proximity, reviews/ratings and convenience are the most important factors when choosing a medical service
- medical services were found through Google and word of mouth
- mobile phone usage is at its all-time highest rates so access to information has to be accessible on the go via mobile platforms
- there is no platform that covers all of our users needs when it comes to accessing medical services and information
Users’ major pain points were:
- long wait times at clinics
- difficulty of finding a credible, quality family doctor
- not having access to their medical history
Personas
After having gathered valuable insights from our research, we now know who the users are: our primary persona being Amy Santiago, and our secondary persona, Adam DeVine.
Planning
Moving forward, we created user flows based on our users’ major pain points and goals to streamline the process of accessing medical services and information online.
Keeping in mind what we’ve gathered from our domain research, we prioritized the features and information provided by clinics and medical services centres. This way, we can incorporate the information already available, then supplement additional information needed by our users based on research.
To further solidify the framework of our app, we created a site map to visualize our information architecture.
Design Studio
We started sketching our wireframes on a whiteboard to collaborate our ideas efficiently.
Then, we sketched them out on paper for rapid prototyping to test the functionality of our design.
Usability Testing
After testing our paper prototypes with a few users, we found that we needed to make some changes in our design:
- the sorting field was confusing to the user, so we made use of iconography to indicate its use and purpose
- the word proximity is rarely used by the majority, so we changed it to the word distance to cater to all our users
- some users find it redundant to have the search by location and clinic results page in two separate screens, so we merged them into one
- for the walk-in flow, we missed the step of providing navigation to the user, so we added it to the clinic information page to round up the flow
- also, for the walk-in flow, it was unnecessary for an expanded view on the results page, so we skipped that, and now will take you straight to the clinic page once you click on an item from the search results
- call-to-action fields weren’t visualized as a button, so the user is unsure if they were meant to be clicked to move forward in the flow
Design
Based on research, the majority of responses are iPhone users, so we decided to create a mobile application on this platform.
Teal symbolizes credibility and reliability, so we thought it would be a good fit for a medical services app.
In consideration to our users’ emotional state, we went for a minimalistic, monochromatic theme to create a stress-free and clean mobile experience.
To keep our app professional, we made use of a sans-serif typeface made by Apple and simple iconography.
Iterations
Incorporating the information we’ve gathered from our usability testing and our design strategy, we made iterations coming from our mid-fidelity to our high fidelity wireframes.
Blue is the colour of trust and responsibility.
We changed our colour scheme from monochrome to analogous, as well as used varying font weights to:
- highlight our call-to-action buttons
- show hierarchy of our information architecture
- add some contrast
We changed the way the app asks the question, “How can we help you?” to
What medical service can we help you find?
The previous line of questioning seems vague and aimless. With this change, they know exactly what the app can help them with.
Prototype
Requirement: High fidelity | Tools: Sketch, Invision
Keep these scenarios in mind for a smooth experience:
Primary Scenario — Family Doctor Flow
Amy Santiago found out that her family doctor, who served her family within two generations, recently retired. Now, she needs to find a new family doctor through Google searches or word of mouth, and go through a trial-and-error process, only to find this whole experience frustrating.
Help Amy find her new family doctor based on the doctor’s high ratings, and book her the earliest appointment available at Amy’s most convenient time (3PM). Create her an account, so she can access her past medical visits in the future.
Primary Persona — Medical History Flow
After creating a MedX account and entering her Medical Services Card number, Amy can now access her medical history on her phone. This way, she can refer to these information as needed, anytime, anywhere.
Find details on Amy’s most recent medical visit.
Secondary Persona — Walk-in Flow
Because of stress in school, Adam DeVine has been getting sick a lot. He decided to head to the clinic, and the commute had been quite unpleasant. Furthermore, he gets to the clinic, and had to wait over an hour in the waiting room…only to find that he had to wait even longer once he reaches the exam room to see the doctor.
Go back in time, and use the MedX app to make this a better experience for Adam. Find the closest walk-in clinic that has the least wait time, and get him navigation to plan his trip.
Click the image below to access the prototype:
Summary
As a result of our Scrum process, we’re able to create MedX, an app that provides a streamlined process of finding medical services in BC with features such as:
- a categorized home screen for quick searches
- both map & list views of search results with sorting options
- secure account management that logs you out after 5 min of inactivity
- history of medical appointments and lab results
