Arcadia Group

UX/UI Design

Arcadia is the UK’s largest privately owned fashion retailer with seven major high street brands: Burton, Dorothy Perkins, Evans, Miss Selfridge, Topshop, Topman and Wallis, along with the out-of-town fashion destination Outfit.

Design Systems
User Flows
Wireframes
Prototypes
A/B and User Testing

Design Systems

Challenge
A key deliverable of the UX team was to create a ‘single source of truth’ that would allow creative teams within the company to design and develop products independently, while delivering a consistent experience for the user.

Solution
Using Sketch and InVision DSM, design systems and style guides for all the Arcadia brands were compiled using existing elements taken from the live sites. This enabled rapid prototyping using the Craft drag & drop design system plug-in, automatic updates to designs, and efficient collaborations with stakeholders and development teams.

Client:Arcadia Group
Date:09.2019 - 04.2020
Software:Sketch / InVision / DSM

Design System Live Links:

Topshop / Dorothy Perkins - Quick add to bag

Challenge
Increase the amount of items a user adds to their bag by reducing the number of interactions required. To add an item to bag, the user currently has to either use the ‘Quick VIew’ overlay, or navigate to the ‘Product Description Page’. Both of these flows require four clicks to complete the process. Data has shown that users with a greater number of items in their bag are more likely to checkout. By eliminating friction from the process, a higher conversion rate is hypothesised.

Process
A meeting with stakeholders from the Arcadia brands was held to define specific requirements, highlight any technical limitations and discuss the desired outcomes of the project. Rough sketches were shared with stakeholders to help visualise our concepts. After wireframing, interactive prototypes were created and iterated until an effective solution was agreed upon. A high fidelity prototype was created which would later serve at the development phase.

Solution
On desktop, when the user hovers over a product image on the Product List Page, a panel appears at the bottom of the image to allow the user to see what sizes are in stock/low stock, and then select a size to add to their bag. For mobile and tablet, a CTA link was added which activates a selection menu containing size and stock information. Variants were created to handle products which have petite/standard/tall variants, and a scrollable panel was designed for large lists of size variants e.g. jeans.

Topshop - Find In Store

Challenge
Refresh the design of the Find in Store overlay, to align it with the Store Finder collaborative work with our external locators and directories provider, 'Yext'. Improve how information such as stock levels is presented to the user.

Solution
The design was updated to provide a consistent experience for the user, based on the look and feel of the Store Finder. The solution allows the user to switch between 'list' and 'map' view. When selecting a location in 'map' view, the user is taken back to 'list' view with the details of their selected store are displayed at the top. Positive messaging was added to items not immediately available, and alternative colours and sizes are shown for out of stock items.

Topshop - Campaign Template

Challenge
Explore how to support more shoppable content in campaign pages on topshop.com and promote PDP and PLP pages giving more navigation to show filtered PLPs of various products.

Solution
A horzontal submenu linking to filtered PLPs was added to the top of the campaign page. In the category sections, a CTA to 'shop the look' is added. This opens an accordian containing featured products relating to the specific editorial content for that category. From here the user can add an item directly to their bag without leaving the campaign page, or link to the PDP or PLP for that campaign section.