Turning catalogue retail into a connected wellness experience

I owned UX, UI and front-end delivery as Healthspan moved from catalogue-only retail to online, then connected its commerce offer with STYR tracking to create a more continuous athlete experience across onboarding, wearable data, nutrition and daily guidance.

Impact: Catalogue-to-online platform transition

Improved satisfaction and conversion

Improved overall site performance
System scope: Onboarding and goals

Wearable-data connection

Nutrition logging

Daily insights and recommendations
Engagement: Healthspan with STYR
Ownership: Sole UX and UI ownership

User research and analytics

Responsive front-end implementation

End-to-end product delivery
Signals: DTC Wellness Data-informed UX Product + Front-End End-to-end ownership

The decision I owned

Make the move online a product transition

Turn a catalogue-led retail experience into an end-to-end digital platform, then connect commerce with STYR's tracking capability so the relationship could continue beyond a purchase.

At Healthspan I was the sole UX, UI and front-end developer responsible for the online platform during its transition from catalogue-only retail to online. I also partnered with STYR on a wellness and performance experience for endurance athletes, bringing Healthspan's product proposition together with nutrition and activity tracking.

What I recognised

Moving a retail business online was not only a matter of reproducing catalogue pages on a screen. The digital experience could learn from behaviour, support repeat interaction and connect everyday athlete activity with relevant guidance and products.

Personalisation needed context. Goals, profile information, nutrition entries and activity data had to give recommendations something meaningful to respond to.
Tracking only creates value when it becomes understandable. Wearable and food-log data needed to return as a clear daily picture of progress and recommended action.
Commerce and utility had to feel connected. Healthspan's products and STYR's tracking capability needed to operate as one experience rather than two adjacent services.
Design decisions had to survive implementation. Because I owned UX, UI and front-end development, research findings, interaction decisions and performance considerations were carried through into the shipped interface.

The system I established

I organised the experience as a simple recurring loop. Each stage creates the information needed for the next, turning isolated screens into a service people could return to.

JoinSet expectations and collect the athlete's profile and goals.
ConnectBring activity data into the experience through wearable integration.
RecordCapture food and nutrition information as part of the daily routine.
UnderstandSummarise progress, goals and nutritional information in one place.
ActUse that context to support personalised insights, recommended actions and relevant products.

I connected three layers of the product

Customer context: Profile, goals and food logging establish what the athlete is trying to achieve and what they are doing day to day.
Behavioural data: Wearable integration brings activity into the same experience rather than asking users to interpret separate sources themselves.
Commercial relevance: Healthspan's supplement expertise could be presented through personalised product recommendations grounded in the wider wellness experience.
Daily utility: The home view turns accumulated information into progress, goals and recommended actions that give people a reason to return.

Research had to reach the implementation

My role combined product design and hands-on front-end delivery. I used Fullstory and other analytics alongside user research, then translated what I found into responsive, high-performance interfaces. That meant the work could move directly from observed behaviour to interaction decisions and implementation without treating build quality as a separate downstream concern.

One ownership chain

Research, UX, UI and front-end implementation were parts of the same product decision—not separate hand-offs.

Evidence across the experience

The screens show the loop from joining the programme through connecting data, recording nutrition and returning to a daily view of progress and recommended action.

Nutricoach welcome screen (2017) — **Welcome screen.** Introduces the program and sets expectations for athletes.

Nutricoach get started screen (2017) — **Get started.** Onboarding step that collects profile details and goals.

Nutricoach home dashboard (2017) — **Home dashboard.** Daily overview of progress, goals, and recommended actions.

Nutricoach connect to wearables screen (2017) — **Connect to wearables.** Device pairing step for syncing activity data.

Nutricoach food log entry screen (2017) — **Food log entry.** Add or edit a meal with portion details.

Nutricoach food log summary (2017) — **Food log summary.** Summary view highlighting totals and nutrition breakdowns.

What changed

The work helped move Healthspan from catalogue-led retail to an online product experience while the STYR collaboration connected commerce, nutrition and activity tracking in a cohesive athlete journey.

Online transition: UX, UI and front-end delivery supported Healthspan's move from catalogue-only retail to an online platform.
User response: The wider platform work was associated with significant improvements in user satisfaction and conversion rates.
Performance: Responsive, high-performance implementation contributed to improvements in overall site performance.
Connected proposition: The Healthspan and STYR experience combined personalised insights, product recommendations and daily performance monitoring in one service.