UX Case Study
Timbersled: Taking a bike from dirt to snow
Polaris Industries • Fall 2016 • UI/UX Design (Contract)
Finalized Responsive Design
Project Background
Providing clarity through visuals and content strategy
The Timbersled system is a conversion kit, not a snow bike.
The marketing site contained aspirational imagery of snow biking, but it was important to help prospective buyers quickly understand the concept and determine the best solution for their needs.
Timbersled Homepage: Before and After
Content Inventory: A sampling
Case Study Sections:
1 Project GoalsJump to section |
2 Site PlanningJump to section |
3 UX WritingJump to section |
4 WireframesJump to section |
5 UI DesignJump to section |
6 Hand-OffJump to section |
1 Project GoalsJump to section |
2 Site PlanningJump to section |
3 UX WritingJump to section |
4 WireframesJump to section |
5 UI DesignJump to section |
6 Hand-OffJump to section |
Project Goals
Defining business requirements & user objectives
User research was not within the scope of this project, but I find getting early consensus on both business requirements and customer objectives yields more focused and constructive feedback!
Business Requirements: | |
| ✓ | Easy to understand |
| ✓ | Optimized for mobile |
| ✓ | Adheres to brand guidelines |
| ✓ | Path to conversion |
Customer Objectives: | |
| ✓ | Understand how it works |
| ✓ | Check bike compatibility |
| ✓ | Compare systems |
| ✓ | Get price and/or find a dealer |
Site Planning
Mapping user flows & site navigation
To zero in on where the “How it Works” page would live navigationally, I charted various ways a customer could interact with the new page and created site maps representing possible locations.
User Flow: via Promo Panel
Process: Site Map, Option 1
Process: Site Map, Option 2
Selected Site Map
UX Writing
Applying content strategy to meet project goals
The provided content was taken from existing marketing documents and needed some updates for better UX and goal alignment.
I documented my recommendations and suggested example content.
Wireframes
Exploring responsive layouts
During this phase I researched responsive best practices and UX patterns, which inspired several options for presenting the "How it Works" and "System Comparison" sections on smaller devices.
UI Design
Applying the Timbersled brand
With wireframe approval, I studied the existing Timbersled.com site styles, as well as marketing materials, to create an on-brand page design.
UI Design: Page Components
UI Design: Explainer Section
UI Design: System Comparison
Hand-off
Documenting design decisions & functionality
As a final step, design specs were documented for hand-off.
Documentation: Comparison Table Components
