Zencey's mission is to transform the landscape of healthcare in Africa by making it more equitable and more accessible to all.
In order to help with that, the client wanted us to update the overall design of the app to something more simple, user-friendly, and modern focusing specifically on the onboarding process, the symptom checker, and the physician scheduler. We were also tasked to create a new pathway to order meds and delivery.
Timeline
5 Weeks
Team
Khanh Cao (Me), Heather B., Christine M., Jazmin T.
Role
UX Researcher, Lead UI Designer
Tools
Figma, Google Drive, Maze, Miro, Zoom
Based off what the client wanted and the research done, here is a peek at the solution:
Zencey now has an easy onboarding experience for first time users with alternate options to ensure a smooth sign up.
If you're unsure about what doctor to consult with, just input your symptoms into the symptom checker and you'll receive some guidance.
Easily book a video call with a physician or just message if you have a quick question!
Order your medicine and get it delivered right to you with just a few clicks on your phone.
In preparation for research we reviewed the current solution, other alternative solutions, and our target user for research.
The app audit showed inconsistent and uncoordinated designs. I found their iconography and buttons weren’t cohesive and each part of the app seemed to be a little separate from the rest.
Our team looked at similar solutions such as Healthily, HealthX, and HealthTap. Here we found the inspiration for the updated design that Zencey was aiming for.
.webp)
.webp)
.webp)
.webp)
Our team of designers were all US based. In order to best design for our target user, we decided to interview UX designers from Africa to get better insight on the African user experience.
The client’s main request for color was to change the primary design color from orange to blue. I selected a darker blue as the primary color for accessibility. The secondary color will be a brighter blue that healthcare apps commonly use. The last main color selected is teal to show contrast for the icons.
The font Noto Sans was chosen for its flexibility. Noto Sans can be used internationally because it has different accents available. It also is a sans serif font which is used more commonly for a more modern look.
The rounded components were selected for a more modern look but also for its likeness to pills.
I wanted to have a clear and consistent iconography all throughout the app especially for users who couldn't read.
Before beginning our wireframes, we first decided to look again at the site map and reorganize information to figure out a better user flow. We regrouped some items for more clarity.
The biggest example of our reorganization is shown below. The original menu of the app had different items that we were able to divide between the account information and the My Health information for better user understanding.
The homepage was the part of the app that we felt needed the most change because the attention wasn't where the client intended. The client offered up an idea for the overall redesign to make it similar to the design of WhatsApp because that is what many of the target users would most commonly use. However, a more simplistic homepage would make more sense and call users to focus on what the app has to offer better.
As design lead, I made sure that the entire app followed the design system I had created.
I wanted to make sure that the design was not only modern but also looked professional in presentation so our more educated users would be able to trust in the product.
The overall results showed that our updated solution had improved from the previous design. Onboarding was much smoother for users. Users were able to easier find the two different options of chatting or video calling physicians. And users didn't feel as overwhelmed by the questions from the Symptom Checker.
This was my first time redesigning a currently used solution. While going through the app design, it showed me a lot of simple UI mistakes that are commonly made because they don’t have a UX team. There were a lot of inconsistency issues that made the experience less trusting for users. There were also a lot of things that were groups that could have been rearranged for a better user experience.
User journey maps didn’t seem like they were needed when I had already built personas for a project. However utilizing both for this project showed me how visually easy it was to show a stakeholder what users wanted to see out of a solution and what users needed.
Working in a team means a lot of people designing different things for the same app. It can be hard to combine styles to make one cohesive style. This project highlighted that for me. All of our wireframes came out to be a little different from each other and when we added design to make our mockups, it only further highlighted the differences.
It’s important to have similar design concepts in order to pull the entire app together and I learned that the easiest way to do that is to have one person develop a strong design system and to review the entire project.
