Create Athlon’s e-commerce platform that curates design assets, engaging a wider audience and establishing industry leadership through compelling storytelling.
Objectives
E-commerce Platform
Develop a concept of an e-commerce experience that enables the seamless display and sale of Athlon's well-curated assets.
Product Diversification
Curate and showcase a diverse range of design assets, including apparel, graphics, templates, digital resources, and design courses, ensuring that our product portfolio is extensive and appealing to our target audience.
Brand Philosphy
Use the e-commerce platform as a powerful branding tool, highlighting Athlon's design process and positioning the company as an industry leader.
Storytelling Through Design
Infuse our design assets and website interface with the power of storytelling, effectively communicating the narratives, inspirations, and creative processes behind each product asset.
Roles and Responsibilities
Phase 1: Discovery
Comparator Feature Analysis
Comparator IA Analysis
Card Sorting User Interviews
Suggested Approach
Phase 1: Ideation
User Archetypes
Ideate UX Concepts
Ideate UI Concepts
Mid-Fidelity Mockups
Phase 3: Production
Create Design Kit
Hi-Fidelity Mockups
Prototyping
Handoff Documentation
Phase 1:
DISCOVERY
Phase 1: Discovery
Comparator Feature Analysis
01
Feature Analysis
Examining elements present on the websites of our competitors to identify recurring patterns and elements that should be avoided.
02
IA & Card sorting
Identifying best practices in terms of website structure, gaining insights on how users would expect to navigate the studio store.
Comparators Analyzed
Feature Analysis
Key Findings
Hero Element
The comparators we looked at had several common patterns we noted that made their website brand-focused, easy to navigate, and told a powerful story.
Attention grabbing interactive elements
Strong hero animation
Unique hover effects
Lots of movement and page
Feature Analysis
Key Findings
Card Structure
Their card structure was also key to look at to understand hierarchy and, typography. Coupling this with delightful micro-interactions, made the viewing experience much cleaner
Quick glance product / course information
High level course information and featured courses had a different appearance
Product background information and option selection presented in a visual way (through icons)
Feature Analysis
Key Findings
Social Credit
Human elements adding social credit to the website and offerings/products fostering trust with the user.
Make the site feel human
Testimonials on courses
Community media section for products
Information on the instructor of a course
Phase 1: Discovery
Comparator IA Analysis
IA Analysis
Key Findings
Home Page
Then we did a quick study analyzing how comparators utilized hierarchy on their homepage.
Hero Section
Catches user attention
Often something dynamic with moving elements and/or interactive elements as well
Storytelling
Brings focus to the brand and the products
Gives the user a better feel for the brand and their style of products
Connecting
Provides a way to connect users to one another
Also provides support for the user when in need
IA Analysis
Key Findings
Product and Course Page
Group products based on items that are similar and then market those collections rather than the individual item. Quick product description and details. Good to include a “more like me section”
Important Notes
Simple yet informative
Research showed its imperative we include “who made this”
Great opportunity for storytelling using catchy copy
IA Analysis
Key Findings
Route to Purchase
It’s important here to use familiar language as certain input prompts are the exact same across many comparators.
Important Notes
Don’t reveal a big long form all at once, reveal the process step by step so it’s not overwhelming
Cart doesn’t feel detached from the main page
Have a pop-up rather than a whole other screen
Phase 1: Discovery
User Research
We did a card sorting activity with 4 participants, testing the findings we had with our IA analysis with our studio store content.
Objectives
Context (5 mins)
Explaining the project, icebreaker, participant’s role, end goal
Sorting (10 mins)
Sorting cards into categories
Ordering (5 mins)
Ordering them in terms of what participants would see on a website like the studio store
Debrief (5 mins)
Do your groupings tell the story of Athlon? Why?
Card Sorting
Key Findings
Findings
There was a disconnect between the digital products and the physical Athlon merch.
Some participants split up both sections in the navigation
Others suggested restructuring the website to just be merch-focused or course-focused.
Card Sorting
Key Findings
Findings
There was a disconnect between the digital products and the physical Athlon merch.
Some participants split up both sections in the navigation
Others suggested restructuring the website to just be merch-focused or course-focused.
Card Sorting
Key Findings
Findings
All participants added a featured section to the homepage, highlighting products or courses to sell
The first priority on the home page is to highlight the featured offerings
This structure would entice the user to explore more on the site and hopefully make a purchase
Phase 1: Discovery
Design Recommendations
Based on the card sorting activity as well as research from comparators, this is the recommended structure of our main pages.
Patterns
Home Page Recommendations
Suggested Structure:
Catches attention with hero and keeps the focus on the products
Adding a featured items section close to the top of the page
Start the storytelling about the brand on the homepage for the biggest impact
Clear division of physical merch and digital products (courses, templates)
Patterns
Product Page Recommendations
Suggested Structure:
Adding product/course background information such as “who made this”, “how was this made” to sprinkle in more storytelling
Linking the user to similar products
Adding credibility with reviews and testimonials
Phase 2:
IDEATION
Phase 2: Ideation
User Archetypes
Strategically define our target audience by their intention on the studio store and by how much they know about Athlon.
Phase 2: Ideation
UX Ideation
Here we consider what we want our website to feel like. What elements do we want to highlight to appeal to different users?
The Creative Conductor
This concept is designed to orchestrate a source of offerings for inspiration, a bridge to explore the artistry of Athloners.
Target User Group Goals:
Primary: seeking to explore well designed products from a company they like
Secondary: purchasing well-designed products.
The Express Lane
This concept is simple and quick, perfect for users that have a good understanding of what they want before they reach this site.
Target User Group Goals:
Primary: purchase a specific type of offering
Secondary: explore other types of offerings on the website
The Scenic Route
This concept seeks to close the gap between inspiration and acquisition. It is adaptive to both strangers and returning customers to explore and discover something worth taking home.
Target User Group Goals:
Primary: Searching for a brand to connect with
Secondary: interact with the site and have a purchasing experience worth coming back to
Chosen UX Concept
The Scenic Route +
This concept was chosen focusing on adaptability between exploration and purchase. Some elements were added from the other two concepts.
Fast and quick product search and checkout process from the Express Lane
Some focus put on Athloners, more explaining the brand, and allowing users to get inspired by design from the Creative Conductor
Phase 2: Ideation
UI Ideation
Now that we understand what the website should feel like, let’s figure out what UI design decisions we’re going to make.
Scale System
Determining different scales to direct our visual concept generation.
UI Concept
Presenting 3 different visual directions for the studio store.
Our Principles
While designing UI components we followed some key principles taken from our research and chosen UX concept.
Design Kit
Creating components for our UI assets.
Wildcard
Athlon-Focused
Straying away from Athlon brand vs strictly using the Athlon studio style guide / design system
Playful
Sophisticated
Having a playful aesthetic or more serious and sophisticated themes in the UI
Illustrative
Photographic
Using more illustration or a photographic style.
Classic Hip-Hop
This concept utilizes modern design and maintains most of Athlon illustration styles. It uses black & white mainly and the Athlon yellow and blue for highlights.
Wildcard
Athlon Focused
Playful
Sophisticated
Illustrative
Photographic
Funk Fusion
This concept is energetic as it uses all of Athlon’s colours and other isometric drawings as the main focus. Unlike the Classic Hip Hop concept, it uses black & white mainly as a highlight.
Wildcard
Athlon Focused
Playful
Sophisticated
Illustrative
Photographic
Acoustic Elegance
This concept uses dark earthy tones to evoke the sophistication of acoustic music. Rather than using illustration, Acoustic Elegance focuses on photos.
Wildcard
Athlon Focused
Playful
Sophisticated
Illustrative
Photographic
Chosen UI Concept
Classic Funk
A hybrid between Classic Hip Hop and Funk Fusion.
Leaning more towards the Classic style
Using mostly Athlon-specific style, illustrations, and components
Having funky elements (card hovers, marquee)
Adding a few elements from the Acoustic Elegance such as more photographic elements
Wildcard
Athlon Focused
Playful
Sophisticated
Illustrative
Photographic
Phase 3:
PRODUCTION
Phase 3: Production
Hi-Fidelity Mockups
Incorporating personality
Hi-Fi
Connecting the offerings to the brand.
Sprinkling visual excitement using brand language and styles on the page while informing users about the Athlon brand.
Incorporating personality
Hi-Fi
Social Credit & Transparency
Having community photos, testimonials for courses, reviews and material information for products to gain new users’ trust and sell the offerings to existing users.
Incorporating personality
Hi-Fi
Easy to find products
Highlighting featured elements, having filters that are easy to adjust and tailored products to returning users.
Phase 3: Production
Design System
Feel free to poke around our design system for this project :)This step included consolidating and componentizing our designs as well as doing a final round of accessibility checks for everything.
Phase 3: Production
Prototype
Then we moved on to prototyping the solution, take a look at the embedded prototype I made going through the project. Be sure to set the viewing size to "fit width" to view the prototype as intended.
