Alicja Kalemba Portfolio

UX/UI Case Study

KicksZone - an e-commerce responsive website with streetwear sneakers, designed primarily for Gen Z users

Main objective

To gain customers by developing a website that appeals to users interested in streetwear, especially Gen Z, where they can purchase various branded sneakers in a simple and fast manner

Non-commercial, team project of three friends: me and two developers

tools

My role

Research, Design, Prototyping

duration

1 month, Mar 2024-Apr 2024

Problem

Main question

What would make young people of Z Generation interested in streetwear willingly visit the website and make purchases of sneakers there?

Problem statement

Create a website with streetwear sneakers that would attract the widest group of streetwear target audience - Gen Z - to buy from there. The key was to tailor the website for this target audience, having in mind that some websites of competitors lack in features important to these users, including:

social media integration, hindering signing up and sharing products
authentic engagement features such as user-generated content sharing and feedback
inclusivity - overlooking the diverse preferences and identities within the streetwear community appearing in the absence of unisex categories for non-binary users, leading to a sense of exclusion and frustration of some users
streetwear drops and raffles being effectively centralized - users find it hard to stay informed about exclusive releases

social media integration, hindering signing up and sharing products
authentic engagement features such as user-generated content sharing and feedback
inclusivity - overlooking the diverse preferences and identities within the streetwear community appearing in the absence of unisex categories for non-binary users, leading to a sense of exclusion and frustration of some users
streetwear drops and raffles being effectively centralized - users find it hard to stay informed about exclusive releases

What did i need to get to know

1. Streetwear market information regarding Gen Z
2. Target user (Gen Z) characteristic, their shopping behavior and web design preferences

Solution

What did I do to solve the problem

Researched on the characteristics of Gen Z users, both generally and specifically streetwear fans, focusing on their shopping behavior, needs and preferences

Analyzed the streetwear market, focusing mostly on footwear (sneakers), having Gen Z users' perspective in mind

Constructed questions and conducted user interviews to confirm findings and make sure what are users expectations of that kind of website

Designed and prototyped comprehensive product available as a responsive website, based on research, with data-driven approach

The website features

🤳 Community Engagement and Social Media Integration:

User reviews with user-generated content;

'Share on social media' buttons on product pages and post-purchase;

🤳 Community Engagement and Social Media Integration:

User reviews with user-generated content;

'Share on social media' buttons on product pages and post-purchase;

🔱 Omnichannel Approach:

'Follow us' buttons for social media;

Address and photos of the physical store

🔱 Omnichannel Approach:

'Follow us' buttons for social media;

Address and photos of the physical store

💅 Gen Z Aesthetics and Preferences:

Engaging visual content with HD streetwear images, video backgrounds, and animations;

Bold, eye-catching colors: green, red, orange

💅 Gen Z Aesthetics and Preferences:

Engaging visual content with HD streetwear images, video backgrounds, and animations;

Bold, eye-catching colors: green, red, orange

🎲 Gratification and Gamification:

User accounts for collecting points redeemable for discounts;

Sneaker drops and raffles for signed-up users to win limited sneakers

🎲 Gratification and Gamification:

User accounts for collecting points redeemable for discounts;

Sneaker drops and raffles for signed-up users to win limited sneakers

💸 Affordability and Payment Flexibility:

Products priced within 100-500€, focusing on affordability for young users;

Payment options via cards and payment apps

💸 Affordability and Payment Flexibility:

Products priced within 100-500€, focusing on affordability for young users;

Payment options via cards and payment apps

🤝 User-Friendly Design:

Simple, intuitive navigation with minimal steps and text;

Brief product specifications and size tables;

Easy-contact form on the 'Reach Us' page

🤝 User-Friendly Design:

Simple, intuitive navigation with minimal steps and text;

Brief product specifications and size tables;

Easy-contact form on the 'Reach Us' page

😊 Inclusivity and Personalization:

No gender categories—only female/male feet sizing;

'❤️' button to save products and personalized "You may also like" suggestions;

"Our Mission/Purpose" page highlighting brand ethics, authenticity, and transparency;

Clear Terms and Conditions and Privacy Policy

😊 Inclusivity and Personalization:

No gender categories—only female/male feet sizing;

'❤️' button to save products and personalized "You may also like" suggestions;

"Our Mission/Purpose" page highlighting brand ethics, authenticity, and transparency;

