ux class presentation

34
Design Crutch Peer to peer design help

Upload: theo-v

Post on 19-Feb-2017

27 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: UX class presentation

Design Crutch

Peer to peer design help

Page 2: UX class presentation

Agenda● Initial idea

○ Problem

○ Persona

○ Research

○ Initial Design

● PIVOT ○ Problem Statement

○ Competitive evaluation

○ Personas (Post Pivot)

○ Low Fidelity Proto

○ User Feedback

● High Fidelity Proto

Page 3: UX class presentation

Problem● Learning how to code is different than learning almost anything else● The best way to learn is to start coding ● But people get stuck and need live help from an experienced coder ● At the same time thousands of experienced coders all over the world are willing

to help for a small price

Page 4: UX class presentation

Carrie the career changer

Female 27

BS / English major from Berkeley

Works for a non-profit

Started her first coding class

Quote

“I am tired of the non-profit life, I want to change careers and love technology. I am gonna learn how to code”

Motivated by:

Getting a job as a software developer and entering a new career

Pain points:

● Getting stuck on a coding problem e.g. code doesn't compile and can’t figure out why● Doing things the wrong way and knowing it e.g. I know there is an easier way to do this but I

don’t know what it is

Scenario:

It is 6PM, Carrie just had a long day at work. She now needs to work on her coding project for her GA course. She starts on it but after 30 min realizes she is stuck on the same problem. She has to wait until tomorrow to get help from TAs but assignment is due soon. She logs into Unstuck.Me app and finds an expert immdeiately and gets help.

Persona - Carrie the Career Changer

Page 5: UX class presentation

Cody the experienced coder

Male 27

BS in CS

Works for a startup, codes for fun

Has about 5 years of coding experience in Python

Quote

“ What are the APIs to access the SMS data on a Android?”

Motivated by:

● Learning new technologies● Advancing in his home project

Pain points:

● Not being able to understand a new technology quickly

Scenario:

It is 6PM, Cody is working on a new mobile app idea with a buddy. He needs to access the SMS log on a device. Cody is a Python master but doesn’t really know mobile at all so he is stuck. He needs to get help from someone who understands Android. He logs into Unstuck.Me app and finds an expert immdeiately and gets help.

Persona - Cody the Coder

Page 6: UX class presentation

Flow Diagram

Page 7: UX class presentation

Paper Prototype ( 1 / 2)Home screen Filtering / searching Results page

Users need the marketing info Too many filters for users. Think about shortening this screen.

Good feedback here, it maybe a bit too busy

Page 8: UX class presentation

Paper Prototype (2 / 2)Profile screen Connection screen

Good feedback Good feedback

Page 9: UX class presentation

Clickable Prototype

Page 10: UX class presentation

Top learnings from qualitative research (value) ● The feedback was about 50/50

● Most people have been stuck and need help

● Many have Googled and solved the problem relatively easy

● Many have friends, cousins, coworkers etc. that can help

● In general it is difficult to gauge the user’s willingness to use the product since they are not in the

moment when they are stuck and need help

Page 11: UX class presentation

Top learnings from qualitative research (UX) ● Needs more explanation / selling on the first screen; the user doesn’t understand what the app does

● Users asked for number of reviews in addition to the star ratings

● Some users loved the % repeat customers

