my Role
Team
Duration
Tools
UX Researcher, Product Designer
1 Product Designer
4 UX Researchers
4 UX Researchers
March 2023 -
April 2023
April 2023
Figma
Zoom
Google suite
Zoom
Google suite
my Role
Team
Duration
Tools
UX Researcher, Product Designer
1 Product Designer
4 UX Researchers
4 UX Researchers
March 2023 -
April 2023
April 2023
Figma
Zoom
Google suite
Zoom
Google suite
Context
Square Online is an e-commerce business management tool and website builder for small-to-medium-sized businesses. Its fulfillment configuration dashboard enables sellers to manage pickup and delivery options. Our team worked as UX consultants with the Product Lead of Square Fulfillment to address usability issues.
Objective
The objective was to identify and address the usability issues for the fulfillment configuration setup, ensuring sellers can easily navigate and customize their pickup and and delivery settings without confusion or over-reliance on customer support.
problem
During the pandemic, Square Online grew exponentially as an increasing number of brick-and-mortar stores transitioned into online businesses.
To meet the surging demand, the platform rapidly introduced new features. However, this rapid expansion created significant usability challenges. Sellers, particularly first-time e-commerce users, struggled to navigate and configure delivery and pickup settings for their businesses.
This complexity resulted in a surge of customer support queries and increased setup times.
So, how does square online work?
Talking to these sellers, two main pain points were identified
1
Overwhelming Delivery and Pickup Setup
The interface’s text-heavy nature and numerous configuration options overwhelmed users, increasing the likelihood of errors.
2
Language and Customer View Confusion
Users found it difficult to understand some of the language and how their settings would appear to customers, leading to uncertainty and potential errors.
1
Overwhelming Delivery and Pickup Setup
The interface’s text-heavy nature and numerous configuration options overwhelmed users, increasing the likelihood of errors.
2
Language and Customer View Confusion
Users found it difficult to interpret some of the language and how their settings would appear to customers, leading to uncertainty and potential errors.
And so the design question arises
How might we make configuring pick-up and delivery settings simpler and more intuitive for users?
Solution overview
Disjointed long sections that require a lot of scrolling
Before
Collapsible accordions with similar categories grouped together, a detailed sidebar with anchor points, sticky sandboxes to see the results of the settings change.
After
So, how did I understand the above problems to design an effective solution?
Research process
To understand the problems users face, we used a mixed-methods research approach:
User
Testing
User testing sessions were conducted to identify the issues that users face while setting up their pick-up and delivery options.
The user tasks focused on the following research questions, that were determined based on talking to the Square staff and understanding the recurring issues coming up in support tickets.
- Can users locate and set fulfillment options without external resources and support?
- What are the main areas of confusion and slow down?
- Do users understand the language and the effcets of the change in settings?
Here are some direct user quotes regarding their experiences with the configuration settings
Food seller & restaurant owner
Experienced user
"It's great to have so many options, but I need something quicker for when I’m in a rush"
"I cannot understand what some of the questions are asking me"
Snacks & beverage seller
New user
"My god, there are so many options"
"The website has a lot of text, and it’s hard to navigate, especially for someone like me who just started"
Data
analysis
Post interviews and testing, qualitative and quantitative data was analyzed to pinpoint the user issues and ideate solutions accordingly.
Qualitative data
- User feedback during and after each task, highlighting pain points, moments of hesitation, and general sentiments.
- Behavioral observations, such as confusion when encountering unclear labels or workflows.
- Recurring themes across user groups, such as frustration with redundant steps or unclear error messages.
An example image of the qualitative and quantitative data collected
Quantitative data
- Task success rate:
- Task completion time: Average time taken for each completed task.
- Error rate: Changing the incorrect setting or choosing incorrect options.
- Abandonment rate: Not being able to find/change a setting.
- Satisfaction and difficulty ratings: User-rated scores for each task.
The data analysis revealed three main issues to address
1
Overwhelming number of options and information
2
Lack of user control and feedback
3
Confusing workflow and language
This is some text inside of a div block.
How
Why
Minimizing Cognitive Overload
Reduce clutter by grouping settings and progressively revealing options.
Helps users focus on fewer elements at a time, reducing stress and confusion.
Enhancing User Control
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
solution
Based on the research findings and ideation, I designed the following solutions, focusing on three key aspects.
1. Minimizing cognitive overload
How:
Reduce clutter by grouping settings and progressively revealing options.
Why:
This helps users focus on fewer elements at a time, reducing stress and confusion.
Grouping related settings under collapsible sections
Before: Disjointed long sections that require a lot of scrolling
After: Collapsible accordions with similar categories grouped together
Sequential & progressive reveal to guide users
Settings unfold sequentially, showing only what's necessary based on prior choices.
2. Enhancing user control
How:
Adding features like sticky sandboxes for real-time feedback and search bars & anchor links for quicker access.
Why:
Gives users more confidence and efficiency in navigating and adjusting settings.
Sticky side navigation bar with anchors to each section
Before: A static sidebar that did not give enough information about the state/location on the page.
After: Added a search bar to efficiently locate the settings users are looking for + sidebar has anchor links to quickly navigate to a section
Sticky sandboxes
Made the sandboxes for fees and timings sticky so they are always visible and reflect the overall results of the configuration. Previously these were embedded within the settings and users had to keep scrolling up and down to refer to them.
3. Streamlining the workflow
How:
Reorganized some of the sections of the workflow to make it more intuitive and clarified language to reduce misinterpretation.
Why:
Gives users more confidence and efficiency in navigating and adjusting settings.
Reorganizing the sections
Before: Couriers and delivery (fees) are in two different sections even though the fee options are directly influenced & altered by the courier settings.
After: Merged the courier and fees sections, with fee settings appearing sequentially once a user adjusts the relevant courier settings.
Before: Similarly, timing and fulfillment hours are in separate sections. Fulfillment appears after timing, despite timing settings depending on fulfillment hours.
After: Merged the timing and fulfillment sections, placing fulfillment hours first to ensure users set them before configuring order timings.
Clarifying the language
Made the sandboxes for fees and timings sticky so they are always visible and refelct the overall results of the configuration. Previously these were embedded within the settings and users had to keep scrolling up and down to refer to them.
Before
After
If a customer places an order during your fulfillment hours, what is the soonest that the order can be delivered?
What is the earliest delivery time customers will see?
Do you start preparing orders as soon as they are received?
When do you start preparing orders?
How much time do you need to prepare an order for pickup or delivery?
How long does it take to prepare an order for pickup or delivery?
Do you want to let customers schedule delivery orders for future days?
Can customers schedule orders in advance?
outcomes
The success metrics were straightforward and user-focused, evaluated through quick user feedback sessions, designed to accommodate time and resource constraints.
Overwhelming
Simplified
Confusing
Streamlined
Lack of control
Instant feedback
Takeaways
Working on this project was an incredible learning experience, marking my first time designing for a SaaS and POS system. This project deepened my understanding of the nuances of e-commerce platforms and how creating seamless experiences for merchants directly impacts customer experiences.