Clear Terms and Conditions and Privacy Policy

What did I do to balance business and user benefits

I meticulously analyzed the target user and competitors. Based on data:

I designed a website tailored to Gen Z preferences
I optimized the main flow - sneaker purchase - making it fast by adhering to the three-tap rule

I meticulously analyzed the target user and competitors. Based on data:

I designed a website tailored to Gen Z preferences
I optimized the main flow - sneaker purchase - making it fast by adhering to the three-tap rule

Key solution

I incorporated features such: reviews with user-generated content, social media sharing, rewards, product drops and raffle participation. These features make the website engaging through gamification, gratification, and community integration, giving it a competitive edge over others that lack these important aspects for this user group.

Design Process

DISCOVER

Find out as much as you can about the case / problem

Strategy:

Product Objectives
Target User Analysis
Market Research
Competitor Analysis
User Interviews
Personas, Empathy Maps
User Journey

DEFINE

Synthesize data and define conclusions

Scope:

Research Summary
How Might We
HMW Solutions - Functional + Content Requirements Made as User Stories

DEVELOP

Try to create optimal solutions. Iterate

Structure:

Information Architecture (Sitemap)
Interaction Design (User Task Flow)

Skeleton:

Hi-Fi Wireframes

Iterative user testing and getting feedback through the process

DELIVER

Finalize, validate, and implement solutions

Surface:

Design System
Hi-Fi Screens (Mockups)
Prototype
User Acceptance Testing
What This Project Taught Me

DISCOVER

Find out as much as you can about the case / problem

Strategy:

Product Objectives
Target User Analysis
Market Research
Competitor Analysis
User Interviews
Personas, Empathy Maps
User Journey

DEFINE

Synthesize data and define conclusions

Scope:

Research Summary
How Might We
HMW Solutions - Functional + Content Requirements Made as User Stories

DEVELOP

Try to create optimal solutions. Iterate

Structure:

Information Architecture (Sitemap)
Interaction Design (User Task Flow)

Skeleton:

Lo-Fi Wireframes
Hi-Fi Wireframes

Iterative user testing and getting feedback through the process

DELIVER

Finalize, validate, and implement solutions

Surface:

Design System
Hi-Fi Screens (Mockups)
Prototype
User Acceptance Testing
What This Project Taught Me

DISCOVER

Find out as much as you can about the case / problem

Strategy:

Product Objectives
Target User Analysis
Market Research
Competitor Analysis
User Interviews
Personas, Empathy Maps
User Journey

DEFINE

Synthesize data and define conclusions

Scope:

Research Summary
How Might We
HMW Solutions - Functional + Content Requirements Made as User Stories

DEVELOP

Try to create optimal solutions. Iterate

Structure:

Information Architecture (Sitemap)
Interaction Design (User Task Flow)

Skeleton:

Lo-Fi Wireframes
Hi-Fi Wireframes

Iterative user testing and getting feedback through the process

DELIVER

Finalize, validate, and implement solutions

Surface:

Design System
Hi-Fi Screens (Mockups)
Prototype
User Acceptance Testing
What This Project Taught Me

DISCOVER - Strategy

Product Objectives

Deliver a streamlined checkout process

Design a straightforward and optimized checkout process. Key components the website should have: landing page, list of products, details of products, shopping cart, checkout process.

Purpose: Improve the conversion rate by reducing cart abandonment.

Design a straightforward and optimized checkout process. Key components the website should have: landing page, list of products, details of products, shopping cart, checkout process.

Purpose: Improve the conversion rate by reducing cart abandonment.

Engage Gen Z

Incorporate elements that engage Gen Z users, such as social media integration, user-generated content, gamification and informal tone of voice.

Purpose: Enhance user engagement and increase sign-ups and conversions.

Incorporate elements that engage Gen Z users, such as social media integration, user-generated content, gamification and informal tone of voice.

Purpose: Enhance user engagement and increase sign-ups and conversions.

Target User Analysis

DEMOGRAPHICS

Age group: 15-28 (Gen Z); Gender: unisex; Location: Europe; Income: less than $40,000 annually; Education: high school and higher; Profession: all professions

Short attention span

8 seconds rule - quickly grab attention, design minimalistic, do not clutter

Visuals

Gen Z prefer bold colors (Yellow, Green), HQ images, videos, animations - visuals over text

Reviews

Gen Zs are particular about reading them and are eager to write their own

