Medic Mobile is a global healthcare nonprofit working to improve health equity and access in underserved communities through mobile technology. I worked with Medic's design team to gather insights from our human-centered design field work and translate them into intuitive solutions. When I first joined, my number one mission was to help make the app more mobile friendly.
My roles: conducted user research, created mockups, gathered feedback, iterated on designs, pared down to MVP, wrote up final specs for developers.
Discover
The design process began with field visits where we shadowed Community Health Workers (CHWs) and observed them using the app during their daily visits. We conducted early stage research, identified key problems, and most importantly, listened to our users and heard their stories.
Our team shadowing CHW Rachel on her household visits in Thika, Kenya.
CHW Rachel using the Medic app to walk through an antenatal care visit.
Medic works with marginalized communities, particularly in rural and low-tech settings. Many of our users work in low-connectivity environments, some have never used a touchscreen before, and others may have low literacy. We're often called upon to develop creative solutions to complex challenges and extreme constraints.
During our field visits we observed that poor eyesight and lighting conditions played a big role in reducing usability of our app. CHWs with poor eyesight held the phone far away from them in order to read it. Bright outdoor sunlight made the screens dark and we observed CHWs trying to shade their phones and squinting to make out the text. We also observed frustrations with page navigation, using the back feature, and trying to click on small touch targets.
User quotes:
"Yes, the menu is very small. It is hard to read."
"What is that icon?"
"It is better when the name is there. It is cramming to try to remember all these signs."
"App colors feel gloomy."
Ideate
This project is the result of about a year’s effort, countless internal and external reviews, and many conversations with health workers, management teams, partners, and Medic staff.
We decided early on to use Google's Material Design for our inspiration due to the fact that our users are 100% Android and they are already familiar with Material design patterns. I began ideation by creating a lot of exploratory mockups to visualize options.
What if we went full Material Design?
Bottom bar options. Four or five tabs? Text labels or no labels? Does it work when translated?
New consistent headers. How does mobile navigation translate to desktop?
Test
Once I had some concepts I was feeling pretty good about (and a lot of new questions!) it was time to test and see what the users thought. We visited a group of CHWs in Kampala, Uganda and conducted participatory design sessions to get their feedback. I created clickable InVision prototypes to simulate the new experience and we loaded the prototypes onto phones for users to compare. We had low-fi paper prototypes for users to design their own ideal homepage and we also walked through an exercise for interpreting and rating new navigation icon ideas.
Prototyping and testing the new home page concept and potential widgets.
User testing an InVision prototype of the new navigational system.
Users comparing the old design with the new prototype.
Final result
I got a lot of great feedback from the user sessions as well as from internal employee surveys and focus groups. I took all of the feedback in and make countless tweaks before arriving at a final design that we all felt really comfortable with.
Here is a highlight of some of my key suggestions for improvement:
• Make the type more legible. I increased the default text size to 16px across the app, and changed the default typeface to Noto Sans (crucial for future scalability and localization of our app).
• Improve color contrast. I updated the styling of content throughout to replace grey backgrounds with white to increase text contrast.
• Add a new home page. This welcome page provides a positive place for users to begin their day and summarizes key information like open tasks and sync status.
• Move navigation to bottom, add labels. The bottom bar is more ergonomic and accessible. It also allows space for text labels underneath the icons to eliminate any potential ambiguity.
• New top header with page titles. Page titles provide context and ensure users always know where they are. I also updated page colors for easier differentiation.
• Android menu drawer. The menu drawer is a familiar Android pattern that allows for larger click targets and has additional space for branding, user name and sync status.
Deliverables
I created mockups of the new design in Sketch with comprehensive symbol libraries. I also added a new breakpoint optimized for mid-sized tablet devices. I used the mockups to create clickable InVision prototypes for user testing and sharing with internal and external stakeholders. I also wrote a detailed design spec describing all of the desired changes and functionality for development.
