WellaHealth: a UX Case Study
In one way or the other, almost most of us have discovered one or more symptoms in our body system, where by we do curious about what the symptoms are all about, the diseases that are related to them and the best drugs presciption for those diseases mostly especially by fact-finding (surfing) on internet on our mobile phones or laptops in our homes or offices before taking the steps of going to the pharmacy store.
WellaHealth is as web app(Website) that allow users (patients to be specific) to search to for drugs and nearest pharmacy stores for a quick test relating to their specified symptoms.
Statement of the problem
With my constant interacting with the website (wellahealth.com), I was able to come up with the following problems:
- Static (Non-dynamic) website.
- Limited symptoms for user to interact with, and
- A constant display of a single drug for one diseases.
The objectives of this case study
To shrewdly achieve the aim of this study, the following objectives shall be pursued:
- To validate through user testing.
- To propose solutions to users’ pain point.
- To propose design solutions for them.
Design Duration
This design took me two weeks. I spent my time iterating and tweaking the experience and interface design.
The process:
Research
A profound research helps me understand the users’ needs and how the product satisfies these needs. I started the process with understanding users’ needs via testing and ended with validation. Below are some of the considerations I made during my research process:
User Persona
My targeted audience includes workers and students. Most of the office workers and students hardly have time to search for or queue at the pharmacy store for check-up, perhaps they firstly want to have the basic understanding of the diseases relating to the symptoms observed, the best prescribed drugs, the nearest pharmacy store to get those drugs or even if possible book an appointment.
During my user research, I interacted Mr. Alu Micheal a Full-stack Software developer. He loves to have a platform where he could be able fact-find about any symptoms discovered and able to get pharmacy store having the prescribed drugs rather moving from one spot to another looking for a particular drugs.
In the diagram below, I highlighted his pain points and needs.
Storyboard
Below diagram depicts Mr. Micheal’s case storyboard:
User Flow
This makes it extremely easy for users to use the website. It is also known as User Journey, one of the stages of design print is understanding the business objectives and user objectives.
In this scenario, the main business objective is to solve the problem of wasting time looking for specific drugs, while the users’ objective is to know the diseases related to their current experiencing symptoms and if wish order drugs and book an appointment for quick test.
The diagram below briefly describes the user flow for the website. From when users get to know about the platform via friend recommendations, social media advertisement, google searching and so on.
User Experience Strategy
This is a crucial stage for any design process. I’ll be describing the user experience of this app in the paragraphs below.
Information Architecture
In designing for a product, user experience needs to be put into considerations, from the first time user visit any website or product, user should able to know what it entails rather than getting confuse what to do or where to click, simply out, the experience should be extremely user friendly.
I had to get a number of user testers to test a number of flows I designed with pencil and paper to mid fidelity and high fidelity, in order for me to understand how they think and why they wanted what they want.
After a lot of failed flows, I was finally able to come up with this flow, showing a golden path user needs to follow to acheive the purpose of the product.
Wireframes
I designed both the low and high fidelity wireframes for the major screen of the webite. The diagrams below depict the overall details:
Visual Styling
This is the final stage of my design process. This stage is also important because designers use icons, colors and typefaces to guide users in using a product.
Style guide
The typeface used was Century Gothic. Icons and hex color codes can be found in the image below.
Interactive Prototypes
I uploaded my designed files to Marvel for prototyping. You can actually interact with it here .
User testing & Iteration
This design was iterated and tested with more two users for the purpose of validating and making crucial decisions.
Tools
The design and prototyping tools used for this project are listed below.
Sketch tools: Pencil and Paper
Design tool: Adobe Photoshop CS6
Prototyping tools: Adobe Photoshop and Marvel App (Marvel)
Thanks for reading.
Note: This design project is mainly for assesment purpose (ALC 2.0) Intermediate Product design Track. A big thanks to Andela Crew for their impart in making every African youth has Tech skills. Thanks guys!.