Omnichannel strategy

Take care of maintaining brand's website, social media, brick-and-mortar stores

Personalization and authenticity

These are main values Gen Z find important - include UGC content, “you might like”, filters

Social media integration

Instagram, TikTok are mainly used by Gen Z - include Log in, Sign up, Share, Follow via it

Mobile-First Design

Prioritize seamless UX for mobile devices, as Gen Z primarily use them

Three-Tap Rule

Simple navigation, just few steps for users to find what they're looking for

Market Research

Demographics

Majority are under 25, often urban professionals with active online lifestyles

Annual income typically around $40,000 or less

Customer behavior

Streetwear customers are highly influenced by social media, with platforms like Instagram and TikTok being significant drivers

They embrace the 'drop' model, where limited-edition items are released periodically, creating hype and exclusivity
They like to shop online but place high value to also visit the brick-and-mortar stores

Shopping preferences

Footwear, especially sneakers, is the most desired streetwear product
Social consciousness and brand’s purpose are important to them

They value comfort, exclusivity, and cool aesthetics

Market trends

Streetwear market continues to grow, expected to reach $193.21 billion by 2027

To target Gen Z audience, streetwear brands go with omnichannel strategy (website, social media, brick-and-mortar stores)
Sustainability, 'sneaker culture', and casual, comfortable shoes are prominent trends

Demographics

Majority are under 25, often urban professionals with active online lifestyles

Annual income typically around $40,000 or less

Customer behavior

Streetwear customers are highly influenced by social media, with platforms like Instagram and TikTok being significant drivers

They embrace the 'drop' model, where limited-edition items are released periodically, creating hype and exclusivity
They like to shop online but place high value to also visit the brick-and-mortar stores

Shopping preferences

Footwear, especially sneakers, is the most desired streetwear product
Social consciousness and brand’s purpose are important to them

They value comfort, exclusivity, and cool aesthetics

Market trends

Streetwear market continues to grow, expected to reach $193.21 billion by 2027

To target Gen Z audience, streetwear brands go with omnichannel strategy (website, social media, brick-and-mortar stores)
Sustainability, 'sneaker culture', and casual, comfortable shoes are prominent trends

Competitor Analysis

I chose 4 e-commerce websites with streetwear sneakers - 3 multi-brand retailers (2 based in Europe, 1 based in USA) and 1 flagship leading streetwear brand which is Nike. I chose multi-brand retailers competitors by popularity, based on amount of Instagram followers. I compared the content of the websites and based on that I determined what to analyze.

direct

direct

indirect

indirect

User Interviews

Gaining insights from desk research, I wanted to deeply understand users' pain points and expectations regarding file converters. I conducted five in-depth interviews (IDIs) with potential users to analyze their experiences and frustrations with streetwear shopping and e-commerce in general.

Examples of the questions i asked:

How often do you discover new brands or products on social media? Which platforms do you use the most for this?
What do you usually do when you find a product you like on social media? (e.g., follow the brand, check reviews, save the post, or share it with friends?)
How much do reviews and user-generated content (like unboxings or outfit posts) influence your decision when buying streetwear or sneakers?
How do you feel about brands that ask for customer feedback? Does it make you more likely to engage with them?

How often do you discover new brands or products on social media? Which platforms do you use the most for this?
What do you usually do when you find a product you like on social media? (e.g., follow the brand, check reviews, save the post, or share it with friends?)
How much do reviews and user-generated content (like unboxings or outfit posts) influence your decision when buying streetwear or sneakers?
How do you feel about brands that ask for customer feedback? Does it make you more likely to engage with them?

Personas & Empathy Maps

SOFIA, 20 YO

University student, studying graphic design, part-time job

SOFIA, 20 YO

University student, studying graphic design, part-time job

Gender: woman

Income: less than $40,000 annually

Location: Berlin, Germany

Social media:

Fav brands:

BIO

Sofia is a creative and trend-conscious young woman who is passionate about streetwear fashion. She spends a lot of time on social media platforms like Instagram and TikTok, where she discovers new styles and connects with like-minded individuals. Sofia enjoys expressing her personality through her fashion choices and seeks brands that align with her values of inclusivity and authenticity.

BIO

"Stay comfortably true to yourself"

FRUSTRATIONS & NEEDS

She:

