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.
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.