Ux portfolio

Page 1

Portfolio Architecture +Design 2013-2016


2


CONTENTS Springboard Survey Analysis

03

Heuristic Analysis

04

Empathy Maps

05

Personas

07

Site Map

09

Card Sorting Analysis

10

User Flow

11

Wireframing

14

Style Guide

16

Research Wrap Up

17

2


Gift-urp A New Gift Giving Experience Research Analysis: Daniel Cho

Research Statement The research is used to understand and learn more about peopleÂ’s thoughts, emotions and behaviours as they make their decisions to purchase gifts for another. The purpose of Gift-urp is to make this gifting experience more enjoyable, quick, and easy.

Online Survey

3/4 97%

90%

of testers spend more than two hours searching for gifts. of testers spend less than two hours decorating for gifts.

YET! of buyers use computers to purchase gifts

66.7%

72%

of testers believe in the importance of decorating gifts. Who do you most frequently buy gifts for?

5.1% Coworkers

43.6% Family

12.8% Friends of buyers use smartphones to research gift ideas

38.5% Lovers

Common Words Used:

Demographics:

39 Participants

Money 33.3%

Personality want

66.7%

Needs

Joke

Hobby

Function

Like

Price

Interests 3


Heuristic Analysis https://www.etsy.com/ Visibility of system status The content on etsy is quite simple with enough information for the user to navigate through. The navigation system is very visble and simple. The cart and different registeration is visible to the user. The search bar is the largest element in the page, showing the emphasis of its function. The categories are divided into different sizes to show the heirarchy between the seasonal products versus the daily products.

Match between system and the real world The vocabulary of the page is quite consistent and easy to understand. There are no jargons nor words that are unknown. Instead, they are short and straightforward.

User Control and Freedom There are options in the top left to revert to the previous page without the back button. Moreover, the user can return to more general category. The <- arrows help show the navigation system of the hot key.

Consistency and Standards The page follows the consistency of the modern world. There are no words or actions that are unpredicted and surprising.

Recognize rather than recall Everything is recognizable and visible to the user. All the objectives have clear instructions and the page seem quite orderly.

Aesthetic and minimalist design There are no overly done designs. The background is neutral in color, and the hot keys are similar in color scheme so that the user is not overwhelmed by a vast number of colors. However, the video in the homepage may be a little distracting.

http://www.uncommongoods.com Visibility of system status The navigation bar of this page is simple and brings in the basic requirements of the search bar, the different categories, and the cart. However, I do not see a register or a sign-in anywhere. Moreover, its odd and redundant how there is another category bar in the left side, while there is one at the top of the page.

Match between system and the real world The use of words are !ne, but one of the phrases had me confused. It went like Problems you didn t know you had-SOLVED . I at !rst ready it as Problems you didn t know you had solved and it confused it me, but after reading a second time, I understood the intention. However, the text should not put any user in that position.

User Control and Freedom There are really now methods to go back other then using the back button or the home button in the page. I do not see the placement buttons where one would see how deep they have gone into the webpage, nor any methods to go back.

4


Empathy Map Desire -give a personalized gift -give happiness to the reciever -show love and effort through the gift

Emotions

Motivators

-excited to give a gift -anticipation for reciever to use the gift -anxiety of decorating -stress to choose

-needs to be meaningful -method of showing love and care -not cool to bring in a unthoughtful gift

The I m Not Creative Fellow

Pain Points

Do

-doesn t know how to decorate -scared of ruining the gift -doesn t like decorating -uncon dent to be creative -no time to be creative or more creative

-easier if told what to gift -spends more money in place of creativity

Summary -There needs to be a method to encourage users to be creative without spending too much time and overwhelming them with multitude of options. -The process of gift giving should be easy and pleasing rather than stressful and full of anxiety. -There should be a method to personalize the gift with ease, creativity, and speed.

5


Empathy Map Desire -easily choose the perfect gift -be creative within a short period -know what the reciever wants

Emotions

Motivators

-excited to give a gift -anticipation for reciever to use the gift -anxiety to nd the time and place -stress of choosing quickly

-needs to be meaningful -reciever needs to nd it useful -method of showing love and care -not cool to bring in a unthoughtful gift

The Busy Gifter

Pain Points

Do

-no time to decorate -no time to ponder on choosing -spending time on gift is secondary

-easier if told what to gift -spends on more expensive gifts -gifts are more broad, than speci c

Summary -There needs to be a method to quickly ascertain what gift is great for the userÂ’s reciever. -The credit of choosing the gift should go all to the user; the interface should play a supporting role. -The process of gift giving should be easy and pleasing rather than stressful and full of anxiety. -There should be a method to personalize the gift with ease, creativity, and speed.

6


Persona Pro les

The I m Not Creative Fellow DEMOGRAPHIC GENDER

AGE

INCOME

Male

18-25

In Debt

LOCATION Collegetowns, College Campus

EDUCATION Undergraduate, Graduate Programs, First Career Job

DESIRE

BIO

- give a personalized gift - give happiness to the reciever - show love and effort through the gift

The user is a college student at the University of Illinois UrbanaChampaign. He is currently majoring in electrical engineering and is always busy with his exams and papers. Outside of school, he likes to watch Netflix, go drink with friends and browse through internet memes and other things with his phone and computer. He wants to gift his brother something special and personal, but doesn t believe he has the creativity and time.

PAIN POINTS

TECHNOLOGY

- doesn t know how to decorate - scared of ruining the gift - doesn t like decorating - uncon dent to be creative - no time to be creative or more creative

INTERNET SOFTWARE MOBILE APPS SOCIAL NETWORKS

PERSONALITY Extrovert

Introvert

Sensing

Intuition

Thinking

Feeling

