Handcrafting Handcrafted Gifts

Timeline

24 hours (Oct 2024)

Tools

Figma

Type

Hi-Fidelity Mockup

Project Overview

Role/Responsibilities

Lead UX Designer

Approach

Explore, Define, Ideate, Prototype

Despite sophisticated search algorithms and recommendation engines, Etsy consumers don’t always find products that truly match their specific needs, especially if they are shopping for someone else.

Problem Space

Team

3 Data Scientists,
2 Software Engineers,
and me

We were awarded Best Team Collaboration for an enhanced exploratory search behavior and UI redesign in Etsy’s Gift Mode.

Outcome

Etsy

a global online marketplace, where people come together to make, sell, buy, and collect unique items.

Client

How might we inspire and encourage a more exploratory searching behavior among Etsy’s new and existing users?

How Might We

Understanding the problem space

(30-40 sec.)

Research

Given the timeframe, it was crucial to properly scope our problem space as early in the process as possible. Etsy has already begun increasing search visibility for sellers – we wanted to expand on this initiative to reach buyers.

Etsy Current State

We prioritized data that would be quick to find, analyze, and summarize while propelling our research forward. Our data scientists found direct correlations of how filters impact buyers’ purchase journeys, inspiring us to focus on enhancing exploratory search in Etsy’s Gift Mode.

Etsy Demographics

Key Findings

As our data scientists continued to understand and develop exploratory search models to be implemented in our final solution, three main insights were revealed.

2

Consumers refine their searches progressively.

3

Users tend to refine their queries by adding more terms.

Main insights

(30-40 sec.)

1

Keyword-based searches often fail to capture user intent.

Meet Sarah, 32

Using Etsy’s demographic data, our user was likely a middle-aged woman who strives for personal and unique gifts. She finds herself overwhelmed and uninspired on large online marketplaces but loves the idea of purchasing from small/independent businesses.

based in Austin, TX

Find a personalized and unique gift
Discover unique items
Meaningful and affordable gifts

Pain Points

Overwhelmed by variety of items
Shipping times and reliability
Not enough refine/sort functionalities

Behaviors

Goals

Starts broad, then narrows her search using filters and categories.
Browses based on specific interests, seasons, or occasion.
Uses Etsy’s recommended products to guide her browsing and spark ideas.

Persona

Designing experience

(30-40 sec.)

Task Flow

Inspired by my persona’s goals and journey map, I designed an extensive task flow that targeted moments where renters often resort to external applications (such as messages, emails, files, notes, and calendars). These existing user decisions were the building blocks to the final design intervention.

Exploratory

(30-40 sec.)

Solution

(30-40 sec.)

Sketching

I began by sketching screens for Onboarding, Activity, Listings, Document Checklist, and Household (dashboard). They were inspired by the most popular real estate platforms and common applications for collaboration/messaging.

Exploratory sketches

Exploratory Sketch: Activity

Incorporating ways to display messages and roommate activity.

Exploratory Sketch: Onboarding

Establishing user preferences that will be used to define best apartment matches and overall household preferences

Exploratory Sketch: Document Checklist

Experimenting with visual layout of documents and upload process.

Exploratory Sketch: Household

Playing with the idea of widgets to design a functional and home-y dashboard

Exploratory Sketch: Listings

Using popular real estate mobile applications as inspiration to maintain consistency for users

After identifying the strongest designs from each exploratory sketch, I developed one solution sketch for each screen.

Solution sketches

Solution Sketch: Document Checklist

Mainly inspired by Headspace's content layout, the document checklist is a place where all necessary materials are listed. Users can filter, sort, and upload all in one place.

Solution Sketch: Onboarding

Final Onboarding screen. Includes a progress bar and options to skip.

Solution Sketch: Listing

Browsing listings (left) remains very similar to what users are used to. Main differences include household preference indicators, and more intuitive ways to interact with a listing. Listing details (right) combine best features from existing platforms and other information users reported as important.

Solution Sketch: Activity

The final activity screen composes of roommate activity, and separate buttons for messages and active applications. This screen changed significantly after user testing and iterations.

Solution Sketch: Dashboard

This household dashboard is a combination of widgets and a listing view that encompasses all necessary information roommates may need.

Using my task flow, solution sketches, and UI moodboard, I developed an initial user flow in mid-fidelity wireframes. These are the screens I prototyped and used for my first round of user testing.

Visualizing a solution

(30-40 sec.)

Wireframes

User Testing

Test Output 1

Prioritization Matrix

Goals

Identify usability challenges
Assess opportunities for iteration
Test product effectiveness

Plan

Task 1: Onboarding

Task 2: View and select listing

Task 3: Request tour

Task 4: Go on tour and take notes

Task 5: Wait on roommate approval

Task 6: Request an application and apply

5: Testing

Wireframe Iterations

Homescreen

Before

Before

After

Users faced challenges…

understanding where contact came from

Iterations:

clarified that roommates are found in contacts
added icon to establish “group chat” feeling

After

6: Iterate

Browse

Before

Users faced challenges…

understanding what percentages meant

Iterations:

added tooltip overlay to clarify percentages

Users faced challenges…

understanding what percentages meant

Iterations:

added tooltip overlay to clarify percentages

After

Messages

Before

After

Users faced challenges…

understanding what percentages meant

Iterations:

added tooltip overlay to clarify percentages

Voting

User Testing

Test Output 2

Prioritization Matrix 2

Goals

Assess iterations
Task flow effectiveness
Final major iterations

Tasks

Task 1: Onboarding

Task 2: View and select listing

Task 3: Request tour

Task 4: Go on tour and take notes

Task 5: Wait on roommate approval

Task 6: Request an application and apply

7: Testing (again)

Task Flow Iteration

After users request a viewing, they are prompted to schedule a time through directly messaging the agent.

During this process, the Raven Scheduling Assistant recommends using the Document Checklist to prepare for the tour.

Take notes during viewing

6: Iterate

Take notes during viewing

Request application

During the viewing, Raven allows users to take notes directly in the listing. Users can upload images and text, and share with the rest of their Household.

Browse

Because of time, I removed Onboarding as the start of the task flow. Now users start by finding a listing and requesting a tour.

I revised the nav bar to have Household in the center, and messages as its own page.

I added a search bar and sort option, and cleaned up text/icon hierarchy.

Schedule/prepare for viewing

Visual Identity

Wordmark

Color Injection

I went through 3-4 different color injections, using different color palettes and referencing a variety of UI inspiration.
Here is an example of how the color injections varied greatly in the Browse screen.
It was difficult striking a balance with the blue without making it too “Facebook-y.”

Here is an example of how my original color palette was too dull and soft, and didn’t channel the excitement of my moodboard.

Naming

Raven

Inspired by “haven”

Ravens symbolize prophecy, wisdom, insight

Personifies the app / service

Symbolism of building a nest when finding a home

Moodboard