Focal systems

I joined Focal shortly after they graduated from Y-Combinator, as the 8th employee and sole designer. As such, I was given the responsibility of thoroughly understanding our users, informing our strategic direction with the research, working with our team to execute the visions and products, and also spending time with our clients and users onsite.

During my time at Focal, we pivoted the original product, found product-market-fit with a different client base, raised a Series A, moved offices (and painted decals on walls!), launched and piloted our flagship product across several continents, and thoroughly researched and conducted pilots for innovative methods of automated checkout.

I was part of the Focal team for just under 3 years, traveled to many onsite locations, and learned to not only build products, but also built a lot of grit. Below, you'll see an overview of 4 major categories of our work during my time at Focal.

Client monetization suite


In this project, I worked closely with our sales and customer success teams to determine the top pieces of data for decision making, and created key metrics to provide our retail partners. We also experimented with which modalities would convey the information best to our clients.
satisfaction overall from clients using the suite of tools at the time I left.
year refining the suite of tools and communication mediums.

The final suite

angela liu portfolio - client monetization suiteangela liu portfolio - client monetization suiteangela liu portfolio - client monetization suiteangela liu portfolio - client monetization suite
Business intelligence admin dashboard
Stocker action tool
Real time in-store analytics
Inventory text updates

Eliminating manual scanning with computer vision

Current state
Currently retailers rely on manual labor to scan out-of-stocks, which takes 2-3 hours a day, as well as chronically inaccurate computer generated ordering systems to order products and track inventory, which cause a snowball of problems down the chain. The system is so broken that routinely the store needs to wipe their inventory system, and manually count each SKU to reset the data.
With Focal Systems
With Focal’s help, there could be continuous, real time, Out-of-Stock detection. Focal Systems deploys camera modules into brick and mortar retail stores. These modules are attached to shelves and take photos at custom intervals of the opposing shelf. From the images, Focal runs proprietary computer vision based deep learning models to detect out-of-stocks. 6 of the world’s largest retailers are currently using our system across 3 continents.

Making the data actionable

I spent a few weeks diving deep into store processes, shadowing store managers and staff, conducting interviews, and observing their day-to-day.

That's when we had the "ah-hah!" moment. We realized that our solution could not be a one-size-fits-all solution. Each of our stakeholder groups had different goals, needs, and work habits that would change how they needed to consume the data.

3 Stakeholder groups, 3 sets of user needs

User group
Day-to-day responsibilities
Best method of communication
Corporate teams
Make strategic planning decisions on inventory selection, product placement, delivery schedules, and more.
In an office, reviewing reports, and in meetings.
Web based application or email.
Store managers
Ensure store is in best condition from stocked shelves to short checkout lines to clean floors.
On the store floor stocking and helping customers. Occasionally in the office taking meetings or viewing email.
Email for anything non-urgent, and text message for immediate attention.
Store staff
Keep shelves as fully stocked as possible.
Constantly moving between the backroom and the floor restocking products and helping customers.
Text message

Determining how our data can help answer their most burning questions

Understanding incentives
To understand what the key metrics were, I worked with the sales teams to understand each user group’s motivations and responsibilities. The data should provide the tools necessary to make short term and long term business decisions.

I took these insights and organized them under each goal category to provide a structure for the BI tool.
Turning key metrics, into dashboard components
From the metrics, I worked with our Data Scientist and QA Engineer to create a Master Component Library for each data piece.
Image blurred to censor sensitive content
Building the customer journey
There is never a dull moment in a store stocker’s day. This means that our tool needed to be very simple and easy to use.

Ideate, iterate, test, update

Wireframing with unknowns
We needed to integrate with client systems to pull in relevant data so associates can take action immediately. However, each client is strict about sharing certain information so we wouldn’t always get what we needed. This meant we had to brainstorm for many edge cases.
Site layout and information architecture
Once we knew what components and data points to display, We needed to carefully consider how those components would be grouped, how users would move from tab to tab, would they be able to answer their questions without tabbing too much, and how do we progressively disclose information to support users diving deeper into the data?
Hifi mockups and usability testing
Once we had tested a few ideas, we moved forward to hi-fi mockups. I created prototypes that our users could play around with, and for some features attempt to use while walking through the store.

Continuously rapid prototyping and experimenting

