Arsenal Direct
Redesigned the Arsenal Direct retail website to enhance user experience, streamline navigation, and boost online sales. The project focused on being mobile first, modernising the look and feel, and improving the checkout process. The project resulted in a faster, more intuitive shopping experience aligned with the Arsenal brand, leading to increased customer engagement and conversions.
MY ROLE
User Experience Design Lead
METHODS USED
Research, Wireframes, Designs, Prototypes, User Testing
The Brief
Redesign the Arsenal Direct website to create a seamless, mobile-first shopping experience that drives sales, enhances user engagement, and strengthens brand loyalty to users purchasing from outside of the UK.
Stakeholder Interviews & Research
We kicked off the project by doing anonymous interviews with members of the different teams at Arsenal, gaining insight into the pain points of the current site and the clear areas for improvement. With data of the current site provided from the stakeholders we were able to understand some key touch-points and dive into the problems and potential solutions.
While performing the interviews we also went around the stadium and to the flagship Arsenal store, The Armoury, to gain further insight into the match-day experience for supporters and to analyse the design and visual language used in the store.
We also looked around at other footballing e-commerce websites so analyse their creative and visual language. It became clear to us that the most visually engaging websites used their products as the key selling points, not other type or colour. We created a document analysing these different elements, comparing the current Arsenal Direct website to the other websites. This was presented back to the internal team to encourage them to improve their imagery and create a timeline for creating new assets for the design & build.
Sitemap & Wireframes
The interviews brought out interesting insights, one consistent theme was the poor taxonomy of the current website. It was important for us to try and understand what wasn't working and how we could improve it. After iterating different sitemaps we delivered two different styles, both contained the same core pages but had differing styles in structure.
The interviews brought out interesting insights, one consistent theme was the poor taxonomy of the current website. It was important for us to try and understand what wasn't working and how we could improve it. After iterating different sitemaps we delivered two different styles, both contained the same core pages but had differing styles in structure.
Using the insights from our site-mapping sessions we were able to narrow down the navigation to a final style for our wireframes, we delivered two different styles to consider the functionality with the taxonomy. It was very important for us to get this right, especially for mobile devices, as the navigation was one of the key issues raised in our research.
We then wireframed the entire sitemap, creating desktop and mobile screens in tangent ensuring that the website would be fully responsive and provide the same experience on smaller devices.
The Design
Navigation Iterations
Redesigning the navigation involved creating an intuitive user experience across both web and mobile platforms, focussing on a clear and structured hierarchy. We used a user-centric approach, drawing attention to the wishlist, cart and profile sections, while ensuring the products had a logical taxonomy. We also provided various styles, all while conforming to the strict brand guidelines of the club.
Design Routes
We received feedback on the navigation styles so were able to proceed with creating design routes. We wanted to have two distinct versions, allowing the Arsenal team to decide which one they preferred before we designed every page. We created two prototype videos to show Arsenal and then also test on users, trying to gain understanding from an emotional level.
Style 1:
A clean style with a minimalist interpretation of the Arsenal brand, allowing the product imagery to be the primary focus.
Style 2:
An editorial style using the Arsenal brand in a more exciting and innovative way, pushing the boundaries of their brand.
User Feedback
Working with research agency, Walnut, the prototype videos were tested on users to gain insight to the emotional attachment to both designs, looking at reaction times in response to the videos vs the current website.
There was an interesting conclusion to this task, users much preferred design 1 and it's functionality, driving an emotional connection as well as balancing information. Design 2 came out on top for it's style and use of imagery, it just didn't have the right balance of flow and information. We knew that we needed to strike a balance of the functionality of design 1 with the style of design 2.
Design System
During the design stage I designed a full icon system set in Illustrator, Arsenal had existing iconography but there was no consistent theme and it was inconsistent. Alongside this I we also created a full atomic design system to be handed over to the developers, complete with atoms, molecules and organisms.
Final Designs
Our final design route was born out of the feedback provided by users, displayed in Walnut's research deck, finding the balance between the more simplified and editorial styles. One of the key features was to design and build a headless 'Customise Kit Builder', really emphasizing the Authentic Kits to users, trying to maximise conversion on release.
