Work

Work

Work

Solving for One: Designing a personalized experience

Role: Staff Designer
Project Duration: 8 months

Challenge: Veterans and caregivers had a hard time accessing their top tasks or seeing the status of their latest activity in the app.

The initial navigation failed to surface personalized information–leading to longer times locating frequent tasks, which resulted in reduced app engagement.

My Role

I was the lead visual/interaction designer for this project. I spearheaded the creation of a comprehensive design system for a personalized homescreen that would surface user-specific information and streamline access to frequently used features.

I expanded on VA’s brand guidelines to build out a mobile design system to surface the status of users' top tasks, display new load/error states, and provide quick access to frequently used app features based on user data. 

I also needed to craft new ways to display personalized information like branch of service, disability rating, and digital Veteran ID card–all while maintaining accessibility standards for blind/low vision users.

Technical Constraints

Since this was the first time the app would display this much data at once, I worked closely with engineers to determine how to design load/error states due to API limitations and other challenges due to low bandwidth connectivity, and outdated backend systems. Working with the whole team to note these limitations upfront allowed us to plan and document them leading into the research and launch phase.

Version 1 Wires/Mocks

Design Process

  1. Concept Development

I started with hand-drawn sketches to establish a hierarchical system for screen elements, focusing on content hierarchy and elevation to define different zones, applying visual balance to time-sensitive updates with general resources, and creating scannable content that builds trust.

  1. Design System Component Creation

I developed a comprehensive visual system that included a typography system that promoted scannable content, reinforced branding and visual identity, and built trust with omni-channel users. I also created an elevation system using shadows to convey meaning and location within the app, with deepest shadows at the top level becoming smaller in detail screens to support progressive disclosure principles.

The component library featured native mobile-first patterns aligned with iOS and Android guidelines while maintaining accessibility standards throughout and designed for seamless integration with the existing VA Design System.

  1. Accessibility

    I prioritized accessibility by working with engineers to implement haptic feedback for new activity on load, customized VoiceOver/TalkBack screen reader announcements, high-contrast dark mode for low-sighted users, and performance optimization for users with connectivity challenges.

  1. Concept Development

I started with hand-drawn sketches to establish a hierarchical system for screen elements, focusing on content hierarchy and elevation to define different zones, applying visual balance to time-sensitive updates with general resources, and creating scannable content that builds trust.

  1. Design System Component Creation

I developed a comprehensive visual system that included a typography system that promoted scannable content, reinforced branding and visual identity, and built trust with omni-channel users. I also created an elevation system using shadows to convey meaning and location within the app, with deepest shadows at the top level becoming smaller in detail screens to support progressive disclosure principles.

The component library featured native mobile-first patterns aligned with iOS and Android guidelines while maintaining accessibility standards throughout and designed for seamless integration with the existing VA Design System.

  1. Accessibility

    I prioritized accessibility by working with engineers to implement haptic feedback for new activity on load, customized VoiceOver/TalkBack screen reader announcements, high-contrast dark mode for low-sighted users, and performance optimization for users with connectivity challenges.

Scroll state title transition for smaller screens/longer lists, and different display zoom settings

Solution

Personalized Activity Hub

The new homescreen featured an activity area highlighting the latest status of user's top tasks, increasing overall engagement metrics. The activity modules were designed to directly link to the corresponding detail screens. User data determined which areas they most accessed in order to determine which features to promote. Additional personalized information included branch of service, disability rating and their monthly compensation payment for quick validation.

Key features included smart prioritization based on user behavior and data, status indicators for ongoing processes, seamless navigation to detailed information, and accessible design that works for all users.

Personalized Activity Hub

The new homescreen featured an activity area highlighting the latest status of user's top tasks, increasing overall engagement metrics. The activity modules were designed to directly link to the corresponding detail screens. User data determined which areas they most accessed in order to determine which features to promote. Additional personalized information included branch of service, disability rating and their monthly compensation payment for quick validation.

Key features included smart prioritization based on user behavior and data, status indicators for ongoing processes, seamless navigation to detailed information, and accessible design that works for all users.

Validation Process

I consulted with external VA stakeholders to align design patterns with overall branding, maintain visual continuity with the main website, and define unique app standards while retaining brand ties. Before launch, I collaborated with the information architect and engineers to run user acceptance testing ensuring successful data fetching, test load times and performance across different connectivity levels, and implement batched API calls for more predictable performance.

Validation Process

I consulted with external VA stakeholders to align design patterns with overall branding, maintain visual continuity with the main website, and define unique app standards while retaining brand ties. Before launch, I collaborated with the information architect and engineers to run user acceptance testing ensuring successful data fetching, test load times and performance across different connectivity levels, and implement batched API calls for more predictable performance.

Results & Impact

Within the first three months post-launch, we saw a 20% increase in user traffic from legacy website to app and an overall 10% conversion from the legacy mobile app for prescription refills, with steady monthly growth in user adoption and retention.

The long-term success included positive app store reviews and community feedback, sustained engagement growth over 6 months, and improved user satisfaction based on qualitative research. I validated these results by demoing the work at the 2024 Annual Caregiver Summit, gathering ongoing insights from new and existing users, and making continued refinements based on user adoption data.

Key Learnings & Next Steps

Key Learnings & Next Steps

The project succeeded because of our user-centered approach to prioritization and personalization, strong collaboration between design, engineering, and stakeholders, accessibility-first mindset that benefited all users, and data-driven validation throughout the process. This work established new standards for personalized experiences within the VA mobile app and demonstrated how thoughtful design systems can scale across features while maintaining accessibility and performance.

Next Steps

The success of this homescreen redesign has paved the way for expanding personalized experiences throughout the app, with plans to apply similar principles to other key user journeys and features.

The project succeeded because of our user-centered approach to prioritization and personalization, strong collaboration between design, engineering, and stakeholders, accessibility-first mindset that benefited all users, and data-driven validation throughout the process. This work established new standards for personalized experiences within the VA mobile app and demonstrated how thoughtful design systems can scale across features while maintaining accessibility and performance.

Next Steps

The success of this homescreen redesign has paved the way for expanding personalized experiences throughout the app, with plans to apply similar principles to other key user journeys and features.

contact

Email

Email

LinkedIn

LinkedIn

Colophon

IBM Plex Sans

Merriweather

Nathana Reboucas for Unsplash

Sydney Rae for Unsplash

© 2024 -
Lauren Russell