UI / UX Portfolio - Cheers Rebrand by Tristan Tan

CHEERS REBRAND TRISTAN TAN

I’m a Creative Designer with background in Interior Design and User Experience. I’m skilled at 3d modeling, sketching, wireframing, userflows and prototyping. I love creative problem solving and analyzing human behaviours. I get excited about how technology can impact the

WHAT I'M LOOKING FOR

future. I’m currently located in Singapore and

My goal is to work on a larger team and be more involved in testing and interacting designs.

looking for Creative Design Job Opportunity

TOOLS I KNOW:

MY AREAS OF FOCUS

Sketch InVision 3Ds Max AutoCAD Adobe Creative Suite Google Suite Microsoft Office SketchUp Figma

USER RESEARCH

EXPERIENCE DESIGN

VISUAL DESIGN

I have experience doing

I analyse customer journey

I experiment with different

usability tests and one on

flows to generate their pain

typographies and layouts

one interviews, both in

points, ideate design ideas

for design interfaces.

person and remote to

and prototypes to come out

gather feedbacks for

with new design

improvement of the

breakthrough.

product.

Tristan Tan

SOME COMPANIES I’VE WORKED WITH

Tristan Tan

SOME OF MY WORK STOW CHEERS REBRAND

EXPERIENCIA HOTEL

STOW OFFICE

CLIENT: CHEERS PTE LTD

CLIENT: FITCH DESIGN

CLIENT: STOW

A rebranding project to increase awareness

A hotel project to design signature

A new compact transformative workspace,

of using their app experience and new

experience using journey ‘touch points” and

seeks to revitalize an area of an office space

upcoming store interior.

‘pain points’ to explore each hotel areas.

with the idea of creating a productive and yet ever changing workspace of the populated future. Tristan Tan

WHAT IS CHEERS? “Cheers” is a homegrown chain of convenience stores that serves a diverse group of customers who value convenience and time.

KEY GOAL Design new Cheers store at Nanyang Polytechnic together with in app experience to increase brand awareness and capture wide economy moat of convenience store.

MY ROLE + RESPONSIBILITIES This project focused on rebrand of interior store and in-app experience to identify the decreasing sales and offer solutions to increase customer flow.

TIMELINE This project was completed in 6 weeks.

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID We begin by analysing the current customer flow and layout of CHEERS Store.

02. THE PROCESS 03. USER RESEARCH

Regular customers

Last minute shoppers

The neighbours

Go to convenience store

A need for a last minute and

They live near the stores

because of life’s simple

very specific item.

hence visit because of its convenience.

addictions and things in the store are easy to locate.

04. CONCEPT DESIGN

The UX behind the habit of shopping

We noticed customers travel only certain areas of store. Their shopping experience was focused straight to the counters after picking the items they want. This habit of shopping may explained deteriorating of sales and we decided to venture deeper.

Tristan Tan

CHEERS REBRAND

THE DESIGN PROCESS 01. WHAT WE DID

IDEO Three Stages Design Process – Inspire, Ideate, Implement 02. THE PROCESS Following the IDEO model of humancentered design, we started the process with analysis of problem and ended with validation.

03. USER RESEARCH 04. CONCEPT DESIGN

Inspire

Ideate

Implement

Tinker and outline the

Generate ideas to provide

The path from the ideate

problem or opportunity that

solutions from problems

stage where the solutions

motivates the search for

gathered through previous

are produced into the

solution.

inspire stage.

market.

Tristan Tan

CHEERS REBRAND CHARLOTTE

BEHAVIOURS In campus from Monday to Friday from around 10am – 9pm. Snack for dinner and when doing projects.

01. WHAT WE DID

Visit Cheers around two times every week. Would go Cheers with her friends.

02. THE PROCESS

Short tempered. Can’t find the things she wants in Cheers every time.

03. USER RESEARCH

Consider visiting other convenience stores to explore.

We create assumptions based on our

