UI, UX, User Experience Designer, Photographer, Bachelor of Communication

Case details

Overview

The wish from Screwfix has been a digital in-store shopping experience aligned with the physical shopping experience.

Although the business has a successful physical- and digital experience, the wish was to give the customer that visits a Screwfix store an alternative option in to looking up and ordering products in the store and ready it realtime for pickup and schedule delivery if necessary.

Role - UX/UI designer

User Research, current state Product research, Interaction design, Visual design, Prototyping & Testing, presenting progress and results

May 2022

Background

Screwfix is the largest multi channel retailer of trade tools, accessories and hardware products in the United Kingdom.

My activities and approach

I joined an existing team that simulataneously worked on the desktop- and mobile applications. I started working exclusively on the in-store app

Onboarding - After a short briefing on the current status we started organising design tasks; Working on the design system, setting up wireframes and low fidelity designs. After completing we started setting up high fidelity screens.
Setting up a new Design system - There has been a design system for the desktop- and mobile app. The in-store app has a lot of similarities with the mobile app. Using the mobile app design system as a reference we started setting up a design system according to the Atomic design methodology.
Ready for dev: figma style! - Due to a short delivery date time was of the essence. When finalising a design it had to be made available for development as soon as possible. I have been setting up a method in figma that development would have their own dedicated environment to roam in. With this method development would not be contaminated with designs that could be altered by the design team. In case of last minute changes, development could leave tech specific comments and we as a design team would update the screens in a separate environment that would be update the dev environment after publishing.

Problem definition

Screwfix's objective was to bridge the gap between the digital platform and the physical stores. Customers that came the store for a quick solution or customers that wanted to get a certain product or an amount of a product that would not be available at the time, to still be able to get a custom order placed.

We want users to find the required product in a simple, easy to find- and efficient manner.
We want users to understand that if a product is not available in the store that it is possible to order it via the In-store application.
We want users to get an order placed hassle free as soon as possible with a user flow that feels intuitive. At the moment it takes too much time and effort for the customer to get to their objective with the danger of settling for another service.

Design

The design-UI related tasks consisted of creating low- and high fidelity designs. Examples of the product page features information that is accessible directly from the product thumbnail such as title, preview, rating, important info cta, amount in stock, stepper for volume, before/after price, collection- and delivery cta.

Samsung Galaxy Tab A10 view

Back to home

Screwfix | In-store Application