dennis lee ux portfolio

22
DENNIS LEE | UX PORTFOLIO Website // uxdennis.com Linkedin // linkedin.com/in/dennisyjlee Email // [email protected]

Upload: djaelee

Post on 08-Aug-2015

478 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Dennis Lee UX Portfolio

DENNIS LEE | UX PORTFOLIO

Website // uxdennis.com Linkedin // linkedin.com/in/dennisyjleeEmail // [email protected]

Page 2: Dennis Lee UX Portfolio

DiscoveringDefining

DevelopingDelivering

Here are my Specialties:

PERSONA GENERATIONCONTENT STRATEGYFEATURE IDEATION

PROTOTYPINGWIREFRAMINGVISUAL DESIGN

I love simple solutions that solve complex problems.

I practice iterative UX design.

That is heavily process driven.

HiResearch

Ideate

Design

Iterate

I’m an architecture trained UX/UI Designer.

Page 3: Dennis Lee UX Portfolio

CONTENT

ARCHITECTURE // Healthcare Space

RESPONSIVE WEBSITE // OKMYOUTFIT

NATIVE APPLICATION // Strava

WEBSITE // Kickstarter

Page 4: Dennis Lee UX Portfolio

RESEARCH IDEATE DESIGN ITERATE

After visiting various healthcare facilities ranging from hospitals, STD clinics, nursery homes, college health clinics and talking to stakeholders, nurses, and paitents, my greatest takeaway was that disease/illness can be a very personal subject that patients might not want to share. From my research, my design process was very user-centric designing for the patient room first and branching out.

PUBLIC SPACE VS. PRIVATE SPACE

Design private receptionand waiting space

Page 5: Dennis Lee UX Portfolio

RESEARCH IDEATE DESIGN ITERATE

My final design after many iterations is to construct an outpatient facility, where patients can choose their own path between privateand public spaces.

The second floor inpatientfacility fosters semi publicvisual interaction betweenfamily, nurses, and patients.

OUTPATIENT USER JOURNEY

INPATIENT BLOCKS

Page 6: Dennis Lee UX Portfolio

Objective: Streamline onboarding user experience of signup and style profile forms.

Before:

OVERVIEW:Filling out style profile is a required long process that users skip or don’t accurately fill out. Without an accurate style orofile, stylists are unable provide an optimal experince on first visits when stylists bring clothes for clients to try on.

Client: OKMYOUTFIT offers monthly subscription to hold unlimited stylistappointments each month.

Client: OKMYOUTFIT / 3 week project

Page 7: Dennis Lee UX Portfolio

67% 67%

After:

Redesign and optimize homepage, user journey, and

style profile forms.

Design navigational bar within form process so users always know

what part of the process they are in.

1. leading research to study competitive flows and create user journeys

2. critical design decision of altering user flow, and changing the questions copy

3. Wireframing and Visual Design

My Role:UX Designer / Consultant / Visual Designer

Main Contributions SOLUTION

My Team:Angelique Belizaire / Chuck Flores / Dennis Lee

Client: OKMYOUTFIT / 3 week project

Lessons: Our team worked suprisinglywell together, as well as setting the project scope well with the clients.

ABOUT YOU STYLE BODY PREFERENCES

Result

90 page deliverable document :1. Research Report2. Planning Documentation3. Design Process

Page 8: Dennis Lee UX Portfolio

“I don’t know why I have to select a color to avoid”

“Shouldn’t the stylist know what fits me.”

“Jean fit is very important to me.”

START COMPLETEMIDDLE

User thought that a stylist should figure out this information

User was very impressed that they asked about jean fit

User was opened to any color and couldn’t make that selection

I have to getstarted again?”

“What?!”This is long…”

“I like this”

COMPLETESTART MIDDLE

User is confused bycharacterizing measurements by words and not number

User likes being ableto select brands she likes/shops at

User is unhappy about the “get started” button at the end

“I would wear orangebut not THAT orange”

“Why is there astyling fee?”

“I hate it when they make me do thiskind of stuff”

“See that makes moresense to me”

COMPLETESTART MIDDLE

User is confused by the shades of colors represented

User hates it whenshe has to pick acelebrity style

User likes the looks page and the evening styles

“What?!”

User is confused bycharacterizing measurements by words and not number

Area of OpportunityUser Journey // Existing Forms

Brand Analysis

KPI: Sales Conversions, Increase signups, Improve Stylist Efficiency

Target Audience: mid 20’s to 40’s busy business professional females

who live in Manhattan

Problem it solves: People have the money but don’t have the time to

shop and work on their style.