Flexing old Python skills
Based on these new communication methods, I put my Python hat on and wrote the scripts to quickly prototype the following systems.
Text message updates to store staff with progress on out-of-stocks worked and remaining throughout the day.
Text message updates to store staff with progress on out-of-stocks worked and remaining throughout the day.
Email progress updates to store managers with lost sales information to showcase ROI.
A leaderboard of associate progress to incentivize friendly competition.

Current state of the suite

After reviewing the data and collecting feedback from these experiments, we narrowed down all the prototypes to the 4 worth continuing.
angela liu portfolio - client monetization suiteangela liu portfolio - client monetization suiteangela liu portfolio - client monetization suiteangela liu portfolio - client monetization suite
Business intelligence admin dashboard
Stocker action tool
Real time in-store analytics
Inventory text updates

A cart-based automated checkout system


This project was a fully-fledged research effort to understand what it would take to design a newer, faster, checkout process. Narrowed down core interaction method ideas from 6 to 1 and reduced user errors in scanning products. We were simultaneously developing the technology and hardware, but from my research we understood that deploying a cart-based solution that was not fully baked, would not set us up for success. We decided to pivot the mechanism to use our well-tested mounted camera system, on checkout belts.
less time per shopping trip. Those were our estimated time savings from the final prototype.
core interactions (cart-based, scanning, computer vision, kiosk, etc) reduced to 1 final solution.
angela liu portfolio - automated checkout

Checkout needs a fresh look

While Amazon Go is the only deployed breakthrough attempt at cashier-less checkout, there is over a decade of research and experiments in this area. Customers are on average unsatisfied if the checkout line is longer than 3 minutes. Self checkout machines and their relentless “Unrecognized item in bagging area” drives people crazy.

For the past decade retailers big and small have tried mobile checkout applications, handheld scanners, self checkout machines, barcode scanning conveyor belts, smart shelf tags, and much more. However these solutions increase theft, have high hardware costs, have frustrating user experiences, or create inaccurate product detections.

Gathering data, and understanding the human factors

After extensive literature review on existing solutions, I began the fun stuff. I headed out to the field and spent a week visiting retail establishments of varying sizes and demographics.

I conducted time and motion studies, interviews, and tested systems myself. Though the numbers gathered may be found in existing literature, understanding the human experiences surrounding the numbers is what helped me create a new system.

Adding something new to mobile cart interfaces

I studied e-commerce and mobile cart interfaces to understand existing components and read customer reviews for areas needing improvement. I tested a few ideas to enhance customers’ shopping trip without being a nuisance.
1. Giving the shopper an anonymous identity to engage them through the trip

angela liu portfolio - automated checkout
2. Displaying a fun fact about random items in their cart.
angela liu portfolio - automated checkout
3. Categorizing their basket into product types to mimic their mental shopping list.
angela liu portfolio - automated checkout
Other ideas that got ruled out due to technical constraints:
  • Adding notifications of when other shoppers also bought an item in their cart
  • Seeing a heatmap of where all the shoppers were in the store
  • Searching for any product in the store
  • Checking if a product is in stock or out of stock

Creating an effortless scanning experience

V1: Barcode scanning, V2: Computer vision
The way a user would interact with V1 is by scanning the barcode with the tablet. This interaction needs to be exceptionally intuitive, otherwise it will not be a better experience than having a cashier scan everything.

The desired final solution is to “just throw it in the cart”, however there must be intermediary products before that. V1 is where I focused my testing.
The many external factors to design for
There are many factors to take into consideration for the hardware design of the tablet and barcode scanner.
  1. Where/how should the scanner be housed so it is most ergonomic for most product sizes, shapes, and weights?
  2. Where should the scanner be to accommodate people of heights, strengths, and age?
  3. How are variable weight products handled?What happens if there is an error?
  4. How do we prevent theft?
  5. What materials do we use so that it's scratch and weather resistant?

Duct tape is your best friend

In the spirit of rapid prototyping I rummaged through our hardware supply room and put my arts and crafts to work.
Round 1
Phone bound to cart and basket

Create concept clips trying out different interaction options in the store as a bodystorming exercise. This helped me understand what movements were awkward, and what were natural.

Myself, and colleagues at the office
angela liu portfolio
Round 2
Cardboard, styrofoam, plexiglass, wired 2D barcode scanners, and lots of tape

Narrow down 6 scanning interactions to 2

53 random shoppers in stores scan 1-2 items for each interaction
angela liu portfolio - automated checkout
Round 3
Styrofoam, plexiglass, custom ordered scanners, and lasers

Narrow down 2 scanning interactions to 1