Judging

Perceiving

Assertive

Turbulent

7


Persona Pro les

The Busy Gifter DEMOGRAPHIC GENDER

AGE

INCOME

Female

18-25

In Debt

LOCATION Collegetowns, College Campus

EDUCATION Undergraduate, Graduate Programs, First Career Job

DESIRE

BIO

-easily choose the perfect gift -be creative within a short period -know what the reciever wants

The user is a college student at the University of Illinois UrbanaChampaign. She is currently majoring in nance and is always busy with her sorority, club events, school, and social life. She is always active and has no energy to focus on things outside of college. Her best friend from high school is having a birthday party, but she is unable to attend to due her busy lifestyle. She wants to send a personalized creative gift, but does not have the time to do so.

PAIN POINTS

TECHNOLOGY

-no time to decorate -no time to ponder on choosing -spending time on gift is secondary

INTERNET SOFTWARE MOBILE APPS SOCIAL NETWORKS

PERSONALITY Extrovert

Introvert

Sensing

Intuition

Thinking

Feeling

Judging

Perceiving

Assertive

Turbulent

8


9

Share/Publish

Edit

Pro!le Building

Check Out

Inventory

Decorate

Quiz

Shopping Cart

Start from Scratch

Design Lab

Storytelling

Recipient

Search

Purchase

Explore

Learn

Inspiration

Works

Blogs

Artists

Home Page

My Designs

My Pro!le

Orders

Wishlist

My Account

FAQ

Tasks

Purpose

About


Gift-urp A New Gift Giving Experience Daniel Cho

Card Sort Four users were asked to participate in a card sort. These users came from different backgrounds, but were all residents of Urbana and Champaign. These users did not necessarily all fit the personas I had built, but many of them shared similar desires and problems with the personas. From the card sort, several similarities arose. The category recipient, recipient information, and recipient gift were spoken often in defining the tasks that focused on the recipient. The about, information, general information, etc were all written many times. Purchase was a stable use in the exercise. Lastly, the category title design was used many times too. From the category titles the content was created through the about page, recipient page, purchase page, and the design page. Some of the difficulties of categorizing the cards was the fact that many tasks fit in not only one, but many categories. Moreover, some of the tasks were to broad to exactly name a category for the task. The users understood some of the main points from the tasks such as that these tasks pointed to purchasing gifts for recipients and to decorate the gift. However, they failed to understand the aiding of choosing gifts and the inspiration process of encouraging users to be creative and have a design oriented mind.

10


11

Yes

Account Accepted

Profile Building

Splash

No

Home Page

Error

Sign In/ Sign Up

Sign Up

Create Account

Sign Up As Artist

User Flow 1 Logging in or Signing Up

Yes

Signed In

Sign In Page

Sign In

No

Error


12

User Flow 3 Artist Perspective

Details

Other Artists

Upload Art Work

Yes

Account Accepted

Error

Save

Design Lab

No

Sign Up

Profile Building

Sign Up As Artist

Create Account

Sign In/ Sign Up

Splash

Edit

Publish/Share


13

Denied

View User Flow 1

Error

User Flow 2 Using the Recipient Build

Quiz

Review Order

Gift List

Add to Cart

Check Out

Continue as Guest

Sign In/Create Account/ Continue as Guest

Results

Results

Check Out

Credit Info Shipping Info

Storytelling

Profile Build

Complete Order

Authenticate

Recipient

Reciept

Home Page

Splash

No Results

Design Lab

Error

No Results Page

Product Page

Artists

Inspirations


High Fidelity Wireframes

14


15


Gift-urp A New Gift Giving Experience Style Guide: Daniel Cho

Colors The colors for Gift-urp consist of the different shades of blue with some hint of green. The more neutral colors are the white and the dark grey.

#1D98A2

#A4DAD7

#61C2A6

#FFFFFF

#004760

#231F20

Typeface Roboto is the font-type that will be used for this project. It is commonly seen in Google and Android, so the familiarity will aid in the ease of reading.

Header :

Roboto Medium 24pt

Title :

Roboto Medium 20pt

Subheader :

Roboto Regular 16pt

Body :

Roboto Light 14pt

Call to Action Buttons

Search

Add to cart

Sign In

16


Gift-urp A New Gift Giving Experience Style Guide: Daniel Cho

Main Tasks Buy a gift The users were able to purchase a gift or reach the check out point. However, they were confused by the lack of access to categories of gifts. Most of them used the search bar to reach the check out point.

Look for artists and friends The users were able to !nd the artist easily and view their friends news feed, but the search for certain artist and friends or !lters for the artist they wanted to search for were unavailable.

Use the profile building tool. The users were unable to purchase a gift through the pro!le building tool because it was not complete and lacked the path to the check-out.

Design a gift The users were able to easily reach the design tool because it was accesible at three different points in the process, home page, product detail page, and the check-out page.

Look for Artists The users were able to !nd the artist easily, but the search for certain artist or !lters for the artist they wanted to search for were unavailable.

Summary In conclusion, the testing went really well for the most part. There were many missing pieces in the wireframe, therefore, the users weren t able to accomplish some of the tasks. However, for the functions that were available, the users were able to quickly run through the paths without any hindrance. The transition from the design lab tool to the checkout was most confusing for the users. They didn t under-stand how the pricing worked. However, most of the users thought that many of the functions were similar to social media they were comfortable with such as Snapchat, Soundcloud, Facebook, and Instagram. There were three users tested. One of them !t into the I m not creative persona and the other two !t into the busy persona. Two of them were females and one was male. All of them were between the ages of 20 and 24 and attending the university of Illinois Urbana-Champaign. They all were experienced with shopping through technology and were all heavy social media users.

17


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.