Stress easily.

understanding of people visiting Cheers and a persona.

04. CONCEPT DESIGN

DEMOGRAPHICS

NEEDS AND GOALS

Age: 19 Years Old

She wants to have a place to reduce stress.

Location: Singapore

She wants to know the various products available in

Occupuation: Design Student In Nanyang Polytechnic

Cheers and before going. She wants to have a place to eat and brainstorm the same time.

PERSONA

To start off, we create persona of a regular “Cheers” customer and our understanding of people who visited “Cheers” regularly. This persona was not fully research based, but it was what we used to guide our design decisions and principle. Tristan Tan

CHEERS REBRAND

01. WHAT WE DID

In this project, planned and conducted 20 interviews with students and existing

02. THE PROCESS 03. USER RESEARCH

customers in Singapore.

We planned and conducted 20 one on one interview sessions and analysed the customer habits to identify their pain points for their journey.

04. CONCEPT DESIGN

80%

60%

ONE-ON-ONE

BUY

CANNOT FIND

HOURS OF

INTERVIEW

CONVENIENT

THE THINGS

CUSTOMER FLOW

SESSIONS

SNACKS

THEY WANT

IN SHOP LOGGED

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH

Charlotte is working on her

Realising it, she used her

Moreover, she downloaded

With the mobile application

school projects and was

phone to search for the

the mobile application and

failed to give her the

aware “Cheers” is available

nearest store. To her dismay,

was not able to gather other

information she wants, she

nearby.

“Cheers” was not among the

information of “Cheers”

found the location of the

top results.

brand.

store from the web.

Having the store location,

The store was not easy to

After taking a while, Charlotte

The stocks are everywhere

Charlotte went across and

find and there are no clear

managed to find the store

on the floor and blocking the

was not able to locate the

logo name showing “Cheers”

and she realised there is only

pathway. There are also

one door entrance and exit

difficulties in locating the

point.

items she want.

Establishing the story flow – We used storyboarding to get a full picture of the user and their problem. This storyboard helps ensure the full experience is considered and serves as a key early collaboration tool between all members involved.

04. CONCEPT DESIGN

store easily.

She finally found the needed

Payment was not available

To add on to her frustration,

Charlotte hope her next

snacks but was not able to

through self check out and

she was obstructed by other

shopping experience at

eat and relieve stress before

she was frustrated of having

users coming in from the

“Cheers” will be better.

going back to work.

to queue.

same door where she needs to exit from.

Tristan Tan

IDENTIFYING PAIN POINTS THROUGH CUSTOMER JOURNEY MAP We reviewed the user journey map and jotted down their pain points and different emotions experienced onto Post-It. Next, we used affinity mapping to group the pain points into similar categories of the customer journey on the whiteboard. Public Link: https://miro.com/app/board/o9J_kqBX-lU=/

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH Affinity mapping pain points on whiteboard, we divided the pain points in each phase of the customer journey follow by prioritising it. Affinity mapping pain points on whiteboard

04. CONCEPT DESIGN

AFFINITY MAPPING

We explored each stages from the user journey of them finding the store to being a regular customer. Their emotions and thoughts at different journey stages really helped in generating the problems we can look at.

Tristan Tan

Most Important to “Cheers” Online

Store

Mobile

Store

Layout

App

Store

Entrance

Logo

Store

Discovery

“Cheers”

Location

Of Store

Gift Card

Check Out

PRIORITISING PAIN POINTS Follow by the affinity mapping, we prioritised each

Least

Most

pain point based on its importance to the user as well

Important to

Important

User

to User

as its importance to “Cheers”. Our assumptions of the importance to users were

Price Tag

based on conversations with existing users and their

Instant

Incentive

Food

Rewards

journey map.

Least Important to “Cheers” Prioritising pain points on a 2x2 matrix

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH

DEFINING THE PROBLEM

PAIN POINT 1: Cheers does not have online store.

