CONCEPT2 WEBSITE CASE STUDY

Improving user experience through interface design

THE PROBLEM:

Information overload led to important features/information becoming lost and overwhelmed users.

Inconsistent design systems challenged hard-won associations with authority and trustworthiness.

Skills/tools used

Figma, Wireframing, Competitive analysis,
User research

My role

UI/UX design, user research

Duration

6 weeks

Team

Lila Ward
Haley G (secondary UX designer)

MY DESIGN GOALS:

Highlight key features and supplemental resources

Streamline information hierarchy

Create design consistency between site pages that supports the brand image

Homepage

  • Developed brand authority and voice through imagery and messaging

  • Promoted purchasing action and informational articles

  • Encouraged joining the online community and additional social resources

  • Made the “workout of the day” readily available

Product Page

  • Assigned high visual weight to purchase buttons

  • Highlighted user testimonials

  • Organized product information into easy-to-read cards

  • Incorporated location-based services to increase ease of accessing trial equipment before purchase

  • Promoted educational articles about product benefits and accessibility

Workout of the Day

  • Highlighted daily workout and created associated tags

  • Promoted sign up for additional offered features

  • Encouraged community participation through a variety of challenges

  • Created an archive of past workouts including the date, their tags, and user ratings

Research & Design Process

Competitive/Comparative Analysis

  • Does the site reflect a consistent brand identity? How does the site influence brand/product perception?

  • How does the site establish authority in the industry? Does the site create a sense of trust within the user?

  • Can the user easily find information they’re looking for? Is there a clear path to information?

  • Is each user type segmented within the experience? Is the experience tailored to differentiated users?

  • How intuitive is the use of the site? How easily can users manage their own journey? Can users remedy an issue?

  • How present is the brand on social media? How do users choose to engage with the brand? Is the brand responsive to user engagement?

*Each circle’s shading represents the extent to which each brand fulfills each category. The blue circles identify the category leader among the examined brands.

User personas & flows

Wireframing - Figma

Home page

Product page

Workout of the Day

Design System

Grid used

12 column grid
64px margin
20px gutter

Type Hierarchy

Button Variations

Brand Colors