FLANNELS App
Project Overview:
Designing the FLANNELS native app to elevate the luxury shopping experience through seamless navigation, personalised content, and an optimised omnichannel journey.
My Role:
As a Product Designer, I was responsible for shaping the user experience, conducting research, wireframing, and prototyping. I collaborated closely with developers and stakeholders to create a cohesive and intuitive user experience.
Design Process
Discover
-
Buisness context
-
Heuristic review
-
User testing
-
Stakeholder Insights & Business Objectives
-
Competitor analysis
Define
-
KPIs
-
User problem statements
-
HMW statements
Design
-
Design exploration
-
Design reviews
-
User testing
Develop
-
Designer handoff
-
Developer QA
-
Sprint planning
-
Proritisation
Deliver
-
Monitoring user feedback, performance, and analytics
-
Planning for future iterations and updates based on user data
Discover
Buisness Context
At Frasers group, we're very fast-moving and well known for acquiring new brands; therefore, we wanted to create a white label product for our mobile apps that could be reskinned across different newly acquired brands. The team were in the process of developing the white label app for sports direct initially , with other facias to then utiliste the components
Heuristic review
We conducted a UX audit to understand the issues and validated pain points through end-to-end user testing and a heuristic evaluation. We carried out competitor benchmarking and break analysis to highlight gaps in usability and performance. By mapping assumptions against real user behaviour, we identified and prioritised key areas for improvement to guide the redesign.
The app maintained the FLANNELS branding, but it lacked a native experience, which resulted in a cumbersome user interface.
User Testing
When conducting the end-to-end test of the previous app, my team and I monitored 15 users as they engaged with the platform.
Our goal was to understand what we do well and identify areas for improvement.
10
Users
tested
New / Existing
Users
tested
Male / Female
Mixed
genders
End to End
Tested the
entire journey
IOS / Andriod
Mix
of users
Results
To keep track of the user feedback my team and I inputted user feedback into a table on FigJam:
• Not Personalised
“The app gets the job done from browsing to checkout, but it feels impersonal.”
“I don’t find the product recommendations relevant to me.”
• Perceived Lack of Luxury
50% of users felt the app didn’t reflect Flannels’ luxury branding.
“It feels standard, not high-end.”
• Navigation & Usability Issues
40% of users struggled with navigation, filters, and checkout.
“It takes too long to find what I’m looking for.”
Stakeholder Insights
& Business Objectives
To align with business goals, I interviewed key stakeholders from trade, marketing, and product teams to understand their challenges and opportunities.
• Gender-led Journeys
Trade teams wanted gender-specific experiences to drive relevance and engagement, leading to tailored user journeys.
• Omnichannel Experience
The need for a seamless online-to-offline experience informed the decision to create an immersive app experience that encouraged app usage over the website.
• Luxury Positioning
Stakeholders emphasised the importance of a premium, high-end experience, guiding the inclusion of editorial content and sophisticated visuals.
• Native Experience
The push for a mobile-first approach will result in a smoother, more responsive app design, enhancing usability. Scaling and innovating on an old platform would also present significant challenges.
Define
User Problem Themes and HMW Statements
Problem Theme 1:
Uninspiring Experience
💬 Customers expected more than a standard mobile version of the website.
“How might we make the app compelling enough to choose over the website?”
Problem Theme 2:
Lack of Personalisation
💬 Users aren't getting a tailored experience, leading to generic product recommendations and lower engagement.
“How might we make feel more curated and relevant to individual users?”
Problem Theme 3:
Usability & Accessibility Issues
💬 Users struggled with navigation, filtering products, and reading information, making it harder to browse and engage.
“How might we make the shopping journey smoother and more intuitive?”
Problem Theme 4:
Not Luxury Enough
💬 Users expected a high-end, immersive experience with more video content and editorial storytelling.
“How might we make the app better reflect FLANNELS premium brand identity?”
Problem Theme 1:
Uninspiring Experience
💬 Customers expected more than a standard mobile version of the website.
❓ “What makes the app compelling enough to choose over the website?”
Problem Theme 2:
Lack of Personalisation
💬 Users weren’t getting a tailored experience, leading to generic product recommendations and lower engagement.
❓ “How can the app feel more curated and relevant to individual users?”
Problem Theme 3:
Usability & Accessibility Issues
💬 Users struggled with navigation, filtering products, and reading information, making it harder to browse and engage.
❓ “How can we make the shopping journey smoother and more intuitive?”
Problem Theme 4:
Not Luxury Enough
💬 Users expected a high-end, immersive experience with more video content and editorial storytelling.
❓ “How can the app better reflect FLANNELS premium brand identity?”
Design
Below, you can see an overview of the key screens across the app. Throughout the journey, we’ve made several improvements, including:
• Enhanced personalisation by adding the user’s name.
• Improved navigation by adding clearer titles and an industry-standard navigation bar featuring both labels and icons for better accessibility.
Use the slider below to compare the before and after. Slide to the left to see the previous version, and to the right to see the new app.
Designs in focus
Designer A-Z
Designer A–Z enhances brand discovery. Sports Direct shoppers prioritise equipment over brands, except for major names like Nike and Adidas. In contrast, FLANNELS customers seek luxury brands like Gucci, Prada, and Balenciaga.
To improve this, we added a search feature and refined the brand list for easier navigation. The old Sports Direct interface (left) was a basic web view, while our new design (right) delivers a seamless, app-native experience.
Shop Tab
It was crucial to differentiate the FLANNELS app from Sports Direct and to align the new app with luxury audience expectations. Stakeholders wanted the app to stand out, so we focused on editorial assets to enhance the premium feel. After experimenting with image sizes and layouts, we chose a full-width design for a polished, high-end look.
Editorial Content
For the Homepage across both apps, we’ve used our library of content blocks in Amplience, our CMS platform.
While the blocks remain the same, they use different image ratios and have different purposes. Sports Direct focuses on shopping by sport, whereas FLANNELS highlights editorial content, with features like Launches and Style News (our blog).
To note
Throughout the app development process, we encountered multiple challenges, and smaller projects emerged along the way. For each of these, I followed the ‘Discover - Define - Design - Deliver’ process. A few examples include:
-
Users over-refining their searches – Identified through filter usability testing, see project
-
How do we increase the number of users signing in? – Dot notification – Increased sign-ins by 48%
-
Enhancing the omnichannel experience – Implemented a store finder icon.
User Testing
As the app wasn’t live, we worked with an agency, which limited our ability to test effectively. The lack of time for proper user testing was a challenge. During sessions, we focused on asking, ‘What did you expect to happen?’ and used two note-takers per interview to ensure comprehensive feedback.
We used Figma’s AI to analyse and dissect the notes from the user testing sessions, helping to identify key insights and trends more efficiently.
10
Users
tested
New / Existing
Users
tested
Male / Female
Mixed
genders
End to End
Tested the
entire journey
IOS / Andriod
Mix
of users
Results
• Clean, Easy-to-Use Layout
The app was seen as easy to browse, with a clean interface that users appreciated.
“The app is clean and easy to use; it allows me to browse without distractions.”
• Header & Visual Design
Users preferred the black header and found it made the app feel more premium.
“The black header looks sleek and adds a high-end feel.”
• Clear User Segmentation
Users clearly identified with two main personas:
• Know What They Want
• Browsers
Develop
Once the end-to-end app was signed off by stakeholders, the journey was broken down into development tickets.
Some tickets required additional design input, so we followed the same Discover, Define, Design, Deliver process.
Deliver
Here's a 60second video I worked on with marketing to showcase all the new features.
Results
Increased Engagement with Personalisation
The introduction of gender-led journeys and personalised recommendations led to a 63% increase in user interaction and satisfaction with product suggestions.
Positive Response to Luxury Positioning
The addition of editorial content and more refined visuals led to a stronger alignment with Flannels’ premium, luxury brand image, with positive feedback from internal stakeholders and users.
Easier Navigation and Reduced Friction
Usability improvements resulted in a 20% reduction in time spent navigating between pages, with users finding the experience smoother and more intuitive.
Accessibility Enhancements
Post-implementation testing showed a improvement in task completion rates for users with accessibility needs, confirming that changes made the app more inclusive.
View More Case Studies
Hub for discovering events hosted in the FLANNELS Oxford Street London store.
Workshop to Generate Several Test Ideas to Elevate Checkout for Improved Experience Across Multiple Facias
Hub for discovering events hosted in the FLANNELS Oxford Street London store.
At FLANNELS, we are constantly improving the website. Here are a few highlights.
Hub for discovering events hosted in the FLANNELS Oxford Street London store.
Design Passion project- Providing a platform for users to make, organise and schedule events.