Feature: Marketing pages and brand assets
Platforms: Web
Timeframe: 2022-24
Role: I served as the primary product designer alongside our team's content designer. For the photography, I served as art director and photo editor. For the brand assets, I was a collaborator along with other digital designers and our pharmacy marketing partner.
Platforms: Web
Timeframe: 2022-24
Role: I served as the primary product designer alongside our team's content designer. For the photography, I served as art director and photo editor. For the brand assets, I was a collaborator along with other digital designers and our pharmacy marketing partner.
H-E-B Pharmacy marketing
Overview
When I joined the team, it was one of my first requests to be given permission to overhaul the pharmacy marketing web pages. These pages are accessed from the global navigation of heb.com and promote the services that H-E-B Pharmacy offers. Not only aesthetically unpleasing, the pages were unmanaged and outdated. The pages were also hosted on a legacy eCommerce platform that was being deprecated.
While all the marketing pages had severe heuristic issues, the immunizations page is a clear example of the worst themes in violations across the pages.
When I joined the team, it was one of my first requests to be given permission to overhaul the pharmacy marketing web pages. These pages are accessed from the global navigation of heb.com and promote the services that H-E-B Pharmacy offers. Not only aesthetically unpleasing, the pages were unmanaged and outdated. The pages were also hosted on a legacy eCommerce platform that was being deprecated.
While all the marketing pages had severe heuristic issues, the immunizations page is a clear example of the worst themes in violations across the pages.
Road map
User types
Primary user
Prospective H-E-B customers
- Learn about H-E-B Pharmacy offerings
- Check if H-E-B has a certain offering
- Compare our service offerings to their current pharmacy provider
“Why should I switch to H-E-B?”
Secondary user
Current H-E-B Pharmacy Customers
- Get details about an offering they are aware of
- Learn about H-E-B Pharmacy offerings
- Learn about short-term (seasonal) offerings
“How do I get my flu shot this fall?”
Tertiary user
Employers
- Learn about the H‑E‑B RxTRA Advantage program
- Understand how to contact H-E-B or sign up for RxTRA Advantage
“What options do I have for my business?”
Original site map
The original site map highlights the inconsistencies across the pages. There were broken links, pages not discoverable from the global site navigation, pages only discoverable from google search, and redundant information repeated on multiple pages.
The original site map highlights the inconsistencies across the pages. There were broken links, pages not discoverable from the global site navigation, pages only discoverable from google search, and redundant information repeated on multiple pages.
Card sorting
Our first step was to bread down all pages and links, exploring different ways to group information.
Decision matrix
Through card sorting exercises and meetings with business stakeholders we were able to gather data to help us decide on the new information architecture direction. The decision matrix combined all the factors we considered and helped us to make final decisions on content groupings.
✨New✨ site map
The updated site map shows our new focus on making the service pages actionable for our customers, with links to next steps or further resources on the topic. By leaving customers without next steps, the old pages were ineffective at converting customers and driving the business forward which we sought to rectify.
The updated site map shows our new focus on making the service pages actionable for our customers, with links to next steps or further resources on the topic. By leaving customers without next steps, the old pages were ineffective at converting customers and driving the business forward which we sought to rectify.
Base template work
Moving into working on the UI, the first step was to define a base template that all the pages could use.
Moving into working on the UI, the first step was to define a base template that all the pages could use.
Pivot!
Throughout this process our design team was advocating for the need for new visual assets to make to overhaul worthwhile. What’s the point of restructuring some content if it’s still going to look unappealing? Requiring budget made this process have bureaucratic churn that slowed us down, but the end result was so worth it.
The first step was to define our vision for what pharmacy and wellness at H-E-B should represent. Visuals follow the vision.
Throughout this process our design team was advocating for the need for new visual assets to make to overhaul worthwhile. What’s the point of restructuring some content if it’s still going to look unappealing? Requiring budget made this process have bureaucratic churn that slowed us down, but the end result was so worth it.
The first step was to define our vision for what pharmacy and wellness at H-E-B should represent. Visuals follow the vision.
“Empowering Texans with accessible food, care, and guidance that improves health outcomes and puts people over profits”
-
Inclusive
Visual design should never come at the expense of accessibility.
A clean and simple UI is the top priority, and visual identity is the icing on the cake. -
Related
The digital experience sets the stage for customer’s experiences with partners in stores, clinics, and telehealth calls.
Photography is contextual, promotes our partners and stores, and sets expectations for customers. -
Aspirational
Wellness isn’t waiting in line at the pharmacy.
We want to showcase lifestyle images of texans and their families.
Showcases a diverse range of texans. -
Altruistic
Not driven by profits and selling products. We want to sell services and quality care.
Our use of more refined colors, contextual photography, and clean UI will differentiate us from the e-commerce experience.
Pre-production and art direction
Defined shot list and artistic direction for photoshoots. Collaborated with an external studio and photographer for shots with models. Photographed product photography myself.
Defined shot list and artistic direction for photoshoots. Collaborated with an external studio and photographer for shots with models. Photographed product photography myself.
Basic brand guidelines
Created in collaboration with our marketing campaign designer
Created in collaboration with our marketing campaign designer
Graphic layouts
Photography used in digital context
Photography used in digital context
Now we can proceed!
The work of creating each page and pushing it to production happened 1 by 1 for each service over the course of a year. Priority of builds were driven by business needs and how much content needed to be re-written.
The work of creating each page and pushing it to production happened 1 by 1 for each service over the course of a year. Priority of builds were driven by business needs and how much content needed to be re-written.
Immunizations page
Our first and highest-priority page
Our first and highest-priority page
Drives new customers
Immunizations are a way to use H-E-B services without a prescription, so an immunization could be a customer's first experience with our services.
Used most often
Based on Google analytics for hit in the last year. Customers in the store getting a vaccine are pointed to this page via QR code for more information.
Makes the most money
Immunizations are extremely profitable for pharmacies based on funding paid out by insurance companies and the government.
Has seasonal promotions
Pharmacy marketing does multiple pushes through the year for vaccines such as back to school and sick season
Reflection
This project taught me the importance of pushing for good visual design, even when it takes time, labor resources, and budget. We learned how compelling our updates could be by using the first updated page (immunizations) to showcase the quality of work to business stakeholders who were otherwise difficult to wrangle. Overall, I improved my skills in cross-team collaboration, design advocacy, and extending brand guidelines to digital.
This project taught me the importance of pushing for good visual design, even when it takes time, labor resources, and budget. We learned how compelling our updates could be by using the first updated page (immunizations) to showcase the quality of work to business stakeholders who were otherwise difficult to wrangle. Overall, I improved my skills in cross-team collaboration, design advocacy, and extending brand guidelines to digital.