Shadowed 4 scheduled user interviewees and had 25 random people in stores test 2-5 items each
angela liu portfolio - automated checkout research
Round 4
3D printed prototype with embedded scanner and laser

Confirm the scanner interaction and choice of custom laser part

Shadowed 6 scheduled user interviewees on full 30-45min shopping trips
angela liu portfolio - automated checkout research

Conclusion: Scanning below the tablet was most comfortable for most use cases

These were the results from several weeks of field testing yielded the bottom facing scanner as the majority winner. I documented each user testing session's details, the user's pick, and their rationale. Because different shoppers will have different preferences based on their age, height, physical ability, etc, I also broke down all the results by demographics.
Other conclusions from the hardware UX testing:
  • Interaction: Multi-direction barcode scanning support is vital, with visual guide of scanning zone
  • Interaction: Users begin to develop muscle memory of scanning zone, so device needs to be extremely rigid as to not change that angle
  • Hardware: A scanning device tilt of 20-30 degrees is optimal
  • Hardware: The battery draw of using a proximity sensor is far less than keeping a camera open
  • Software: Audio feedback of successful or rejected scan is necessary

Diagramming findings

I created a system flow diagram that illustrated how the full tech stack was involved in the user flow, and vice versa how the user's workflow impacts the software and hardware. I pointed out several possible execution methods and edge cases there are to design for.
angela liu portfolio - automated checkout research

The final UI

I designed and prototyped happy path cart states, age/restricted item checks, animations for the scanning interaction, empty states, error states, you name it.
angela liu portfolio - automated checkout

Demoing at NRF

We showcased our automated checkout technology alongside our other inventory platforms at National Retail Federation, Retail’s Largest Tradeshow, in 2018 and 2019.

Fleet management suite


Our fleet of homegrown tools support the installation, maintenance, monitoring, and troubleshooting of hardware issues in the field. These tools are heavily used every day by the infrastructure, hardware, and field teams to manage our hundred of cameras deployed all over the world with our retail partners.

For this project, I helped streamline 23 separate tools into 12 and drastically lowered barrier to entry for new employees. We completely overhauled the UI and made it mobile compatible.
Increase in mobile usage of our tools.
months to rapidly execute on the work.

Not set up for scale

Like any startup, many of our tools for operations were built feature by feature as the needs arose, without much pause for consideration about the longterm scalability. That's a problem we'll solve if we're lucky to have it! 

And soon, we were. That's when we needed to take a look at our set of fleet management tools and really understand how to streamline the in-field workflows and improve the tools.

The main issues I discovered were:
  1. Many tools were bloated with legacy features
  2. Workflows were separated into multiple locations or duplicated in multiple tools
  3. Documentation was kept separate from the app, requiring multiple applications
  4. UI had no hierarchy and was confusing to use
  5. There was no mobile support, but our field techs were, well, in the field all the time!

Becoming a field tech for a week

I spent a week shadowing field team members to understand their processes and expected results. After observing, I went out to perform the tasks myself to understand firsthand where improvements could be made. After interviewing each field operations member, I brought all of the stakeholders together for a brainstorming session. I then took the brainstorm notes, distilled it into features and bugs, and grouped them by process / category to create individual project charters.

A complete redesign effort

Stripping the bloat
Based on the research, I could determine unnecessary features. I cleaned up the legacy tools that no one used any longer. While reorganizing the tools, I also mapped out where the new features from the brainstorm would fit in.
Before: Navigation contents
After: Navigation contents
Improving “quick glance” abilities
The most important tool is the ability to monitor, identify, and asses device hardware issues in the field. I focused on making this tool mobile-first design.
Before: Devices dashboard
After: Devices dashboard

Automating previously manual tasks

The most important tool is the ability to monitor, identify, and asses device hardware issues in the field. I focused on making this tool mobile-first design.
Crud for content
Version control for the multiple pieces on software on each device was tricky business. When one engineer holds the key to knowledge of the current versions, we had a problem. This new content management system allowed users to view current versions, update versions on specific devices, and managed version naming automatically.
Creating internal alerts
Version control for the multiple pieces on software on each device was tricky business. When one engineer holds the key to knowledge of the current versions, we had a problem. This new content management system allowed users to view current versions, update versions on specific devices, and managed version naming automatically.
A frontend for the data mdoel
Previously store and user settings could only be changed directly in the database. With a GUI, now team members with the correct permissions could update settings, with caution!

A new design language