PAIN POINT 2: The mobile app does not contain any “Cheers” in depth information.

PAIN POINT 3: I do not have the map location of “Cheers” before I reach.

PAIN POINT 4: There is no loyalty rewards for being a loyal customer.

We decided to tackle the pain points that were both important to users and “Cheers”. By redefining the pain points

PAIN POINT 5: Entering the store is difficult as people exit through same portal.

above, we start to ideate with the user needs in mind.

PAIN POINT 6: Store Logo is not visually big and not easily seen from far.

PAIN POINT 7: I cannot locate the store easily when nearby.

04. CONCEPT DESIGN

PAIN POINT 8: The checkout process is slow and no self check out available.

PAIN POINT 9: I only can use the gift card once to deduct the value. PAIN POINT 10: The overall shop layout does not provide easy locate of product.

PAIN POINT 11: I am not able to eat my food instantly and take a break when doing projects.

PAIN POINT 12: The product price is not easy to refer from shelves.

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN After analysis of the user journey, it is time to start the prototyping phase where we came up with sketchs quickly to address each of the pain points.

IDEATING THE SOLUTION

With the discovery of the pain points, we realized there were two major areas to focus on. Firstly, the mobile application followed by the interior space of the retail store. We did up some preliminary low fidelity wireframes to refine our ideas and narrow down our solutions for the high fidelity mockups.

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN After analysis of the user journey, it is time to start the prototyping phase where we came up with solutions to each of the pain points. With referencing back to Pain Point 4 of no rewards for being a regular “Cheers” Customer, we ideate solutions of creating an account for tracking of user transaction records and ability to redeem awards.

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN After analysis of the user journey, it is time to start the prototyping phase where we came up with solutions to each of the pain points. We tackled Pain Point 2 where we included in depth information and location of Cheers stores in the new application. Each activity allows user to navigate across and learn more about it by clicking to check out their profile, services and their new ‘Cheers” Gift Card.

Tristan Tan

CHEERS REBRAND

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN After analysis of the user journey, it is time to start the prototyping phase where we came up with solutions to each of the pain points. We tackled Pain Point 1 where “Cheers” will have an online store integrated in the mobile app and followed by Pain Point 8 where users will be able to self check out using “Cheers” Pay.

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN After analysis of the user journey, it is time to start the prototyping phase where we came up with solutions to each of the pain points. We tackled Pain Point 3 and 7 where we included the map location and nearby “Cheers” store. In this way, user will be able to locate the store easily.

Tristan Tan

CHEERS REBRAND

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN Followed by the low fidelity mockups, we created high fidelity mockups of our proposed solutions. Insights from the validation test led me to reiterate few of the screens. Pain Point 2: The mobile app does not contain any “Cheers” in depth information. Pain Point 4: There is no loyalty rewards for being a loyal customer. Design Solution: Integrate “Cheers” profile information along with the various services such as the Cheers Gif Card for customers to have a better understanding of the retail store and rewards them. Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN Followed by the low fidelity mockups, we created high fidelity mockups of our proposed solutions. Insights from the validation test led me to reiterate few of the screens. Pain Point 3: I do not have the map location of “Cheers” before I reach. Pain Point 7: I cannot locate the store easily when nearby. Design Solution: We created in-app location of nearby “Cheers” store to enable users to know where is the nearest store at their location.

Pain Point 8: The product price is not easy to refer from shelves. Pain Point 12: The checkout process is slow and no self check out available. Design Solution: With the self check out using “Cheers” Pay, User will be able to check the price of products by scanning their barcode. This will reduce the hassle of referring to the confusing price tags located across the shelves.

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN Followed by the low fidelity mockups, we created high fidelity mockups of our proposed solutions. Insights from the validation test led me to reiterate few of the screens. Pain Point 4: There is no loyalty rewards for being a loyal customer. Pain Point 8: The checkout process is slow and no self check out available. Pain Point 9: I only can use the gift card once to deduct the value. Design Solution: With having the “Cheers” gift card, customers can use to self check out with scan and pay together with recharging when funds are low. Moreover, rewards and transactions records saved in the app.

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN With the high fidelity mockups for the mobile application addressing some of user’s pain points, the remaining ones for the interior store are yet to be addressed. Pain Point 5: Entering the store is difficult as people exit through same portal. Pain Point 6: Store Logo is not visually big and not easily seen from far. Design Solution: We designed two

