User Experience Design Portfolio_Tsai-Hsin Hsieh

Branding &

UI/UX Design Year / 2023

WeCup A Shared Reusable Cup Rental Platform

Background Taiwan is a paradise for bubble tea lovers, and our tea culture is internationally renowned. However, it comes at the significant cost of extensive waste management. According to 2023 statistics, Taiwan generates over four billion pieces of disposable cups annually, contributing to a carbon dioxide emission equivalent to 58,000 metric tons.

In recent years, environmental awareness has been on the rise, prompting the Taipei City Government to implement regulations prohibiting the use of disposable plastic cups in beverage shops. Many shops have introduced discount promotions to encourage customers to bring their own reusable cups. Despite the growing variety of eco-friendly cup options available, the usage of disposable cups has not seen a significant reduction.

WeCup aims to address the root causes of disposable cup waste and alleviate pain points for users of these cups.

Discover User Research Survey on usage habits of eco-friendly food utensils - 469 responses How many eco-friendly food utensils do you have?

How often do you use eco-friendly food utensils a week?

(per week)

7 times or above 109 169

1

6-7 times

8

29

2 35

3

11

3-5 times

87

4

19 126

5 or above

once or twice

none

never

109

56

Why do you not use environmentally friendly food utensils you bought when dining out?

I forgot to bring mine.

It’s cumbersome to carry around.

Cleaning is too troublesome After actually buying it, I found that there are very few opportunities to use it.

Define Challenge

HMW

Ideate

# Forgetfulness

help users to remember to bring their reusable cups consistently?

# Cumbersome to Carry

design a reusable cup that is more portable for everyday use?

# Cleaning Troubles

simplify the cleaning process for reusable cups to encourage regular usage?

Help users to clean it.

# Limited Usage Opportunities

increase the number of opportunities for users to utilize their reusable cups effectively?

Create a cup size that suits a diverse range of beverages.

Use the reusable cup without carrying yourself.

Therefore, we provide a platform that allows users to practice zero waste without changing their habits.

Coffee/Tea Shop

A Shared Reusable Cup Rental Platform

User

Competitive Analysis

User Personas

This competitive analysis focus on the three key competitors—7-11, Good to Go, and LIUQIU. It guides our strategy by highlighting their distinctive features: 7-11's widespread store network, GoodCup's unique numbering system, and LIUQIU’s various capacities and stainless steel material .

After summarizing the research, I created a user personas that are used to outline who our customers are, emphasize with them and understand their goal and motivations.

7-11

Good to Go

“ I'm all for saving with a

LIUQIU

reusable cup, but the forgetfulness and convenience factors make it tougher than it sounds!

Features

Requires membership and a $50 deposit through the app to borrow a

Each cup has a unique identifier for

reusable cup from both 7-11 and its

efficient tracking through an

Starbucks branches

information system

Offers the convenience of returning

Implemented both self-service stations

the cup at a different store. Self-service

and partnered with stores for user

cup return machines are available in

convenience.

”

Jointly promoted by the Environmental Protection Agency and local businesses on Liuqiu Island Committed to realizing the "Plastic-

Sandy

Free Island" goal for Liuqiu.

some spots.

28 years old Ｏffice Ｗorker

Background Sandy is a 28-year-old office worker with mediocre incomes. In her daily routine, she indulges in 1-2 cups of coffee during work hours and occasionally treats himself to a boba milk tea in the afternoon. Enjoys exploring social media platforms and has recently developed an interest in the minimalist lifestyle.

Strengths

The distinctive tracking system Wide coverage enhances convenience for users Its strong brand recognition can make significant market influence.

enhances efficiency in cup tracking and

Aligns with local environmental needs

management

Various capacities are available for

The self-service facilities reduce the

users to choose from, and the stainless

workload of staff in partner stores,

steel material ensures ice retention for

which enhances the willingness of

over ten hours

collaboration.

Behaviors requently visits coffee shops, often grabbing a cup on her way to work or during breaks.

Difficulty maintaining consistency in bringing his reusable cup, leading to missed discounts.

urchased a reusable cup to benefit from discounts but struggles with consistent use due to forgetfulness and convenience issues.

Hardly to find a reusable cup that meet the needs of drinking coffee and boba milk tea.

F

Weakness

P

The necessity to join as a member and prepay a deposit might create a barrier for some users Mainly concentrated in the northern region, potentially limiting accessibility in other areas.

May require more self-service stations to meet increasing demand Relatively lower brand awareness may necessitate increased marketing efforts.

Implemented only in the Liuqiu region, limiting its reach.

Pain Points

Enjoys socializing and might be influenced by trends and recommendations from friends or influencers when choosing sustainable products.

Easily influenced by social circles, yet challenging to maintain a minimalist lifestyle due to the complexity of the process or significant changes in established habits.

User Journey With the understanding of target audience, I mapped out the user's experience, identifying key touchpoints, emotions, and potential challenges at each stage of their interaction with the product.