Challenge: Every single user we tested dislikedthe process. We recorded and conducted 10 user testings to study the data and visual map user’s mood throughout the process.

Moments where users are confused are areas wherethe user experience could be improved.

We conducted heurestic evaluation of the existing brand and process of the creating a style profile to better understand the problem and goals of our stakeholders.

IDEATE DESIGN ITERATERESEARCH

Key TakeawayThe style profile process is basically a report on one’s own body which can be delicate esp. for females.

Page 9: Dennis Lee UX Portfolio

54 2984Homepage HomepageHomepageQuestion Question Question

Our team started research by looking at the competitors of OKMYOUTFIT that ask users for creation of a style profile. OKMYOUTFIT requires the most amount of steps to complete the profile.

Key Takeaway :Both Stichfix and Trunk Club have an orderand categorization of questions, while OKMYOUTFIT

jumps back and forth on topic of questions.

RESEARCH IDEATE DESIGN ITERATE

Competitive Anaylsis

Page 10: Dennis Lee UX Portfolio

Needs:Quickly fill out Style ProfileTransparency of business

Needs:Skip Questions/Style ProfileOption to first meet stylist

- Clients want stylists to understand their personality- Stylists need to know how clients what to be percieved by others

Nav Bar

Question #

Skip

RESEARCH IDEATE DESIGN ITERATE

1 2 3Interview / Persona Design Studio Card Sorting / Testing

We asked users to card sort the questions into category names they created. We then tested

the results so the flow made sense.

Conducted design studios w/ team and clientsto get everyone’s ideas on the table.

Challenge: It was tricky to design placementof the new features. We tested early on

paper and agreed to design below.

Key Takeaways

Page 11: Dennis Lee UX Portfolio

“Flaunting my arms?”

What are these sizes in relation to?

“I don’t think anyoneis just average”

“Being confident doesn’t mean I won’t hide it”

OriginalDesign

1 2 3Copy was confusing and made people feel uneasy.

Questions were too abstract and didn’t allow users to accurately answer.

Question made users feel negative and angry.

Combined two questions so thatboth body type and proportion ratio info can be gained.

We changed the copy, but users found the question irrelevant.

We ask only what users are confident in to focus on positivity.

“This is too abstract”

RESEARCH IDEATE DESIGN ITERATE

Key Takeaway: Sharing info about one’s own body is very personal and shouldn’t be a personal report.

Page 12: Dennis Lee UX Portfolio

4084steps

“Dennis played an integral role and was instrumental in making the critical design decisions after findings. I highly recommend him for your UX project needs.”

Diana, Co-founderOKMYOUTFIT

Recommendation:

?A B C

?A B C

SignUp

SignUp

Answer Questions

Answer Questions

Create Style Profile

Create Style Profile

Select Closet Audit

Select Closet Audit

Select Personal Shopping

Select Personal Shopping

Select Date

Select Date

Select Date

Select Date

Proposed

Existing

User Journey

Before:

After:

Results:- Created 90 page document for Clientthat consisted of:

a. Research Reportb. Design Changes / User Testingc. Planning Documentation

- Our team acted as consultantsmaking only recommendations

- However, clients decided to use our designfor the homepage and style profile forms,including icons and user journey

Mockups for Mobile

See the Prototype

Page 13: Dennis Lee UX Portfolio

Objective: How can we motivate users to track/record their fitness activity.

Before:

OVERVIEW: For this project, our team was given the task to come up with our own project proposal / problem to solve. With the increasing prevalence of wearables and my general interest in health / fitness, our group chose Strava as our brand / client. Strava is a running/biking tracking native app and site that is known for its competitive nature. Each trail/street is divided into “segments” where users can compete against each other. The result is an highly competitive fitness MMO-like game.

Strava / 2 week student project

Challenges Record Goals

AnalyzeCompete

Page 14: Dennis Lee UX Portfolio

Disclaimer : Student Project

Create engaging form ofcompleting challenges / meeting goals, and give more options to create goals

Optimize user flow for betterexperience

SOLUTION

1. I lead research and design outliningproject timeline and scope

2. Designed all Hi-fidelity screens and created prototype

My Role:Lead UX Designer / Project Manager

My Team:Bogey Zebzda / Dennis Lee / Sandeep Sarda

Main Contributions

“Dennis did great job taking this project as our leader and making sure we stay on top of it.”

After:

Main Contributions

Strava / 2 week student project

- Bogey Zebzda

Lessons: The leader cannot do all, and design should be broken up among teamto see fresh ideas thru development.

Page 15: Dennis Lee UX Portfolio

