FLANNELS X
Located in the basement of our Oxford Street store, FLANNELS X is a space for pop-ups, gigs, exhibitions, and exclusive brand experiences. Driving customers towards these events is a key component of our omnichannel strategy.
Project Overview
FLANNELS X is an innovative digital experience designed to elevate luxury fashion shopping. This project aimed to create a seamless, engaging, and immersive shopping journey, blending high-end aesthetics with user-friendly functionality.
My Role
As the lead product designer, I was responsible for shaping the user experience, conducting research, wireframing, prototyping, and collaborating closely with developers and stakeholders to bring the vision to life.
Design Process
Discover
-
Gathering data on Content Square
-
Competitive analysis
-
Stakeholder interviews
-
User Testing
Define
-
Empathy map
-
Crafting problem statements and hypotheses
-
Prioritising features based on user and business needs
Design
-
Wireframing potential solutions
-
Conducting design reviews and iterating on ideas
-
Developing low to high-fidelity prototypes
Develop
-
Collaboration between designers, developers, and stakeholders
-
Quality assurance and usability testing
-
Incorporating user feedback to refine the product.
Deliver
-
Final testing and debugging
-
Monitoring user feedback, performance, and analytics
-
Planning for future iterations and updates based on user data
Content Square Analysis
I started by using Content Square to review data on how users were currently engaging with the Flannels X webpage. This provided valuable insights into user behaviour and revealed a number of pain points:
-
Only 60% of users were seeing the details of our upcoming events when landing on this page.
-
Over 98% were not scrolling down far enough to see the email signup button.
-
A high number of users attempted to tap/click on 'Past Events,' expecting it to be interactive, but it’s currently an un-clickable element.
-
796 users tried to tap on the event image, which is also un-clickable.
Number of taps
High volume of taps on non-clickable assets can indicate opportunities to remove friction from the customer journey.
Tap Recurrence
The average number of taps in an area for page views. A rate higher than 1 may suggest user frustration or a strong interest in a feature.
Exposure Rate
The percentage of page views where at least half of the area is visible on the screen, which indicates how far users scroll.
Stakeholder Interviews
I spoke with key stakeholders from different areas of the business, including trade and marketing teams, to get a better understanding of their current pain points and opportunities. The feedback was consistent across departments:
Pain Points
-
Page length
-
Slow load time
-
Page doesn't excite customers
Opportunities
-
Omnichannel integration
-
Enhanced video content
-
Personalisation
KPIs
-
Site speed
-
Engagement
-
Page views
User Testing and
Empathy Mapping
Using the User Testing platform, I was able to monitor 10 users as they engaged with the platform.
-
Income - 20k -> 60k
-
Age - 25-54
-
Gender - 5 x female / 5x male
-
Device - 6x mobile / 4x desktop
I decided to map the findings from our user testing onto an empathy map. This made it easier to summarise the findings and identify the key insights. Organising the findings this way also created a clear visualization to help communicate with stakeholders.
We discovered the landing page focused more on style than substance. While users liked the design, there were noticeable usability issues, which aligned with the initial concerns raised by stakeholders.
Problem statements
After gathering site data, understanding my users, and speaking with stakeholders, I then broke down my findings into problem statements. This helped keep the designs focused and ensured the user stayed at the heart of the process.
User Problem 1:
Page Length
Problem
The page itself acts an archive, so it's currently heavy, long and loads very slowly.
How might we?
Make the page short and easy to navigate, while keeping it engaging during times when there are less upcoming events.
User Problem 2:
Navigation
Problem
Currently the only way to access the FLANNELS X page is via the search bar, or in the footer.
How might we?
Make not only the webpage navigation easier, but also enhance the omnichannel experience.
User Problem 3:
Visability (What is FLANNELS X)
Problem
Users are not reading the copy at the top of the page. When asking users "What does flannels X mean to you?", one person asked if it was our twitter account...
How might we?
Improve brand awareness of FLANNELS X and clearly comunicate its purpose to users.
Competitor Analysis
During competitors analysis, I looked at both our direct competitors in luxury retail, as well as organisations that focus entirely on events - such as art galleries.
I focused on what design ideas would solve our core problem statements: 'Navigation,
'Page Length' and 'Visibility'.
Quick Wins
Using the data collected, I identified several quick wins—simple design solutions that were easy to brief into the development team while addressing user frustrations and key problem statements with minimal effort.
1. Users weren’t seeing the first event.
Reducing copy or adding a ‘Read More’ link will bring the first event above the fold, leading to higher engagement (ContentSquare).
2. The store finder and email sign-up buttons were being overlooked.
When asked, “Where is Flannels X?”, users missed the How to Find Us button entirely. To improve visibility, I inverted the buttons, simplified the copy, and placed them on a single line—this also helped bring events above the fold.
3. Users expected lead event images to be clickable.
ContentSquare data showed 796 users clicked on a non-clickable element, compared to 640 who clicked the actual button. Making the images clickable will increase click-through rates to the event page.
4. It wasn’t clear when an event had ended.
User testing revealed that the dimmed image wasn’t enough to indicate a finished event—one user even asked why the images were so dark. Adding an ‘X’ over past events makes the status clearer and reduces frustration.
Please see below the copy for images before and after wireframes.
Design Solutions
FLANNELS Focus
One design solution for improving the visibility of events is 'FLANNELS Focus'. This small tab would appear on the home screen and draw attention to our live events at FLANNELS.
Archive page
To tackle the issue of page length and make past events less distracting, I introduced an 'Archive' section, as shown in the fourth image. A future iteration could include the addition of filtering options, to help users identify events more relevant to them.
Scaling event cards
When I set out to redesign the webpage, my primary goal was to make our events the central focus. The previous design left empty space when there was only one live event. In the new layout, event details are positioned on the right, bringing them above the fold and utilising the available space more effectively.
Final Designs
Here are my final design recommendations, including the archive and scalable event cards.
Due to limited developer availability, we’ve prioritised quick fixes for now, with further design changes yet to be implemented.
Hub for discovering events hosted in the FLANNELS Oxford Street London store.
Workshop to generate test ideas for enhancing checkout across multiple fascias.
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.
Results
Engagement & Interaction Metrics
+26% increase in page views per session – Improved navigation and engaging layouts encouraged deeper content exploration.
-18% decrease in bounce rate – More relevant content and seamless interactions kept users engaged.
Enhanced mobile usability – Optimised layouts and interactions led to a smoother mobile experience, increasing time spent on mobile by 24%.
Following the implication of the archive page, I would hope to see;
- Faster page load speeds – Reducing unnecessary elements improved performance, leading to a 35% decrease in load times.