Pei UX Portfolio

© 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


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


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


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


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


Case Study: Meetup Meeting Spaces Feature | Platform: Website

© Pei Hsieh 2015


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


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


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


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


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


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


Month Day, Year


Month Day, Year


Month Day, Year


Month Day, Year


Month Day, Year


Month Day, Year


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



Got Space: I have space and am looking for a MeetupFind Space: I have a Meetup and am looking for a 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


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


MembersSearch for a Meetup

NEW!

SORT BY: Best MatchHighest Rated

Most Reviewed

RESULTS


Month Day, Year


Month Day, Year


Month Day, Year


Month Day, Year


Month Day, Year


Month Day, Year


Month Day, Year


Month Day, Year

Girls Who Code Event: SheHacksMonth Day, Year

SpacesGot Space | Need SpaceProfiles | 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


Advanced Filtering



Got Space: I have space and am looking for a MeetupFind Space: I have a Meetup and am looking for a 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


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

http://invis.io/TS2U452Z7



https://drive.google.com/file/d/0B-lVPKXHEfKCY3lCM3c3aVowRHc/view?usp=sharing

© Pei Hsieh 2015


Meetup: High-Fidelity Mock-Ups

Top level search

Profile Page: Review Past Events and Reviews

Advanced search

Message Organizer or Host




http://invis.io/R52PPH0ZB

© Pei Hsieh 2015


Case Study: Meal Sharing Homemade Takeout Feature | Responsive Website

© Pei Hsieh 2015


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

http://invis.io/JK321NQFW



https://drive.google.com/file/d/0B-lVPKXHEfKCS2ppVkZnc25yM00/view?usp=sharing

© Pei Hsieh 2015


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


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


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


Meal Sharing: High-Fidelity Mock-Up

Homepage Map showing nearby offerings

Dish Details Page Order / Payment Page





© Pei Hsieh 2015


Case Study: 1change Personal Development

Diagnostic and Habit Tracker

Platform: Native i0S App

© Pei Hsieh 2015


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

https://drive.google.com/file/d/0B-lVPKXHEfKCTzZWUkZDVy1MdTg/view?usp=sharing

© Pei Hsieh 2015


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


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


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


1change: High-Fidelity Mock-Up

New User Home Screen Resilience Test Test Results Reminder Notification Settings


© Pei Hsieh 2015


Let’s connect!

Say [email protected]

917.648.2297

mailto:heypei%40gmail.com?subject=

https://www.linkedin.com/in/peihsieh

https://twitter.com/n0tpei

mailto:heypei%40gmail.com?subject=