2022
Brief:
Upgrade the existing Cornershop app and create phase 2 concepts focussing on the operation employee experience
Lead Product Designer, 100% remote
Role:
Activities:
UI redesign of an existing app, end-to-end product design for 2 new solutions, design integration of partner products.
Background
The Cornershop is a live retail environment, created to test innovative new retail products with real customers and collaborate with our clients by experimenting with emerging technologies.
Having a brick and mortar presence allows us to demonstrate emerging concepts in partnership with our clients, minimising the risks associated with launching new products whilst gaining valuable market insight.
Phase 1 of the project involved creating a mobile app to enable customer to navigate the store and interact with 4 individual concepts (see video below):
Digi.me: a virtual try-on app so you can try clothes on digitally before you buy
Purposeful shelves: an AR filter - tailored to an individuals dietary requirements or preferences - that highlights suitable products, making the food shop quicker and easier to navigate for those with restricted diets
Endless aisle: Blending the physical and digital to enable customers to shop seamlessly. Popular products are displayed on shelves and to minimise the amount of produce on the shop floor, the app allows the shopper to continue browsing in-app or via touchscreens in store, maintaining a single basket
Digital barista: In partnership with TopBrewer, a automated coffee machine that can be controlled via the Cornershop app, and pour whilst the customer is browsing the shop
See what the BBC thought of the Cornershop when they visited here
My role
I joined the Cornershop project as Lead Product Designer at the beginning of Phase 2, after the first round of testing with the public. I was brought on board to revamp the Cornershop app based on feedback acquired from customers and to create several new solutions from scratch as well as integrating 2 new partner products, all in time for Phase 2 reopening. The project was 16 weeks in total and for a period of this time I worked with a junior designer.
What I delivered
1. Upgrading the Cornershop app
My approach here involved conducting an in-depth analysis of all existing designs and identifying obvious areas for improvement. I also did a deep dive into the the user research from the 1st phase live period, synthesising down the most common problems areas to ensure all improvement were grounded in real insight. I also paired this with the product roadmap by looking ahead to understand business value and technical implications for future products, and forward planning for them to be desjgned and integrated.
Before
I completely revamped the Cornershop app by:
Creating a design system from scratch to formalised components and style across all assets.
I carried out an evaluation of all existing components and assets in Figma, and then organising the assets to keep whilst discarding any duplicates/assets no longer needed.
The design system includes typography, colours, illustrations and images, logos, icons, buttons, text fields, tags, tabs, cards, navigation and popovers.
I made the decision to create a design system based on the fact that there wasn't one from the start of the project, making it difficult to design new products, but also creating a headache for the dev team where they were having to create multiple new components for similar functionality.
Improving the visual design across all features - using more realistic visuals in place of the existing illustrations to give the brand a futuristic but real look and feel. This design decision was based on feedback around the visual looking too ‘cartoony’ and not like a real shop.
Improving the checkout flow to create a seamless flow for customers purchasing items in app by asking for payment information up front - incentivised with a free coffee. Based on the fact we were incorporating a new partner into the store to enable 'just walk out' technology
Redesigning the onboarding flow and enhancing the onboarding experience, by incorporating short sharp introductions and instructions, simplifying input fields and adding an improved profile section. This was based on feedback that inputting information felt like it took too long, and didn’t explain anything clearly.
Adding a map for customers to understand where each product is and the background behind them - based on feedback around customers potentially missing more subtle solutions installed for demo.
2. Integrating 2 new partner products
My approach here involved understanding the business value of installing and demoing these partner solutions and the technical requirements and limitations in terms of designing for them. I first created journey maps, before sketching wireframes, gaining feedback and finally hi-fidelity UI designs and another round of feedback.
I integrated 2 partner products into the customer journey and app flow:
1. Aifi
‘Just walk out’ technology which was installed in-store. I integrated the onboarding of this into the main app onboarding journey, by enabling customers to set up payment method and also check in to the store.
2. WANNA Kicks
Shoe customisation and virtual try on. I add a new section to the cornershop app for customers to use this solution and created new Cornershop branded UI designs to replace the WANNA Kicks app. Given this product is usually for customers to use at home or away from a store, I also created an alternative journey where customer can use the WANNA Kicks technology in-store on a touch screen.
3. Creating 2 new retail ops concepts from scratch
I worked in collaboration with a junior designer to create 2 new concepts completely from scratch. We carried out the full end-to-end product design process from user research and unpacking pain points from a retail operations point of view, key insights being around:
Task management
-
In large warehouses with lots of stock, it can be difficult for employees to locate stock to replenish shelves in a timely manner
-
When an urgent task comes up, it can be difficult allocating a team member to address it when working in a large store
-
If an employee needs coaching, it can be tricky to provide training outside of allocated training time
Store performance
-
When managers need to structure their teams and stock levels to effectively manage store footfall, there are a lots of separate data sources to understand and interpret
-
The flow of data can be slow and limit a fast response to unpredicted demand
-
The way that managers manage staff is usually through verbal communication, making organising a team difficult when working in a large superstore
Once we had our problems statements to work from we held several ideations sessions before deciding on 2 concepts with backing from several of our clients.
We then began to create user journeys maps to understand how a user would interact with the solution and started to define features for each one.
Once we had the customer journey and features confirmed, we began understanding the technology available to support the solution, and then began sketching wireframes accordingly. After a round of user testing, we interated and refined our designs, before handing off to the development team of engineers.
Due to time constraints and a lack of real store data to leverage, Concept 1 was built into a working solution, however Concept 2 remained as a clickable prototype which can be navigated by users instore.
The 2 solutions we delivered:
1. Aiding shop floor staff in their role using GoogleGlass
We created a Google Glass solution to support shop floor employees to perform their roles. Features of this solution include task management ticket self-allocation and coaching through Google Meet.
2. Real time store analytics to optimise staff and stock through a management dashboard
We designed and prototyped a management dashboard to visualise predictions based on historic data such as footfall and stock levels, and also visualise real-time data such as sales and staff performance, all in one place.
The Cornershop will be opening to the public for Phase 2 in July 2022
Read another case study
