About The Project

A 2-week design sprint to redesign and introduce a new feature on an e-commerce site to solve a business problem. In short Increasing Clarity In Etsy.

Platform - Mobile Web And Website

Design Process

Meet My Team

What is Etsy and its History?

• "Etsy, Inc. is an American e-commerce company focused on handmade or vintage items and craft supplies. These items fall under a wide range of categories, including jewelry, bags, clothing, home décor and furniture, toys, art, as well as craft supplies and tools. Items described as vintage must be at least 20 years old."
  "Etsy is the global marketplace for unique and creative goods. It’s home to a universe of special, extraordinary items, from unique handcrafted pieces to vintage treasures."

• Etsy was founded in 2005 by a group of friends including Robert Kalin, an amateur furniture maker who was looking for a better way to sell his goods online. 

01. EMPATHIZE

At this very starting phase, we put ourselves into users’ shoes to understand their likes & dislikes, context, needs, pain points, etc in order to gain an empathetic understanding of the problem we are trying to solve.

Quantitative Survey

This is the process of collecting and analyzing numerical data. In order to further understand our users and be more empathetic to the solutions we are trying to build, we decided to send online survey forms and questionnaires to an already pre-screened target base. Exactly 19 people responded to our survey.

A user interview is a UX research method during which a researcher asks one user questions about a topic of interest (e.g., use of a system, behaviours and habits) with the goal of learning about that topic. We had a special one-on-one session with users to retrieve information about WHAT they think and WHY they think so through the use of the open-ended question. In the end, we were able to further understand their challenges and gather more pain points.

Competitive Analysis

Competitive Analysis is the process of identifying competitors in your industry and carrying out research on them to gather insights into their products and users. We did carry out a competitive analysis from the data gathered from user interviews to understand user pain points and preferences.

Competitors

02. DEFINE

Moving on to our next design process which is Define. This phase was where we started analyzing and synthesizing the data we gathered from the empathy stage which enabled us to be able to define the problem statement in a human-centred manner.

USER TYPE FINDINGS

User Persona

Problem Statement And Problem Space

Etsy users need a way to browse products with increased clarity because users don’t like being confused about their options.

Empathy Map

We used empathy maps to understand and prioritize user needs. It helped us get closer to what users really thought and felt about our app and that helped us in decision-making and highlighting any gaps in user data.

Card Sorted With Labelling

03. IDEATE

After we empathized with the users in the empathy stage, we moved on to analyze and synthesize our observations in the define stage, where we arrived at a human-centred problem statement. At this phase, the team members had a brainstorming session, and we ideated and came up with preferred solutions to the problem statement we identified in the define stage.

Brainstorming

The brainstorming session allowed us to think freely and we came up with as many solutions as possible. We assigned a task to each team member to come up with a solution to a particular flow. After that, we compared, contrasted and settled for the best solution, which was really effective in getting us the best possible solution and speeding up the process.

User Finding

How Might we -

1. Help users navigate categories more easily?

2. Help users filter their search results by shop location?

3. Help users filter their search results by shop location?

04. PROTOTYPE

This is an experimental phase where we jumped on our design tools to come up with a version of the products that solve the problem we identified in the defined stage. We drafted our style guide to make our design elements consistent. We chose Poppins as our typeface due to its clean, minimalistic aesthetic and clear appearance. Our brand colour is orange due to its warmness, attention-grabbing and energizing feel.

Sketches -> wireframes

A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added. Before delving into making high fidelity prototype, we made the design wireframe to put down our already brainstormed ideas.

Shop Location

Hamburger Menu

More Apparent Delete Button

HiFi Prototype

High-fidelity prototypes are designs that usually allow realistic user interactions. High-fidelity prototypes take you as close as possible to a true representation of what the user interface will look like. On these hifi screens, they were some minor changes that were made differently from the wireframe to better make the design more useful and seamless for the final user. Remember, Design is an iterative process and not a linear process.

Final Designs

PROTOTYPE