wants to stay connected with her favorite brands and share her insights with her friends
desires affordable yet stylish streetwear sneakers within the $100-300 price range
seeks a seamless mobile shopping experience, with ability to save their personal data so she doesn’t need to provide it again during next purchases
dislikes intrusive pop-up ads

She:

wants to stay connected with her favorite brands and share her insights with her friends
desires affordable yet stylish streetwear sneakers within the $100-300 price range
seeks a seamless mobile shopping experience, with ability to save their personal data so she doesn’t need to provide it again during next purchases
dislikes intrusive pop-up ads

USER GOAL - STORY

As a Gen Z customer, I want to have the ability to write comments and reviews on products so that I can share my feedback with brands and fellow shoppers, contributing to the community and enhancing transparency.

SAYS

I love sharing my streetwear finds with my friends online

FEELS

Excited when she finds a new item that perfectly matches her style

THINKS

I hope they have my size available

DOES

Regularly posts outfit photos on Instagram and engages with streetwear communities

LUCA, 22 YO

College student, studying business, part-time job

LUCA, 22 YO

College student, studying business, part-time job

Gender: man

Income: less than $40,000 annually

Location: Milan, Italy

Social media:

Fav brands:

BIO

Luca is a fashion-forward young man with a keen interest in streetwear and sneaker culture. He is active on social media platforms like Instagram and YouTube, where he follows influencers and brands for style inspiration. Luca enjoys experimenting with different looks and often shops online for exclusive drops and limited-edition releases.

BIO

“Be informed, stay on your toes”

FRUSTRATIONS & NEEDS

He:

seeks a seamless online shopping experience with minimalistic navigation

wants to stay informed about new raffles and drops
values authenticity and transparency from brands regarding their products and business practices
prefers visually oriented design with minimal text
enjoys engaging with streetwear communities and sharing his latest purchases on social media

He:

seeks a seamless online shopping experience with minimalistic navigation

wants to stay informed about new raffles and drops
values authenticity and transparency from brands regarding their products and business practices
prefers visually oriented design with minimal text
enjoys engaging with streetwear communities and sharing his latest purchases on social media

USER GOAL - STORY

As a fashion-forward college student, I want to stay informed about new raffles and drops so that I have the chance to win limited sneakers.

SAYS

Wow, this sneakers drop looks dope!

FEELS

Anxious about making the right purchase decision

THINKS

I wonder if I will find sneakers within my budget

DOES

Watches unboxing videos and reads reviews before making a purchase

ALEX, 24 YO

Freelance photographer

ALEX, 24 YO

Freelance photographer

Gender: non-binary

Income: less than $40,000 annually

Location: London, UK

Social media:

Fav brands:

BIO

Alex is a creative individual who embraces fluidity in both fashion and identity. They have a passion for streetwear and often blur the lines between traditional gender norms with their style choices. They spend a lot of time on social media platforms, advocating for social justice issues and connecting with like-minded individuals.

BIO

"Express yourself loudly"

FRUSTRATIONS & NEEDS

They:

value inclusivity and appreciates brands that offer gender-neutral options
seek a shopping experience that respects their identity and preferences without assumptions
enjoy discovering unique and statement pieces that reflect their individuality
express their style and opinions with no hesitation, so they would want to have the ability to review products and their customer experience

They:

value inclusivity and appreciates brands that offer gender-neutral options
seek a shopping experience that respects their identity and preferences without assumptions
enjoy discovering unique and statement pieces that reflect their individuality
express their style and opinions with no hesitation, so they would want to have the ability to review products and their customer experience

USER GOAL - STORY

As a non-binary individual, I want to share my streetwear finds on social media so that I can express my unique style and connect with like-minded individuals.

SAYS

I want sneakers that match my style, regardless of traditional gender labels

FEELS

Excluded by websites dividing categories for men and women

THINKS

I need to find the perfect sneakers to complete my look

DOES

Checks reviews before making a purchase

User Journey

USER MAIN GOALS ON WEBSITE

Search for sneakers (search bar, categories)
Search by preferences, including price (filters and sorting)
Add item to cart
Seamless checkout and purchase (various payment options, three tap rule, progress status)
Find break-and-mortar stores’ locations

Search for sneakers (search bar, categories)
Search by preferences, including price (filters and sorting)
Add item to cart
Seamless checkout and purchase (various payment options, three tap rule, progress status)
Find break-and-mortar stores’ locations

Discovering trends and releases.

