Tim Wang 2020 UI/UX Portfolio by Jun Ting Wang

T i m Wa n g

PORTFOLIO BOOK

UI / UX Design 2020

ABOUT ME

PORTFOLIO BOOK

Tim Wang I am an UI / UX designer with 3 years experience in visual design. I have practical experiences such us user interface and experience design & project management at Cohome, P&G and Uniliver products branding design at Paradise Design from Taiwan, etc. I create impactful visual communications to connect users and products. Portfolio website : juntingw.com

TA B L E O F C O N T E N T S

PORTFOLIO BOOK

Catchup

Mooday

Cesta

Gift House

User Research

Mobile UI

Academy of Art x CitroÃ«n

Mobile UI

Voice & Graphic UI

Branding Design

Automotive UI

Branding Design

Prototype

User Research

Concept Car

User Research

Motion Graphics

Prototype

Motion Graphics

103

110

Fog city

Racoona

Clickit HTML

Mobile UI

HTML

Branding Redesign

CSS

User Research

JavaScript

Prototype

Web App design

PHP

T i m Wa n g

User Research, Voice & Graphic UI, Prototype

UI / UX Design 2020

CONCEPT

PORTFOLIO BOOK

With Catchup, your job applications can be managed with one click. Catchup can help you organize emails by company. Also, you can update the application status automatically by using the shortcuts. You can easily edit and add additional interview steps. Each color bar indicates different application status, which makes it easy to distinguish what steps you are on.

P R O B L E M S TAT E M E N T

PORTFOLIO BOOK

â&#x20AC;&#x153; It is hard to manage my job applications.â&#x20AC;? Before you apply Each company has different deadlines and requirements.

Each company has different application processes. After you apply

Hard to remember which companies you have applied.

Hard to distinguish emails from recruiters among all other general emails. Difficult to follow up your application status.

Hard to manage different interview schedules.

TA R G E T A U D I E N C E

PORTFOLIO BOOK

Primary Secondary

Students Looking for internship and new grad full-time position

Junior / Entry Level Position Looking to transfer company

INTERVIEW & FINDINGS

PORTFOLIO BOOK

Tracking Status Spreadsheet to follow up their status Managing Email Organize Email base on different Stages / Regions / Positions Mark emails from recruiters / company Managing Application Application history

Notes about job description

Notification of different schedules (Alarm) Wish List of companies want to apply Communication Getting Feedback from Recruiters Background info Information of the Interviewer (Hiring Manager / recruiters)

SURVEY & FINDINGS

PORTFOLIO BOOK

1. About 70% users applied to more than 10 companies 2. Prefer using Linkedin the most because of the "Easy Apply" feature 3. Managing applications a. Organize all applications by using Google docs, spreadsheets, or calendar b. Write down everything c. Remembering or Checking email frequently 4. Status Tracking Email / Excel / Note taking 5. Managing Emails Make an email folder / Color tag label / Separate email account 6. Managing Schedules Google Calendar

Link to survey

MARKETING v

PORTFOLIO BOOK

Our target audience It is estimated that for the 2019-2020 academic year, there will be a

total of 3,898,000 college graduates in the United States, an increase of nearly six million students from the 2015-2016 academic year.

The unemployment rate for college graduates was only 2.5%. That means that only one out of every 40 college graduates is unemployed.

It takes the average college graduate 3â&#x20AC;&#x201C;6 months to secure employment after graduation.

E M PAT H Y M A P

PORTFOLIO BOOK

Angela 24, Student

Say “It’s hard to manage the application processes for all the different companies I applied for”

Think

Do Note-taking

Organizing manually in the doc.

Checking email and schedule everyday.

Feel

“What if I miss the deadline or important updates from the recruiter?”

Frustration

“I wish there’s an app that help me organize and keep track of all of my interview process”

Tired

Busy

Stressful

PROJECT SCOPE

PORTFOLIO BOOK

Step 1

Step 2

Step 3

Seeking and Applying for job

Tracking the application status

Arranging the application and schedule

Searching Job Positions Rating: 4/5

Tracking Status Rating: 1.5/5

Arranging Schedule Rating: 3/5

There are many successful Apps on the market to help users find jobs.

Survey shows that users feel higher level of frustrations in these two steps

SOLUTIONS

PORTFOLIO BOOK

1. Make the scheduling for interviews more convenient 2. Make it easy to track and manage different job applications status

FOCUS POINTS

PORTFOLIO BOOK