Yes 58.3%No 41.7%

1

2

Personal GoalsWeight loss

Rewards/Achievements What Motivates you to track/record?

I Don’t Track

CompetitionBragging Rights

Personal GoalsWeight loss

Rewards/Achievements

I Don’t Track

CompetitionBragging Rights

If you don’t track/record, What would motivate you to track/record?

Do you track/record your fitness activity?

No [20]

Yes [28]

Key takeaway: Creating a goal is a paid premium feature in Strava,

while all competitors are free.

CHELLENGE SETUP

SCREEN

USER TAPS ON : SELECTFRIENDS

USER CHOOSES NEW CHALLENGE

NAME

USER TAPS ON CHALLENGES

NIKE + CHALLENGES

SCREEN

USER TAPS ON BUTTON:

START A NEW CHALLENGE

BEGIN TO RUN SCREEN

USER TAPS ON HAMBURGER

MENU

SIDE MENU SCREEN

USER CHOOSES DISTANCE & DURATION

USER TAPS ON : SEND INVITE

CONFIRMATION PAGE

JOIN A RACE SCREEN

USER TAPS ON APPROPRIATE

DATEINPUT DATE

USER TAPS ON RACE DAY

USER TAPS ON SET MY OWN GOAL

SET A NEW GOAL: - LONGEST DISTANCE - LOSE WEIGHT - FINISH RACE - TOTAL DISTANCE

USER TAPS ON FINISH RACE

HOME SCREEN /MAP SCREEN

USER TAPS ONPLAN

MY PLAN SCREEN

WITH OPTIONS TO SET GOALS

USER TAPS ON DONEBUTTON

USER TAPS ON SET GOAL

MY GOALS SCREEN

OPTIONS TO CHOOSE DIFFERENT TYPES

OF A GOAL COME UPNEW GOAL ADDED

USER TAPS ON CONFIRMATION

USER RECIVES CONFIRMATION

OF A CHOICE

USER PICKS A GOAL

USER TAPS ON + SIGN TO ADD

A GOAL

PERSONAL GOALS PAGE

SCREEN

USER TAPS ON ICON:

CHOOSE GOALRECORD SCREEN USER TAPS ONGOALS

GOALS SCREEN

Survey Data

Competitive Analysis Feature Comparison

48 people

58%

56%Key Takeaway: # 1 Motivating Factor is Personal Goals

Challenge: It was hard to pivot from our original problem, which was to how to provide relevant and approriate rewards for tracking

fitness activity. I learned to not assume anything before conducting the user research.

Researched competitor fitness tracking nativeapps and took note of their user flows for creating

a goal feature.

If you do track / record, do you share your data / statistics?

Sometimes [11]

Yes [2]

No [25]

Yes 5.3%No 65.8%Sometimes 28.9%

IDEATE DESIGN ITERATERESEARCH

Page 16: Dennis Lee UX Portfolio

Sally | The Socialite Fiona | The Enthusiast Ted | The Tracker“I love kicking my

friends’ butts”Feature Needed:

Create Group Goal

“I tend to get crazyif I don’t work out”

Feature Needed: Create Personal Goal

“I want to feel a senseof accomplisment”

Feature Needed: Reward system

Persona / User Scenario

STRAVA GOALS FEATURE :1. CREATE/JOIN GROUPS WITH FRIENDS THAT SHARE SAME GOALS2. CREATE CUSTOMIZABLE PERSONAL GOALS (FREE!)3. REWARD USAGE OF APP/LEVELING SYSTEM

Appmap helped visualize the content of app and allowed us to carefully choose where our designed features would fit.

RESEARCH IDEATE DESIGN ITERATE

Challenge: We had limited time to build out all the flows for each feature, so we conducted an open survey & closed card sort asking people to

vote. I learned an open survey could get bad data since users can be swayed by seeing others’ votes.

Icon Design by me

Feature Ideation

1

2

User Scenario: Sally creates a group goal and adds Fiona to run off 3000 calories by this week. When Fiona beats Sally’s record in their group, Fiona sends notification to Sally. Sally sees the message and is motivated to get off the couch and go run / track activity.

MVP

Page 17: Dennis Lee UX Portfolio

RESEARCH IDEATE DESIGN ITERATE

DESIGN

TESTING

1 2 3 4

Sketch / Low FidelityExisting App Medium Fidelity High Fidelity

People didn’t know the dials were call-to-actions (buttons)

People were lost whether they were creating a group or personal goal.

People were suprised by the confirm button that pops out after setting goal and its name.

