Sports & Fitness

Become a Coach: UX, UI and Page Layouts

Project/scope

A global sports and fitness company needed to update the UX/UI of the 'Become a Coach' sub section of their site. I led a team to conduct user research and discover how to simplify usability and increase site performance. Our team created a small UI site kit ,consistent with their branding, which allowed the UI designer to deliver the hi-fidelity page comps. Desktop and mobile designs for pages include: create account, sign-in, product description, cart, and checkout.

Role/team

Experience Design Lead
team:
UX Researcher/Designer
UX Writer
UI Designer
Lead Frontend Developer

Outcome/retro

The client increased their coach recruiting by 12% in the first year after the site improvements. By delivering the UI kit my team insured any future expansions or updates to the site will remain consistent and accessible.

Prototyping was initially eliminated from our process due to budgeting. However, by providing data and analytics I was able to show the necessity of this crucial step.

UI Kit and components

We produced a design system and UI kit to create new layouts for their existing site pages. This allowed designers and developers to collaborate efficiently and consistently. The result is increased accessibility and usability for their customers and cost savings and conversions for the client.

Page layouts

After creating the UI kit and components the hi-fidelity pages were constructed relatively straight forward from the UX wireframe designs. Designing for two breakpoints, desktop and mobile, the pages include: home, header/footer, pcp, plp, pdp, cart, checkout, search results, and various utility pages.

Become a Coach Step 1

Become a Coach Step 2

Become a Coach Step 2b

Checkout Mobile

Checkout

Create Account

Program Description