Tiffany Chu Graphic Design Portfolio

Web & UI Design

Time Off

Introduction

Time/off is a fictional e-commerce site selling local matcha tea grown on Vancouver Island. The concept for this came from a real tea farm that managed to grow tea leaves in North America.

In this project, we explore the checkout process in e-commerce websites and what makes a good checkout process for customers. Time/Off is a Canadian brand and will be targeting the Canadian e-commerce market.

Role: UI Designer

Software: Photoshop, Illustrator, InDesign

Team Members: KC Liwanag, Nick Turda, Christine Le

Empathize

Research

Our goal was to learn how to create an e-commerce site that would make it easy for consumers to buy our fictional product. To better understand what our website needs and how we can improve it, we created a user persona and a journey map. Our design process included user research, which we had a limited amount of time to complete, so our focus was on our users' journey maps to guide us.

MeaningfulWork company flowchart
User Persona

Our first step in this project was to create a user persona. To better understand their expectations & motivations, our team needed a clear understanding of who we are designing for.

Empathy Map

After solidifying our user persona, we created an empathy map to gain a deeper understanding of our user and her needs and goals. Specifically how they think, feel, do, and say. We wanted a cleared understanding of their behaviour and thoughts when going through our website.

MeaningfulWork company wireframe
User Journey Map

Our website was on the right track based on the user's journey map. The user had no problem completing their task. During our study, we identified pain points that needed to be addressed as well as opportunities to improve the user experience on our site.

  • Shipping information isn't clear. (Shipping promotions/fees)
  • Instructions for preparing the product could be more engaging and delivered better.
  • Promotions and deals aren't clearly advertised.
MeaningfulWork company wireframe

Ideate

Brainstorm

After identifying our user, our team decided to go more into the branding of the company. We brainstormed the functionality and services our company would provide. Since we decided to sell one product, matcha powder, we wanted the landing page to focus soley on that product and the backstory of the company.

MeaningfulWork company wireframe
MeaningfulWork company flowchart
Moodboard

Our company's branding centers around a minimalist theme with a lot of textured images. We wanted to keep a clean color palette of green, white, and black to evoke peace and tranquility throughout our site.

Design

To improve the user's experience, we designed and delivered solutions based on the pain points of our users. In order to demonstrate how we solved our users' pain points, our team developed a high-fidelity prototype of the website.

Test Prototype
  • Shipping fees and information link is relocated to the footer.
  • Shipping information is generated in their checkout preview.
  • Discounts are revealed in the shop and the user’s total savings are also shown in their cart.
Checkout Process
Development

I was given the opportunity to code the prototype some of the features of our website. I hand-coded the website with the help of Bootstrap which allowed me to exercise my front-end development skills. This process taught me a lot about how much goes into coding the designs, and during this, we have to tweak some of our design choices because we were restricted by a deadline. Most of the time the developers can code design but don’t have the time. I was able to empathize with the developer’s role and understand how to better communicate and work together with them in future projects.

This prototype includes the following features:

  • Add to cart animation
  • Pop up modules
  • Slide out cart with adjustable quantity feature
View Site

Reflection

During this project, I discovered all the small details that make up a good user experience when it comes to shopping online. Details such as language setting, autofill, and currency change help make a convenient and easy shopping experience for the user. These features need to be implemented seamlessly so that it doesn’t deter from the product’s branding but also need to be visible in case the user needs access to it.

Something I wish our team spent more time on was the checkout process. We were able to do our research on what makes a good checkout process, but I would like to go back and see if there’s anything we can do to improve it or make the user’s checkout experience more enjoyable.

❮ back to projects