Boots App Redesign
Personal Project | UX Design
Project Goal
The goal of this redesign for Boots App is to improve the user experience when using this app by rebuilding the information architecture and enhancing the UI design, thus increasing the willingness of users to purchase products from Boots.
Key Features
Store Locater
The store locater was originally in the More From Boots screen in the app's More.
Adding this feature to the main homepage will allow users to access it quickly.
Loyalty Card
Adding the loyalty card to the homepage allows the users to save time during the checkout process.
Navigation Bar
The Navigation Bar is divided into 4 sections, including Home, Shop, Healthcare, and Me.
Promotion News
This section allows users to access promotions and products news easily.
Departments Select
This section allows users to select departments easily.
Appointments Calendar
This feature allows users to access their upcoming appointments and details.
Healthcare Services
The healthcare services are divided into several sections and can be accessed easily.
Shopping Orders
This section allows users to get a glance of their orders, and provides a way to access the order details.
Appointments
This section allows users to get a glance of their appointments.
Design Process
3 weeks
Discover
Research
UX Persona
Empathy Map
User Journey Map
2 weeks
Define
3 weeks
Develop
6 weeks
Deliver
Information Architecture
User Flow
Low-Fidelity Wireframe
UI kit
High-Fidelity Wireframe
Prototyping
User Persona and Empathy Map
Ann
Age: 24
Education: Masters
Status: Single
Occupation: Student
Location: London
Tech Literacy: High
She prefers to use apps than website, as apps are easy to access.
She doesn't go to Boots frequently, but will goes to nearby Boots stores for makeup and nutrition products.
Says
-
Need long time to find out wether a product is a shampoo or a conditioner.
-
Too many clicks needed to buy online.
Thinks
-
The brand font is too big, can't tell if it is the product needed.
-
The colours of a product should be in one page.
Does
-
Spent 20 seconds to figure out what is the product or its colour.
-
Opened 20-30 pages to find the wanted colour.
Feels
-
Confused
-
Angry
-
Frustrated
User Journey Map
Task
Finished the last bottle of vitamin.
Check the nearest store's opening hour.
Go to the nearest store.
Spend time at other place.
Back to store, try to find the product.
Go home and try to order online.
Action
Plan to buy again.
Open map apps to do so.
Go to the store and find it is not open yet.
Go to another place to wait till it is open.
Find the product is not in stock.
Walk back home and use the app.
Feeling
-
Frustrated
-
Unsure
-
Normal
-
Tricked
-
Frustrated
-
Annoyed
-
Eager
-
Frustrated
-
Annoyed
-
Eager
-
Frustrated
-
Annoyed
Opportu-nities
Vitamin notice
Stock check
Opening hours in app.
Update the opening hours in app.
Stock check
Information Architecture
User Flow
1. Shop Online
Homepage
Click on SHOP
Departments Page
Search For Products
Tap On Products
Checkout
Basket
Add To Basket
Buy Now
Product Detail
2. Shop On Site
Homepage
Click on Store Locater
Store Locater
Type To Find a Store
Store Details
Homepage (Loyalty Card)
Wireframe
Colour Palette
#060550
#F90065
#A2A2A2
#E6E6ED
#F2F2F2
Typography & Icon Set
Sketches
