malik jones robinson ux portfolio
TRANSCRIPT
Malik Jones RobinsonUser Experience Designer
malik@mmalikjr@mmalikjr mmalikjr.com
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
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
Yelp Mobile Payment FeatureCase Study:
Spec Work
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
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
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
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
Personas
As a culmination of our user research our team created personas through taking all user research and creating an affinity map.
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
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
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
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
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
Usability Testing
User testing our paper prototypes helped us iterate on things like the taxonomy and sizes of buttons.
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
Prototype
Check out the Prototype:http://invis.io/GM1PVRLXU
Page 18
Dating Ring: Website RedesignCase Study:
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
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
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
Comparative Analysis
I conducted a comparative analysis of onboarding processes, this helped me narrow down exactly what was needed for Dating ring.
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
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
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
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
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
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
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
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 30
Prototype
Check out the prototype:
Get in contact with me:
malik@mmalikjr
@mmalikjr
mmalikjr.com
Let’s make something awesome together