Reimagining the homepage
Overview & key contributions
New copy goes here
Project details
Role
Lead UX content designer
Team
Product design, customer experience engineering, merchandising, marketing, product management
Responsibilities
Content architecture, content modeling for the CMS, stakeholder alignment, guidelines creation
Opportunity
H-E-B's marketing and merchandising team were looking for new, more compelling ways to merchandise the homepage experience. They wanted more content above the fold and multiple layouts to choose from depending on what initiatives needed support that week.
Goals
For our customers:
Encourage product discovery
Improve possibility of relevancy for content users see above the fold
Manage cognitive load to minimize negative impacts on customer experience
Internally:
Maximize revenue (add to cart rate from homepage)
Create more paid placement opportunities
Increase engagement with marketing campaigns while not cannabalizing from merchandising objectives
My approach
1
Turning qualitative research & competitive analysis into actionable insights
Our Design Research team led a series of customer interviews to establish a baseline of what users like to see on retail homepages, their sentiment towards ads, and personalized content. They also conducted a competitive analysis of of other retailers' homepage experiences.
Meanwhile, our team began discussion with the team members who create and publish marketing and merchandising content to understand their goals and pain points.
Out of these discussions, we identified some driving insights:
2
Collaborating with product design as they develop template ideas
I worked closely with a senior and junior product as they worked through different template options to ensure copy was being considered as every decision was made. We had extensive conversations on:
whether every asset needed both a title and a subtitle option,
which types of assets did or did not need a CTA button, and
how different formats might leverage (or evolve) our existing text hierarchy.
maybe an iteration of hero grid explorations
3
Creating a component-within-a-component structure for the CMS
Evaluated existing models with similar structure (banner, product carousel, module cards)
Decided what to pare back on each model for use in Hero grid
Collaborated with engineering to decide whether to reuse existing component or create new components, discussing pros and cons of reusability
Explored multiple ways of nesting models and evaluated with team
4
Documenting and socializing guidelines
Because the CMS is used by several teams to publish content on our website and app, we wanted to equip those teams with the same level of knowledge. We embarked on a series of roadshows to walk through our documented guidelines, demo the new components, and answer any questions.
This wasn't our first time handing off components, but this was widely regarded as one of our best. We tailored our approach based on the past experience of component handoff, working hard to fill every gap and address every concern.
snapshot of HCG or pic of onboarding Figma
Content strategy decisions
Results & impact
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel enim dolor. Praesent vulputate nunc sit amet finibus eleifend. Praesent auctor, dui sit amet sollicitudin aliquet, felis risus pharetra magna, nec lobortis dui massa id purus. Phasellus quis turpis libero. Pellentesque consectetur urna finibus, placerat augue eu, sollicitudin metus.