On Running

On Running / NYC Flagship Store

Designing the employee tool behind a physical running analysis

For On Running’s NYC flagship, I designed the employee product that connected foot scan and running analysis with the in-store consultation.

Role
Product concept, UX and interface design
Scope
Employee workflow, customer profile and analysis UI
Year
2020
A hand holding a smartphone with the dark running-analysis interface on a mint background.
Running measurements, a radar profile and product context come together in the employee-facing interface.

From in-store analysis to employee workflow

Three physical touchpoints. One employee workflow.

The store experience moved between a foot scan, a running analysis and a personal consultation. I designed the employee-facing product that kept the customer context together as staff moved through the service.

Employees needed to create or find a customer, see which analyses were complete, guide the next step and return to the results during the consultation.

Foot scanRunning analysisConsultation
The flagship-store video shows the service the employee product supports.
Runner using the indoor running track inside the On Running flagship store.
The in-store run gave the consultation its live, physical input.
Full Lego model of the store service with people moving between consultation, running and scanning areas.
The full Lego model maps the service around its physical stations.

Five-step employee workflow from shop and profile through foot scan and run to an emailed result.
The first product map connects Shop, Profile, Footscan, Run and E-Mail in one employee-led flow.
Early light interface screens for customer profiles, foot scanning, running profiles and shoe selection.
Early light screens turn the mapped flow into customer, scan, run and shoe-selection states.

The organising model

One customer profile connected the experience

The runner was at the centre of the service, but the employee operated the product. I used the customer profile to keep identity, foot-scan information, running analyses and progress in one place.

That gave employees a stable view of what was complete, what was still open and which information they could bring back into the conversation.

Complete phone mockup showing the dark customer overview with run and foot-scan status for several customers.
The overview shows each customer and the records already available.
Complete phone mockup showing a customer's runs and shoe selections in the dark interface.
Runs and shoe selections remain attached to the same customer profile.

  • CustomerFind or create a profile
  • StatusSee completed and open steps
  • ScanReview left and right measurements
  • RunsKeep multiple analyses in one context

Running analysis

Giving running data a shape

The analysis contained speed, cadence, vertical displacement and contact time. A list of values made the overall pattern hard to read, especially when an employee wanted to discuss more than one run.

I designed a radar-style view that kept the measurements visible and gave each analysis a recognisable profile. Multiple runs could sit within the same customer record and be compared in the product.

Complete phone mockup showing speed, cadence, vertical displacement, contact time and a turquoise radar profile.
Measured values remain visible while the radar profile gives the run a recognisable shape.

From structure to product

Carrying the interaction model into the final UI

I developed the screens from early light UX concepts into the later dark interface, carrying the interaction model into the final composition.

Early light running-analysis screen with four measurements and a radar profile.
Early UX concept: interaction and information structure.
Final dark running-analysis screen in a complete phone frame.
Final interface: the same measurements and radar profile in the developed product.

Shanghai / WeChat

A different context needed a different customer output

The planned Shanghai flagship introduced a new customer touchpoint. The NYC concept used a simpler email result. For Shanghai, I explored a richer one-page result within WeChat.

I researched the unfamiliar platform directly, clarified the local requirements in calls with a Shanghai counterpart, and developed the mobile and desktop concept. The screens below show the desktop direction and the mobile WeChat output.

Desktop concept for the Shanghai result page with several runs and a large visual introduction.
Desktop direction for the one-page result.
Tall mobile WeChat result beginning with a personal greeting and a visual introduction to the run.
Mobile entry into the personal result.
Tall mobile WeChat result showing a shoe recommendation and a radar profile for a second run.
Mobile recommendation and analysis states.

Scope

What was created

The work produced an employee-facing mobile product concept for the flagship service. It included customer management, profile and status views, foot-scan summaries, running-analysis screens, comparison between runs and recommendation-related product views.

I also created the separate Shanghai and WeChat concept, with its own flow and customer-facing result direction.

Continued collaboration

On Running later commissioned me for a separate planning-room product.

It was a different project, but it extended the client relationship beyond the flagship-store work.

Looking back

The useful distinction was between the person at the centre of the experience and the person operating the product. The runner saw a personal analysis. The employee needed structure, status and control behind it. I still look for that difference when a digital product supports a service that moves through people and physical space.

The employee-facing product in use on a phone during an in-store foot scan.
The employee-facing product in use during an in-store scan.