DRINKS <

entrances at both side of store which

STORE <

segregate the human flow into two

CASHIER <

directions, this will reduce the amount of traffic entering in and out from each side. At the same time, we will have a mounted “Cheers” logos present on both entrances.

SWEETS/SNACKS/FOOD < CAFE < MAGAZINE/NEWSPAPERS <

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH

ENTRANCE B

04. CONCEPT DESIGN First option of human flow across the concept store, entering from entrance A and exiting at entrance B.

ENTRANCE A

PATH 1 < PATH 2 < ENDING POINT <

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH

ENTRANCE B

04. CONCEPT DESIGN Second option of human flow across the concept store, entering from entrance B and exiting at entrance A.

ENTRANCE A

PATH 1 < PATH 2 < ENDING POINT <

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN With the design of the interior store, we addressed the below pain points with the 3D visuals for “CHEERS”. Pain Point 5: Entering the store is difficult as people exit through same portal. Pain Point 6: Store Logo is not visually big and not easily seen from far. Design Solution: We designed two entrances at both side of store which segregate the human flow into two directions, this will reduce the amount

View of “Cheers” Store Entrance A

of traffic entering in and out from each side. At the same time, we will have a mounted “Cheers” logos present on both entrances. Tristan Tan

CHEERS REBRAND

View of “Cheers” Store Entrance B

of traffic entering in and out from each side. At the same time, we will have a mounted “Cheers” logos present on both entrances. Tristan Tan

CHEERS REBRAND

Design Solution: We introduced simple signages at the entrance of store and across the shelves, allowing customers to have a better understanding of where the items are. This will save the hassle and time of finding the things the user need.

View of “Cheers” Store Interior

Tristan Tan

CHEERS REBRAND

View of “Cheers” Store Interior

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN With the design of the interior store, we addressed the below pain points with the 3D visuals for “CHEERS”. Pain Point 8: The checkout process is slow and no self check out available. Design Solution: We introduced scan and pay self check out using the mobile app, increasing the efficiency of checking out without queuing for cashier counter. On the other hand, user will still be able to choose by paying at the counter in the events of

View of “Cheers” Store Interior

not having the “Cheers” gift card mobile app payment integration.

Tristan Tan

CHEERS REBRAND

01. WHAT WE DID 02. THE PROCESS 03. USER RESEARCH 04. CONCEPT DESIGN With the design of the interior store, we addressed the below pain points with the 3D visuals for “CHEERS”. Pain Point 11: I am not able to eat my food instantly and take a break when doing projects. Design Solution: Understanding students’ study life can be stressful, we created a friendly environment in “Cheers”. We proposed an idea of having a chalk wall in the store near the café where users can express their emotions

View of “Cheers” Store Interior

through the wall. They will be able to relax and eat at the same time.

Tristan Tan

TAKEAWAY “Cheers” is a great leading convenient store with a grand mission to provide the best innovative products and convenient locations to customers . To achieve this, it faces one of the biggest challenges — an accessible and friendly network of its retail and online presence. With putting their user reviews in the forefront, they will be able to know what their customers want. Therefore, taking the lead once again in being the convenient store we love.

Tristan Tan

GET IN TOUCH

WHERE TO FIND ME ONLINE

BEHANCE www.behance.net/Tristsw

I’d love to show you more of my work and answer any questions you may have. LINKEDIN

Here are the best ways to reach me:

www.linkedin.com/in/tristan-tan/

ISSUU

tristsw@hotmail.co.uk