Watsons Mobile Commerce System

Watsons, Asia's leading pharmacy and health and beauty retailer, worked with WHAM, its London-based brand agency, to take the Looking Good, Feeling Great campaign onto mobile.

As Senior Mobile UI Designer, I designed the mobile concepts and produced the implementation-ready style guide that enabled regional teams to build consistently across multiple Asian markets.

The system covered campaign-led discovery, product listings, filters, product detail, store finding and localized market versions, including Chinese and Thai language interfaces.

The guide documented branding, responsive structure, photography, navigation, icons, filters, product panels and store-locator states.

Watsons needed to present a large catalogue spanning pharmacy, beauty, personal care, hair and health while also supporting promotional campaigns, membership features, saved products and store discovery on a 2013-era mobile screen.

The navigation had to accommodate broad categories such as Skincare, Make Up, Men, Personal Care, Hair and Health without burying essential retail utilities.

A campaign-heavy homepage could easily crowd out repeat-use functions such as loyalty, saved products and nearby-store discovery. The design challenge was to combine promotional storytelling with a persistent utility bar containing Menu, Member, Store locator and My List, keeping core actions one tap away while campaigns rotated above.

Product-list rows also needed to communicate thumbnails, brands, product ranges, names, original and sale prices, promotion badges, Exclusive labels, member pricing and Extra Points within a small footprint.

WHAM and Watsons worked through a close agency-client collaboration focused on high-quality pixel output and an implementation-ready workflow.

I developed mobile concepts alongside detailed specifications covering exact dimensions, component rules, interaction states, localization requirements and image-weight budgets. This allowed regional teams to build consistently without repeatedly re-deriving the design.

The solution connected promotional discovery, structured browsing and detailed product evaluation. Product pages carried pricing, promotion and member-price treatments while adding colour selection, product codes, sharing, expandable information sections, embedded how-to video, numbered application steps and related products.

The delivered output was a reusable mobile eCommerce and UI system covering campaign discovery, category browsing, filters, product detail, video-led product guidance and dual-view store finding.

The supporting guide documented colour, logos, navigation, icons, photography formats, page grids, filter behaviour, product-panel dimensions and map states.

The product panels specified 200 × 200px thumbnails, brand and range labels, product names, crossed-out RRP, sale price, promotion badges, member pricing and Extra Points.

The system enabled regional teams to implement the experience without re-deriving the design from scratch. No measured adoption or commercial outcomes are recorded for this project, so these are delivery and coverage outcomes rather than performance claims.

The key lesson was that a regional design system must specify both constraints and flexibility.

Rules such as a recommended three-to-five filters, exact image-weight budgets and standardized map behaviour created consistency. Configurable filter counts and market-specific language layers allowed the same system to adapt across countries without drifting apart.

The project also showed that localization is not only a translation task. It affects content length, navigation labels, filters, market conventions and the boundaries of what can be standardized.

The documentation anticipated further standardization across Watsons business units, particularly for the store-locator map and icon system. Its broader direction was a shared regional foundation supporting new markets, languages, categories, campaigns and localized business requirements.

The filter experience was specified through multiple interaction states: collapsed, expanded Filter Options, a scrollable brand checklist with selected and unselected states, and an applied-filter state with removable chips and Clear all.

The documentation allowed up to 10 filter options to be customized by business unit while recommending three to five filters for the final experience.

The store-locator concept also specified a 560 × 860px map, service-specific pin behaviour and map/list switching.

The interface separated promotional content from essential retail utilities so customers could reach membership, saved products and store finding without navigating through campaign content.

The product and filter specifications made important states explicit, including selected and unselected filters, removable filter chips, member pricing, promotion badges and service-specific store pins.

The available record supports interaction clarity and state specification. It does not include a formal accessibility audit or measured accessibility outcome.

The interface system was designed for rollout across regional business units rather than a single market.

A three-screen concept demonstrated the same structure across languages, including a Chinese toggle and a pixel-identical Thai-market version. Style-guide artefacts also referenced Malaysia, Singapore, Hong Kong and the Philippines.

Regional components such as the store-locator map were marked for confirmation before becoming group standards. The system was designed to travel across markets without requiring each team to redesign the experience from scratch.

Some information and details are omitted because of confidentiality constraints.

This case study represents my work and does not necessarily reflect the views or strategies of Watsons.

This portfolio material is presented under Fair Dealing guidelines. No confidential or proprietary Watsons information has been disclosed.