Off Stories
Turning a Sports Community into an Engaged Storytelling Hub
About:
On is a Swiss athletic brand known for its sustainable running shoes. After revamping its e-commerce platform, they sought to align their community page, with the new brand identity.
Challenge:
Our goal was to improve the mobile structure and layout, making it easier for users to discover, navigate and enjoy the stories that matter to them.
Impact:
We redesign the navigation and the article categorisation, improving clarity and accessibility. This changes increased the user engagement and made the content more discoverable.
Type
Community page
My Role
UX/UI Designer
Team
2 UX/UI Designer
Deliverables
UX Design, Visual Design, Prototype
Exploration of the existing product
To better understand the ideal user experience, we asked users to interact with the prehexisting website. Through observation and subsequent interviews, we gained valuable insights into their interactions and preferences.
Usability testing:
We began product evaluation through usability testing with representative users, aiming to identify and fix issues early on. This process helps us gauge participants' task completion success, time taken, satisfaction, and areas for improvement in user performance.
Goal:
Understanding the user's critical points and identifying any usability problems, collect qualitative and quantitative data and determine the user’s satisfaction with the product.
Findings
The Problem
The user needs to be gently guided through the ‘'OFF Stories' page for greater efficiency and enjoyement of use, because currently, available explorer-paths are unclear.
How might we...
…build a hierarchy on the main page which guides first-time or casual ‘OFF Stories’ explorers, to avoid overwhelm, and encourage users to engage with stories.
…create a page with clear but interesting information architecture, to allow users with a specific interest to seamlessly find what they are looking for.
Which type of users do we want to attract?
After conducting thorough research, we began the process of defining personas to help us in solving and focusing on our problems. Recognizing that a single persona would not be enough, we created two distinct ones:
Card sorting
The main problem was the lack of clear categories on the website.
During our interviews, people were unsure where to find articles and how they were organized. To solve this, we did a card sorting activity with five users. This helped us figure out the categories and how to label them.
After analyzing the results of the card sorting activity, we noticed some common themes in the names and categories.
We then defined the new categories with different UX writing. To gather more insights, we conducted a poll to get people's opinions on the names and their descriptions.
Our final categorisation:
Tips & Tricks
Our Athletes
Around the World
Beyond Running
Fashion
Sustainability
Competitor analysis
Identify market opportunity
We identified some useful features that aligned with On Shoes' goals. Specifically, we focused on incorporating tags and cards into our design.
These elements would help organize information in a clear and concise way, making it easier for users to navigate and understand the content.
Through testing, we gathered feedback from users to determine which elements were clearer and more effective. We also took the time to understand the reasons behind their preferences.
UX Writing
During our research, we identified user confusion and unclear language on the website. To address this, we focused on three elements: empathy, authority, and clarity.
To improve clarity, we made changes to categories lacking this element. For instance, we linked the 'OFF Stories' concept to the widely used phrase 'off the beaten path,' aligning it with On Shoes' brand personality.
We also introduced empathetic content, including tips and stories, to enhance the overall user experience. This addition fills the previous lack of empathy and adds a valuable dimension to the website.
Before and after the redesign
Outcomes & learning
✦ ON Shoes already has an experienced team of UX designers working on their website, which made it challenging for us as students to compare our design solution with their established team. Their design was already clean and efficient, so it was hard to exercise to the art of providing constructive feedback and critique.
✦ During our testing phase, we realized that small details mattered a lot. Using text instead of icons, for example, had a significant impact on user reactions.
✦ Testing was the main focus of the design process. We conducted various tests, including interviews, user testing, card sorting, and A/B testing. Our goal was to listen to the users to guide us through unbiased design solution, ensuring their feedback was valuable.
