Ecommerce · IBM · Rosetta

IBM’s starter store

Role

Partner · SVP UX

Client

IBM

Product

WS Commerce 6.1 & 7.0

Focus

Ecommerce

The situation

Annotated WebSphere Commerce checkout wireframe

What we were solving IBM asked Rosetta to redesign the starter store shipped with WebSphere Commerce 6.1 and 7.0 Madison — the out-of-the-box ecommerce templates every new customer worldwide inherited. We researched across verticals, then delivered annotated wireframes for cart, checkout, account, and confirmation precise enough for a global dev ecosystem to build from.

We defined the starting point for the IBM Commerce Experience.

The starter store is the out-of-the-box template set WebSphere Commerce ships with — cart, checkout, product pages, search, account. Clients use it as the foundation before they customize. Rosetta was IBM’s top WebSphere integration partner, with hundreds of deployments globally. IBM asked us to redesign that default experience for Commerce 6.1 and the 7.0 Madison release.

The stakes were downstream. A weak starter store meant every integrator rebuilt the same screens from scratch. A strong one expedited development and showed buyers what the platform could actually do at full transactional depth.

Research

The same grid had to work in B2B, B2C, and every vertical we tested.

I led UX and research on a team that started with detailed heuristics and qual/quant studies with IBM clients and their end customers. We mapped how the same page types had to work in B2B and B2C, then stress-tested against retail, CPG, tech, and healthcare scenarios.

The design problem wasn’t a single storefront. It was a scalable grid that could carry WebSphere’s full feature set without drowning a simpler deployment.

The deliverable

Annotated wireframes — spec-level, not concept-level.

These aren’t mood boards. Each screen documents behavior: AJAX quantity updates, promo error states, cross-sell logic, shipping thresholds, checkout paths. Engineering and QA could build from the annotations without a second interpretation pass.

Shopping cart

Annotated shopping cart wireframe — line items, cross-sell, promo code, shipping summary, and numbered behavior callouts
Ten annotated behaviors on a single cart screen — quantity AJAX, removal, cross-sell, promo validation, free-shipping threshold, duplicated checkout CTAs. Click to zoom.
Annotated checkout wireframe — billing, shipping, payment steps with numbered callouts
Checkout. Multi-step flow with inline validation and payment handoff notes.
Annotated login wireframe — account entry for B2B and registered shoppers
Account login. Registered-customer entry point for B2B and B2C store modes.
Annotated order confirmation wireframe — post-purchase summary and next-step callouts
Order confirmation. Post-purchase summary, order tracking entry, and continuation paths.

One decision

Scale toward simplicity or complexity.

01

A template system that could scale up or strip back.

We didn’t design separate starter stores per vertical. We defined a clean transactional grid that could absorb WebSphere’s depth — quick order, multi-ship, contracts, promotions — or strip back for a lighter B2C rollout. Same IA, configurable feature exposure.