1. Email Manager Tracking status for the large numbers of applications

2. Make it easy to track and manage different job applications status Tracking status for the large numbers of applications

PERSONA

PORTFOLIO BOOK

About Tim is an international student now. His dream is to get a job in the US and be a software engineer. However, he has a lot of works to do everyday, and also looks for every opportunity to get an internship. He's going to graduate in few months, so he is very stressful and needs some help with his jog hunting.

Needs To get a full-time offer before he graduates To start his career as a software engineer NAME : Tim

Get a job and stay in the US

AGE : 22 OCCUPATION : Student STATUS : Single LOCATION : Berkeley, CA ARCHETYPE : CS Geek

Frustrations Doesn't have much time until graduation Very busy to balance school work and job hunting Hard to stand out among competitive CS students

STORYBOARD

PORTFOLIO BOOK

Tim applies to a lot of companies and receives emails from different companies

He opens CatchUp on his desktop, and CatchUp sorts the mails by companies automatically

One day, he gets an update from recruiter about changing the way they interview

He says the keyword â&#x20AC;&#x153;interviewâ&#x20AC;? and checks the emails application status on his smartwatch

He opens CatchUp app in his desktop to update the status from video call to onsite interview

He set the schedules about interviews with recruiters through the desktop.

He gets a notification from his smartwatch: interview dates are confirmed by recruiters

He finally does the onsite interview

CONSTRAINTS

PORTFOLIO BOOK

Applying

Browse jobs online

Select companies to apply for

Submit applications

Waiting

Receive confirmation emails

Communication

Get Response on next step

Reply back

Interview

Get Offer

Imposing Constraints

1. For students & entry level job hunters 2. Not for searching and applying jobs 3. The features should be easy and accessible 4. Not a social app, for the purpose of personal use 5. Donâ&#x20AC;&#x2122;t deal with the process happening after getting offer or rejection

BRAINSTORMING

PORTFOLIO BOOK

F E AT U R E S

PORTFOLIO BOOK

1. Desktop

2. Smart Watch

Email Manager

Voice Assistant

Using OCR (Optical Character Recognition), filter and organize emails related to job application

Notification

Clearly sort the emails by different companies

Status tracker (view only)

Schedule reminder

Status Tracker Change application status Update your data in the status diagram (names, steps, date) Check the newest updates Schedule Add and edit your schedule Add notes for companies

SITEMAP Page

Feature

Inbox

PORTFOLIO BOOK

Watch

Status

Filter

Keywords

Search Bar

Filter Company Folders View Emails

Email info

Chat Bot

Schedule

View Calendar

Status Picker

View Status

Progress Bar

Editor

Notification

Settings

General Settings Follow-up

Notification Paired devices

List View Job Description

Grid View Add New Schedule

Language

Email Settings

Linked account

Account Settings

Profile

Password

U S E R F L O W - S TAT U S Desktop

PORTFOLIO BOOK

Watch

1. First time user login Create account

Allow access

Tutorial

Status(Empty)

2. Just applied new company Inbox page

Confirm email

Short cut to create new status

3. Keep tracking status Receive response from Catchup

Ask Catchup for the status

Status page

Edit/check status

4. Receive updates from recruiters Receive email confirmation from recruiter

Schedule page

Inbox page

Ask Catchup to chow the schedule

Update your schedule

Jump to email account

Receive response from Catchup

Status page

Update your status

Reply to recruiter

USER FLOW - VOICE

PORTFOLIO BOOK

Input : User

Output : Catchup

Wake word

Response

“Hey CatchUp”

"Your status for IBM software engineer is onsite interview"

List of questions to get response

GUI + Voice response

1. Check my IBM status 2. What is my status for IBM application 3. Check my IBM status for software engineer

WIREFRAME

PORTFOLIO BOOK

SCREENS

PORTFOLIO BOOK

Inbox

SCREENS

PORTFOLIO BOOK

Status

SCREENS

PORTFOLIO BOOK

Schedule

SCREENS

PORTFOLIO BOOK

Smart Watch

PROTOTYPE

PORTFOLIO BOOK

Link to prototype

CONCEPT VIDEO

PORTFOLIO BOOK

The video walk through the story of Tim, our main persona. This illustrates our user journey. Intro: What is the problem?

Prototype: Walk through our product Ending: What is the impact?

Link to concept video

T i m Wa n g

Mobile UI ,Branding Design, User Research, Motion Graphics

