Overview
UX + UI / Responsive design / web + mobile + tablet ( Graceful degradation approach )Cosmossport.gr mission is providing high quality products for Athletes.
Build trust and relationships with partners and promoters by customizing
Easy navigation flow through the web & app for customers to find the products
they trust and love . Main products are Apparels & Skateboards .
Goals
User : Find & purchase the products they want with ease and hassle free.
Business : Increase revenue and engagement with retention of shoppers.
Product : Maintain high quality standards .
MY Role
UX UI Product designer - web & IOS APP
Conducting User research & interviews.
Defining user pain points & Goals.
Creating User flow & Site map.
Designing wireframes & UI prototypes.
Conducting usability studies.
Applying visual design principals & ideation.
Project Challenges
Although plenty of retail stores sells custom made skateboards & clothing, none of them provides social networking for the users to get engaged into fitness & creativity.
Most products in the market still exclusive for professional skateboarders, which is intimidating for young beginners to participate in the skateboarding community.
Empathy & discovery :
I conducted user interviews with 15 participants between age 18- 36, using open-ended questions to help me
gain insights into the user pain points and needs.
Research insights :
primary user group are both teenagers and working adults, skateboarding for them is a culture & self-expression.
Although some participants revealed to me that lack of motivation to get engaged in the skateboard community was
Due to competition and the lack of social network to allow beginners learn from the pro’s.
User needs
The website needs to enable the users to :
Order custom made skateboards & clothing online
Find out if the retailer provide shipping to the user area or state.
Check the price of the product items & quality
Contact emails or chat for assistance
Customize the order or pick from a list
Provide a clear UI for mobile and tablet since most users would access the online store
with other devices.
Define
Problem statement
Ben is an athlete who needs to purchase custom made products because he want to apply his own art into the design.
Ashley is a photographer who needs to connect with local skateboarders online, so she can take photos of their practices.
Hypothesis statement
If Athletes and artists creates an account with our online store then they can order custom made products and connect with one another.
Aligning business and customer goals
Insights
Business name & URL
SKATE & ENJOY www.cosmossport.gr
Main services:
Sports wear & custom made skateboards.
Customization & products :
Skateboards
Men & Women clothing
Accessories
Custom made
Blogs & Events
Main target audience :
Athletes
Teenagers male & female
Adult professionals mid- age
Local artists
Marketing pitch & niche :
We provide you with high quality products that
supports local artists and connect you with like minded people.
Defining Customer needs
3 defined categories of target audience were defined based on market research report.
Professional adults age 27- 38
Males & females age 10- 27
Photographers, artists and creators.
Empathy map
User Task flow : Find product> Clicks on product description > Choose size> Add to cart> Enters shipping and payment info > Receives task confirmation> Receives email confirmation and tracking details.
Personas
Developing use cases + paper wireframes
4Cs framework
Consistency - Continuity - Complimentary - Contextual
I began with sketches and paper wireframes, taking the time to draft iteration of each screen of the app
on paper ensured that all elements that made it to the digital wireframes would be well- suited to address
The user pain points for the Home screen I prioritized a quick & easy ordering flow to help users save time.
Sitemap
Creating a sitemap helped me to have an open perspective and a general overview of the website functions & user flow which helps my team and stakeholders see how all the screens connects smoothly
High-Fidelity Wireframes
Conducting Usability study to inform design.
Type of study : Qualitative User Interviews - remote USA
Participants : 15
Length : 20- 30
User Insights
1- Cart
Once at the check out screen users didn't have a way to edit the item quantity or remove items in the cart.
User Challenges
2- Check out
Users weren’t able to easily copy the shipping address information into the billing info field.
Findings
3 - Account
During the check out process there wasn't a clear way users to log into their account to pre-fill previous billing and shipping info.
Prototypes
Quotes from users research
“Easy & clean design, I found what I was looking for in just seconds! also was able to share my recent article via Blog !.”
— Stephanie jones , professional skater & copy writer.
“We love this kind of initiatives, that engages the young generation. we definitely want to sell our products at this online store.”
— Troy & Melissa goldsmith
local artists and business owners
Conclusions & takeaways
What I have learned
Designing and ideating a responsive e-commerce website, allowed me to learn how to apply design thinking process.
Iterating and diving deep into the user problem and pain points.
Understanding not to jump fast into assumptions for solutions without having concrete insights based on user research and interviews.
Finding that the user experience is the foundation of a complete polished design which enables user to find it usable, useful, equitable and enjoyable.
Applying my design system and sticker sheet that helps the developing team during hands- off phase.
Creating design system in collaboration with Google Material design & Apple design system, which enabled the design components and elements
To comply with accessibility and assistive technologies.
Note for Stakeholders & hiring managers
Hope you have enjoyed the design flow and find it easy to use. Please keep in mind that all my designs are customizable
and can be personalized, to meet your business needs and brand mission achieving better KPI results & higher conversion rates.
feel free to contact me with questions or requests.
Thank you for your time.