User:

engages with social media to discover new streetwear trends and sneaker releases
comes across sponsored posts or influencer content showcasing the latest drops

Discovering trends and releases.

User:

engages with social media to discover new streetwear trends and sneaker releases
comes across sponsored posts or influencer content showcasing the latest drops

Exploring the website.

User:

clicks on links or ads leading to the website
lands on a landing page and engage with interactive content

Exploring the website.

User:

clicks on links or ads leading to the website
lands on a landing page and engage with interactive content

Browsing and filtering.

User:

navigates through different website sections, filtering sneakers based on preferences

Making the purchase.

User:

adds selected sneakers to cart and proceeds to checkout
completes the payment process, choosing either card or payment service

Sharing and feedback.

User:

after completing the purchase, shares selected products on social media

Research and engagement.

User:

reads product descriptions, checks reviews
engages with user-generated content
shares product on social media to get insights from friends
makes purchase decision

Research and engagement.

User:

reads product descriptions, checks reviews
engages with user-generated content
shares product on social media to get insights from friends
makes purchase decision

Making the purchase.

User:

adds selected sneakers to cart and proceeds to checkout
completes the payment process, choosing either card or payment service

Sharing and feedback.

User:

after completing the purchase, shares selected products on social media

Browsing and filtering.

User:

navigates through different website sections, filtering sneakers based on preferences

Completion and satisfaction.

User:

after completing the purchase, looks forward to receiving their order
is satisfied with their shopping experience and excited about new sneakers
provides feedback directly to the brand through comments or reviews

Completion and satisfaction.

User:

after completing the purchase, looks forward to receiving their order
is satisfied with their shopping experience and excited about new sneakers
provides feedback directly to the brand through comments or reviews

DEFINE - Scope

Research Summary

Community - the key factor

Gen Zs:

are called “communaholics” – the key factor for them is community, being on social media
start their purchase journey often on social media, they are influenced by social media, discovering products there
are willing to follow their favorite brands on social media and connect sharing their insights
value reading reviews, while making purchase decisions. They also like to have the ability to leave their opinions to contribute to the company's growth
like to connect with like-minded people and shop in brick-and-mortar stores
value authenticity - it is the key to engage with them

Gen Zs:

are called “communaholics” – the key factor for them is community, being on social media
start their purchase journey often on social media, they are influenced by social media, discovering products there
are willing to follow their favorite brands on social media and connect sharing their insights
value reading reviews, while making purchase decisions. They also like to have the ability to leave their opinions to contribute to the company's growth
like to connect with like-minded people and shop in brick-and-mortar stores
value authenticity - it is the key to engage with them

Talking about money

Gen Zs:

are brand loyal but also young and not so wealthy: “Generally speaking, younger people have the least savings, the least purchasing power, and the least financial security. But this is exactly where brands have the opportunity to win their favor; Gen Z are looking for help, and loyalty rewards offer just that"
tend to buy sneakers worth 100-300 (rather 500)$ - affordability and availability is key for them (they are young users, often students)
pay mostly by debit card and in some percent (13%) by mobile payments service (eg. Apple Pay)

Gen Zs:

are brand loyal but also young and not so wealthy: “Generally speaking, younger people have the least savings, the least purchasing power, and the least financial security. But this is exactly where brands have the opportunity to win their favor; Gen Z are looking for help, and loyalty rewards offer just that"
tend to buy sneakers worth 100-300 (rather 500)$ - affordability and availability is key for them (they are young users, often students)
pay mostly by debit card and in some percent (13%) by mobile payments service (eg. Apple Pay)

Values & Preferences

Gen Zs:

prefer bold, playful aesthetic with authentic photography and colorful, eye-catching accents (colors: green, yellow, orange, purple)  
prefer video/ image over text
are mobile first
are values-driven – socially aware, place high importance on brand ethics - authenticity + transparency are crucial
are LGBT friendly. Non-binary users spend on streetwear more than female and male
like personalized experiences
are impatient - 8 second rule - don't grab attention by pop-ups: “Gen Z is the only generation to list pop-ups forms as their top frustration” – it interferes and delays user journey and straightforward access to content
value facts and brief real data
care about security - “Gen Z is cohort of people that are more likely to read Terms and Conditions or Privacy Policy”
“Simple design, fewer steps, fewer clicks, less text to read (…) Less is more”!

Gen Zs:

