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
Scope:
- User Research & Discovery
- User Experience Design
- Usability Design
Brief:
- 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
Iteration:
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
Customer Journey
The customer journey has been segmented in 3 separate sections:
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:
Personas
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
User Flows
I have then created user flows for each part of the journey, see below homepage flow
Information Architecture
And created the information architecture of the new site
Wireframes
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
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.
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
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
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
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:
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.
