2023
healthcare services
mobile app
user experience
user interface
Prioritizing healthcare services
15% Increase in New Healthcare Service Appointments
01
Project Achievements
I am pleased to highlight my most recent achievement of reshaping Walgreens' mobile app experience, shifting its focus from being solely a retail platform to prioritizing its healthcare services.
Over the course of four months, I was a key member of the UX Design team of 15 that conducted an extensive audit of the app and website. Through rigorous strategizing and employing design thinking methodologies, we generated insightful recommendations and re-launch strategies.
This involved crafting careful UX user flows while seamlessly integrating the new re-branding UI system. My UX recommendations were taken into consideration, alongside my UI concept was the final pick.
The new app Homepage is now LIVE on the latest version of the app, resulting in a
15% increase in new healthcare service appointments and a 20% increase in returning users engaging with healthcare services through our app.
20% Increase in Returning Users
20% Increase in Returning Users
retail > healthcare
Walgreens has long promoted itself as a retail and pharmaceutical company. However, with the recent acquisition and partnership with Village Medical, the business is poised for a full transition into a healthcare provider capable of offering comprehensive healthcare services, including coordinated primary care and pharmacy services across the United States.
This expansion aims to provide convenient access to high-quality and affordable healthcare.
Project Overview
Prioritizing Healthcare Services
03
Our goal is to re-prioritize the app’s Homepage to facilitate users to find healthcare services and be on top of their medication or vaccination schedules.
App audit
What works well
04
Heuristics
What can be improved
Quick Fixes
Long-term Fixes
This project is subjected to NDA.
Please connect with me for full design process, neennv@gmail.com
Baymard
Research
Identifying main challenges
1. Hierarchy
SURFACE MAIN OFFERINGS IN MENU NAVIGATION HEADER
User should be able to glance at the content of the page and the headings to get a sense of what is offered, and where to go to access it.
SPONSORED CONTENT AND ADS OUT OF PRIME LOCATIONS
Any ad-like elements should be placed subtly and not be overly distracting or complex and placed out of prime locations, and have distinct styling to differentiate them from main content.
ADD SEASONAL OR THEMATIC SECTIONS FOR SERVICES AND PRODUCTS
Specially curated sections that are related to a season or theme can help users know offerings but also shortcut them to desired scopes and products.
05
Overall the homepage shows what Walgreens has to offer, but could benefit from rethinking the content hierarchy to surface primary offering. There are also vague or misleading headings that can be updated and avoid user confusion. Simple user interface changes can avoid interaction confusion.
06
2. Headings
UPDATE HEADING TEXT TO BE MEANINGFUL
Users don’t read everything, they scan. Headers for all sections should be looked at and updated to be intentional and relevant to the content that follows.
REMOVE SEARCH ICON for top searches section
The search icon being removed will eliminate some potential confusion for users who would expect it to perform a search.
CHANGE GROCERY IMAGE TO SHOW HEALTHY OPTIONS
Swap out the grocery image to show a healthy set of items to reinforce your health and wellness brand.
3. USER INTERFACE AND INTERACTIONS
ADD PAGINATION INDICATORS TO CAROUSELS
Pagination helps users see what’s left in a carousel and should be added to the existing carousel on home page.
MATCH THE STYLING AND HOVER STATES OF THE CONTENT TILES TO MATCH
Decide on your content container styling and apply it consistently, including a visual layout and hover state that reinforces that the element is clickable. More complex content buckets with multiple targets need the targets to be styled as clearly unique and clickable elements and not be confused for one big clickable area.
REPLACE BRAND LOGOS WITH LARGER IMAGES AND ALLOW FOR MORE WRAPPING IN A GRID IF NECESSARY
Brand logos need to be replaced with those large enough to be legible and recognized.
07
Competitive Research
08
Benchmarking
During this phase, we undertook an in-depth analysis of competitors, comparing features and design elements with those of rival companies. We also examined the flows within their platforms to identify strengths and weaknesses.
By tracking market trends, we acquired insights into evolving preferences and demands within the healthcare technology sector. This method enabled us to distinguish effective aspects from ineffective ones in competitor platforms, guiding us in refining our own app to deliver improved user experiences and functionalities.
Market
Trends
This project is subjected to NDA.
Please connect with me for full design process, neennv@gmail.com
Wireframing
Creating wireframes before high-fidelity designs establishes a foundation for the user interface and experience, focusing on structure and functionality without distractions. It helps us address usability challenges early, ensuring alignment with user needs and business goals.
09
New UI 2024
Re-branding Concept
Warm
It’s how you feel when you’re in a safe space
10
Welcoming
Because everyone shoud feel at home here
Unapologetically Human
Understanding that life’s not always perfect
Homepage
Re-designed the Homepage prioritizing healthcare services and new re-branded UI
Healthcare Quick Links Feature
- Scrollable section
- Shortcuts to all healthcare services available
- First thing user sees on the app landing page
11