prefer bold, playful aesthetic with authentic photography and colorful, eye-catching accents (colors: green, yellow, orange, purple)  
prefer video/ image over text
are mobile first
are values-driven – socially aware, place high importance on brand ethics - authenticity + transparency are crucial
are LGBT friendly. Non-binary users spend on streetwear more than female and male
like personalized experiences
are impatient - 8 second rule - don't grab attention by pop-ups: “Gen Z is the only generation to list pop-ups forms as their top frustration” – it interferes and delays user journey and straightforward access to content
value facts and brief real data
care about security - “Gen Z is cohort of people that are more likely to read Terms and Conditions or Privacy Policy”
“Simple design, fewer steps, fewer clicks, less text to read (…) Less is more”!

Streetwear thing

“Streetwear introduced a new way of bringing products to the market, known as drops” – include page with Drops

Brands included: Adidas, Air Jordan, ASICS, Bape, Converse, Crocs, Fila, New Balance, Nike (the most popular sneaker brand holding 27,4% global sneaker market), Puma, Under Armour, Vans

“Streetwear introduced a new way of bringing products to the market, known as drops” – include page with Drops

Brands included: Adidas, Air Jordan, ASICS, Bape, Converse, Crocs, Fila, New Balance, Nike (the most popular sneaker brand holding 27,4% global sneaker market), Puma, Under Armour, Vans

Research sources:
https://strategyand.hypebeast.com/streetwear-report
https://cdn.nrf.com/sites/default/files/2018-10/NRF_GenZ%20Brand%20Relationships%20Exec%20Report.pdf
https://www.diva-portal.org/smash/get/diva2:1580287/FULLTEXT01.pdf%20-
https://www.icsc.com/uploads/about/2023ICSC_Gen_Z_Report.pdf
https://gitnux.org/sneaker-industry-statistics/
https://finance.yahoo.com/news/streetwear-market-size-2023-share-075206390.html
https://www.marketingdive.com/news/study-more-than-80-of-gen-zers-report-social-media-influences-shopping-ha/447303/
https://www.rollingstone.com/product-recommendations/lifestyle/best-streetwear-brands-1134582/
https://www.gq.com/story/best-sneaker-brands
https://www.shopify.com/uk/enterprise/blog/how-retailers-use-streetwear-brands-to-reach-todays-consumers
https://www.shopify.com/enterprise/blog/social-commerce-strategy
https://voymedia.com/boosting-ecommerce-ux-design-to-reach-gen-z/
https://www.omniaretail.com/blog/gen-z-buying-ecommerce-behaviour
https://www.simplicitydx.com/blogs/gen-z-online-shopping-trends-and-social-commerce
https://www.talon.one/blog/gen-z-consumer-behavior-what-you-need-to-know
https://pushpushgo.com/en/blog/marketing-to-generation-z/
https://www.iihglobal.com/blog/web-design-for-generation-z-crafting-digital-spaces-for-the-next-generation/
https://mackmediagroup.com/website-development-for-gen-zs-how-to-adapt-to-the-new-age-users/
https://www.emarketer.com/content/gen-zs-path-purchase
https://www.emarketer.com/insights/generation-z-facts/
https://blog.gwi.com/trends/3-us-gen-z-retail-trends/
https://www.surveymonkey.com/curiosity/gen-z-social-media-and-shopping-habits/
https://tinuiti.com/blog/ecommerce/gen-z-trends/
https://www.goinflow.com/blog/gen-z-shopping-habits-marketing-strategies/
https://www.spinxdigital.com/blog/designing-websites-for-generation-z/
https://medium.com/@soltervision/generation-z-often-referred-to-as-gen-z-represents-the-cohort-born-from-the-mid-1990s-to-the-909c8bc41809

How Might We

I was looking for answers to two key general questions: How might I meet users' needs? How might I reconcile business goals? I broke down these into more concise questions, applying HMW formula from Interaction Design Foundation: “How might we” + Intended Action (as an action verb) + “for” + Potential User (as the subject) + “so that” + Desired Outcome.

How might we:

make it easier for Gen Z users to share products and sign up seamlessly using their favorite social platforms?
help Gen Z users feel more connected and valued within the streetwear community?
ensure non-binary users feel seen, respected, and included while shopping for streetwear?
help streetwear enthusiasts stay informed and access exclusive drops and raffles more easily?
create an immersive visual experience that keeps Gen Z users engaged?
make the shopping experience feel more personalized and relevant for Gen Z users?
create an engaging shopping experience that encourages Gen Z users to return?
help young users afford their favorite streetwear without financial stress?
streamline the shopping journey?

