Crafting innovative solutions for an e-commerce giant

I have worked as part of the Selfridges UX team and have taken part in exciting projects such as the re-design of their website and mobile apps, the re-design of their careers site and a number of innovative and experimental solutions for their digital assets that resulted in significant improvements in their metrics.

Product Designer
Mobile App Design • Web Design • User Experience Design
Selfridges Product Detail Page UI Shot

I had the great pleasure to call Selfridges&Co. a client between March 2019 and July 2020. I worked on site for 3 months in their Central London office before moving completely remote in July 2019.

The projects I was involved in varied from BAU and Optimisations to external projects, to more conceptual work that unfortunately I won't be able to disclose.

I'm gonna walk you through 3 different projects from my time at Selfridges:

Revamping a career website for an outstanding candidate experience and job discovery

The Selfridges Human Resources department was in need of a re-design of their careers site with the objective of attracting major talent through an inspiring and informative site


  • User Research & Discovery
  • User Experience Design
  • Usability Design


  • Create an exciting site to push the Selfridges employer brand and ethos and help attract top talent across Retail and Technology sectors
  • Re-design the current version of the site with focus on Life at Selfridges, with easy access to the application platform.
  • Create pages with existing elements within the AEM Content Management System


Research & Discovery

The main focus of the discovery phase was to create an inspirational flow and content for highly skilled users to join the company and create a site that can compete, at a talent acquisition level with up and coming industry giants such as Farfetch, Canada Goose and established businesses like Harvey Nichols.

After a short research conducted together with the HR team and prospective and existing employees, user pain points and objectives came to light:

Following the initial user interviews and a quick competitive analysis we moved onto the ideation stage

Selfridges Careers site pain points and solutions

Customer Journey

The customer journey has been segmented in 3 separate sections:

Selfridges Careers site user journey

The primary focus of the re-design iteration was the part 1 of the journey: the discovery.
The technical flow of the candidate application was handled by a third party software and couldn't be modified.

We focused therefore on helping users complete objectives 3 ("I want to apply to a job/company with confidence and pride") and 4 ("I want to find a company that matches my values and inspires me to do better") and solve pain points 1 ("The journey through the site is unclear") and 2("The site lacks fundamental and inspiring information").

Proposed Solutions

I proposed several solutions to directly target the key objectives laid out earlier:

Selfridges Careers site pain points and solutions


In order to be able to create detailed user flows I dug deeper into the potential candidates profiles and created 3 distinct personas, differentiated by their intention when reaching the site

Selfridges Careers site personas

User Flows

I have then created user flows for each part of the journey, see below homepage flow

Selfridges Careers site user journey

Information Architecture

And created the information architecture of the new site

Selfridges Careers site sitemap


I have drafted wireframes based on the flows and information architecture ideated earlier.
As this project was using already existing AEM components, creating high fidelity mockups was out of scope

Selfridges Careers site wireframes

Prototype & Usability Testing

The wireframes have then been packaged in a prototype with mid-fidelity mockups in InVision Studio and tested with select Selfridges employees from different departments.
The test turned out positive with minor changes that resulted in a more simplified navigation and structure, especially around the content and department pages.

The Result

Selfridges Careers now has a sleek and modern site, with outstanding multimedia content created by their creative team.
The site is inspiring, easy to navigate, informative and with easy access to job descriptions, a big step up from the previous site.
The website has recently been nominated for a careers site award.

Selfridges Careers before and after visualisation
Selfridges Careers before and after visualisation

Adapting web store design patterns to native Mobile App patterns

The project below is one of the latest I worked on and it consists specifically of adapting web elements of their re-design to fit into a fully native experience. I worked on the adaptation of the Product Detail Page and its numerous edge cases.

The web re-design has been implemented by the Creative and UI team with principal focus on web elements and patterns.

Main goal of the project was to take the web elements and adapt these to the native mobile app grids, patterns and best practices whilst still maintaining the look and feel of the re-design and of the brand.

This project is strictly technical design adaptation, here are some examples of translated patterns and reasoning behind them.

Product Image

Selfridges Product Detail Page UI Shot

In the adapted version a header is present allowing the user to clearly see the full image and rendering the navigational controls slightly more accessible.
Contrary to web, a mobile app doesn't have an added navigation as one that is found in the browser, therefore the bleed would overflow into the app bezels on iOS and aprt of the image would be cut off.

Product Detail Component

Selfridges Product Detail Page UI Shot

I worked on numerous edge cases, such as personalisation, gift messaging, delivery, out of stock notices etc.

Every edge case has been implemented into designs, components that have been added to a styleguide library file in Sketch and then documented every case with scenario and rules.

Stock notifications in the Mobile Apps

This project was part of an optimisation effort to allow users to enable stock notifications for specific products.
Business case was to increase urgency and fear of missing out in users and purchase products as soon as they're back in stock, this way increasing conversion rates.

The Process

I started outlying all possible edge cases and scenarios for different states of product stock availability, which in this case were:

  • Specific Colour is Out of Stock
  • Specific Size is Out of Stock
  • Product is in Stock but specific size is Out of Stock
Selfridges Edge cases UI ShotSelfridges Stock Notifications UI ShotSelfridges Stock Notifications UI Shot

You can see documented all components for the "Add to Bag" button, "Enable notifications" component and "Error Messaging" component.

I have worked on the first ideation of user flows, wireframe and documentation and on the second iteration of the high fidelity designs when I have adapted the old design to match the re-design, as I have shown in the Mobile App UI tab.

Ballot to Buy - currently known as The Yellow Draw

I have worked on the first implementation of the Ballot to Buy, or Yellow Draw as is called in the Mobile App currently. The functionality allows users to enter a draw for limited edition products and if successful, be able to buy the product.

The main goal of the project was to create a fool-proof user flow and wireframes to allow users to use the functionality and cover all edge cases (win, loss, etc.)

I have created basic wireflows to outline the functionality and the interface:

Selfridges Yellow Draw UI ShotSelfridges Yellow Draw UI ShotSelfridges Yellow Draw UI ShotSelfridges Yellow Draw UI Shot

Further to implementing the first strictly UX iteration of the design of the ballot, I have also adapted the older design version to the new re-design patterns.