Product Creation

Redesign

Designing a better way for sellers to add products to their online store.

ROLE
Senior Product Designer
Research, Design, Prototyping, Visual Design, QA

DURATION
Sep 2021 - Dec 2021

THE DREAM TEAM
Product Manager - EdmundArmstrong
Engineers - Charlie Clark, Karson Daecher, Sam Kong

Overview

 

Problem.

We’ve been getting negative feedback from our users about our product creation form being long, not scannable, and confusing.

Process.

We’ve gathered all feedback, analyzed it to understand core pain points, started concepting, testing and redesigning, one build phase at a time.

Status.

We’re launching our final phase of the new and improved experience end of January 2022.

Current Experience


 

27% of our users are still using our old experience.

Our current experience was launched only a year ago but haven’t performed vert well so we started collecting feedback from users.

 

Old experience

Current Experience

 
 

Collecting User Feedback
and Identifying Pain Points


 

Analyzing user feedback helped us narrow it down to main pain points:

  • Poorly sectioned, not scannable, no clear hierarchy. 

  • Fields doesn’t look editable.

  • Small typeface.

  • Design layout is disproportional and requires deep scrolling on desktop.

 
 

Coming out with strong design guidelines to follow:

  • Logical groupings

  • Easy Navigation

  • Clear, editable fields

  • Wider and scalable content area

 

Defining Success


 

Our Matrix to follow was:

  • Decrease old experience usage from 27% (current) to 20%. 

  • Improve user feedback rating (existing rating of 3.09).

 
 

Start Concepting


 

To address our long scroll pain point, we explored easier and more intuitive navigation like anchor links, tabs and side bar editing.

Adding pros and cons for each concept to review with the team.

 

Card Sorting Exercise


 

To address our unclear sections, we performed research to form new logical groups.

We asked 40 participants to form groups they find logical, using our inputs. We used usertesting.com and a tool named Optimal Sort to perform the test.

 

Design and Build in Phases


 

Dividing main chunks of the work into 4 phases allowed us to design , iterate and build simultaneously and effectively.

 
 
  1. Adding a new way to navigate

Anchor links resolved our long scroll problem and organized our form in a better way.

 

2. Expending our content area

This came to solve our narrow content area that was a pain point for our users.

Phase 2 also included updating our grid and top bar with our latest design system. This was a good foundations for the next upcoming updates.

 
 

3. Consolidating all actions in one place

In the current experience, actions were at the bottom of the form, requiring users to scroll all the way to the bottom to duplicate or delete the product.

 
 

4. Implementing new sections

Based on the card sorting exercise results, we regrouped all inputs under new logical sections.

 
 

5. Redesigning each section

Each section got a deep dive, while we make sure each section is clear, fully explained, aligned with our design system, scannable and easily editable.

This phase was designed and is plan to go live by Jan 2022.

 
 

Research and feedback analysis


 

Putting together a survey to test our new design with both Squarespace power users and with general population.

We asked 40 participants to answer a survey that included a Figma prototype and analyzed the results by placing colored stickies on the prototype to form a heat map.

Based on the feedback we performed further design iterations.

 

Survey

Categorizing feedback from the survey

 

Final Design


 
 
 

 

Our design updates have been released one phase at a time from Sep 2021 till January 2022. The feedback we’ve been getting from our users is extremely positive.