make it easier for Gen Z users to share products and sign up seamlessly using their favorite social platforms?
help Gen Z users feel more connected and valued within the streetwear community?
ensure non-binary users feel seen, respected, and included while shopping for streetwear?
help streetwear enthusiasts stay informed and access exclusive drops and raffles more easily?
create an immersive visual experience that keeps Gen Z users engaged?
make the shopping experience feel more personalized and relevant for Gen Z users?
create an engaging shopping experience that encourages Gen Z users to return?
help young users afford their favorite streetwear without financial stress?
streamline the shopping journey?

HMW Solutions - Functional + Content Requirements Made as User Stories (Examples)

✅ The system should allow users to share products on social media from product pages and post-purchase confirmations.

As a social shopper, I want to share products on social media so that I can ask my friends for opinions before purchasing.

✅ The system should allow users to share products on social media from product pages and post-purchase confirmations.

As a social shopper, I want to share products on social media so that I can ask my friends for opinions before purchasing.

✅ The system should allow users to write reviews and upload product photos.

As a sneaker enthusiast, I want to upload a photo with my review so that I can share my experience with others.

✅ The system should allow users to write reviews and upload product photos.

As a sneaker enthusiast, I want to upload a photo with my review so that I can share my experience with others.

✅ The system should provide a ‘❤️’ button for users to save favorite products.

As a returning user, I want to save my favorite products so that I can easily find them later.

✅ The system should provide a ‘❤️’ button for users to save favorite products.

As a returning user, I want to save my favorite products so that I can easily find them later.

✅ The system should implement responsive design to ensure compatibility with various devices, especially mobile.

As a mobile user, I want a smooth shopping experience so that I can browse and buy without frustration.

✅ The system should implement responsive design to ensure compatibility with various devices, especially mobile.

As a mobile user, I want a smooth shopping experience so that I can browse and buy without frustration.

✅ The system should provide a ‘Unisex Sneakers’ category or remove gender-based filtering entirely.

As a non-binary shopper, I want unisex sneaker options so that I don’t feel forced to choose between men’s and women’s categories.

✅ The system should provide a ‘Unisex Sneakers’ category or remove gender-based filtering entirely.

As a non-binary shopper, I want unisex sneaker options so that I don’t feel forced to choose between men’s and women’s categories.

DEVELOP - Structure

Information Architecture - Sitemap

Interaction Design - User Checkout Task Flow

DEVELOP - Skeleton

Hi-Fi Wireframes

Breakpoints and grid

Mobile 4 columns, gutter 16, margins 16

Tablet 8 columns, gutter 24, margins 24

Desktop 12 columns, gutter 24, margins 24

Large Desktop 12 columns, gutter 24, margins 24

Mobile wireframes

DELIVER - Surface

Design System

typography

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

Montserrat

Bold

Medium

Regular

Light

color palette

The color palette for this design was primarily influenced by the existing logo but my choices about it were supported by research on color psychology and its relevance to Gen Z. This palette is crafted to capture the essence of streetwear culture and to be visually stimulating and appealing to Gen Z, who appreciate individuality, bold, vibrant, yet harmonious aesthetics, and modern design.

#000000

#FFFDF4

#FF6240

#FFD363

#CAE929

✅Contrast Checker for colors fulfilling WCAG conditions - all colors passed AAA level. Achieving AAA conformance means that the website meets the highest standard for color contrast, ensuring that the text is highly readable for users with visual impairments.

Made with realtimecolors.com

