With mobile devices as the primary gateway for online shopping, especially for brands like Stussy, e-commerce design continues to evolve. While users currently browse the Stussy site via a mobile browser, a dedicated mobile app could enhance the user experience and be a great opportunity for the brand.
Stussy is an apparel brand created by Shawn Stussy and business partner Frank Sinatra Jr emerging from the Californian surf/skate scene in the early 80s specialising in wearable urban attire. It has played a huge role in past youth and subculture movements that have now transformed contemporary popular fashion culture. The brand was a main contributor in disseminating the aesthetic and lifestyle of what's now called "Streetwear." The independent label was a huge success actively choosing to target a niche audience by keeping culture & community as its core values, now completely acquired by The Sinatra Family, Stussy continues to be a streetwear staple and has been resurging in popular culture in the past couple of years due to rising interest through social media exposure and nostalgia for the brands' glory days.
To enhance the shopping experience for the Stussy brand, I conducted a thorough UX evaluation of the current website. By identifying potential enhancements and opportunities, I provided guidance for crafting a tailored solution.
Users face challenges due to extended loading times on the website when used on mobile web browsers.
Browser limitations on the Stussy site prevent users from receiving alerts for new information from the brand.
Lacks sharing features and has not yet integrated with the brand's most prominently featured sites (Tiktok, etc.)
After conducting the evaluation, it became evident that a potential solution could take the form of a new mobile application for the brand, addressing a current gap in their business model.
Offering a mobile app to ensure effortless purchasing across all devices. Giving users more options when shopping.
Enabling offline shopping to provide users access to the Stussy brand regardless of connectivity available.
Enhance personalisation through alerts and share on popular platforms where the brand is showcased.
Higher Customer Engagement.
Increased Sales and Revenue.
Increased Convenience.
Faster and Smoother Experience.
Reduced Cart Abandonment.
More Data Collection.
Faster loading times.
Enjoying brand access at all times.
Direct Marketing Abilities.
Enhanced Social Presence.
Easier to acquire information.
Discovery of items made easier.
I had an in-depth look into the brand's visual identity spanning multiple years. This effort aimed to ensure consistency, enhance brand recognition, and establish user trust.
Initiated a comprehensive user research phase to understand user behaviours, needs, and pain points. This valuable insight drove the creation of a user-centred design that effectively addresses user requirements and enhances the overall experience.
1. Studying the habits and behaviours of the existing user
Gain: Optimise the user journey, streamline processes, and create an intuitive and user-friendly experience that aligns with how users naturally navigate.
2. Assessing the strength of the current user engagement on the Stussy website
Gain: Understand how effectively the website is performing in regard to attracting, retaining, and engaging users. Identify weak points for potential enhancement in the app.
3. Evaluating the project's viability and demonstrating how the solution will boost user interaction and traffic
Gain: Helps stakeholders make informed decisions by assessing the practicality of the proposed solution. It ensures that resources are allocated to projects with the potential for positive outcomes.
4. Comparing the features of competitor brands to identify market gaps
Gain: Identifies gaps in the features offered by competitors, uncovers valuable opportunities to differentiate the product and offer unique value to users.
5. Understanding users’s lifestyles to determine the best design and aesthetic choices
Gain: Leads the product to align with user preferences, increasing the likelihood of adoption and usage, while fostering lasting loyalty and extended engagement.
Through examination of user interactions, behaviours, and preferences, emerged a data-driven framework that shaped the approach to enhancing Stussy's user experience and guided the project's design choices.
There has been an overall rise in visits and rankings (Global, National, and Category) over the past year, and with more visitors, a quicker, more functional mobile app would be appropriate to deal with this increase. Users would be able to shop offline and this would provide fewer opportunities for server failures.
Given that Stussy's audience is younger (16 - 24), a more contemporary design approach would be suitable and the site's visitors' median age means catering to consumers who have a shorter attention span and value visual cohesion.
Although the bounce rate is typical for a fashion e-commerce site, with a well-designed app with faster loading times this could be reduced.
Monthly online analytics for the Stussy website show a distinct preference for mobile devices over desktop browsers, with over 65% of all traffic coming from mobile devices.
Given that most customers use their mobile devices, it became more evident that the typical user would benefit from a mobile application instead of a web browser.
With these points in mind, the design approach was created to cater to already tech-savvy consumers.
Examining the data from Statcounter's global statistics for the period between February 2021 and February 2022, it becomes evident that mobile devices commanded the market, accounting for 60.67% of total internet traffic.
Considering the global dominance of mobile devices in the market share, an app could serve as a valuable addition.
Given the diverse global customer base of Stussy, an app would enhance convenience and ease of purchasing.
Platforms like YouTube, Facebook, and others from the realm of social media contribute a modest yet discernible portion of website visits.
To amplify these metrics, integrating a product sharing feature holds potential for enhancing user engagement and expanding reach.
Crafted a user journey map, identifying key touchpoints and recognising prime opportunities for engagement. This detailed map served as a strategic guide to tailor the user experience, meeting user needs and fostering meaningful interactions throughout the journey.
Create a consistent brand experience
Throughout the customer journey, customers interact with Stussy through various touchpoints, including the website, retail stores, and social media. So there is a need to create a consistent brand experience across all touchpoints to reinforce Stussy's brand values and make it easy for customers to engage with the brand.
Emphasise brand values
In the research stage, customers are learning about Stussy's history, values, and product offerings. The project should prioritise presenting this information in a clear and compelling way to help customers understand what makes Stussy unique. This can be done through teaching the user the history of background of the brand.
Streamline the purchase process
When customers decide to purchase a Stussy product, they visit a retail store or e-commerce website. Another aim is to make the purchase process as smooth and seamless as possible, including easy navigation, clear product descriptions, and a streamlined checkout process. This will be put into clear consideration when approaching the design of the product pages and checkout.
Encourage post-purchase engagement
After a customer receives their Stussy product, they may leave a review or share their purchase on social media. The project process should encourage this kind of engagement by making it easy for customers to leave reviews or share their purchases on social media. This can help build brand awareness and loyalty.
A competitive analysis was conducted to gain insights into the design standards of apps from similar brands. The goal was to identify key features, market gaps and explore the best practices for user-centric design.
A simple and responsive app. The app's opening page directs users to the various product categories of Supreme products in a listed form.
Clear and simple checkout system showing items, sizing and cost in the cart.
A 'full site' button that allows you to access features only available on the web browser version of the website.
Supreme's customer base is known for its fast-paced buying and reselling of items. To accommodate this, the company has an efficient checkout system that is designed to thwart automated bots and ensure rapid order processing.
Supreme has recently modified the size of it's product images to enhance visibility for users.
The app is available in other languages (IT, DE, FR)
Overall, there is a lack of accessibility features on the supreme app e.g. Alt text for images, transcripts of featured videos, etc.
Product categories are immediately displayed when opening the app.
Clear buttons for adding products to the shopping cart, selecting various sizes and colours, and placing items in the cart.
No fixed navigation bar, making it challenging for users to quickly access different pages.
Insufficient navigation on product pages involving a lot of backspaces to get back to the categories page.
Absence of a product search feature. Currently, users who already have a specific item in mind must navigate to the categories section and manually browse through it to locate their desired product.
User-friendly and efficient support/chat system.
Strong content marketing, with access to the brand's videos, blog posts about collaborations and more.
A clean and responsive design, with interactive features. More design decisions that reflect the brand's identity.
The app's opening page immediately showcases the available products involving visual aid.
A fixed navigation bar providing links to the 'Shop', 'Feed' and 'Game' pages, as well as a 3D motion button that links to a radio station, putting a unique spin to build on the brand's identity.
Interactive content, such as a re-edition of an 8-Pixel game Snake relating to the brand.
The Palace Skateboarding app has not incorporated many accessibility measures, such as support for multiple languages, in-app communication and keyboard navigation.
The app's sole accessibility effort is achieving compliance with WCAG 2.0/2.1 standards for web content accessibility.
Homepage immediately displays the new arrival items.
Filter button to find specific items quickly and efficently.
A straightforward procedure for adding items, exploring other choices and sizes, and completing the checkout.
The fixed navigation bar enhances the ability to navigate between different pages seamlessly.
The Palace app pays great attention to navigation design, making it a easy for users to explore. With clearly labeled buttons and an intuitive layout making navigating the app easy and straightforward.
No customer service help (missing contact details, FAQ, returns)
Palace product descriptions, often feature a blend of creativity, humour, and a sense of authenticity that resonates with their target audience.
The 'Feed' page contains the latest news about collaborations and new releases.
A detailed and visually appealing app with an in-depth information architecture and strong navigation.
The app's opening page features an attractive and user-friendly authentication screen, which prompts users to either log in, create a new account, or continue as a guest.
A 'Discover' section dedicated to news and collections related brand.
Given the scarcity of their products and the frequent use of raffles, Kith has thoughtfully introduced a dedicated 'Drawings' section within their app.
Users are able to view orders, earn icons and track packages in the 'ID' section, here they can also access customer support and view terms & conditions.
The app offers some level of accessibility, notably in-app communication through support chat and clear text/image content.
However, smilar to several other streetwear brand apps, there appears to be a lack of attention given to the needs of vulnerable user groups who may use the app.
Additional accessibility features, such as a light/dark mode and improved support for alt text in images and forms, could enhance the app's inclusivity.
Locating and adding items to the cart is a straightforward process.
The checkout processes are streamlined and user-friendly.
The app's user flow is enhanced by accurately labeled sections and features, ensuring ease of navigation and accessibility.
The clearly labeled fixed navigation bar greatly simplifies the process of navigating between different sections of the app.
There are advanced filtering and searching features.
The only critique is the use of a lot of nested pages within the shop area, potentially leading to user confusion.
There is a dedicated section in the app for supporting customer inquiries and needs.
All features and information on the Kith website is also available on the mobile app.
Pop-ups asking users to enable push notifications. And set up of user's country and location.
%201.png)
I then embarked on the design iteration phase to define the mobile app's user interface and functionality. This phase aimed to incorporate valuable insights gained from research ensuring a polished final design.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Developed an interactive prototype to illustrate the functionality and user experience of the Stussy mobile application. This prototype provided a comprehensive preview of how the app will operate and the seamless interactions it will offer to users.
Using this prototype, I conducted thorough functional testing and usability assessments, actively seeking and collecting user feedback to identify and address any issues.
%201.png)
In one of the final stages, a user testing phase was conducted, which played a crucial role in validating and refining the user experience, as well as identifying any potential faults in the design and making necessary improvements.
I regularly evaluated the accessibility of my designs using the colour contrast checker, ensuring that the colours used met accessibility guidelines.
I followed WCAG 2.0 guidelines to ensure my designs were accessible:
Ensured there was minimum AA colour contrast in background-to-text ratio, buttons and images using the ‘Contrast Ratio’ tool.
Only using colour to highlight components that are already visible help users who have difficulty distinguishing between colours.
The target area of CTA’s suited to the screen size. CTA buttons on mobile screens are minimum 44px by 44px with adequate spacing between controls. This allows those with physical disabilities with reduced dexterity to navigate easily between screens.
To validate the information architecture and verify the user flow, a tree testing session was undergone in which participants were tasked with locating specific sections of the app. Here, you'll find the results and sample test scenarios.
Across all the tests assessed, participants achieved an average success rate of 81%, suggesting that the navigation structure is, for the most part, effective.
Participants, on average, demonstrated a 72% success rate in employing Direct Access Patterns, signifying the effectiveness of feature labelling and information architecture making most features easy to find.
Based on the results of the test, it was observed that only 12% of participants encountered common pain points such as incorrect navigation, confusion, excessive backtracking, and other usability issues.
%201.png)
In conclusion, the project successfully delivered a functional & responsive mobile application that aligns with the aesthetic and design language of the Stussy brand. The project aimed to address key issues, including the lack of a mobile app for younger consumers (16 - 24) who predominantly use mobile devices for purchasing, the absence of push notifications, and limited opportunities for media engagement. These challenges have now been effectively resolved through the development of the mobile app. Overall, the project not only addressed the initial challenges but also introduced features that contribute to a more satisfying and user-centric experience for Stussy customers.
As this project is self-directed, traditional KPIs or success measurements may not apply to validate its success in this scenario. However, if this project were to be actualised, below are several metrics that could be used to gauge the products' effectiveness.
The percentage of app users who engage in actions such as making a purchase, adding items to their cart, subscribing to newsletters, and more.
The number of app downloads can also serve as an indicator of its success, affirming to the team that this digital product was a necessary and valuable creation.
The rate of long-term engagement indicates whether users are consistently utilising the product, maintaining their involvement and participation.
Assessing the extent to which users seamlessly transition between various channels, engage consistently, and achieve desired actions, such as making purchases, across multiple touchpoints.
Calculating the percentage of app users who initiate the process of adding items to their shopping cart but do not complete the purchase, reflecting a potential loss of revenue opportunities.
Collecting user feedback through various channels, including reviews, surveys, and interviews, to assess the product's utility, plays a pivotal role in evaluating its overall success and impact.
Now that the Stussy customer base can utilise a mobile app for offline purchases, enable push notifications, and share desired items, the next pivotal phase involves focusing on refining the checkout process. Recognising its vital role in elevating the user experience and ultimately increasing conversion rates, the objective is to streamline and optimise the checkout journey. Here are some focus areas, I would like to move forward with this project:
"As someone who's a big fan of Stussy and keeps an eye out for their new collections each season, my time with the prototype tells me that this app would make make my future shopping experiences a whole lot smoother and more convenient."
Jason Webber, Stussy Customer
"Shardai's UX/UI design journey showcases her impressive ability to complete the entire design process, underscoring her remarkable growth and evolving expertise, consistently pushing her skill boundaries."
Ben Payne, Product Designer / Mentor
Shoot me an email at Shardaidawkins@gmail.com if you want to chat about my work, design knowledge or anything related. Or, get to know me better through my other platforms.
