malik jones robinson ux portfolio

31
Malik Jones Robinson User Experience Designer malik@mmalikjr @mmalikjr mmalikjr.com

Upload: malik-jones-robinson

Post on 10-Jul-2015

344 views

Category:

Design


2 download

TRANSCRIPT

Page 1: Malik Jones Robinson UX Portfolio

Malik Jones RobinsonUser Experience Designer

malik@mmalikjr@mmalikjr mmalikjr.com

Page 2: Malik Jones Robinson UX Portfolio

Page 2

Michael Malik Jones-Robinson, but just call me Malik (there is always at least 3 other Michaels). I am the UX designer you are looking for...

In case my Jedi mind trick didn't work let me tell you why:

I am an educator turned user experience designer. As a UX designer, I have a passion for creating efficient and intuitive systems to improve user experience. I accomplish this through thoughtful user research and information architecture.

My 5 years of experience as a special education teacher taught me how people think and learn (I think people would be shocked how similar middle and high school students are to adults), and how to leverage experience and knowledge people are coming with to create a better, more intuitive experience for them.

I am excited for the opportunity to bring those skills and insights to the technology/digital space.

Hi, My name is...

Page 3: Malik Jones Robinson UX Portfolio

Page 3

My Design Process

Research/Discovery

Ideate/Build

Test

Itera

te

Deliverables

Ideate/Build

Test

Itera

te

Concepting/Design

Ideate/Build

Test

Itera

te

SurveysCompetitive Analysis Comparative Analysis User Interviews Contextual Analysis Sitemaps/Org ChartsData Analysis Personas

Heuristic evaluation Usability TestingValue RankingCard Sorting Stakeholder Interviews

WhiteboardingDesign StudioGroup SketchingSketching User flowsWireframes

Rapid Prototyping Multivariate Testing User TestingInteraction Design

Annotated WireframesPrototypesSitemap/Org ChartResearch ReportPresentations

Page 4: Malik Jones Robinson UX Portfolio

Page 4

Yelp Mobile Payment FeatureCase Study:

Spec Work

Page 5: Malik Jones Robinson UX Portfolio

Page 5

The Problem:Yelp wants to add mobile payment feature to its app

The Constraints:-Only worry about customer facing portion of the feature-Must be for mobile -Must integrate into existing yelp app -2 weeks to have the feature completed including all deliverables

My Role:-Co-project manager-Lead designer for screens used once in restaurants -Annotated screens used once in restaurants -Created survey-Conducted user interviews -Constructed user flows, sitemap, org chart-Conducted usability tests -Created prototype with Invision

The Deliverables:Mockups Annotated Mockups Prototype User flowSite map/Org chart

The Team:

Yelp Mobile Payment Feature

Page 6: Malik Jones Robinson UX Portfolio

Page 6

Competitive Analysis

Understanding how the best and most popular mobile payment services currently work was critical in order to create something new that is intuitive for users.

Page 7: Malik Jones Robinson UX Portfolio

Page 7

Surveys

I developed survey questions in order to get a better understanding of how users interacted with and pain points from mobile payment apps, check in apps, and the dining experience as a whole.

Page 8: Malik Jones Robinson UX Portfolio

Page 8

User Interviews

In conducting user interviews, I was able to speak directly to potential users for this feature. It was during these interviews that I realized, with this feature for Yelp, the goal was not to im-prove the mobile payment experience, but to improve the dining experience.

“Having electronic receipts would make sending information to my accountant easier”

“If there is a 10-20% discount, I’d check-in”

“I love new food experiences”

“Splitting the bill is frustrating”

“Awesome to have a central place for receipts”

“I hate the whole part of the vmeal when we have to deal with the bill”

Page 9: Malik Jones Robinson UX Portfolio

Page 9

Personas

As a culmination of our user research our team created personas through taking all user research and creating an affinity map.

Page 10: Malik Jones Robinson UX Portfolio

Page 10

HOME

NEARBY SEARCH LIST VIEW

FILTER

RESTAURANT PAGE

FILTER SEARCH LIST VIEW

Tap Restaurant Category

Tap Filter

Tap Restaurant Name

Tap Restaurant Name

Put phone away

Get Seated

Place Order

Order Served

Eat

Ready for Cheque

Go to Restaurant

Calls Waiter

Asks for cheque

Cheque is delivered

Reviews cheque

Decides payment type

Places payment into holder

Gives payment to waiter

Customer leaves restaurant

Writes a review

Customer leaves gratuity

Waiter brings change to table

Waiter returns with receipt

Waiter runs credit card

Customer enters gratuity and signs receipt

Customer Action

Business Action

Optional Customer Action

User Flow for Yelp iOS App | Foodie Wanderluster v4

HOME NEARBY SEARCH LIST VIEW

FILTER

RESTAURANT PAGE

FILTER SEARCH LIST VIEW

Tap Restaurant Category

Tap Filter

Tap Restaurant Name

Tap Restaurant Name Orders