Red (#FF6240)

Energizing and attention-grabbing, symbolizing youth and excitement, aligning with the dynamic nature of streetwear and resonating with Gen Z's bold fashion choices.

Orange (#FFD363)

Cheerful and welcoming, promoting optimism and positivity. It complements the primary red by providing a softer, more approachable hue, appealing to Gen Z's preference for lively yet balanced visuals.

Bright Lime Green (#CAE929)

Refreshing and energizing, symbolizing innovation and modernity, adding an accent that draws attention without overwhelming the user.

Soft Off-White (#FFFDF4)

Provides a clean, neutral canvas that enhances the vibrant colors, ensuring readability and user comfort. It supports the minimalist design preferences favored by Gen Z, making the site pleasant to browse.

Black (#000000)

Ensures maximum readability and contrast.

Sources:

https://www.futuremediahubs.com/next-generation-hub/news/power-gen-z-colors

https://www.fastcompany.com/90865212/once-you-spot-gen-zs-favorite-colors-youll-see-them-everywhere
https://s3.amazonaws.com/uxpin/uxpin_color_theory_in_web_ui_design.pdf
https://manvisinghwal.medium.com/color-theory-in-ui-design-e0727d84550b

Sources:

https://www.futuremediahubs.com/next-generation-hub/news/power-gen-z-colors

buttons

Navigation Desktop

deafult

ALL SNEAKERS

hover

ALL SNEAKERS

Primary

deafult

Shop now

hover

Shop now

Secondary

deafult

Check the Drops

hover

Check the Drops

Confirm

deafult

Keep browsing

hover

Keep browsing

Alternative

deafult

See favorites

hover

See favorites

Hi-Fi Screens

Prototype

User flow from landing page to purchase - Guest user

User signs up / Purchase / Website preview

User Acceptance Testing

objective

The project aimed to create an engaging and user-friendly streetwear sneaker website tailored to Gen Z customers. The primary business requirements were to streamline the checkout process and enhance Gen Z engagement through social media integration, user-generated content, and gamification. User goals focused on enabling product reviews and comments, staying informed about new raffles and drops, and sharing streetwear finds on social media. To ensure the design met both business and user requirements, and to evaluate the design's efficiency, I conducted UAT with a few Gen Z participants.

Methodology

Participants: I recruited five participants representing Gen Z, aged between 21-28. These individuals were the same I interviewed in user in-depth interviews.

Testing environment: I met participants in person and conducted the testing at their homes.

Tools: Participants tested the prototype using the Figma mobile app on their personal smartphones.

Qualitative data collection:

Participant feedback
Observations of user behavior and interaction patterns
Think-aloud protocol during testing

Qualitative data collection:

Participant feedback
Observations of user behavior and interaction patterns
Think-aloud protocol during testing

scenarios & Test insights

Scenario: Participants complete a purchase from product selection to payment as logged in user.

Goal: Verify that the checkout process is straightforward.

Insight: Participants appreciated the minimal number of steps required during the checkout process and the progress bar indicating how many steps remained. Participants liked the idea of getting the discount code for every purchase, finding it motivating for creating an account on KicksZone and making more purchases.

Scenario: Participants want to share a product on their social media profiles.

Goal: Ensure ease of sharing the product.

Insight: Participants easily found the "Share on social media" button on the product page. They stated that the button is well-placed and encourages them to share the product.

Scenario: Participants sign up with social media profile.

Goal: Ensure ease of signing up and integration with major social media platforms.

Insight: Participants appreciated the social media sign-up buttons, while Google and Facebook accounts were the most commonly used for signing to any site on the web they used.

Scenario: Logged in participants write a review on a product page.

Goal: Confirm the functionality of the reviewing system.

Insight: Participants found the Write a Review form intuitive. They appreciated the "Helpful? Yes/No" feature alongside reviews, which provided reliability through social approval.

Scenario: Participants sign up for being able to join the drops' raffles.

Goal: Confirm the functionality of the drops' raffles feature.

Insight: Notifications were described as clear and easy to find in the global navigation. Participants were enthusiastic about the idea of the drops' raffles, finding them exciting.

What This Project Taught Me

I enhanced understanding of the design process. I learned that there should be user journey done in the process, and I included it in the project
I improved my UI and Figma skills, mainly in creating components effectively. I gained knowledge about design systems and the fundamental laws of UX
I practiced my ability to communicate and actively sought feedback throughout the project lifecycle by collaborating with two developers
I learned about Gen Z characteristics, design preferences and their consumer behavior. I gained knowledge about what the sneaker culture is

I enhanced understanding of the design process. I learned that there should be user journey done in the process, and I included it in the project
I improved my UI and Figma skills, mainly in creating components effectively. I gained knowledge about design systems and the fundamental laws of UX
I practiced my ability to communicate and actively sought feedback throughout the project lifecycle by collaborating with two developers
I learned about Gen Z characteristics, design preferences and their consumer behavior. I gained knowledge about what the sneaker culture is

THANK YOU FOR YOUR TIME