UI / UX Design 2020

CONCEPT

PORTFOLIO BOOK

Mooday enables you to keep a private mood journal and write down you feelings. Try this beautifully designed mood-diary app right now! Welcome to Mooday!

Rate your mood and add activities you have been doing during that time. You can a lso add notes and doodle. This app is collecting recorded moods and activities in the statistics and calendar. This format will help you to understand your habits better. Keep track of your activities and create mood chart to become more productive!

COMPETITORS

PORTFOLIO BOOK

Moody

Daylio

eMoods

1. Track your moods

1. Use database of beautiful icons

1. Track your moods privately.

2. Know how stress affects mood

for your personalized activities

2. Report for your doctor visits.

3. Know how sleep impacts mood

2. Customize the names of moods

3. Easily chart your daily highs and lows, sleep, medications.

KEYWORDS

Comfortable

PORTFOLIO BOOK

Personal

Clear

LOGO GUIDELINE

PORTFOLIO BOOK

COLOR

PORTFOLIO BOOK

Primary color

Mood color

Light Blue RGB : 120, 151, 191 CMYK : 55, 33, 10, 0 HEX : #7897BF

Gray RGB : 51, 51, 51 CMYK : 60, 60, 60, 60 HEX : #333333

TYPOGRAPHY

Poppins Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()-+<>

PORTFOLIO BOOK

What is Mood? In psychology, a mood is an emotional state. In contrast to emotions, feelings, or affects, moods are less specific, less intense and less likely to be provoked or instantiated by a particular stimulus or event. Moods are typically described as having either a positive or negative valence. People usually talk about being in a good mood or a bad mood.

Poppins Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()-+<>

I N F O R M AT I O N A R C H I T E C T U R E

Walk-through page

empty state

select mood

My stats

My faces

Mood

add mood

PORTFOLIO BOOK

manage face

new face doodle

generate chart

empty state

app settings

mood analysis

note feeling

WIREFRAME

PORTFOLIO BOOK

Moods Dashboard

WIREFRAME

PORTFOLIO BOOK

Edit My Face

WIREFRAME

PORTFOLIO BOOK

Add New Face

WIREFRAME

PORTFOLIO BOOK

My Stats

Daily Review

Doctor’s Advic e 02 Jun 28 – Jul 0 4

Analysis Char t

28. Jun 2019–04. Jul 201 9

Account

Keychai n

PIN Lock

Paired devic e

Calendar

Keychain setting

Reminder

Histor y

My friends

PIN Lock

Meet doctor s

Calendar Reminder My friends

Average rate: Moderate

Meet doctor s

Wonderful date: July03 2019 Awful date: June30 2019 Advice: Talk to your friends!

PERSONA

PORTFOLIO BOOK

About Roy was born in England. Heâ&#x20AC;&#x2122;s studying in department of architecture in California College of the Arts now. He has a lot of works to do everyday, so he usually feels stressful. He wants to find an internship this semester. He works hard so he can have an outstanding portfolio.

Goals Making a creative portfolio Achieving greater productivity when studying Managing time better

Frustrations Feeling stressful when midterm is coming Maintaining wonderful mood while studying Doesnâ&#x20AC;&#x2122;t know who to talk when feeling bad

Roy, 23 International Student 12K a year San Francisco

Personality

Likes

Introvert

Extrovert

SensingI

ntuition

Thinking

Feeling

Judging

Perceiving

Using his smartphone Open source application Going to museum Talking about his feeling

USER STORY

PORTFOLIO BOOK

Story Today is a midterm presentation day. Roy feels stressful because of the midterm project. He presents it in front of the class, but his teacher says he didnâ&#x20AC;&#x2122;t do very well. After presentation, he opens Mooday and chooses a blue face to show his mood now. Also, he records what he has done in the class.

open the app

add mood

scroll to select mood

select today

take notes

save mood

Roy, 23 International Student 12K a year San Francisco

PERSONA

PORTFOLIO BOOK

About Bella has a very busy life. She is an accountant in a big company, so she needs to memorize many tasks. Because her job is complex, she always feels tired when she gets off work. Sometime she travels out of the city to release her stress, it makes she feels better.

Goals Getting off work before 6 o’clock everyday Hanging out with friends in the evening on weekdays Traveling everywhere without stress and work

Frustrations Feeling stressful when her boss is mad Doesn’t know how to make her mood better Talking to her friends when she feels bad

Bella, 27 Accountant 75K–85K a year San Francisco

