Medic Mobile is a global healthcare nonprofit working to improve health equity and access in underserved communities through mobile technology. I work with Medic's design team to gather insights from our human-centered design field work and translate them into intuitive solutions for the app. When I first joined, my number one mission was to help make the app more mobile friendly.
Our design process always begins with field work where we conduct early stage investigation, gather requirements, and listen to our users' stories and feedback.
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 poor lighting conditions played a big role in reducing usability of our app. Some CHWs with poor eyesight held the screen far away from them in order to read it. Also, household visits often take place outside, where bright sunlight or strong dappled light make the screen washed out and hard to see. We observed CHWs trying to shade the screen from the sun with their hands and squinting against bright glare. We also observed frustrations with page navigation, using the back feature, and trying to click on small touch targets.
Based upon these initial insights, I recommended some immediate changes to the app to improve readability and accessibility. Some highlights include:
• Increased the default text size to 16px across the app, making the text easier to read and aligning with modern web standards and usability best-practices.
• Changed the default typeface to Noto Sans. Noto is free, open source and was specifically designed for good web legibility. It also supports 800 languages which is crucial for future scalability and localization of our app.
• Improved color contrast between text and background. We updated the styling of content throughout to replace grey backgrounds with white to increase contrast.
The above changes made a big difference but they were just the beginning. With the larger app navigation project, the goal was to help answer basic questions such as “Where am I?”, “Where can I go?”, “What can I do here?”, “How do I find…” and “How do I go back?”.
This update is the result of about a year’s effort, countless internal and external reviews and feedback sessions, and many conversations with health workers, management teams, partners, and Medic staff. We decided to use Google's Material Design as our foundational inspiration due to the fact that our users are 100% Android and Material Design patterns are already familiar to them from other favorite apps like Facebook and WhatsApp.
Here is a highlight of the improvements:
• Added 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.
• Moved to bottom bar navigation with labels. The bottom bar is more ergonomic and accessible to the thumb. We also updated the icons based on user feedback and added text labels underneath to eliminate any ambiguity and reduce cognitive load.
• New top bar with page title. Page titles provide context and ensure users always know where they are. We also updated page colors for easier differentiation.
• Redesigned menu drawer. The secondary menu is now a drawer instead of a dropdown, a familiar Android UI pattern that makes better use of space with larger click targets. We’ve also included space for branding, user name and sync status.
• Improved search and filters. We relocated search and filters so they are now consistent across all pages. Search expands in the top bar and the filters are now a panel that can be toggled open or closed as needed.
• New FAB buttons and action panels. Main actions are now consistently accessed by a FAB button. When starting a form, a panel now opens up with a grid of large icons.
• Added a new breakpoint for mid-sized devices. Previously we only had one breakpoint and the design was not optimal for mid range devices like tablets.
I created mockups of the new design in Sketch with comprehensive symbol libraries. I used the mockups to create clickable InVision prototypes for user testing and sharing with internal and external stakeholders. I also wrote a detailed 70 page design spec that describes all of the particulars of the desired changes for our development team.