Square

Square Hero (4).png

 

While the data-informed process is invaluable and somewhat lengthy, feel free to skip ahead to the end Results.

Speculative Project

Timeline: 4 Weeks

Role: End to End Feature Designer ((UX Researcher, UX/UI Designer, UX Writer, Usability Tester)

The Background Problem

The daily production limits do not match the daily sales limits in the Square App. There is, essentially, not yet a way to create or view inventory by day. Companies that sell perishable items have trouble managing inventory with customer orders. Currently, this problem is often fixed manually by someone checking Square when an order is placed and seeing if inventories are accurate, manually making changes as necessary. During this lapse, the customer experience wavers and leads to a stressed business team scrambling to assist dissatisfied customers.
Square believes that tools should be accessible and empower their users to thrive. They strive to have “easy tools to empower and enrich people. No one should be left out because of expense or complex technology.”

The Solution

Adding a feature for daily par inventory coordinated with daily sales of preorders and Point of Sale orders is the first step to catch up to be the POS that customers can rely on. I am going to help restaurants manage inventory with daily sales for items like fresh baked perishable items. The food industry users of Square need more time to spend on their craft. I can free up their time by offering technology that will assist with inventory management on a daily basis, and especially in stressful times.

Discover

To have a data informed project, I created a Research Plan, from which I studied competitors as well as interviewed current target users. I wanted to see what is already available for users and how it compares to what these people are actually looking for in their Point of Sale.

Learning the Industry Landscape

In order to determine if Square is ahead of the game or behind the curve, I wanted to look at what other companies offer. I looked at companies in a detailed Competitive Analysis of those who compete directly or indirectly with Square on Point of Sale, Online Store or both.

Overall, all of the options require some tech skills, and are most likely to be set up and managed by one person or as few as possible.

Clover (Point of Sale)

Clover (Point of Sale)

  • Focuses on hardware device with restauranteurs as target.

  • Not cloud based, requires hardware

Shopify (Online Store)

Shopify (Online Store)

  • Attractive customer interface

  • Endless options to customize

  • Extra costs for POS, pickup

  • Advanced tech skills needed

Toast (Hybrid)

Toast (Hybrid)

  • Focuses on hardware device with restauranteurs as target user

  • Must integrate with Toast CC processing

Dead Ends

Users are required to manually change inventory or put the burden on the guests. This is shown in an example from the Tartine Bakery who uses Toast. The disclaimer is for customers to return to site after a certain time of day, leaving a huge dead end.

Text: “If the item you are looking for is unavailable, we may be sold out or have limited quantity left for walk-in guests. For future pre-orders, please check back after 6pm PST for full online-menu availability. Please do not exceed 12 of any single item, unless otherwise specified. For larger orders, please contact us by email. Thanks!”

Learning directly from potential users

When learning about competition, I was able to create informed Provisional Personas that guided me with who to seek out for target user interviews. In conducting this research, I wanted to know how a user currently manages the daily inventory and how it coordinates with their sales. I talked to 4 small food business owners to find out why they use the systems they do, and how they might vary from their ideal inventory management and compiled the transcripts into a document of Interview Findings. I created notes for each finding and clustered patterns together with an Empathy Map to form insights that determine user needs.

 

Challenges and Frustrations with Business Operations

  • So much tech interface to learn and master

  • Figuring out how to grow and change

  • So much to do and only 24 hours in a day

 

Current Inventory Management Systems

Owners rely on their staff for quality and consistency. They do not rely on technology to alleviate this constantly stressful aspect of operations.

Staff is expected to manually manage inventory

  • Experience, years of practice leads to doing inventory with intuition

  • Manually check and adjust as needed

  • Teams manage inventory in a collaborative way

  • Admins get creative with pars in order to alleviate pains, like producing “buffer” items that aren’t input into the system

 

Inventory Management Pains

The common thread was weak technology, where the support was not evident or currently possible.

pexels-yan-krukov-4458411.jpg

Under 10% of orders are affected by daily inventory pars and production.

Despite that low number, all owners felt great pain in this missing service.

 

These error orders occur on busy days, holidays and stressful weeks. This is when businesses need the most help, and yet, it is when it’s most prevalent that the tech doesn’t support those items that fall through the cracks. The business owners are overworked and are at risk of cracking with the errors caused during this increased pressure.

One even mentioned:

I cried in front of the customers.
— Interviewee
 
 

Why food service businesses use the Square brand

The POS is not used for every transaction (like wholesale, farmer’s market, or some preorders) due to speed & inefficiencies. But it is used often for various reasons:

  • Easy for Customer Interaction & online purchases

  • Business response to COVID

  • Growth, need to expand online sales

  • Inexpensive, easy to figure out

  • Already using the Square reader

Users are moving on.

Users are changing from what they have to other apps. After as little as 3 months of use, ¾ businesses interviewed are going to competitor apps. They are using Toast and Shopify, but no one seems amazed by the POS options available.

Define

Currently, there is not a feature that focuses on customizable inventory by item and day. This means that the has user no way to solve the problem, which can hurt business sales. By keeping small business users satisfied with daily use of the product, this feature can keep them from taking their business to a competitive service.

 

Project Goals

I focused the project design scope by comparing business and user goals. Then, I added in technical considerations to developmentally align the feature direction. I determined a diagram of Project Goals, and focused on the priority 3 goals to make sure that each addition was in line with them.

Project Goals.Image.jpg

Defining the User Type

Rather than a narrowed down User Persona, I opted to create User Types for this project. User Types were most appropriate because the user demographics don’t play into their frustrations, motivations and goals, but their habits do. I created Problem Statements based on User Needs and applied those needs to show that a variety of businesses will benefit from the solution. Though it is a small and isolated process, inventory management feels like a big stick in the craw of the user.

Bakery

POV: Owner needs efficient tools to help them minimize their time online since they want to spend their energy being creative.
Bakery.png

How might we offer this owner efficient tools to help them minimize their time online?

Weekend Pop-up

POV: Manager needs to feel comfortable to rely on tech in busy times because they currently use manual methods after tech had failed them.
Pop Up.png

How might we enable the manager to feel comfortable to rely on tech in busy times?

Cottage Pastry Shop

POV: Baker needs a way to manage online preorders because they rely on those preorders for a bulk of sales since the pandemic.

Baker.png

How might we help the baker with a way to manage online preorders?

What does the workflow look like?

I created a Site Map so that I could visualize the pages that are used with current inventory and sales, and those that might be affected by my additional feature. In order to cover the most common scenarios in which a potential workflow would be used, I created a Use Case Diagram. This shows how many different people at the same business will be able to interact with the product. I will not only be thinking about one flow, but how different people will interact with different screens for potential workflow loops. For example:

  • Primary workflow for an Admin to modify an item’s inventory status

  • Secondary/Tertiary workflows for Staff, who may need to see existing unfulfilled orders. Should to be clear, fast and minimal.

 
 

Ideate

After writing out a feature Road Map, I determined where in the current Work Flows I could disrupt the site in order to insert the workflow of customizable inventory. As I was sketching, I became familiar with desktop site and how it relates directly to the tablet Point of Sale system, and that some of the screens don’t exist on both devices.

As I was sketching, I was learning more about the site and how the Orders and Items pages were integral to my workflow. But I kept coming across a weird inconsistency that made my brow furrow.

What is “Online?” Why do “Items” and “Orders” show up in different ways in two parts of the site?

Understanding the Square Site

Detour! I wanted to figure out the difference between two sets of seemingly paired pages that exist within the site, labeled Items and Orders. I reviewed the site map with relevant pages, went to online support and forums, and couldn’t figure it out on my own. Knowing the difference is important for my education on the product. It’s also important to know where and how to best direct users to the new feature.

Square Site.jpg

After a long and winding path through Square Customer Service, I was able to clarify the following details for my design.

The findings:

  • Dashboard Item Icon (teal) is for POS items and the Online Item Library (blue) is for the “online store” (preorders for pick up), they relate to each other but are not equal

  • Locations are a common area of confusion and then it’s harder to auto sync items from POS to online, because they need to be logged in to the same “location”

Bringing findings to the project

Improve labels and categories in the online store to be more clear and distinct.

(This seems to be especially confusing and repetitive during the app set up. Because the problem I am trying to alleviate involves the POS and the online store, I need to make sure that these areas are in sync. It will be beneficial to highlight the relationship between the Item Library and Order page within the existing wireframes and flow.)

Set aside for later phases:

  • Difference in layout and UI between desktop site and tablet app

  • Shane mentioned confusion from users in reference to Square terminology. They will likely benefit from straightforward informational icons or help categories and questions that relate directly to the site technicalities.

  • Onboarding video or click-through tutorial for new users shared when they first log in to site

  • Common FAQ and definitions of Square titles and icons

Style & High Fidelity

Before creating Hi Fidelity pages, I reviewed the Square site and composed a Style Tile with visuals and written brand guidelines to inform my design and fill in the blanks that I needed for the project. For the feature, I added a bit of iconography to signify Inventory. I implemented a simple, thematic clipboard that was successful during a quick A/B test.

Desktop Feature Highlights

I created Hi Fidelity Wireframes to take the user down the workflow path.

On the home page, I added a splash ad feature to make sure to attract users to the inventory feature along with a guide on where to begin. In sketching, I iterated to see if I could improve the layout with hierarchy, plethora of CTAs and color coding, but determined to leave the current Square homepage as is. The layout is complex but functional, and the style does not effect my primary workflow.

Landing Page.jpg
 

I added small tweaks to make the view of the Item Library more straightforward to inspire the user to quickly see what they need.

Hi Fidelity 2.jpg
 

The most prominent component that I added is on the page where the user can Edit an Item. I’ve added the table for easy custom inventory management.

 

Tablet POS Focus

The tablet focus of the Point of Sale is aimed at the daily service staff. They are often accountable for inventory, so to have easy access right on the POS will alleviate the supervisor or owner from all responsibility and be a tool to increase staff accountability.

With this access, the user can look for items that are only important to the station that they work and see what’s on order for the future so that they can help management to double check that they have enough product to complete the stock.

 
 

Testing

Because I created a prototype for two devices, I created a two part Usability Test Plan. ran two separate tests. I was able to get fast and accurate results by testing the prototype on real users in order to evaluate the usability of the design.

After testing, I clustered patterns with an Affinity Map. It was easy to see that overall, the desktop test was much more successful because I targeted my User Types created earlier in the project.

Test #1: Desktop prototype

  • Testers: 4 people in supervisory roles in their food service business, unmoderated Maze test.

  • Results: Very successful, minor tweaks needed. Task 3 had two instances of indirect success.

  • In fact, two users mentioned that they found working with the new options “fun.” I have NEVER before heard someone refer to a POS as fun!

Test Highlights.jpg
 

Test #2: Tablet prototype

  • Testers: 4 shift service staff, to view what’s on order quickly and easily, moderated with the Figma prototype

  • Results: Consistent low success including confusion and slow rates of indirect success.

High Level Issues

This area of the feature is not a success. This feature was created out of the scope of the project and not for primary target users. This prototype needs strong revisions to allow users to complete tasks with understanding. Users need less information and more simplicity. There is most likely value to managers if shift workers were able to be self-reliant in accountability for inventory. However, based on the test results, this is better left for a future venture.

The following quotes are pulled from the Tablet test and show how far off the prototype usability was from the tested user mental model.

Square Testing Quotes.jpg
 

Priority Revisions

After reviewing high level issues, there were obvious revisions to focus on as well as set aside for the scope of the project.

Low Effort, High Impact

I can quickly build out the “Custom” option for the desktop version of Edit Item Inventory Table. This will determine if it is actually necessary, since 1/4 users pointed it out as confusing during testing. Rather than sticking with the design pattern for the sake of the pattern, it is important to learn more about the functionality of this area and if it is even necessary.

High Effort, Low Impact

To continue with the tablet version at this point will be a thankless task that will require high effort with low impact to focus energy on further iterations of the tablet Point of Sale view of inventory by item. The learning curve for staff who doesn’t yet interact with the POS is too steep to be effective.

Medium Effort, Medium Impact

I am taking the design from the tablet and will iterate on these screens in the desktop view for the administrator.

 
Square.Action Priority Matrix (1).jpg
 
 

The project of revising the tablet for desktop keeps the responsibility of orders on the target user, the administrator. It will allow for easy viewing and sorting. Furthermore, it will aid in product inventory and ordering. I added a print out that the admin can pass along to secondary users as a gateway into the feature.

 

Results

Having designed the feature to help administrators of small food service businesses gives hope that the technology can alleviate their frustrations and they can use it to support their growth. The additions integrate seamlessly into the current site.

Takeaways

  • Dashboard In addition to learning the business and needs of Square and its users, I found great value in taking time to learn the nuances of the dashboard and how the site is set up. This was crucial to knowing what areas to leave alone and what should be tweaked.

  • Constraints I found that the constraints given with pre-existing design helped guide me as I utilized those constraints to inform how I planned and added new features into the site.

  • Stay within the Scope When I learned the differences between the tablet and the desktop version of Square, I went a bit off course because I focused on the accessibility of the feature for different devices, rather than utilizing the feature for the users I’d targeted. This detour was highlighted in the failure of the tablet usability test. I was able to come back into the scope of the project with my executed revisions.

View the Prototype

The Figma prototype shared here is for the desktop administrator. The user can navigate from the homepage to view and edit items (Chocolate Croissants and Crabcake salad). The user can also view order overviews and orders by item for the day and future dates (Crabcake salad).

What’s Next

My next steps will be to implement the priority revisions. I can test the desktop addition of viewing Orders by Item and audit the “custom” option for editing an item’s inventory properties. Then, I can see how they work with users.

I am interested to go further into the project priorities and see what secondary users may need and how they will interact with the feature down the line. As the new feature is implemented and understood, I can readdress the Point of Sale view and how to better integrate shift staff into the accountability process.

Previous
Previous

-

Next
Next

Outdated Empower Mobile App