People wanted the appto be transparent inits objective and locationat any given pointthru the user flow.

Iterating early from asketching phase to hifidelity, allowed my group to test early onflow, placement, andicons.

See the Prototype

NEXT STEPS…

Page 18: Dennis Lee UX Portfolio

Objective: Introduce alternate recurring payment user flows to an existing system.

Disclaimer : Student Project

Before: Kickstarter / 2 week student project

Categories with most launched projects:1. Film & Video2. Music3. Publishing

Categories with most money pledged:1. Tech 2. Design3. Games

37.86% projects are successful (ALL categories)

Tech. has lowest success rate: 21 %

OVERVIEW: Our team was tasked to design a recurring payment system for Kickstarter. The existing model consists of only one-time backing/payment for a period of time up to 2 months. The solution I came to and research above was done on my own after groupwork ended.

Page 19: Dennis Lee UX Portfolio

$$

$$

$$

DISCOVERY

DISCOVERY

DISCOVERY

MAKE PLEDGE

MAKE MONTHLY PLEDGE

MAKE MONTHLY PLEDGE

PROJECTMONTHLYPAYMENTS

MONTHLY PLEDGE

PAYMENT

ONE TIMEPAYMENT

STAGE 1

MONTHLYPLEDGE

STAGE 2

STAGE 3

EMAIL NOTIFICATION(S)

PAYMENT / EMAIL NOTIFICATION(S)

PAYMENT / EMAIL NOTIFICATION(S)

…UNTILCANCELLATION

RECIEVE REWARD

GUARANTEEDREWARD

REWARDSFROM CREATOR

$ $

$ $

$ $$ $

$ $$ $

$ $$ $

$ $$ $

$ $$ $

PROJECT LAUNCH

K Back Big Project

K Back This Creator

K Back This Project

Categories: Games / Technology / Design

Categoies: Existing Categories Time Frame: up to 2 months

Time Frame: up to 2 years

Time Frame: UnlimitedCategories: Film & Video / Music / Publishing

Design two additional payment typesthat allow creators who want to release“small” content regularly and creators

creating “big” project to not fail.

Redesign project pages for agreater emphasis on creators /

people on kickstarter

SOLUTION

1. conducted research to study eyetrackingand depictions of faces

3. Lead design studio and designedwireframes

My Role:UX Designer / Visual Designer

Main Contributions

My Team:Carly Bruce / Dennis Lee / Evelyn Kim

Lessons: Our group had a lot of greatdesign ideas from research that weren’t necessarily directly tied to the objective.

We could have been more focused on the MVP knowing the time frame of the project.

After: Kickstarter / 2 week student project

User Journey

Page 20: Dennis Lee UX Portfolio

67%

Facebook

CROWDFUNDING USAGE

PROJECT DISCOVERY

KickStarter

GoFundMe

Word of mouth

Indiegogo

Actual Site

Twitter

Crowdfunder

Patreon

87% 87%Have usedthese sites

Have usedthese sites

Discovered projectsthrough friends &

family

65%11%

AGE GROUPSAGES 19-29

43%AGES 29-39

57%

60People

67%47%

44%

25%

33%13%9%

KickstarterKey takeaway: Other sites allow for flexible/more options for creators Patreon21 Faces0 FacesEye tracking study

National Center for Biotechnology Information

SURVEY DATA

Competitive Analysis

DESIGN ITERATERESEARCH IDEATE

Challenge: It was difficult to convince my team of the value of eye tracking research and how I wanted to focus our design on the people

of kickstarter : creators and backers.

Key Takeway: People are discoveringprojects through other people around them.

Most peope use facebook as barrier ofentry into Kickstarter.

People are attracted to look at depictions of faces

1

2

Page 21: Dennis Lee UX Portfolio

Low Fidelity Medium Fidelity High Fidelity

Design // Creator Screen

Interview / PersonasRESEARCH IDEATE ITERATEDESIGN ITERATE

Key Takeway: -Our interviews further proved backers want tofund creators they know or their friends/familyhave backed. Esp. for recurring payments.- Creators need a platform to put out different sizeof content (small, big)

I conducted design studio after my teamsketched ideas individually. We were able

to easily agree on a low fidelity design. We digitized the version to be tested in

our paper / digital prototypes.

Main Creator Persona

Main Backer Persona

In out final version, we added morecontext on the creator after testing.

RICEPIRATEyoutube

Creator Interview

1

2

See the Prototype

Page 22: Dennis Lee UX Portfolio

Thanks!Website // uxdennis.com Linkedin // linkedin.com/in/dennisyjleeEmail // [email protected]