Receive Stock

OVERVIEW

I spent the summer of 2018 at Square as a product design intern. During the time of my internship, my team was working on revamping the Square for Retail app to launch in January 2019. In the redesign project, I got an opportunity to take part in designing a Receive Stock feature which is the top 4 most used features from the Square merchants

ROLES

Ideation
Prototyping & Testing
User Interview
Visual Design

DURATION

Jun -> Aug 2018

Background

Square for Retail

Square for Retail covers 17%+ of entire Square users. The main framework is to provide the best solution for merchants to accommodate offline/online customers within a few clicks of a button

Redesign Project

Redesign project on revamping the whole product was going on when I joined in the Summer of 2018, and I had the opportunity to take part in this project

Old design of Square for Retail
New design of Square for Retail

My Task

My task was to redesign a feature called “Receiving Stock” by reflecting the current redesign direction and utilizing the left-nav component

Old design of Square for Retail
Left-Navigation Component from the redesign direction
process

4 Phases of Design Process

1

Go over current IA (Information Architecture)

2

Design critique of current state

3

Analyze user behavior data from Looker

4

Rapid wireframe sketching/prototyping and user testing to validate

analyzing ia

Receive, Review, and Confirm

The whole IA is divided into two sections: 1) Receiving and counting the number of received stocks 2) Reviewing the count and stock information before confirming them into the inventory

analyzing current design

Small real-estate for the core functionality

Such a small real-estate for reviewing stocks
Due to the large calculator and search input real-estate, merchants only had less than 30% of screen real-estate to analyze the stocks they were receiving
Lacking a product Image to help merchants to quickly skim through
Since this page was such a text heavy screen, having an image to work as a visual separator would assist merchants' need to skim through their receiving stocks quickly
Inefficiency of
a vertical layout
Since the scanned stocks are already in a vertical layout, having a vertical design for the stock list and calculator was confusing. Recreating the stock list and calculator in a horizontal format will help divide the screen according to the specific features
Limitation of seeing
two items is frustrating
Having a vertical layout within each stock details was creating inefficiency in utilizing the limited vertical space
Two confronting CTAs
It was confusing to have two separate “Add Vendor” CTAs. It made sense only to place it within the received item info because there weren’t many times where all the new receiving stocks were from a one single vendor
analyzing user behavior

User Research

Analyzed the user behaviors within the existing Receive Stock feature to have a deeper understanding of how merchants used this feature. The primary outcome was:

1) Merchants preferred scanning over searching

2) Majority of merchants were only adding one type of items per session, but there were several other number counts as well

3) Merchants added more than one vendor per session

Sketch and user interview

Sketch and Ask

After iterating various sketches, I had a chance to ask merchants, who were already using Square for Retail for Square, about their response on this redesigned layout

finalized screens

Final Design for the
Receiving Stock feature

The finished design was shipped with total revamp of the app update on Spring of 2019

New screen design

Dividing up via functionality

The first flow of the feature have been divided up according to its functionalities

Finally, merchants get to see more than two items even with the open calculator
Prior, merchants only had 30% of screen real-estate to analyze the stocks

Now they can freely see up to five items without any scroll interaction
Editing item and selecting next items is much accessible than ever
Merchants can now quickly edit the items details and counts via the uniquely designed number-pad to suit their needs
Review and mass select items to edit vendors or unit cost
After confirming the stock count, merchants can focus reviewing the vendor and unit cost details within the receiving items

After done reviewing, confirm receiving stocks to complete the task
In the future, merchants will be able to save their session when they’re interrupted
It was typical that merchants get interrupted when they’re inputting the received stocks. In the future, merchants will be able to save their session and resume later when they’re less busy
As of now, this feature is built and promoted as one of Square for Retail's main features
This feature was built and ship in the Spring of 2019 with the renewal of Square for Retail application

Thanks for taking your time to check out my project.

<- Back to Home