Stage

Search

Awareness

Acquisition

Return

Loyalty

User Goal

To reduce daily expenses when purchasing beverages.

Find a reusable cup rental machine

Successfully rent a reusable cup and get discount for using it.

Return the cup to the machine

Consistently use the reusable cup to save money

Activities

Heard about discounts for using a reusable cup.

Desires a boba tea but hasn't brought her own cup, so she turns to Google to fin

Rents a cup and pay deposit by following the machine's instructions.

Find the machine to return the cup and get the deposit back

Frequently using the map to search for nearby machines.

In-store posters, Social Media

Google

Rental machine, app/website of reusable cup

Rental machine, app/website of reusable cup

Reusable cup program APP

Feelings

Touchpoints

Pain Point

A reusable cup with a capacity of 700ml or more is rather cumbersome and not very portable Most reusable cups are not suita

Don't know if there's a nearby reusable cup rental station

The machine's operation is not intuitive The rental process is complex.

Offering a QR code on machine for

Opportunities

Providing cups in different sizes and

shapes to cater to various purposes.

Creating a map for the reusable cup machine.

access to the instructional video No need to register or download an app during the rental process.

Simply link your credit card or m

Too few machines Worries about whether the cups are clean enough.

Cooperate with some tea shops that would allow customers to return the reusable cup

Using a dishwasher for cup cleaning and sterilizing instead of manual wa

Ideate

After research, I identified three opportunities to enhance this service: implementing a goal-oriented app, streamlining the operational process for better intuitiveness, and incorporating motivational rewards.

User Flow

Information Architecture Download the app to track

Mobile App Login / Registration

rental duration and access exclusive promotions.

Scan the QR code on the machine

a website for rental

Online Customer Service

Main Page

Menu

Enter your phone number to receive a verification code Map

Record

Wallet

FAQs

Progressing

Cards

How to use?

Completed

Add Card

Charging Rules

About

Us

choose your payment method

Scanner

Search

About WeCup

Confirm the Rental

Rental succeed, get the reusable cup FAQs

Contact

Us

Prototype Wireframe

UI Kit Logo

corner=2px

Color System Primary Color

Gray Color

G

Text Styles Heavy

Avenir Medium

Avenir Roman

Avenir

Icons

WeCup Station

Mockup

01 Login Page

02 Home Page - Map

Click on the station you want to go Log in via phone number

Direction Scan to Borrow

Mockup

03 Menu

04 Other Functions

Profile

Carbon Footprint Animate

Badge States

Achieved

In Progress

Increasing

Unstarted

Record

Reward

Wallet

1 cup get 1 point

Rental Details Get Coupons

UI Design Year / 2023

see more “Together, Go Big”

2023 Japan-Taiwan Startup Summit

Official Website

Site Map

Homepage

About the summit

Agenda

Participating Companies

Contact Us

Discover The Summit

For The Summit

2023 Participating Companies

Get In Touch

Day 1 Event Concept

About

Project Goal

Day 2

Agenda

Startup Innovation Summit 2023 is the first

Presenting the purpose of the

large-scale event in Japan held by Startup

event

Island Taiwan. It is the largest innovation

features,

conference event between Japan and Taiwan

highlights and agenda for the

in recent years.

three-day event.

I worked as UI designer, responsible for the event website and event identity design.

and

its

For

Investor Gathering

eye-catching

clearly

showing

Event Highlight For

Community

Gathering

ABOUT

Startup Island TAIWAN

Overview

Mobile{ width: 428px; } Laptop{ width: 1920px; }

UI Kit Text Styles

Montserrat Bold 48pt

Columns Margin 0

Gutter 20

Montserrat Bold 36pt Montserrat Bold 32pt Montserrat Bold 28pt 1920 px

Montserrat Regular 24pt Montserrat Regular 18pt

Color System Primary Color

Buttons

#F6B312

#58C0C1

#E85E91

#70C9A4

#FFFBF0

#6E6E6E

#979797

#D6D6D6

#EAEAEA

Grey Color

#303030

01

About the Summit Event Introduction

hover

click default

Organizers & Partners

Button States

Icons

Industry Categories

default

hover

Saas

Security

Healthcare

AI

02

Agenda The Summit DAY 1

click

Side Events DAY 2

Gala Party

Community

Gathering

03 click

Participating Companies

Company Introduction

Industries Categories

Company Website default hover

Identity Design Roll-Up Banner

QR Code for Event Details

Event Flyer

ID Badge

UI/UX Design Year / 2023

Mega Bank

Currency Exchange

Process Redesign

01

Project Overview

About Mega International Commercial Bank is the second largest bank in Taiwan. They want to evaluate and improve UX-related issues of their website, especially for the currency exchange process.

Project Goal Providing optimal forex services for international students and foreign exchange investors.

