Project Overview
Tesco was experimenting with new forms of interactivity to keep their customers curious and engaged with their website and app. I was therefore given the task to experiment with the concept of 'Shoppable Media'. This is where items can be clicked and added to the customer's shopping basket, directly from a photo. I experimented with different scenarios and situations in which shoppable media would work effectively.
My role
UI/UX Designer
To begin...
In my brief, I was given the style of buttons to be used, as they had to be created as new components. The format was also meant to be a large banner image for the homepage of both the website and the mobile app.
In my brief, I was given the style of buttons to be used, as they had to be created as new components. The format was also meant to be a large banner image for the homepage of both the website and the mobile app.
Research
Before beginning this project I carried out market research, finding out how other companies incorporated shoppable media in their UI's.
Before beginning this project I carried out market research, finding out how other companies incorporated shoppable media in their UI's.
Mock-ups
I put together a series of different images to show the different situations shoppable media could be used. I created a banner for a 'movie night' at home, a summer birthday party, seasonal events, i.e. the Wimbledon one having traditional food you'd eat at that event, as well as one that shows different meals, this one is a slightly different style of link as you'll be taken to the different recipe pages on Tesco's 'Food Love Stories' page.
I put together a series of different images to show the different situations shoppable media could be used. I created a banner for a 'movie night' at home, a summer birthday party, seasonal events, i.e. the Wimbledon one having traditional food you'd eat at that event, as well as one that shows different meals, this one is a slightly different style of link as you'll be taken to the different recipe pages on Tesco's 'Food Love Stories' page.
Creating components and their different states
I created new components with different states that would later be added to the component library.
I created new components with different states that would later be added to the component library.
User journey on the mobile app
Here is a mock-up of the user journey using the new components that I made for the mobile app.
Here is a mock-up of the user journey using the new components that I made for the mobile app.
Final Design
This was the final design that was presented to our design lead and stakeholders who were very enthusiastic about the designs and saw the value in continuing in the project further.
This was the final design that was presented to our design lead and stakeholders who were very enthusiastic about the designs and saw the value in continuing in the project further.
