吳思盈
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