UX + UI / Responsive design / IOS Responsive web app for e-commerce
Responsive we apps are faster and cheaper to build no need to be downloaded. However the challenge
here Is that internet connection is required in order for the user to access the web app.
Another challenge is maintaining the web app level of responsiveness across all screens and platforms .
Business profile : cosmossports.gr goal is to make shopping fun, fast and easy for everyone.
the typical user is between 18 - 40 years old.
Project overview
Responsibilities:
User research interviews, empathy and user journey map.
Defining user pain points, frustrations and problems
Designing wireframes / prototypes
Conducting usability studies
Applying Visual design principals & conceptual ideation.
The website is created to meet the user needs and make it easy and accessible for everyone to find products they are looking for.
Project goals
Design for users an online shop for mobile phones IOS .
Reach all types of users with the need to find high quality brands .
Support local artist to promote creative custom made products.
Create a user experience designs with clear UI for mobile to reflect trust & assurance.
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
IOS APP 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
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 Customers goals
Insights
Business name & URL
SKATE & ENJOY www.cosmossport.gr
Main services:
Sports wear and 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.
Ideate
3 defined types based on real Athletes.
Professional adults age 27- 38
Males & females age 10- 27
Photographers, artists and creators.
Personas
Design
Developing use cases + paper wireframes + user story
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
Wireframes
Usability study findings
Type of study : Qualitative unmoderated
Participants : 15
Length : 20- 30 minutes
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.
2- Check out
Users weren’t able to easily copy the shipping address information into the billing info field.
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.
Hi fidelity 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 for mobile , 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.
