Tradecraft

Product Design Apprenticeship

Tradecraft is a highly selective and rapid based Product Design Apprenticeship in San Francisco and these are some of the projects I did and worked on.


COFFEEGRAM

COFFEE SAAS

Part of getting accepted into Tradecraft I was tasked with designing and validating a checkout flow for a coffee bean delivery service.

OBJECTIVE: CREATE A OPTIMAL CHECKOUT FLOW FOR A COFFEE SUBSCRIPTION SERVICE.

ROLE: PRODUCT DESIGNER

PART 1: RESEARCH

So before I took my thoughts straight to sketching something on paper, I went ahead and started researching other companies in the same space. I started out by Googling “coffee bean subscription” and took a look at a few different companies and went through the checkout process. I noticed a few had a quiz that would ask you several questions regarding your coffee habits to narrow down a subscription while the rest were straightforward and you just pick what you want. 

PART 2: DESIGN

After gathering a better idea on the process I moved on to paper and pencil. I initially had 2 ideas of breaking the process down.

One thing both would have would be a summary on the side showing them what they are ordering throughout the process. The first idea was to keep it as simple as possible and to just have 2 pages, one for account creation and second bundled billing and personal/mailing information.

Second Idea was to break it down to 3 pages and separate it out so account creation, next shipping and finally billing info. I decided I would capture name during the account creation to so the next pages wouldn't bother asking and I would already have it.

After debating and considering mocking and testing both I ultimately decided that breaking it down to 3 pages would be a better experiment. After creating the sketches I fired up Sketch since it’s what I’ve used in the past and felt I would be able to whip up a wireframe quicker. While creating the wireframes I decided to tweak some items from the initial sketch and also added some things I felt would improve the overall experience.

SKETCHES:

 

WIREFRAMES:

 

PART 3: USABILITY TESTING

After completing the wireframes and exported them I started my Nav Flow test on Usabilityhub. Surprisingly the majority were failures. So I took a look at the data and the users that Usabilityhub had a higher success rate than all the folks from the UX groups failed. They failed because the first item they clicked on was the name field so in reality they didn’t fail because that’s the first thing a user should be doing but in regards to the test they were suppose to just click on button to move through the process. So does this mean that Usabilityhub users in fact failed and the UX folks didn’t? Since its just PNG prototypes the Usabilityhub users would have failed in a real world page causing validation errors or maybe not since the context is different. I also considered that maybe that because they are indeed UX folks that it might have been bias but realizing they are in fact kind of users I would want signing up for the service. What UX designer doesn’t drink coffee?

THE RESULTS:

 

PART 4: RETROSPECTIVE

I realized that the flow of the checkout was in pretty good shape but there are several things I would add to improve the actual experience that didn't necessarily alter the flow. I would allow the ability to make changes to the order and also have some kind of promotional area to up sell to a higher subscription and or add on services/products. Another thing would be to give them the ability to gift the subscription. Also realized that adding some kind of short quiz or product sub selection before the checkout process was helpful from my research. I initially didn’t add it since I thought it would take away from the flow but after going back and checking them out It made sense to me. Also I would consider adding a summary page before submitting the order to verify all the information inputted but would have to test it to see if it’s helps or not.


AIRBNB USABILITY TEST

FROM PERSONA TO PROTOTYPE

 

Airbnb is a platform connecting folks that have rooms/apartments/houses and more to rent with people who need them and provide unique travel experiences for them. Feeling like a local has become easier than ever.

*I don’t work for or represent Airbnb. I was a Product Design apprentice @Tradecraft. During my transition to the Bay area I heavily relied and used Airbnb and became quite a fan of the service.

OBJECTIVE: IDENTIFY PAIN POINTS WITH UPCOMING RESERVATIONS IN AIRBNB'S MOBILE APP.

PART 1: USER RESEARCH

PERSONA: MEET Jessica

Jessica is a 27 year old Developer Advocate who lives in SOMA. She is a very visual person and heavily relies on her smartphone. Because she is a very busy person she needs to plan things ahead and is very OCD about details. She uses Airbnb because it provides a better alternative than a hotel and gives that "homey" feel.

Demographics:

  • Name: Jessica
  • Age: 27
  • Job Title: Developer Advocate
  • Salary: $95k
  • Location: San Francisco (SOMA)
  • Gender: Female

Behaviors:

  • Very visual person
  • Heavily dependent on her smartphone
  • Likes to plan and do things in advanced
  • OCD about checking details
  • Extremely busy person

Needs & Goals:

  • Cheaper options than hotel
  • Likes to feel "homey" and experience living like a local
  • Gets to network and share experiences

GUERILLA USABILITY TESTING:

Scenario: You are heading to a conference and had book a reservation on Airbnb a few weeks back. You don't quite remember all the details and want to recall them

Tasks Given:

  • First step was to find your upcoming reservation and confirm the check in date and time.
  • Next was to cycle through the pictures to remember how it looked liked
  • You realize you didn't notice a TV in the pictures and want to confirm it in the list of amenities
  • Lastly you want to share the address of the location with your colleague who is meeting you there

SYNTHESIS

 

After interviewing and recording 7 users I went ahead and broke down all the pain points per user to find common themes.

The common themes found:

  • Briefcase/Luggage icon was not clear for any of the users I interviewed
  • Check In wasn't clear
  • Users had a hard time finding the actual listing
  • Tapping and holding on the address of the listing did not work
  • Tapping on the picture in the reservation did not show other pictures only when inside the listing
  • A bit of confusion around the maps
  • Finding amenities wasn't initially clear

 

PART 2: DESIGN SUGGESTIONS

After realizing that users weren't able to accomplish most of the tasks I decided to start sketching out solutions to solve those problems they encountered. Based on the usability test it was clear that most problems encountered were simple to fix but overall left a frustrating experience.

PROTOTYPE UI SKETCHES:

 

PART 3: RETROSPECTIVE

Paying attention to details is extremely important and users are accustomed to common interactions on mobile and not providing them can be very detrimental to the overall experience. Having more time I would have continued testing the initial scenario and tasks to gather more data prior to designing my proposed solution. I would also would have loved to test other parts of the app besides upcoming reservations and see if any other usability issues surface. Finally would have conducted a final round of testing on the proposed design solution and compare results with the current app.