UI/UX
April 2, 2021

EasyChek e-Commerce Mobile app

Background information

Triple E is a regional local store located in the suburbs of a metropolitan area. Triple E strives to deliver quality and affordable products to its customers. They offer a wide spectrum of competitive pricing. Triple E targets customers like family mums and workers who lack the time to do instore shopping or want quality and affordable products

Task

Design an app for Triple E , called EasyChek that allows users to easily and seamlessly order products which are delivered to their address

Project overview

Problem

Family mums and workers lack the time to do instore shopping or want quality and affordable products.

Goal

Design an app for Triple E , called EasyChek that allows users to easily and seamlessly order products which are delivered to their address

My role

UX designer rom UX designer of Triple E’ s EasyChek app from conception to delivery.

Responsibilities

Conducting interviews Conducting competitive audits, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the user

User research

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was that working adults are very busy and don’t have time to do in-store shopping This user group confirmed initial assumptions about Tripe H customers, but research also revealed that time was not the only factor limiting users who do in-store shopping .Other user problems included obligations, interests, or challenges that make it difficult products or go to restaurants in-person.

Understanding the user

User pain points

Time

Working class are too busy to visit the store to do shopping.

Easy and Seamless shopping

Heavy and lagging apps are making shopping difficulty

Order Tracking

Most of existing apps do not offer real-time order tracking of purchased products.

Information architecture

Text-heavy menus in apps are often difficult to read and order from.

Understanding the user

User persona

user persona
user persona
Understanding the user

User journey map

user journy map
Ideation

Userflow

userflow
Ideation

Paper wireframes/Sketching

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick, seamless and easy checkout processto help users save time.

6_paper wireframes
Paper wireframes/sketching
Design

Digital wireframes

Digital wireframes
Digitall wireframes
Prototyping

Lo-Fi Prorotyping

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was adding an item to a cart and checking out, so the prototype could be used in a usability study.

Low fidelity protype
UI Design

Style Guide

style_guide_typography
styleguide
UI Design

Hi-fi Mockups

Hi-fi mockups
Hi-fi mockups
Hi-fi mockups
Hi-fi mockups
Hi-fi mockups
Prototyping

Hi-fi Prototype

The final high-fidelity prototype presented cleaner user flows for finding a product, adding it to a shopping cart and checkout. It also met user needs order tracking.

Hi-fi-prototype

Accessibility considerations

Left hints for users to help them understand the app better.

Used icons to make navigation easier

Used detailed imagery for products help all users better understand the designs.

15_Preview 10
Next Project
Project Management App