Bonnie's 2016 Front-End & UI/UX Design Portfolio

吳思盈

FRONT-END & UI/UX DESIGN PORTFOLIO

BONNIE WU

CONTENTS About Me Design Process Ecommerce Website Ui Design

03 05 07 23

HI THERE! BONNIE WU 吳思盈 UI / UX DESIGNER www.codepen.io/bonniw3 www.behance.net/bonniw3

INTERESTS

0988 974 545 bonniw3@uw.edu

MIYAZAKI’S MOVIES

TED TALKS

LANGUAGES

ENGLISH SPANISH

MANDARIN

EDUCATION UNIVERSITY OF WASHINGTON

MUSIC

TRAVEL DONUTS

BA in Psychology and Linguistics 2012 - 2015

INSTITUTE for INFORMATION INDUSTRY ( 資策會 ) UI / UX Designer Training Course 01 / 2016 - 06 / 2016

03

ABOUT ME I’m a recent graduate from University of Washington in Seattle, a passionate observer and innovator. With a Psychology background, I have experience conducting research and have knowledge of human’s decision-making process. Of interest, I also took an UI/UX designer training course at III to gain Psychology has strengthened relevant UI/UX and front-end my observation skills and the developer skills. ability to emphasize with people, which

SKILLS SOFTWARE Ps Ai Dw Ae

is crucial in UX design, as I seek to understand the people I’m designing for, everything from their motivation to their

PROGRAMMING LANGUAGES CSS / CSS3 HTML JQ JS

goals. Together, with the varied tools and skills that I obtained along the way, I aim to improve the lives of others with my design.

04

User-Centered Design Process

01 RESEARCH

R VE LI 06

- Wireframe - Prototype

04 SKETCH

NT

HE

SI

S

Create Personas Sitemaps User Scenario User Flow

SY

-

03

→ ON

TI

UA

AL

EV

Usability Testing Iterate Test Iterate Again

→

05

-

→

→

- Surveys - User Interviews

CH

- High-Fidelity Mockups

AR

SE

RE

→

DE

ER

US

→

02

- Define problem - Competitor Analysis - Brand Analysis

Although there are different approaches to design depending on different product, yet overall I follow this framework to guide me towards the best solution and develop an user-friendly product.

06

Ecommerce Website

WOODESK WEBSITE 桌上木製品網站 OBJECTIVE Create a virtual Ecommerce website that sells wooden desktop stationary items and provides a comfortable online shopping platform including an online customization function.

MY ROLE / WHAT I DID ( With Group )

UX / UI Designer, Interaction Designer - Define user’s goals - Competitor Analysis - Create Personas, Sitemaps - Sketch Wireframes, Prototypes - High-Fidelity Mockups

- Design Homepage, Categories Page, Product Page, Checkout - Design to code and coded jQuery for Homepage, FAQ, Contact Us, and Member Page.

09

01

Research Stage

PROBLEM Users typically experience the following pain points: - having to search the web to locate wooden desktop items individually - not being able to utilize their own creation or design to personalize their products

SOLUTION / GOALS Create a website that combines wooden desktop stationery on a platform.

The goal is to provide the most convenient and comfortable online shopping platform that categorizes products using one of four themes to convey to the users the most immediate and direct feel and atmosphere of the product.

COMPETITOR ANALYSIS Websites

Website Organization

Products Sold

jeecard

greeting purposes

All types of cards

愛禮網

gift purposes

Various gift items

Cards of Wood

types of card

Wooden card items

Online Customization

Differences in customization functions

ˇ ˇ

cannot insert new images need to be logged in to upload images send design directly to company for production

Got better insights for what WOODESK can include : - website organization -- wanting to provide the best environment for users - products sold -- aiming for only desktop stationery - online customization -- an advantage that should be included 10

02

Key Audiences / Users / Personas

ESTABLISHING KEY AUDIENCES / USERS

College Students

Working Individual

Students (not in college)

Wooden-crafts Enthusiast

Hipster (Modern)

The purpose of establishing key audiences/users is to define the target users so that the end product will be well-designed for the key users. It also serves the purpose of narrowing down the user spectrum to better break down and prioritize the features that best meet the needs of each of the defined users.

11

CREATING PERSONAS PRIMARY PERSONA Lauren, Age 21 THE STUDENT

Lauren shops online for wooden desktop stationery as it gives her the feeling of warmth with all the technologies around her. She also is a wooden card lover and sends wooden cards to people on occasions.

PAIN POINTS

SHE WOULD SHOP ON WOODESK FOR

- Search in multiple places (websites, blogs) to locate desired wooden stationery - Wanting to be able to add some personal touch and design to the cards

-

Convenience : not needing to look from multiple websites Organization : based on the atmosphere/theme of product Functions : able to design desired product (online customization) Interfaces : simple and easy to operate

HOW CAN WOODESK HELP - Comfortable online shopping platform for wooden desktop stationery - Built-in online customization function including drawing canvas for ease of designing artwork

SECONDARY PERSONA Ben, Age 42 THE DESIGNER

Ben loves wooden handcrafts as he has his own collection of wooden handcraft items. He also shops online for wooden greeting cards to deliver to friends and family on special occasions.

** Designing for Lauren will also serve the needs of Ben 12

03

Sitemap HOMEPAGE

NEWS

THEMES

CATEGORIES

BRAND

FAQs

DISCOUNTS

VALENTINE

ALL

ORIGIN

NEW IN

WEDDING

NEW IN

IDEA

BESTSELLER

WORKSPACE

BESTSELLER

ABOUT US

DINING

THEMES

RESPONSIBILITY

CARDS

GREETING

OTHER

POSTCARDS

CONTACT US

CHARACTERISTICS

CUSTOMIZE 3CS

WATCHES

UTENSILS

STATIONERY

DECORATIONS

Sitemap is created so that each content in the website can be visually mapped out for the ease of discussion. It also serves as an important role for the designers to see whether each content are at the location where users will be able to easily locate and find.

13

04

Wireframes

Wireframes are created in order to have a visual representation of how the end products will likely turn out to be. It helps us to prioritize several contents that are important in the product and also establishes a basis to begin designing the acutal product.

14

05

High-Fidelity Mockups / UI Design

CATEGORIES PAGE 15

SINGLE-PRODUCT PAGE

HOMEPAGE 17

DESIGN TO CODE & jQUERY EFFECTS 切版頁面 及 JQ 動態效果

01 19

FAQ page jQUERY EFFECTS : Slider used to categorize different topics, SlideToggle for Q&A

02

CONTACT page 20

03 21

MEMBER pages jQUERY EFFECTS : SlideToggle for checking previous orders

UI Design

sign up Charlene Chen| Email

_______________________ Password

_______________________ Confirm Password

_______________________ Already have an account?

Login

submit > login charlene.c0122@gmail.com| Password

_______________________ Don’t have an account?

Sign Up

submit >

01

Sign-Up Page & Login Page Sign Up and Login with a twist of nature and complementary colors. Aiming for a simple yet elegant feel.

24

02

Cart Page & Checkout Page Cart and Checkout minimalist Design with a simple interface and an emphasis on the product.

25

03

Landing Page Landing Page with a new concept design of navigation menu on the four sides, aiming for an innovative yet userfriendly design.

26

Thank You! If you have any questions or want more information please contact me via email or cell Thanks!

CONTACT EMAIL CELL

bonniw3@uw.edu 0988 974 545