Likes

Personality Introvert

Extrovert

Sensing

Intuition

ThinkingF Judging

eeling

Using her smartphone Painting Traveling with friends Talking about her feeling

Perceiving

USER STORY

PORTFOLIO BOOK

Story Bella needs to do a lot of different works everyday. Sometimes she needs to cooperate with design department, and sometimes she needs to do something for her boss. she always has many different feelings in a whole day. So she opens Mooday and customizes the face of her mood and records it. She likes drawing some cute faces in this app.

open the app

manage faces

draw the face

select color

name the face

save new face

Bella, 27 Accountant 75Kâ&#x20AC;&#x201C;85K a year San Francisco

PERSONA

PORTFOLIO BOOK

About Taylor has 3 kids. She lives with her family and works at home. She needs to take care of her family and does houseworks everyday. Her schedule is always full because she meets her friends and goes to the gym every week.

Goals Making her working life better Achieving greater productivity while working Managing time better

Frustrations Feeling stressful when so many things need to think Maintaining wonderful mood while working Being patient when her kids are crying

Taylor, 32 Mom of 3 Kids, Freelancer 65Kâ&#x20AC;&#x201C;72K a year Palo Alto

Likes

Personality Introvert

Extrovert

SensingI

ntuition

Thinking

Feeling

Judging

Perceiving

Using her iPad Open source application Making new friends Talking with her kids

USER STORY

PORTFOLIO BOOK

open the app

Taylor, 32

check statisti c

generate new chart

select time

see details

Mom of 3 Kids, Freelancer 65Kâ&#x20AC;&#x201C;72K a year Palo Alto

SCREENS

PORTFOLIO BOOK

Moods Dashboard

SCREENS

PORTFOLIO BOOK

Edit My Face

SCREENS

PORTFOLIO BOOK

Add New Face

SCREENS

My Stats

PORTFOLIO BOOK

SCREENS

PORTFOLIO BOOK

MERCHANDISE ITEMS

PORTFOLIO BOOK

Mood Notebook

Smart Key chain

PROTOTYPE

PORTFOLIO BOOK

Link to prototype video

T i m Wa n g

Academy of Art x CitroĂŤn, Automotive UI, Concept Car, Prototype

UI / UX Design 2020

CONCEPT

PORTFOLIO BOOK

Experience Duality Our philosophy when building Cesta, was to create a car that helps balance life for everyone. Thatâ&#x20AC;&#x2122;s why we designed it with love for pedestrians, drivers, riders, bystanders and everything in between. Uniquely made to be both shared and privateâ&#x20AC;&#x201D;to create balance for all who travel together in Cesta.

Challenge

PORTFOLIO BOOK

In Bay Area, people are always busy at commuting from home to office. Most of them live in suburban county, but they need to drive to the city. Usually, the traffic is very bad at the busy time, so we are trying to find solutions and combine with Citroen's future concept car to solve this problem.

Solution

PORTFOLIO BOOK

1. Carpooling is becoming more popular in this modern world 2. Create a car has more flexible interior to balance people's busy life 3. An app helps users to match up them who have similar lifestyle and provide transparent information

MOODBOARD

PORTFOLIO BOOK

MOODBOARD

PORTFOLIO BOOK

Ocean

• Peaceful • Calm • Fresh • Refreshing

Bergamot • Energetic • Warm • Inspiring

FUTURE CAR DESIGN

PORTFOLIO BOOK

PERSONA

PORTFOLIO BOOK

Vehicle Usage

50% Work 25% Errands 25% Recreation-Trip

Miles Per Week

600 miles

Painpoints

1. Interrupted mobility using multiple Name

James Alaire

Age

Name

Aiden Francis

Age

modes of transportation 2. Limitation if fixed interior volume components 3. More congestion, less life balance

Family

Job & Salary

Family

Job & Salary

Single

Social Business

Single

Freelance

Networking

Consultant

Goal

1. Combining modes to transportation 2. Modular spaces 3. Adventure to new places 4. Unique lifestyle

STYLEBOARD

PORTFOLIO BOOK

STORYBOARD

PORTFOLIO BOOK

SITEMAP

PORTFOLIO BOOK

Storage Check Car Info Page Battery Level Distance Remaining Parking Location

Storage Request

Driving Mode Speed Battery Level Distance Remaining Entertainment functions

Identify Page

Slide Down to Unlock

Face ID / Touch ID

Car Control

Engine Start page

