CYCLO

Project

01

A freelance project I worked on independently, CYCLO was an online storefront for marketing and selling cycling products, gear and apparel. The project timeline was two weeks, and the deliverables included design files and assets. This was one of the first projects I worked on.
Role
UI/UX Designer
Tools
Figma
Photoshop

Overview

Cyclo aims to establish an impactful online presence through a straightforward and easy to use webstore experience. The current design fails to captivate users effectively, resulting in low conversion rates and limited engagement.

The redesign aims to create a modern user-centric interface that enhances the overall shopping journey, fostering brand loyalty and driving sales.

Problem

How can we best market cycling products and provide customers an intuitive shopping experience?

Design Brief

02

01
Research
To gain a better understanding of the project at hand, I explored and compared multiple competitor websites, and conducted surveys with hobbyist cyclists to figure out what should be prioritized in the design process.
02
Design
I led a brainstorming session with the client where we finalized relevant design decisions, after which I could start work on first designing the wireframes to finalize layout and positioning, after which I designed Hi-Fi screens. Multiple iterations were conducted at each stage according to the client’s requirements.
03
Prototyping
On finalizing the designs, I moved onto creating a functional prototype for distribution amongst the stakeholders and for user testing. Based on feedback received, the design was refreshed until client was satisfied.

User Research

03

Survey Findings highlighted a strong demand for bike customization options, comprehensive support and service solutions, and flexible payment options.

Competitive Analysis revealed poor organization and accessibility in competitor platforms, with navigation and search functions being particularly weak, and an often clunky UI.

User Personas

To represent the research I’ve conducted, I created the two following user personas. These user personas highlight the pain points faced by users with other platforms and their desired goals from a competitor.
Mako Swann

Aged 27 · Software Engineer · Dubai, UAE

Competitive, fitness-obsessed, early adopter of technology.

  • Trains for triathlons year-round
  • Rides road, mountain, and indoor cycling
  • Prioritizes technology and lightweight components
  • Tracks performance data and uses cycling apps
Pain Points
  • Wants the latest and greatest technology to optimize performance
  • Needs a store that caters to multi-discipline athletes
  • Seeks a curated selection of high-performance cycling components
  • Dislikes traditional bike shops with limited selection and outdated technology
Goals
  • Offers the newest high-tech bikes, parts & gear
  • Provides in-depth product information
  • Integrates with popular cycling apps
  • Utilizes a sleek, user-friendly website with a strong search function
  • Offers fast and secure checkout with multiple payment options
Amelie Flores

Aged 36 · Marketing Manager · London, UK

Active, health-conscious and environmentally friendly lifestyle.

  • Rides 3-4 times a week, for fitness and recreation
  • Prefers road cycling and bikepacking trips
  • Values performance and lightweight components
  • Appreciates high-quality, durable gear
Pain Points
  • Wants a bike that will keep up with her growing cycling passion
  • Needs a reliable online store with a curated selection of premium brands
  • Seeks expert advice and guidance on choosing the right bike and components
  • Dislikes the impersonal experience of big-box bike stores
Goals
  • Offers a wide selection of high-end road bikes and touring gear
  • Provides detailed product information, including high-quality photos and videos
  • Has a user-friendly website with easy navigation and filtering options
  • Ensures secure transactions and returns

Simplified User Flow

Design

04

Sketching & Wireframing

Cyclo aims to establish an impactful online presence through a straightforward and easy to use webstore experience. The current design fails to captivate users effectively, resulting in low conversion rates and limited engagement.

Style Guide & Typography

Cyclo’s brand identity is defined by a clean, minimalist design language accentuated by soft shades of white, cream, gray and black. The design language chosen utilizes both flat elements as well as skeuomorphic designs to leave a more impactful impression on users.

Aa

Red Hat Family

Prototyping

05

Landing page

The landing page uses a clear and concise layout with distinct sections for different categories. It highlights a “Featured Deals” section and emphasizes customer benefits. The hero section is geared towards marketing the quality of the products being offered, and displays flagship bikes in a carousel.

Navigation Menu


The navigation menu encourages users to explore Cyclo’s different product lines and helps users familiarize themselves with the Cyclo product ecosystem. A hierarichal design structure facilitates swift and intuitive navigation to all categories of products on offer.

Product Pages

The primary focus with product pages was to have the product speak for itself. The design drafted for this maximizes available space to most efficiently advertise the product and all its features.

Checkout

The checkout process was designed to be straightforward and clean. Structured into a three-step process, it provides all relevant order details in a concise and well-structured layout.

Support Pages

The project called for a comprehensive Support and Help section, designed to intuitively direct users either to support articles or customer service depending on their needs.