Streamlining mobile navigation for military veterans
I created and scaled a visual design system for a new personalized home screen. The objective was to surface the status of the user’s latest activity for their top tasks.
The new design provided quick access to frequently used app features, based on user data. It also surfaced specific information, like their branch of service and disability rating.
Within the first 3 months of launching the update, the app experienced a 20% increase in user traffic from the legacy website to the app.
Left
Home screen design before launch.
Right
Home screen after launch, displaying new personalized activity area and raised buttons.
Process
As the lead visual/interaction designer, I enhanced the mobile app by introducing visual indicators and expanding the component set. I applied design principles like content hierarchy and elevation to clearly define different zones on the home screen. My designs balanced time-sensitive updates with general resource links, such as the Crisis Line and Contact Us areas.
I began with hand-drawn sketches to establish a harmonious, hierarchical system for screen elements in each zone. This phase involved client discovery and consulting. Weekly client reviews revealed a preference for rough patterns, helping me build trust and ensure continuity between options while refining the general direction.
The Activity area highlighted the user’s top tasks, providing the latest status with direct links to the corresponding detail screen. I developed typography systems to promote scannable content and reinforce branding and visual identity, fostering trust with omni-channel users. I used elevation to indicate location within the app, establishing an elevation system for shadows to convey meaning and support progressive disclosure principles, which I implemented throughout the app.
I created native mobile-first patterns, aligning with Apple’s Human Interface Guidelines (iOS) and Material Design (Android) to maintain native mobile accessibility standards. I optimized the experience for low and non-sighted users, since an accessible interface is as critical to the experience as visual elements. I partnered with engineers to implement features like haptics, customized VoiceOver/TalkBack screen reader announcements, and high-contrast dark mode for low-sighted users.
I assigned an elevation system to denote screen hierarchy. The drop shadow was the deepest at the top, and became smaller as the user navigated to detail screens. This helped reinforce patterns throughout all of the app’s features.
Discovery sketches
Redesign for light and dark modes
Elevation detail: Home (top level), Category (middle level), Detail (bottom level)
Things that came up along the way
I consulted with external stakeholders in departments across VA to align design patterns with overall branding and visual identity graphic standards. My goal was to define unique standards for the app, while also retaining ties with the main website, and other companion products. I designed components that paired well with VA Design System’s established branding for visual continuity with both experiences.
Process mockups
Outcome
Leading up to launch, I worked with the information architect and engineers to run user validation testing to ensure successful data fetching and reasonable load times. Since this was the first time in the app’s history that we would supply this much data at once, we factored in past research findings. Users reported accessing the app across VA medical centers, especially in rural areas where there are often connectivity challenges. We collaborated with mobile backend engineers to batch API calls, resulting in more predictable load times and overall user satisfaction..
Overall impact
Once launched, the team monitored lagging indicators like app store reviews and Reddit feedback to determine what worked well, and things to monitor with quantitative data. We set up events, and worked with the data analyst to monitor retention rate over 6 months. With each month, we noticed a small, but steady increase as users installed the new app update. In 3 months, we noticed a 20% increase across all the app’s features. Most notable was the 10% conversion for users refilling their prescription. This was a major win, as we also worked on other initiatives to improve this feature’s usage.
The retention study allowed us to continue to make refinements informed as user adoption increased. I also gathered qualitative research insights from the 2024 Annual Caregiver Summit, where I demoed the work for new and existing users.