Bike Info Page

Driver

Battery Level Distance Remaining Parking Location

Landing page

Map Speed Search Function

Passenger Rideshare

Information page Driver/co-rider/ storage information

Map page Map/Set destination

Map page + Drivers list Check available drivers

Request page Check the information and conform your request

Map page Navigation and destination

Car control page Lighting/ Music/ AC/ Climate

WIREFRAME

PORTFOLIO BOOK

WIREFRAME

PORTFOLIO BOOK

SCREENS

PORTFOLIO BOOK

PROTOTYPE

PORTFOLIO BOOK

Link to prototype video

CONCEPT VIDEO

PORTFOLIO BOOK

Link to concept video

T i m Wa n g

GiftHouse Collaboration (Citroen), Automotive UI, Concept Car, Prototype

UI / UX Design 2020

CONCEPT

PORTFOLIO BOOK

Gift House www.gifthouse.org

What is Gift House? Gift House is a non-profit organization. We not only provide birthday gift donate service for the kids who are in low-income family but also provide opportunities to those donors who want to share their love. We also devote to educating the youth to be a donor to the best of their abilities by creating a funny application.

Give a gift to kids in need.

COMPETITORS

Together We Riseâ&#x20AC;&#x2122;s programs are created to provide a way for people who cannot become foster parents to still have a meaningful and effective way to help children in foster care.

PORTFOLIO BOOK

Stand Up are here to empower homeless and at-risk youth toward lifelong personal growth, and to create in these youth a sincere belief in themselves through open, straightforward counseling, mentoring, and lifeskills training.

Miracle Foundation reunite children with their families whenever possible. And we work with the communities on family-strengthening programs so that single mothers and families living in poverty have the resources they need to keep their children.

PERSONA

Kevin Keller #gifthousecares

#wishgranted

PORTFOLIO BOOK

About

Goals

Age 19, Student / Part time job

• Being able to donate to the poor who really need help.

15K – 16K

• Being able to work as a volunteer in his spare time although he is busy in studying.

Medium - High Tech Proficiency

• Participating in charitable events with his friends to have more fun and passion.

Experience of Volunteering Kevin likes to take part in some charitable events as a volunteer, and he likes to help those people who need any help. He enjoys go to those events with his friends because they always make Kevin happy.

• Understanding what things he can donate. • Receiving the needs and wishes from those people who need help

Personality Introvert

Extrovert

Sensing

Intuition

Thinking

Feeling

Judging

Challenges

• Helping other people by donating things without spending a lot of money because he is still a student.

Needs

Perceiving

USER STORY

PORTFOLIO BOOK

+ Kevin

Jack & Mom

Kevin wants to be a donor. He opens the GiftHouse app and then searches the wishes from other parents. He chooses Jack and contacts Jack’s mom and discusses the details. Few days later, the app notifies him that Jack’s birthday is coming. He checks Jack’s wish list again and goes to Amazon to buy him a gift. The day before Jack’s birthday, Kevin sends the gift and birthday card to Jack. Finally, Jack’s mom gives Kevin a special thank to show they have a wonderful feeling about this event.

USER JOURNEY

PORTFOLIO BOOK

Opens GiftHouse app

2 3 4

Uses explore page to see the kids’ wishes

Selects Jack and see his wish list

Messages the mom to know the sponsoring information.

5 6 7 8 9

Adds Jack’s birthday in the schedule

Notified the upcoming birthday before 2 weeks

Checks the latest wish list of the kid

Goes to Amazon to prepare a gift and card f or Jack.

Receives a special thank from the Jack’s mom

INFO ARCHITECTURE

PORTFOLIO BOOK

WIREFRAME

PORTFOLIO BOOK

KEYWORD

Wishes

PORTFOLIO BOOK

Playfulness

Warmth

MOODBOARD

PORTFOLIO BOOK

LOGO GUIDE

Logo for print and digital use.

PORTFOLIO BOOK

Logo icon for mobile device.

Clear space of logo.

COLOR USAGE

PORTFOLIO BOOK

FORBIDDEN USAGE

PORTFOLIO BOOK

Gift House

TYPOGRAPHY

PORTFOLIO BOOK

ICONOGRAPHY

PORTFOLIO BOOK

KEY SCREENS

PORTFOLIO BOOK

MERCHANDISE ITEMS

PORTFOLIO BOOK

MERCHANDISE ITEMS

PORTFOLIO BOOK

MERCHANDISE ITEMS

