designing-fs-banner

"...for we are still at the beginning, and we are rightly asked what it takes for design thinking to truly have significant impact."

-- Tim Brown, Change by Design

Designing Flowspace

I joined Flowspace - the Fulfillment platform of the future - in November, 2018 as one of the first 15 hires. Being the first (and largely only) designer early on at Flowspace, I was given the opportunity to build and implement strategic design initiatives on both the market-facing medium, and the user/customer-facing application.

The need for a scalable, memorable, and accessible user-centered design system was never greater than it was in the early days, as Flowspace's customer base was growing leaps and bounds.

client-app
Fig1. - Flowspace's interactive shipment dashboard, order details, and product inventory.

Roles and Responsibilities

Product Design | Design OPS | Scaling | Hiring | Product Growth

Principal Designer
Nov 2018 - Current
  • Oversee product design, communication design, user research, and UI system design
  • Structured and built the design organization
  • Aid the strategic development of complex product areas
  • Design Flowspace's market-facing and user-facing applications
  • Conduct extensive user research to derive key product insights
  • Work with Product to ensure OKR assurance
Favorite Tools
  • LoFi - Sketch
  • HiFi - Figma & UXPin
  • Usability - Userpilot
  • User Engagement - Smartlook
  • My awesome teammates
  • Ruby on Rails, HTML, SCSS, JS/React

Challenges and Opportunities

Many organizations building an app are able to identify and establish user personas with at least some semblance of what to expect in reality. At Flowspace, however, the intended use philosophy is broken into two distinct categories: Merchant and Warehouse. This posed a challenge: who are we designing for?

personas
Fig2. - Examples of Flowspace's client persona documents.

Detailing User Personas

Flowspace is an app that connects people or companies selling a product online (Merchants) with a full-service fulfillment provider (The Warehouse).

Merchant Use
Sells a product online, connects Flowspace with their E-commerce platform
  • Requires up-to-date order status throughout the fulfillment process
  • Must see real-time inventory levels at all times
  • Active integration management between their store and Flowspace
  • Must be able to manage orders to the warehouse for replenishment of inventory
  • Access to reports of both historical and current data
Warehouse Use
Warehouse Management System; Pick, Pack, Ship, Fulfill merchant orders
  • Actionable insights into the day's work (picking, packing, shipping)
  • Must be able to see high-level warehouse statistics and performance metrics
  • Requires insight into merchant/customer inventory levels and allocations
  • Must be able to fulfill products on the fly with both mobile and on-the-floor systems
warehouse-personas
Fig3. - LoFi batch creation prototype

Understanding Warehouse Users

With Flowspace, the every day [warehouse] user may have not chosen to use Flowspace - the fulfillment partner management team (their boss) did. This presents a few challenges: how do we talk to the people who are actually using our app on a day-to-day basis?

One of the most beneficial data-discovery tools when validating design decisions was jumping on video calls with warehouse managers and warehouse employees and share our prototypes. We were able to gain insights into how our app was helping their day-to-day operations, as well as what kind of hurdles they faced.

This allowed us to iterate quickly, implementing new solutions and enhancing the user experience.

ideal-batch-creation
Fig4. - User journey mapping the batch creation process

Merchant Personas

Understanding our merchants' needs was a lot simpler of a task than our warehouses employees' needs. Namely, warehouse employees often didn't know what they didn't know they needed to get their job done more efficiently (see above).

Merchants, on the other hand, knew exactly what they needed to get orders out to their customers as quickly as possible. Because of this, we were able to remain in constant communication with our merchants.

Flowspace was able to quickly implement valuable features that made onboarding, importing of orders, managing inventory, and integration support as easy as humanly possible -- and continue to iterate.

merchant-personas
Fig5. - Flowspace wallet, Merchant billing prototype

Bringing Business Value - A Case Study

A seamless onboarding experience is key to merchant retention and happiness. I was able to work closely with stakeholders, product managers, engineers, and our merchants in bringing touch-point data to be visualized, tested, iterated on, and handed off to the devs.

inspiration board
Fig6. - Design sprint - Onboarding Merchants
sketches
Fig7. - Sketching out solutions

Sketching for Solutions

Sketching out potential solutions and brainstorming possibilities with the sprint team was crucial to understanding what was possible, what wasn't, and the best route to go down.

Starting with inventory import, fulfillment options, shipping restrictions, and, finally, order insights, we were able to have a greater appreciation for just how complex onboarding can be -- but doesn't have to be.

We used group voting to determine the most necessary features and were able to begin writing user stories around what we knew our merchants needed.

Prototyping

After reviewing LoFi prototypes and sketches, working with my team to prototype in high fidelity led us to be able to empathize with our users and advocate on their behalf to the product stakeholders.

We were able to bring the prototype in front of merchants to test for themselves. The data we gained from these user interviews was priceless and allowed us to iterate even further.

The resulting user feedback positively affected not only the outcome of the onboarding/import feature, but we were able to garner invaluable data and action points to be used throughout the entire Flowspace product.

design gif
Fig8. - Live user testing the new feature (sped up)

Problems Faced - Problems Solved

Understanding and appreciating the complex nature of integrating any number of e-commerce platforms with Flowspace was the first step toward solving the problems associated.

Problems
Merchants...
  • ...have lots of detailed inventory that needs to be integrated.
  • ...are used to their e-commerce platform -- Flowspace is new
  • ...do not always have the necessary technical knowledge on hand
  • ...want to be up and running as quickly as possible
  • ...prefer seamless onboarding, but also want help if needed
  • ...need to understand any validation requirements
Solutions
Flowspace...
  • ...imports your inventory catalog automagically
  • ...uses conventional and relatable user interface elements
  • ...explains complex areas in an easy to understand way
  • ...handles all authentication and API requests with the e-commerce platform
  • ...let's you connect with a live-chat specialist if you get stuck
  • ...links to helpful resources that will educate the merchant

Measured Victories

OKRs are a way to establish success goals and determine relative success metrics against them.

Some of these OKRs achieved were:

  • Remove barriers from creating more orders using Flowspace
  • Increase the total number of orders created to [redacted]/mo
  • Improve cash conversion and help customers build confidence in the services provided.
  • Increase product NPS by [redacted]

"Not only were we able to onboard with Flowspace quickly and easily, we were confident in the platform enough to recommend Flowspace to our partner brands... and that says a lot!"

--Actual Customer :)