OFF Stories
Empowering Community Sports Through Digital Engagement
Background
Collaboration with On running for the redesign of their community page OFF Stories. This was the last project of my UX/UI Bootcamp at Ironhack.
Role
User testing
Prototyping
UI Design
UX Research
UX Design
UX Writing
Team
2 UX Designer
Timeline
14 Days
Introduction
On is a Swiss athletic company focused on sustainable running shoes. They recently revamped their mobile-friendly community page, OFF Stories, which covers topics like running, mental health, diversity, and athletes.
Our goal is to improve the mobile structure and layout, making it easier for users to discover and enjoy the stories they want to read. This involves rethinking and adjusting the OFF Stories hub to enhance the mobile reading experience.
Research
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.
For our heuristics evaluation, we used Norman Nielsen Group method:
Findings:
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.
The problem:
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.
User Persona
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
To gather inspiration, we examined competitors who had similar community features.
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.
UI process
During ideation, we sketched design elements by hand and created mid-fidelity wireframes on Figma to explore proportions.
We then moved on to high-fidelity wireframes to refine details and experiment with colors and UI options.
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.
Final design
Video Prototype
If you want to see more : here’s the prototype I used to validate my design solutions.
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.