DAVIDsTEA

DAVIDsTEA e-Commerce App
Timeline

March - April 2020
2 months

Project Type

User Research   
User Interface

Role

Solo project. Identified an untouched market for a global company and designed a mobile app that aligns with the company's theme and goals

Results

MVP design to be presented to stakeholders

The Problem

Design a mobile application for DAVIDsTEA that would match their theme and would achieve user goals and expectations

Our Objective

How can we improve DAVIDsTEA's online presence to increase customer acquisition and retention through the development of a mobile application?

Our Approach

Implemented a design-thinking process to develop an application that would add value to a customer's experience with DAVIDsTEA

Investigate

User Research

To understand the current available resources and its users, primary and secondary research was conducted to identify customers needs and wants in a DAVIDsTEA mobile app.

Prototype

Low Fidelity Wireframes

Based off the data collected from primary and secondary research, low fidelity wireframes were designed as a first prototype

Evaluate & Test

User Testing

From the low fidelity wireframes, usability tests has been conducted on 3 representative users for feedback and to improve the mobile application to add customer value.

Key changes

Once we collected our user feedback, we identified all the common improvements that can be changed in the next set of wireframes.

While, all the features that received positive feedbacks were kept.

Insufficient first glance information

A common feedback was the lack of information in the product screens. To solve this issue, I added the type of tea and its caffeine level to give more information readily.

Lack of user action feedback

A common feedback was the lack of user action feedback when adding an item to the cart. To rectify this issue, I added a pop-up screen that confirms that an item was added to the cart.

Outdated filter

Most users found that the filter function felt outdated and clicking checkboxes might not be the most enjoyable experience on mobile. To solve this, I revamped the filter screen by adding adjustment bars and clickable tags.

Navigation bar

Majority of the representative users found that the navigation bar did not have any identification as to where the user is. To solve that, I added a box around the icon to indicate where the user is.

Prototype

Medium Fidelity Wireframes

Based off the data collected from user testings and the identified changes that needs to be made, medium fidelity wireframes were designed as a second prototype

Prototype link: DavidsTea MidFi Prototype (External)

Reflections

Learnings & Next Steps