personalizing the homescreen to blend the seams

Duration: 6 months; Launched July 2024

Team: UX Architect, Visual Designer, Researcher, Product Manager, Data Analyst, Frontend/Backend Engineers

  1. Applied visual design principles like elevation and typography to emphasize hierarchy and reinforce separate content zones.

  2. Surfaced just-in-time actions for users to have a snapshot of their ongoing activity with VA.

  3. Leveraged existing elements of the VA Design System as a baseline to refresh the app’s look and feel.

  4. Contributed to the U.S. Mobile Design System with app theming (light and high-contrast dark mode).

Final product

Home Screen design

  • The mobile app’s homescreen was largely unused. There were a few external VA links, which carried a potential to navigate traffic from the app to the website. Because of this design, Veterans reported a lack of understanding the app’s value to them.

  • Our team used this data to explore ways to activate the app’s homescreen. We wanted to provide value upon login and first encounter, so we surfaced their top tasks according to their current VA activity. My goal was to visually pair the app with the VA design system, while also pushing the boundaries to differentiate the product.

  • We conducted previous studies to determine an effective information architecture and navigation model for a native mobile app. I started with these findings and built upon the interaction design decisions that I made to inform how the homescreen should behave, and how it should look.

    I also conducted a comparative analysis to surface ideas from other popular apps that resembled the same job. This helped me establish the visual language to communicate the app as a new, safe and trusted resource for a Veteran’s current activities at VA

Category screen design

Process

Hand sketches

Early phase sketches to determine visual groups

Initial design mockups

I explored different elements to develop a cohesive visual language

  • Collected examples from similar apps, conducted workshops with stakeholders. Collaborated with a UX architect and frontend/backend engineering teams to establish content zones.

  • Created a number of style tiles and sample layouts to determine successful relationships between color, elevation, typography and shapes. Established a visual language to systematize the content with the use of hierarchical patterns, and reinforce the screen types.

  • Assisted the Product Manager in ticketing and design handoff. Conducted visual QA throughout the engineering process to ensure accuracy and accessible UI for both light and dark modes.

  • Increased app traffic and usage with existing users, and encouraged app store downloads from new users. Monitored lagging indicators, like reviews and analytics to determine effective hypotheses. 

Conclusion

This redesign has proven successful in communicating the app’s value, resulting in overall user satisfaction. When we conducted pre-launch research, Veterans reported positive sentiments on various outlets, such as in person at medical centers, app store reviews, and Reddit forums. The redesigned look and feel reinforced trust in VA, leveraged brand recognition while also challenging the boundaries, and challenged a mostly empty screen to become more useful.

We helped Veterans save time by surfacing top tasks. This level of specificity eased some of the friction in what can be a sea of information. The visual design communicates the feature updates without overshadowing the information.