Stussy
Designing a Mobile App for Clothing Brand “Stussy”
In this project, I envisioned and designed a mobile app for "Stussy," a renowned streetwear brand known for its cultural influence and distinctive fashion aesthetics. With a focus on providing a streamlined shopping experience, I also introduced a new feature, 'Cop mode,' featuring simplified layouts and a quicker checkout process. This project presents how I crafted an app that aligns seamlessly with Stussy's 'drop' system, making shopping for exclusive streetwear collections a breeze.
Overview
UX Researcher
UX Designer
UI Designer
My role(s)
Zoom/Google Meet
Figma/Figjam
Adobe Photoshop CC
Tool(s)
Sneak Peek: Key Screens & Design Preview
The Big Question
What if we introduce a fresh chapter in Stussy's journey by designing its very first mobile app?
While 'Stussy,' a prominent streetwear brand, may have intentionally refrained from developing a dedicated mobile application as part of its marketing strategy, an opportunity arises to explore the potential benefits of introducing one. How might we explore the untapped potential of a Stussy app, unlocking a new era of accessibility and engagement?
To tackle the question, I started with the competitive research. My goal here was to analyze market trends and study mobile app design practices employed by competitors.
Understanding the Market
The competitive research has revealed valuable insights, showcasing distinct patterns and practices as below.
All competitors are:
✔ Using the same/similar layouts of their websites in the mobile apps for familiarity
✔ Actively utilizing push notifications
✔ Offering app-exclusive features
I conducted interviews with 3 participants to pinpoint their primary pain points, which would serve as the focal point of the structure of the app.
Identifying the Pain Points
Common Pain Point #1
Hectic purchasing experience for high-demand items
Users wish the app offers..
Common Pain Point #2
Hard to keep track of the release date/time
Users wish the app offers..
After uncovering the primary pain points and some preferred feature possibilities, I created an ideal context scenario to define the core features and ideate for the new app.
Empathizing with Users
The storyboard led me to a question..
↓
How might we optimize the user journey during high-demand drops to minimize friction in the checkout process?
In response to the question, I engaged in a quick brainstorming session to uncover effective solutions and fresh ideas.
Crafting an Answer
To alleviate frustrations typically experienced during high-demand drops, I want to create a simplified checkout process as a unique feature, providing users with a smoother journey in those moments.
The layout & flow of the feature need to be simple and easy to follow so the users can make a purchase quickly.
The feature will allow users to pre-save all necessary information for checkout.
I noticed that users use the term "Cop or drop" very often to see how others feel about the upcoming release. I could utilize the term for the feature.
Ideas from the brainstorming:
“Cop Mode”
Introducing:
Options to pre-save information
Simplified interface
Task Flow Comparison: “Purchase an item”
Based on the ideas, I created a visualized task flow comparison to illustrate how the feature simplifies the overall purchasing process.
Current task flow
(Based on their current website)
With the new feature concept in place, I proceeded to build a system architecture for the new app. Guided by insights from competitive research, my aim was to maintain a consistent layout and design elements in the app, mirroring the brand's current website.
With that in mind, I started my design process by assessing and optimizing the current navigation menus for the new app.
Building a Structure
Current website (Desktop)
The website prominently displays 5 primary menus at the top: 'Shop', 'Feature', 'Support', 'Search', and 'Bag', as these are the most frequently accessed by users. So I aimed to maintain the visibility and accessibility of those 5 within the app's interface.
Current website (Mobile)
I also assessed the mobile version, and I noticed that they represented the 'Search' and 'Bag' using icons while consolidating the other menus under the hamburger menu icon.
Need to place the new feature in the navigation bar
Limit the # of menus in the navigation bar under 5
Need a menu in the navigation bar that can cover the rest - 'Contact', 'Account', 'Chapters', etc.
Things I also take into consideration:
Finalized Navigation Menus
Visualizing: High-fidelity Wireframes
After synthesizing the insights gathered during my research, I proceeded to create the following design system & wireframes.
Design System
App Overview
App Onboarding, Main Menu - Shop/Features/Bag/Account
Checkout
Regular Checkout Process
Cop Mode
Checkout process in Cop Mode
Refining the Design based on User Testing Feedback
I asked the participants to explore the app and perform purchase tasks in both regular and 'Cop mode.' Through multiple rounds of feedback, I was able to receive valuable insights and make iterations accordingly as below:
Iteration #1
Removing Navigation Bar
Removed the navigation bar during the checkout process to maintain user focus and reduce distractions.
Introduced a cart icon at the top right corner, enabling users to navigate back to their cart if needed.
Iteration #2 (A/B Testing)
Selected Product in Cop Mode
7 out of 9 participants chose option B
Option B enables users to modify the size (Default: pre-saved size)
In Option B, users can quickly review essential product details.
Iteration #3
Navigation Menu “Account”
No iteration needed at this moment!
All participants unanimously supported the suggested navigation menu sorting, expressing that they found it straightforward and intuitive.
However, as part of ongoing refinement, continued monitoring & potential user testing will help maintain the effectiveness of these adjustments.
Final Prototype
Beta Testing: If possible, launch a beta version of the app to a select group of users or through a public beta program. This will help gather valuable feedback and identify any issues before the official release.
Marketing: Work closely with the marketing team to coordinate marketing efforts of promoting the app while emphasizing its new feature, "Cop mode." This could include email campaigns, social media promotion, etc.
Post-Launch Monitoring: Use the insights gained post-launch and consider feedback for iterative design improvements. Prioritize updates and new features based on user needs and changing trends in the streetwear market.
Next steps
“The Impact of Passion on Design”
This project taught me a great lesson in how being genuinely into a subject can make all the difference. As a dedicated fan of Stussy, I felt right at home during this project. I think that comfort translated to the participants, making them open up and share their thoughts more comfortably during interviews and testing. We all had a blast, brainstorming ways to make the brand even better. The experience solidified my belief that your passion can be your most powerful tool in design.