Food is served

Eats

Ready for Cheque

Walks into restaurant

Customer leaves restaurant

Writes a review

Customer receives

notification of link to Yelp

Waiter goes to POS and links to

customer

Customer Action

Business Action

Optional Action

iOs Action

Customer brought to

checkout pageapplies gratuity,

taps “Pay”

Customer receives

confirmation that order went

through and option to rate

Customer receives emailed receipt and link to write review and check Yelp

Pay account

Customer calls waiter over

Waiter edits order

Waiter closes out order on

POS

POS notified that customer wants to close

order

Checks in to restaurant with Yelp Pay turned

on

Get Seated

Customer reviews order

details on phone

User Flows

I created a user flow of the dining experience as it currently exists using Yelp. This is when I realized we are not improving the mobile payment experience, but the dining experience The Yelp pay feature would reduce the need for human interaction which would speed up the payment process.

Current dining experience using Yelp

New dining experience using Yelp and Yelp Pay

less human

interaction=

faster process

Page 11: Malik Jones Robinson UX Portfolio

Page 11

Group Sketching

This helped us as a group create one cohesive experience despite not always being able to work side by side. One of my ideas that came out of these group sketching sessions was the idea of a running tab that allowed users to keep track of their receipts by the line item.

Page 12: Malik Jones Robinson UX Portfolio

Page 12

Wireframes

I then took all of the idea from our sketching sessions and developed wireframes for the section of the app that would be used once at the restaurant. This included the tab screen, and the screens for the checkout flow.

Page 13: Malik Jones Robinson UX Portfolio

Page 13

Advertising

Social

Business Reviews and

ratings

Yelp Pay

map

filter

Individual business

page

search

map tags

monacle

map tags

Yelp Pay

photos

dashboard

talk dukedoms

yelp pay

banner ads

high priority ads in search

check in

friends

feed

deals

Sitemap/Org Chart

Creating these helped me determine how the new feature would be positioned within the app and within Yelp’s current business model as a whole.

home

book-marks friends deals feedcheck in talkaccount nearby recents

feed friends book-marks

business listings

business listings Sort by…

page

search

map filter

business listings

business listings

Yelp Pay

Indicates parts of the app that implementing the Yelp pay feature will affect

Page 14: Malik Jones Robinson UX Portfolio

Page 14

This was the easiest and most efficient way to get instant feedback from users on ensuring that individual elements of our design was easily understandable and intuitive.

A/B Testing

Or Or Or

What text makes the most sense for this button?

Which location for the Yelp Pay badge makes you notice it more?

Page 15: Malik Jones Robinson UX Portfolio

Page 15

Usability Testing

User testing our paper prototypes helped us iterate on things like the taxonomy and sizes of buttons.

Page 16: Malik Jones Robinson UX Portfolio

Page 16

Mockups

Our team had a great visual designer. While she was finalizing the Mockups, I began doing a bit of research on the yelp app to see if there was anything to add that would translate the brand identity of Yelp to our feature. I found Yelp’s iOS mascot and added him to an empty state and loading screen.

*mockups created by project teammate Kimberly Friedman

Page 17: Malik Jones Robinson UX Portfolio

Page 17

Prototype

Check out the Prototype:http://invis.io/GM1PVRLXU

Page 18: Malik Jones Robinson UX Portfolio

Page 18

Dating Ring: Website RedesignCase Study:

Page 19: Malik Jones Robinson UX Portfolio

Page 19

The Problem:Dating Ring is having some issues with conversion, and asked

The Constraints: -2.5 weeks to have the feature completed including all deliverables

My Role:-Lead designer for user profile page -Created survey-Conducted user interviews -Constructed user flows, sitemap, org chart-Conducted usability tests -Created prototype with Axure

The Deliverables:Mockups Annotated Mockups Prototype User flowSite mapResearch ReportPersonas

The Team:

Dating Ring: Website Redesign

Page 20: Malik Jones Robinson UX Portfolio

Page 20

Usability Testing (Current Site)

Screen capturing users in dating ring’s key demographic attempting to use the site, followed by a few short questions asking them if they understood what the site is, and how it is different from other dating sites, was instrumental in understanding the problem we were trying to solve.

Page 21: Malik Jones Robinson UX Portfolio

Page 21

Data Analysis

After analyzing the site’s current data ( Google analytics data, questions asked from the site’s live chat window,current user statistics), clear problems rose to the surface. Key findings: There was a large bounce rate from the homepage, and conversion from users who sign-up to active users, and active users to paid users.

70% of users bounce from homepage

70%

Signu

ps

Paid

Users

Activ

e Use

rs

219

3000

+

841

Page 22: Malik Jones Robinson UX Portfolio

Page 22

Comparative Analysis

I conducted a comparative analysis of onboarding processes, this helped me narrow down exactly what was needed for Dating ring.

Page 23: Malik Jones Robinson UX Portfolio

Page 23

Surveys