PORTFOLIO BOOK

D I G I TA L A D V E R T I S E M E N T

PORTFOLIO BOOK

Link to advertisement video

T i m Wa n g

Marketing Research, Branding Redesign, UI Design

UI / UX Design 2020

CONCEPT

PORTFOLIO BOOK

The old Fog City Diner opened in1985 and closed for renovations in 2013. Fog City is a historical restaurant located in Embarcadero which maintain the energy and approachable spirit of the beloved original. This is a redesign project. The goal is to make Fog City a more impressive place for people in San Francisco to feel the great history.

RESEARCH

PORTFOLIO BOOK

RESEARCH

PORTFOLIO BOOK

RESEARCH

PORTFOLIO BOOK

M A R K E T I N G A N A LY S I S

PORTFOLIO BOOK

Review for Fog city (3.5 â&#x20AC;&#x201C; 4 stars)

Target Audience

1. Tourists + 2. Middle age people in middle class Troy, NY

San Francisco, CA

Los Angeles, CA

Fairfield, CA

+ 3. People who like beautiful restaurants and always take pictures before they eat

Henderson, NV

San Francisco, CA

Brooklyn, NY

LOGO REDESIGN

PORTFOLIO BOOK

LOGO REDESIGN

PORTFOLIO BOOK

COLOR USAGE

PORTFOLIO BOOK

TYPOGRAPHY

PORTFOLIO BOOK

100

INTERACTIVE MENU

PORTFOLIO BOOK

Link to prototype video

101

WEBSITE

Link to prototype video

PORTFOLIO BOOK

102

T i m Wa n g

HTML, CSS, JavaScript, Web App design

UI / UX Design 2020

CONCEPT

PORTFOLIO BOOK

Racoona is a racoon tracker. There are many racoons live in San Francisco, if you find one, you can pin the spot you found them or take a picture and name them. Next time you meet them again, you can find them in the map page. Have fun!

104

MOODBOARD

PORTFOLIO BOOK

105

TYPOGRAPHY

PORTFOLIO BOOK

Header: Raleway Medium ABCDEFGHIJKLMNOPQUSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890~!@#$%^&*()_+-={}[]\

Paragraph: Raleway Light ABCDEFGHIJKLMNOPQUSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890~!@#$%^&*()_+-={}[]\

106

BRANDING

PORTFOLIO BOOK

App icon

Colors

Black RGB : 18,25,25 HEX : 121a1a

Logo with name

Racoona

Blue RGB : 139,78,228 HEX : 8cb2e3

White RGB : 255,255,255 HEX : ffffff

107

WIREFRAME

PORTFOLIO BOOK

Daly City

Andy

Racoona Sign up date

Max Lorem ipsum dolor sit

E-mail

Added date

Password

Racoons

Level

Latest location Features Sign in

Forget password? Sign up

My Racoons

Max

#03 Name

Oreo Added date

Location

Oliver Charlie Boots Kitty Jo

Latest location

Color

Color Features Feature01 Feature02 Upload Feature03

Save

108

SCREENS

PORTFOLIO BOOK

Sunset Distric Districtt

Sunset Distric t

Max Number

racoona

Caught date

Jul 09 2019

Location Sunset District Date

E-mail

Jul-09-2019

Max

Password

Features

Number

Sign i n

Catched date

Jul 09 2019

Latest location locatio n

Photos

Forget password? Sign up

My Racoons

John Willer ID : jw123

#03

Edit

MAX

Location

Max lives in the woods

Sunset District Racoons

MAX Max lives in the woods

MAX

Signup date

Jun 29 2019

Date Jul-09-2019

Exploration

Name

Max lives in the woods

Features

MAX Max lives in the woods

Take a photo

Save

109

T i m Wa n g

Marketing Research, Branding Redesign, UI Design

UI / UX Design 2020

CONCEPT

PORTFOLIO BOOK

This is a school project of practicing using PHP to read the backend data. Clickit is an e-commerce website which sells mouse. Based on the user experience, I created the branding, built the data and make them functional and user friendly.

111

MOODBOARD

PORTFOLIO BOOK

112

BRANDING

PORTFOLIO BOOK

Logo

Favicon

113

WIREFRAME

PORTFOLIO BOOK

Splash page

Product list

Cart

Home page

Product info

Purchase

114

SCREENS

PORTFOLIO BOOK

115

T i m Wa n g

PORTFOLIO BOOK

UI / UX Design 2020