As seen in the designs above, I created a new design language for the field and internal tools products. New guidelines for typography and component styles has helped engineers follow the same visual style in new features.

Shopper Engagement Tablet


The shopper engagement tablet’s purpose is to digitize the retailer’s weekly circular on a tablet mounted to the shopping cart. The deals were contextual to your location in the store and would save the retailer millions of dollars a year printing the ads.

I crafted user experience of cart-mounted tablet providing location based advertising and in-store product search and navigation. Deployed over 500 devices in major retailers. The tablet has an average of 3.6 / 5 stars across 2386 post trip surveys and has proved an 11% increase in sales.
increase in sales due to improvements
stars for member satisfaction across 2386 post-trip surveys

Local supermarkets vs. big box

We were still finding product market fit. So we needed to know what the needs of potential retail partners in various market segments as well as their clientele's needs. So, I spent weeks traveling to both our local supermarket partners, as well as to our international big box retail partners to perform initial user research and discovery.

There are key differences between the local markets and the major retailers that impact the potential benefit of our system. These findings helped us focus our attention on the right market. Eventually, we decided that the product was worth pursuing with the big box retailers, but sunset it for the local supermarkets.
Local supermarkets
Big box retailer
Which is better for Focal?
Your mom&pop local grocer. May have 1-5 locations in the region.
Your Safeways, Walmarts, and Tescos of the world.
Residential communities
Commercial neighborhoods
Big Box
A community feels protective of its residents, and technology threatens to eliminate jobs.
Regulars who visit 2-3 times a week. Enjoy engaging with the staff.
Residents of neighboring towns or passerbyers.
Big Box
Regulars know where items in the store are located and don't need the tool.

Focusing on Big Box

It was pretty clear from the market research that I did, combined with conversations that our founders were having, that Big Box was the way we needed to go. At that time, we already had 10+ retail partners in the local supermarket space because we could build relationships and have very high-touch pilot programs with them, since they were our neighbors.

As we now understood who our target users were, I began the work to design the next generation of the app, for them.
Contextual inquiries and interviews
These interviews provided insight on shopping behavior and user pain points that would lead to features.
A/B testing
From features, to call to action stickers, to survey launch logic, A/B testing allowed us to empirically compare the best design options.
Live testing prototypes
Every second counted in the search loading, advertisement animations, and navigation updates, so I would work with engineers live in store to test these parameters.
Iterating on designs
Brainstorming multiple UI layouts and interaction patterns for various features to test.

Making 6 major changes in 6 months

From all the research, the major changes I was proposing in the redesign were:
  1. Introduced context by creating location-based ads, rather than just a laundry list
  2. Complete redesign of UI – no more Lobster font!
  3. Major UX enhancements including navigation, tabs, text hierarchy, and call to actions
  4. Worked with data scientist to improve UX on search
  5. Worked with hardware team to increase size of tablet for next generation
  6. Cut two major features that hindered adoption

Designing for divided attention

The biggest challenge was to capture, and then keep the attention of the customer. Customers are trained to look up while in stores, not down at the cart. This forced us to explore other sensory input options like:
  • Light – dimming and brightening the screen
  • Sound – using a small jingle or sound at certain CTA points
  • Touch – creating haptic-like vibrations
  • Color – choosing bright popping colors to catch the user’s peripheral attention
  • Motion – incorporating animations to catch the user’s peripheral attention
We prototyped these options, and resulted in using a combination of color and motion.

Every second counts

Due to the divided attention of our users, we had to pay close attention to every point where we could lose a user’s attention.

How many seconds do we wait...
  • before rotating the featured products?
  • after a user gets in the checkout line before we trigger the after-trip survey?
  • before automatically turning on the tablet?
  • before skipping the onboarding screens?
  • before automatically switching tabs?
  • between each location refresh?

Proven increase in sales by 11%

Our team’s hard work paid off. We earned our retail partners an average 11% increase in sales. This percentage was huge for our clients since retail is a very low-margin industry.

Final designs and flow

Location based advertising
As a shopper walks through the store, the ads animate and rotate as you become closer to more relevant, actionable deals.
Search by category
Most search terms received by our device are one to two words. However, a word like “milk” could be in products like “Whole Milk” or “Milk powder”, which are in different locations. To support this, we break down search results by category, weighted by the frequency the items in each category are bought.
View shelf location
Once a shopper narrows down to the item they are looking for, the tablet begins navigation as well as showing a real time shelf location of the product.

The end :)