My Responsibilities UX Research, Design System, UI Design, Interaction Design

The Scope of Work Research

Prototyping

Visualization

Usability Evaluation Contextual Inquiry Problem Statements Persona Affinity Diagram

Lo-Fi Prototype User Testing Adjustments

Design System Icons & Buttons Mock-up

02

Research Usability Evaluation Began by using present Mega Bank site, analysing home and cloud service page.

Contextual Inquiry Interviewed and observed participants with regular currency exchange needs who were not Mega Bank customers as they performed the following tasks: Task 1: Convert 100,000 KRW to EUR Task 2: Find page to open foreign currency account

Homepage Consistent style

Task 3: Locate the nearest Mega Bank branch Too many layers

The ad is too large

Cloud Service

roblems of the website

Still room for improvement because it is hard to find some specific functions.

P

Complete market information

Information are not mutually exclusive.

Clear organization

Sarah 22y

Detailed and Completed information Use red words to emphasize key points

Labels are difficult to locate

Difficult to find desired functions, as the bank offers many services.

Detailed information requires clicking through Lack of design Wording is too ambiguius and services are not well-defined

ustin 20y

J

ack of organization of functions

01

L

02

C

03

L

04

U

05

T

06

Inconsistencies in English version

onfusing and cluttered layout

arge and distracting advertisements nclear search bar

oo many levels of navigation

02

Research Persona We made a persona to identify our target audience.

As I love to explore new sights overseas, I am searching for a bank application that can ease foreign currency exchange!

Affinity Diagram Before starting to design the product, we organised and prioritised user feedback which assists in focusing on critical aspects of application design that fit user needs and expectations.

Cons

Pros

Pain Points Sharon 20yo Student #Practical #Impatient #Organized #Outdoor

Sharon used to be an international student who studied in Tokyo, and she plans to go back to Japan this summer. Furthermore, as she is interested in investing in foreign currency, she has a habit of haggling every penny.

Feels that conventional ways of opening a bank account is inconvenien Does not have patience to change foreign currency through time-consuming mean Frustrated when there is a lack of organization on the website (i.e. exchange rate table is unclear and not categorized well) Preferred Channel Traditional Ads Online & Social Media Referral Mobile Apps

Reflecting on our affinity diagram and persona, we developed application for Mega Bank to address problems.

03

Prototyping

User Testing Through the Lo-Fi prototype testing, we collected some feedback: ✓ Simple, neat, and organized layout

Lo-Fi Prototype

✓ Clear English version ✓ Efficient foreign currency exchange function ✓ Useful foreign exchange rate graph

Feedback from the test

X

Unclear market graph in 'Home' page

X

Lack of prompts to indicate personal information format

X

Some missing buttons to guide users through pages

X

Lack of notification of completed transaction

Adjustments Based on the feedback collected, here are some possible revisions to the Lo-Fi design we have came up with:

Include more details in market grap Indicate personal information forma Add necessary button Provide confirmation page for completed transactions In addition, we will further optimize the functionalities of the app (e.g. map feature to locate nearest bank branch).

04

Design System

Icons

Buttons Nav Bar

Text Style

Large Title Montserrat Bold 24pt Title Montserrat Bold 20pt Subtitle

Montserrat Bold 14pt

Options Text

Montserrat Bold 10pt Montserrat Medium 10pt

Body Content

Grid

Primary Color

Grey Color

Next →

Margin 20 Gutter 20 #3D5897

#B9C4D9

Next →

#F8FAFB Cancel

#444040

Your QRcode

Montserrat Medium 12pt Montserrat Regular 12pt

Color System

#3D4359

Cardless

Withdrawal

Transfer

#9D9D9D

#DAD9D9

#F5F5F5

393 px

Confirm

05

Mockup

01

Enter the app

02

HomePage

Drag to see another card

Scroll to see more

Click to login via FaceID

Using button state to determine if information is complete

Click to see common functions

03

Currency Converter

04

Exchange Currency

Input a number for conversion

Click to see recent trends

Disabled

Active

05

06

Exchange Currency & Withdraw the Cash

Presentation Invited participants to once again try application and highlighted the entire semester development process.

01. Share your location

User’s testing our app

02. Input needed information 03. Confirm Information

Feedback we collected:

Get notification after transaction

05. Verified to pay

04. Choose payment method

✓

Clear and organized layout

✓

Minimalist, aesthetic, and consistent design

✓

Comprehensive icons

✓

Useful map feature

✓

Efficient to input required information

X

Inability to designate currencies as 'Favorites'

X

Lack of automation of monetary denomination options

06. Complete Currency Exchange!

Graphic Design Year/2023

Taipei Design Festival “Against The Current”

Logotype

Color Palette Pattern

#E96740

#EADCC9

#4C4B56

Typography Futura PT Demi

Futura PT Light

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890

1234567890

#809CB2

#EAE9E3

Moodboard

Key Visual