HP Brand Store

Context and business problem

HP wanted a single, unified HP Brand Store embedded on the websites of its e-commerce partners. Every partner runs a different e-commerce tech stack, has different documentation and differently built stores. Before we started, the project was considered impossible to implement.

The business goal: the HP Brand Store had to look native and identical in every store and at every distributor.

Users and their goals

• Shoppers on partner sites: often don’t know exactly which product to buy, but they know their need. The Brand Store starts from that: it helps them choose by need and everyday use (home, business, study and more), maps the listing the same way, and suggests what else fits: accessories and add-ons.
• HP: a consistent brand presence across retailers in every market.
• HP’s e-commerce partners: have to implement the Brand Store in their own stack. Their pain point: every brand asks for something different; they need clear guidelines and a working reference they can test.

Constraints

• A multi-stack environment: each partner has its own technology and its own way of building stores.
• Many decision makers; cross-organisation alignment between HP, the partners and the agency.
• Initial scepticism: the project was seen as impossible.
• The core design tension: keep maximum value for users while losing as little as possible to technical constraints.

My role and responsibilities

• Art direction of the whole project
• The Brand Store / Shop-in-Shop concept
• Design of the first pages: the foundation, blueprint and system
• Leading a UX Designer (my direct report), who built the product cards and page views, with regular feedback to keep them consistent with the art direction
• Direct contact with HP decision makers and meetings with HP’s e-commerce partners
• Selling further development concepts

Process and key decisions

The project ran in five phases: concept sale → ideation → preliminary design → coding views → rollout.

1. Concept sale

The Brand Store / Shop-in-Shop concept was sold to HP.

2. Ideation and preliminary design: system first

I designed the first pages as a foundation, a blueprint and a system: the Brand Store design system, with product cards and page views built on top of it.

Decision: system first.

Why: with every partner on a different stack, only a system can be adapted store by store without losing the brand.

3. Coding views and handoff

The views were handed off as HTML/CSS/JS. GPD developers coded the views.

4. Rollout support: a portal and a live prototype

For partners we built:

• an internal portal (Webflow) with implementation best practices,
• a live prototype that partner-side testers can click through and test,
• implementation guidelines per partner stack.

Decision: one source of truth that every partner can test against.

Why: feedback is about the same build, not about interpretations of a design file.

5. Adapting per partner

After a year of optimising and adapting the design and building the rollout strategy, the Brand Store is being rolled out across stores and distributors.

Where AI fits

I used AI to speed up variant exploration and to draft partner-specific implementation notes; every decision was validated in reviews with HP and in tests on the live prototype by partner-side testers.

Solution

The deliverables listed in step 4, plus the Brand Store design system and a complete set of product cards and page views. The portal is on an internal domain and stays private.

Outcome and impact

• After a year of adaptation and rollout strategy, the Brand Store is launching at HP partners: 12 partners in 6 countries, with more on the way, mainly in Europe and the Americas.
• The client received it very well; HP leadership reviewed the project and wants to extend it to other markets, including the Middle East.

What I learned and what’s next

• In a multi-stakeholder project the design system is also a negotiation tool. When every partner has different constraints, a shared system turns opinions into concrete trade-offs.
• Leading through a direct report: regular feedback loops kept the cards and views consistent with the art direction without me redrawing them.
• Next: rollout to further partners and new markets, including the Middle East.