Tiffany Chu UI/UX Design Portfolio

An image of Time Off

Time Off

Web Design

  • Role UI Designer
  • Tools Photoshop, Illustrator, InDesign
  • Team KC Liwanag - UI/UX Designer
    Nick Turda - UI/UX Designer
    Christine Le - Copy Writer
  • Timeline Oct 2021 - Nov 2021

Project Scope: 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.

Define

Team Brainstorm

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.

Time/off brainstorm chart

Target Audience

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.

Time/off User Persona

Understanding what the consumer needs

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.

Time/off Empathy Map

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.
Time/off Journey Map

Ideate

Since the website is selling only one product, matcha powder, I wanted the landing page to focus soley on that product and the backstory of the company.

Style Tile & Moodboard

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

Time/off Moodboard

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.

  • 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.

Desktop Design

Time/off Desktop Screens Preview

Responsive Mobile Design

Time/off Mobile Screens Preview

Checkout Process

Develop

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

What I learned

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.

Time/off Mobile, Macbook & Ipad display

© Tiffany Chu // Privacy Policy