I designed a 10 question survey to understand how people use dating sites, and their pain points with them. Additionally this survey was useful to determine what aspect of dating ring's value proposition was most appealing to potential users so we can make sure to highlight that in the onboarding process.

Page 24: Malik Jones Robinson UX Portfolio

Page 24

Design Studio

To take advantage of working with two great designers we used design studio to iterate quickly on our designs in one session. Design studio and other participatory design techniques were useful in working with stakeholders.

Page 25: Malik Jones Robinson UX Portfolio

Page 25

Wireframes

As a team we went through multiple iterations for each of the major pages of the site, each iteration taking the best of our collective ideas to refine the design.

I took the lead in the design of the main user profile page.

Page 26: Malik Jones Robinson UX Portfolio

Page 26

User Flows

To ensure that we thought of all necessary paths and designed for them. I created this user flow. It also highlights how we made the profile page the center of the two main activities on the site signing up and checking on your matchmaker matches.

HOME START SIGNUP PROCESS

DATING RING WAIT LIST

SIGNS UP FOR MAILING LIST

REGISTER WITH DATING RING

PLANS

PROFILE ONBOARDING

SUBSCRIPTION PLAN CHOICESPAYMENT PAGE

WAITING FOR APPROVAL MESSAGE

GETS APPROVAL

EMAIL

USER RECEIVES MATCH

DECLINES MATCH

GIVE FEEDBACK TO MATCHMAKER

ACCEPTS MATCH GIVES FEEDBACK TO MATCHMAKER

MUTUAL MATCH

EXCHANGE PHONE NUMBERS GO ON DATE GIVE FEEDBACK

TO MATCHMAKER

SIGN UP WITH FREE

SUBSCRIPTION

SIGNS UP WITH PAID

SUBSCIRPTION

PAYMENT ACCEPTED

First time signup process

Waiting for access to Dating Ring

A good match

A bad match

Page 27: Malik Jones Robinson UX Portfolio

Page 27

Sitemaps

By creating a profile page, with clearly labeled links to the important information right on the profile page, the critical information is no more than three pages from the homepage. previously most critical information was at least 4 levels deep into the site.

Home

Plans Premium Service

My pro�le waiting list MatchmakersFacebook sign in

Footer

Manage/AddPhotos

All matches Pro�le interests

View weekly match

Dating RingEvents Account

Pro�le Information

Subscription Plan Choices

Paymentpage

Awaitingapproval

Contact Us

Membership

Footer

Terms FAQ Privacy BlogAbout Contact

Dating RingBlog

Email Client

Subscriptions

Search

Matches

PausingMemberships

MatchmakerSchedule Page

Indicates page not onDating Ring site

Sitemap Before Redesign

Sitemap After Redesign

Page 28: Malik Jones Robinson UX Portfolio

Page 28

Why should you Join the Dating Ring?

We do all the work!

Only real profiles onDating Ring!

We are real people lookingfor matches for you!

Footer

Log In

Spend your time on dates, not online. Try it right now!

Join the Dating Ring!

I am name , who lives in city , who is age years old.

Why should you Join the Dating Ring?

We do all the work!

Only real profiles onDating Ring!

We are real people lookingfor matches for you!

Footer

Log In

Spend your time on dates, not online. Try it right now!

Join the Dating Ring!

I am name , who lives in city , who is age years old.

Why should you Join the Dating Ring?

We do all the work!

Only real profiles onDating Ring!

We are real people lookingfor matches for you!

Footer

Log In

Spend your time on dates, not online. Try it right now!

Join the Dating Ring!

I am name , who lives in city , who is age years old.

Why should you Join the Dating Ring?

We do all the work!

Only real profiles onDating Ring!

We are real people lookingfor matches for you!

Footer

Log In

Spend your time on dates, not online. Try it right now!

Join the Dating Ring!

I am name , who lives in city , who is age years old.

Why should you Join the Dating Ring?

We do all the work!

Only real profiles onDating Ring!

We are real people lookingfor matches for you!

Footer

Log In

Spend your time on dates, not online. Try it right now!

Join the Dating Ring!

I am name , who lives in city , who is age years old.

Multivariate Testing

I tested 6 different versions of our homepage design, with dating ring's key demographic to ensure the design was able to convey dating ring's value proposition, while appealing to men and women of diverse backgrounds.

Why should you Join the Dating Ring?

We do all the work!

Only real profiles onDating Ring!

We are real people lookingfor matches for you!

Footer

Log In

Spend your time on dates, not online. Try it right now!

Join the Dating Ring!

I am name , who lives in city , who is age years old.

Page 29: Malik Jones Robinson UX Portfolio

Page 29

Usability Testing

To test our design, I conducted usability tests to ensure our design’s information architecture clearly lead users where they were expecting. This involved asking users to find and access the most used portions of the site to ensure there is no confusion.

Page 31: Malik Jones Robinson UX Portfolio

Get in contact with me:

malik@mmalikjr

@mmalikjr

mmalikjr.com

Let’s make something awesome together