H-E-B Pharmacy marketing
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.
Manage Pharmacy profiles
Feature: Profile management
Platforms: native and web
Timeframe: 2023
Role: I served as the primary designer leading the project. I worked with our product owner and product manager to define technical requirements and worked through to QA with engineers.
The marketing 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.
Users
Road map and releases
Original live pages
When I joined the team, it was one of my first requests to be given permission to overhaul the pharmacy marketing web pages. 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.
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.
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
- Switched from 2 page concept to 1 page.
- More contextual content in the right-hand column.
- More contextual information in the page subtitle.
- Visually defined patient headers.
Base template work
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?
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
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.
Basic brand guidelines
Created in collaboration with our marketing campaign designer
Graphic layouts
Photography used in the digital context. Graphic layouts are found in hero banners and seasonal, rotating banners.
Production ready
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.
Pharmacy home
heb.com/pharmacy
Immunizations page
Our first and highest-priority page
All other pages
Our first and highest-priority page
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.
H-E-B Pharmacy marketing
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.
The marketing 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.
Road map and releases
Original live pages
When I joined the team, it was one of my first requests to be given permission to overhaul the pharmacy marketing web pages. 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.
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.
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.
Base template work
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?
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
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.
Basic brand guidelines
Created in collaboration with our marketing campaign designer
Graphic layouts
Photography used in the digital context. Graphic layouts are found in hero banners and seasonal, rotating banners.
Production ready
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.
Pharmacy home
heb.com/pharmacy
Immunizations page
Our first and highest-priority page
All other pages
Our first and highest-priority page
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.
H-E-B Pharmacy marketing
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.
Manage Pharmacy profiles
Feature: Profile management
Platforms: native and web
Timeframe: 2023
Role: I served as the primary designer leading the project. I worked with our product owner and product manager to define technical requirements and worked through to QA with engineers.
The marketing 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.
Users
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?”
“What options do I have for my business?”
Road map and releases
Original live pages
When I joined the team, it was one of my first requests to be given permission to overhaul the pharmacy marketing web pages. 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.
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.
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.
Base template work
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?
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.
Basic brand guidelines
Created in collaboration with our marketing campaign designer
Graphic layouts
Photography used in the digital context. Graphic layouts are found in hero banners and seasonal, rotating banners.
Production ready
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.
Pharmacy home
heb.com/pharmacy
Immunizations 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.
All other pages
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.