● Large number of Americans don’t recognize country flags - sad :(

Page 12: UX class presentation

The Bottom Line● We were not convinced of the revenue potential of the app● Consumers prefer to get free help from friends, family, co-workers the app

would be last resort

Page 13: UX class presentation

CAPTAIN WE MUST PIVOT !!!!!

Page 14: UX class presentation

Post Pivot Agenda● Problem Statement● Opportunity Analysis ● Competitive Evaluation ● Personas (Post Pivot)● User Feedback ● High Fidelity Prototype

Page 15: UX class presentation

Problem statement● Designers and PM are deeply involved with their product and thus very biased● Great designs happen with an independent outside feedback from experienced

designers

Design Crutch is a place where designers and PMs can help each other with their designs and earn some cash on the side

Page 16: UX class presentation

Opportunity Assessment What is the problem (value prop) ● Previous slide

Who is the target market ● Designers at small to medium companies● PMs a small to medium sized companies

Market size ● All up market for designers $54B● We estimate our market to be ~10% or $5B+

Competition - current , potential ● Upwork, Behance, Dribble, 99designs

GTM ● Community outreach

Why now (market window) ● Competitors may build features that make us obsolete

Supplier power / Buyer power ● No major risks

Other risks (legal etc.) ● No major risks

Page 17: UX class presentation

Eugene the UX designer

Male 27

BS in Industrial Engineering

Head of design at a Startup

Has about 5 years of UX experience

Quotes:

“ Two brains are better than one” , “Great ideas can come from anywhere”

Motivated by:

● Creating an absolutely amazingly stunning design for the company he works for ● Keeping his team “in-check” , making sure the stuff his team designs is top notch

Pain points:

● Not enough resources to create an absolutely amazingly stunning design

Scenario:Eugene is an amazingly talented designer. However, he knows that the best designs come as

a result of collaboration with other great designers not by a designer locking himself in a room and coming up with great ideas. Furthermore, Eugene knows that designers often fall in love with their design and are not being critical enough. That is why Eugene wants to connect with outside designers who have no attachment to a product and can give expert unbiased advice on the design.

Personas - Eugene the UX designer

Page 18: UX class presentation

Pedro Morales the Product Manager

Male 37

BS in CS and MBA

Works for a late stage startup

Quotes: “ Arghhh not again, designers will not listen but if my metrics don’t improve its my BUTT not theirs !!!”

“ My product is my baby it must have the best design ever, I want to be the Airbnb of UX for my industry”

Motivated by:

● Creating the best product● Career advancement

Pain points:

● Convincing designers to go a certain route● Not having design experience yet being responsible for the designs to be great

Scenario: Pedro is under a lot of pressure to create products with great design. He has good relationship with his designers but still wants a second opinion from an expert unbased eye once in awhile. In addition, Pedro is sometimes frustrated since his designers are so attached to their design that will not listen to constructive criticism. He would love to get an expert that can backup or disprove his design hunches.

Personas - Pedro the Product Manager

Page 19: UX class presentation

Competitive Evaluation What is it How we differ

99designs Marketplace for small/medium design jobs. Mostly low end designers doing it almost entirely for the money.

● High end designers● Designers critique each other’s designs

they do not work projects

Upwork Similar to above but covers more verticals - development, SEO, security etc.

● Same as above

Dribble Portfolio site where higher end designers display their work, meet other designers, and get work.

● Designers critique each other’s designs they do not work projects

Behance Very similar to the above ● Same as above

Page 20: UX class presentation

Competitive UX evaluation - Heuristics Heuristic Explanation

Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Consistence and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place.

Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another.

Flexibility and efficiency of use

Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design

Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Page 21: UX class presentation

Competitive UX Evaluation - Dribble

Page 22: UX class presentation

Dribble

Good clean design with the right amount of info and great use of white space. The design uses familiar concepts from FB, Pinterest, Instagram making it easier for the user to navigate.

1. Clean easy navigation, that covers the 80% use case and has “more” for the 20% use case

2. Tapping on a card gives more info - great way to expose more info without adding clutter

3. Great use of smaller icons to convey info without adding clutter

4. Infinite scroll adds to “efficiency” and “minimalist design”

5. Nice use of search for easy navigation. a. However, there is no “advanced search”

i.e. the user can not search for “ivan” the designer not “Ivan” the design icon.

b. Search is gone as the user scrolls down (infinite scroll) that really hurts “efficiency”

Page 23: UX class presentation

Continuing with clean design with the right amount of info and great use of white space.

1. Using modals helps with “efficiency” as a user can complete a quick task and get back to where he/she was before

2. The user cannot leave a comment here. That is bad UX! The app should inform the user why he cannot leave a comment

3. There isn’t consistency between navigation on 3 and 4. Navigation on 4 sends the user to items on Roman’s portfolio whereas 3 sends the user to items on the whole network.

Page 24: UX class presentation

When clicking on “buckets” on previous screen I get to this screen. This modal inside a modal navigation could be confusing for some users. Some UX designers claim that modals should be very simple and the user should be “and an out” of them vs. going into deeper experience inside a modal.

Page 25: UX class presentation

1. The copy is confusing as there is no way to filter the designer list unless you pay. Users may not see the search/sort under the Go-Pro and may be stuck.

2. Search is confusing to the user as now the user has a search on the nav bar and another search under the Go-Pro title.

Page 26: UX class presentation

Grades

Heuristic Grade

Visibility of system status A

Consistency and standards B+

Error prevention A

Recognition rather than recall A

Flexibility and efficiency of use B+

Aesthetic and minimalist design A

Page 27: UX class presentation

Top learnings from qualitative research (value)

Feedback Action

● Generally positive feedback with most designers and PMs

quickly seeing the value

N/A

● Few designers believe that they do not need feedback since

design is an art. But those are a minority, most designers know

that constructive criticism helps create amazing designs.

N/A

● The area where users saw the least amount of value is the

“Design QA” , many users did not get the concept.

Brainstorming ideas how to better explain this part of the product OR whether we should remove it

Page 28: UX class presentation

Card Sort ● We asked 3 users to complete a card

sort via OptimalSort.com● The results varied but they were all

close to the screenshot here

Page 29: UX class presentation

Design Iterations

Page 30: UX class presentation

USER FEEDBACK

We had a search “landing page” where users would pick the type of designer.

It is very text heavy page that did not add much value. We instead lande the user on search results and allowed them to filter the results.

OLD NEW

Page 31: UX class presentation

USER FEEDBACK

The old search results cards would flip when you tap on the designers name. When flipped they showed the ratings of the designer. This confused the user since you could flip the card but also tap into to it to get the full profile. We decided to keep it simple i.e when you tap on Anastasia you go to her full profile card.

Flip

Page 32: UX class presentation

USER FEEDBACK

The older cards confused the user as he/she thought the screenshot of the example app were part of our app. The newer cards used more spacing and full screen images of the example apps so that the user knows that those images are work samples not part of our app.

OLD NEW

Page 33: UX class presentation

High Fidelity Prototypehttps://theo949.proto.io/share/?id=3f8a0fa6-6e80-4117-8c0f-8596c8df92a7&v=9

(must use latest version on Chrome or Firefox; Firefox is recommended)

Page 34: UX class presentation

Appendix