pei ux portfolio
TRANSCRIPT
© Pei Hsieh 2015
Pei HsiehUX DES IGN + RESEARCH
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Contents
1. About 2. Meetup 3. Meal Sharing 4. 1change 5. Contact
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
I’m inspired to create engaging digital experiences and intuitive
interactive products. I love working with information, diving into
complex problems and coming up with thoughtful solutions.
I studied architecture1 and graphic design2, and have over a
decade of experience as a designer and art director in branding3,
packaging4 and exhibit design5. I’ve also worked in innovation
consulting6 and product marketing7 for tech. I see UX as a delight-
fully nerdy bridge between my creative and business experience8.
About Me
Experience
1 Columbia University
2 Yale University 3 Ogilvy 4 Martha Stewart
5 American Museum of Natural History
6 Clients: IBM, Target
7 Launch of a $300M SaaS platform
8 Oh hai! Have a question? Holler at me: [email protected]
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Any time one or more things are consciously put together in a way that they can accomplish something better than they could have accomplished individually, this is an act of design.”
— Charles Eames
“
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
My UX Design Process*
RESEARCH
Gather data
ITERATE
ANALYZE
Interpret findings
DESIGN
Sketch, wireframe, prototype
TEST
Conduct usability tests, iterate
IDEATE
Turn insights into action
BUILD
Mock-ups; work with visual designers and developers
* Depending on the project or methodology, the process may not be this linear... and likely not this tidy!
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
RESEARCH ... AND ANALOG TOO!
DESIGN
SHEETS
POWERPOINT
INDESIGN ILLUSTRATOR PHOTOSHOP
SLIDES
WORD
DOCS
SKETCH
EXCEL
FORMS
OMNIGRAFFLE INVISION MARVEL POP
KEYNOTE
A few tools I use:
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Case Study: Meetup Meeting Spaces Feature | Platform: Website
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Meetup: Overview
ChallengeMeetup’s mission is to help the world self-organize, enabling people with common interests to connect in person locally.
Meetup organizers have to find space on their own.
Venues have no way of promoting their spaces on Meetup or searching for events to host.
ObjectiveMake it possible for Meetup Event Organizers and Venue Hosts to find each other through the Meetup website.
Solution• Event Organizers: browse and search for prospective spaces
and reach out directly to Venue Hosts
• Venue Hosts: browse and search for events
• Filter searches based on shared interests and needs
• View profiles, see ratings and message potential partners
• Create a search dropdown feature from global nav bar to integrate it seamlessly with existing Meetup website.
1. Project Case Study Presentation
• High-level personas• Sketches and proof
of ideation process • Proof of design
iterations• Wireframes• Key screens
(mockups)
2. Design specifica-tions document
• User flows• Sitemap• Wireframes• Key Screen
Mockups3. Interactive
prototype
MY ROLEI worked on a small team and was very involved with almost every aspect of the project, with particular emphasis on managing the team’s workflow, ideating, designing the wireframes, iterations, mockups and presentation.
PROJECT DURATION2 weeks
DELIVERABLES
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Meetup: Survey + Analysis
Competitive + Comparative AnalysisOur competitive and comparative analysis included business model and feature comparisons.
One of our main takeaways was that having features that convey trust and security is critical to users when it comes to letting people use either private or commercial space.
SurveyWe created a screener survey to capture potential follow-up user interviews. We were specifically looking for Meetup organizers as well as potential hosts.
In the process, we discovered the need for precise terms to distin-guish people organizing events from those hosting venues — hence, “Event Organizers” and “Venue Hosts.”
Survey ResultsThe survey helped us determine the platform (desktop), the type of meetup event a user would be searching for (tech) and how the feature we were creating would be incorporated into the website (search function).
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
User Interviews
Top 5 findings that informed our design::
• Search for and vet like-minded partners
• Filter by specific criteria (e.g. interests, amenities, etc.)
• Browse event / venue profiles: single page with event and organization specs
• Native messaging feature
• Scheduling by availability and preference
“How do we find new partners who can bring a lot of new people?”
— Lena, Venue Host
We created composite personas based on our findings
Meetup: User Interviews + Personas
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Meetup: Feature Prioritization + MVP
MVP
Trust
Filtered Search
Partnerships
MUST / SHOULD / COULD
Amenities
Assurance
Attendance
Convenience
Coordination
Cost
Filtered Search
Partnerships
Reviews
Size
Transparency
Trust
Affinity Map + Feature Priorization• Brainstormed features and affinity mapped to
sort them into natural categories
• Prioritized features along a matrix of high-to-low effort and least-to-most important.
• Used the MoSCoW method — identifying Musts, Should, Coulds, and Won’ts for the product
• Derived our Minimum Viable Product, or MVP.
Wireframe Sketch of Filtered Search
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Meetup: Search Function Iterations
We went through numerous iterations of the search function. We experimented with different terminology to describe the Event Organizer and Venue Host roles.
We designed an option for the user to choose their role from a dropdown menu based on need.
We included more information at the top level, but that made the interface more cluttered and less clear.
2
3
1
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Given the complexity of this feature, we created a set of annotated wireframes to describe each element of the interface. In this, our final iteration for the search function, the tab itself is very simple — it is called, “Spaces.”
We created a 3-tired search. The first level explains the Event Organizer and Venue Host points-of-view; the second level is for location, date and keyword search; and the third is for detailed, advanced filtering.
Meetup: Annotated Wireframes
Starta Meetup Group
SpacesGot Space / Find Space
MembersSearch for a Meetup
NEW!
SORT BY: Best MatchHighest Rated
Most Reviewed
RESULTS
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Girls Who Code Event: SheHacksMonth Day, Year
SpacesGot Space | Need SpaceProfiles | What is this feature?
Your SpaceYour Event
Create a Profile:Search: What is this feature?
Got Space: I have space and am looking for a MeetupNeed Space: I have a Meetup and am looking for a space
Search
Search for Meetups Needing Space
Tip: To browse all Meetups, click Search without specififying any criteria.
Advanced Filtering
Your SpaceYour Event
Create a Profile:Search: What is this feature?
Got Space: I have space and am looking for a MeetupFind Space: I have a Meetup and am looking for a space
SpacesGot Space / Find Space
NEW!
Find Out More
NEIGHBORHOODS
CAPACITY
BUDGET
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
SERVICES
Food
Drink
Bar Service
Cleaning
Greeter
DJ
Tech Crew
Food
Drink
Bar Service
Cleaning
Greeter
DJ
Tech Crew
Morning
Afternoon
Night
All Day
Morning
Afternoon
Night
All Day
TIME DAYS
Tip: To browse all Meetups, click Search without specififying any criteria.
Manhattan 07/14/2015 07/30/2015 women technology
$0
50
Chelsea
East Village
Flatiron
West Village
Hells Kitchen
Kips Bay
Times Square
Chelsea
East Village
Flatiron
West Village
Hells Kitchen
Kips Bay
Times Square
More…More…
SPACE TYPECommerical
Conference
Sound Studio
Computer Lab
Outdoor
Loft
Apartment
Commerical
Conference
Sound Studio
Computer Lab
Outdoor
Loft
Apartment
More…More… More…More… More…More…
Tech
LGBTQ
Career
Dancing
Wine
Hiking
Art
Tech
LGBTQ
Career
Dancing
Wine
Hiking
Art
INTERESTS
Bathrooms
Lighting
A/V
Computers
Chairs
Desks
Whiteboard
Bathrooms
Lighting
A/V
Computers
Chairs
Desks
Whiteboard
AMENITIES
More…More…
Clear
A
B
C
AnnotationsResults Page, Advanced Filtering
Type something
Clear button: User may clear their advanced filtering selections and start over
Results: Displays image the profile creator has chosen, as well as a logo, if applicable, and date of event; a future enhancement could include a brief description of the meetup that pops up by hovering over the image
Level 3 Search / Advanced Filtering: User can filter by many different criteria, including time of day, specific days, amenities, etc.
A
C
B
Starta Meetup Group
SpacesGot Space / Find Space
MembersSearch for a Meetup
NEW!
SORT BY: Best MatchHighest Rated
Most Reviewed
RESULTS
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Lorem Ipsum Dolorpatrioque adipiscing vis
Month Day, Year
Girls Who Code Event: SheHacksMonth Day, Year
SpacesGot Space | Need SpaceProfiles | What is this feature?
Your SpaceYour Event
Create a Profile:Search: What is this feature?
Got Space: I have space and am looking for a MeetupNeed Space: I have a Meetup and am looking for a space
Search
Search for Meetups Needing Space
Tip: To browse all Meetups, click Search without specififying any criteria.
Advanced Filtering
Your SpaceYour Event
Create a Profile:Search: What is this feature?
Got Space: I have space and am looking for a MeetupFind Space: I have a Meetup and am looking for a space
SpacesGot Space / Find Space
NEW!
Find Out More
NEIGHBORHOODS
CAPACITY
BUDGET
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
SERVICES
Food
Drink
Bar Service
Cleaning
Greeter
DJ
Tech Crew
Food
Drink
Bar Service
Cleaning
Greeter
DJ
Tech Crew
Morning
Afternoon
Night
All Day
Morning
Afternoon
Night
All Day
TIME DAYS
Tip: To browse all Meetups, click Search without specififying any criteria.
Manhattan 07/14/2015 07/30/2015 women technology
$0
50
Chelsea
East Village
Flatiron
West Village
Hells Kitchen
Kips Bay
Times Square
Chelsea
East Village
Flatiron
West Village
Hells Kitchen
Kips Bay
Times Square
More…More…
SPACE TYPECommerical
Conference
Sound Studio
Computer Lab
Outdoor
Loft
Apartment
Commerical
Conference
Sound Studio
Computer Lab
Outdoor
Loft
Apartment
More…More… More…More… More…More…
Tech
LGBTQ
Career
Dancing
Wine
Hiking
Art
Tech
LGBTQ
Career
Dancing
Wine
Hiking
Art
INTERESTS
Bathrooms
Lighting
A/V
Computers
Chairs
Desks
Whiteboard
Bathrooms
Lighting
A/V
Computers
Chairs
Desks
Whiteboard
AMENITIES
More…More…
Clear
A
B
C
AnnotationsResults Page, Advanced Filtering
Type something
Clear button: User may clear their advanced filtering selections and start over
Results: Displays image the profile creator has chosen, as well as a logo, if applicable, and date of event; a future enhancement could include a brief description of the meetup that pops up by hovering over the image
Level 3 Search / Advanced Filtering: User can filter by many different criteria, including time of day, specific days, amenities, etc.
A
C
B
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Meetup: High-Fidelity Mock-Ups
Top level search
Profile Page: Review Past Events and Reviews
Advanced search
Message Organizer or Host
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Case Study: Meal Sharing Homemade Takeout Feature | Responsive Website
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Meal Sharing: Overview
ChallengeMealSharing.com allows home cooks to invite people to share a meal in their home. Currently, cooks must host a meal in their home, and customers must visit a host’s home to enjoy a meal. This is not always feasible or desirable for everyone.
ObjectiveCreate a feature for people to order homemade takeout. This will allow home cooks and potental customers to participate in meal sharing, without hosting or attending an event.
Solution• Customers: search for and order from home cooks in the
neighborhood
• Home cooks: upload meals and receive alerts when an order comes in.
• Pictures, ratings, profiles and messaging make the exchange feel secure
• Easy and secure payment
• Mobile-first responsive website so it can be accessed from any platform
1. Research Report• Executive Summary
(Key takeaways)• Competitive and
comparative analysis• Technical
background research
• User research process and takeaways
2. Planning Documentation
• Annotated wireframes
• Usability testing findings
• Screen flows• User flows• Scenarios/job
stories• Site map• Style guide
MY ROLEI worked on a 3-person team, focusing on time management and task delegation, wireframes, style guide, mock-ups and the interactive prototype.
PROJECT DURATION2 weeks
DELIVERABLES
3. High -fidelity mock ups / Interactive prototype4. Presentation
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
USER FLOWS
• Compare the customer vs. home cook experience.
• Length of process from browsing to checkout
• Length of process for the home cook from posting a meal to fulfilling a placed order.
SITEMAP
We built our feature to fit within the existing information archi-tecture for the website to ensure the least disruptive user experience.
Meal Sharing: Sitemap and User Flows
Customer: 13 steps to order completion Chef: 12 steps to order fulfillment
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Clarify you can change quantity of servings
Message chef
See order confir-mation number
Option to cancel
Option to go back to home screen and browse for more food
More vertical scrolling on all pages
See the chef rating at the top of profile1
1
2
4
4
5
7
6
6
5
6
7
2
3
3
1
Meal Sharing: User Feedback Changes
USER FEEDBACK CHANGES
We went through three iterations, each time incorporating user feedback and increasing fidelity.
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Meal Sharing: Responsive Website + Style Guide
RESPONSIVE SITE
Once the design of the mobile version had been fully considered, we created the tablet and desktop formats.
STYLE GUIDE
We created a style guide of MealShar-ing’s branding and applied the look and feel across all platforms.
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Meal Sharing: High-Fidelity Mock-Up
Homepage Map showing nearby offerings
Dish Details Page Order / Payment Page
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Case Study: 1change Personal Development
Diagnostic and Habit Tracker
Platform: Native i0S App
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
1change: Overview
Challenge1change is an HR consulting firm, with mostly European clients, that offers executive coaching using a holistic approach.
We were asked by the firm’s founder, Ole Høyer, to create a native iOS app of their online diagnostic — The Resilience Test. The test identifies one area of change and suggests specific practices in one of four areas: Mind, Body, Heart, Spirit.
ObjectiveDesign an app around the Resilience Test, but also extensible in the future to be a lead generator, a portal to the client platform, as well as a standalone tool for sustaining one habit change.
Solution• Take the Resilience Test and review detailed results
• Option to choose change without taking the test
• Learn about the 1change model and all the change practices
• Provide guidance, motivation, and a way to keep track of progress
• Connect the app with the client platform
• Access more information on 1change products and services
1. Presentation• User Research Key
Takeaways• Competitive and
comparative analysis• Usability testing
findings• Iterations
2. High -fidelity mock ups / Inter-active prototype
3. Visual Design Options
4. Annotated Wireframes
5. Research Report
MY ROLE I worked on a 3-person team, focusing on task delegation, user research, ideation, wireframes, visual design and mock-ups.
PROJECT DURATION 3 weeks
CLIENT Ole Høyer, 1change
DELIVERABLES
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
1change: User Research Findings
Goal History
Notification Control
Speed and Convenience
Motivation
Social
“I don’t want to have to input a lot of information”
“I always forget to record my activity. I need reminders.”
Fitness goals most popularNotifications are ok
Frequency of tracking varies
“This is about improving peoples’ lives.”
“It needs to be as easy as one swipe.”
Stakeholder InterviewsUser Interviews
Survey Findings Competitive / Comparative Analysis
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
1change: Usability Testing + User Feedback
User Feedback • Not everyone wanted to take the
survey
• Some users wanted to explore the app first
• Confusion about the Body-Mind-Heart-Spirit symbol and Resilience Test results graphics
• Copy and process needed to be clearer
Multivariate Testing We sought to address the confusion around the existing results graph that accompanies the Resilience Test score, as it is an important part of the client’s system.
We created alternate graphs and did multivariate testing on them. Overwhelmingly, users chose Option 1. This was the graphic we used on the final mock-up.
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
1change: Key Screens
New User: Choose Any Change
Test Taker: Choose Your Change
Hamburger Menu: Settings, Test Tracker, Links to other 1change products and services
Track Progress: Calendar tracking and
motivation
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
1change: High-Fidelity Mock-Up
New User Home Screen Resilience Test Test Results Reminder Notification Settings
© Pei Hsieh 2015
About Meetup Meal Sharing 1change Contact
Let’s connect!
917.648.2297