99 Ranch
Reimagining e-commerce across multiple channels
Business Alignment
Understanding the business first
We started by identifying the core business objectives. First and last-mile logistics carried most of the fulfillment cost, and returns erased the margin on an order. This set the direction for the UI patterns that followed: maximize shoppability and reduce the conditions that lead to returns.
Stakeholder Interviews
Talking to the people who fulfill orders
After checkout, an order moves through customer service, stores, and warehouses. We interviewed each group to find where the experience broke down.
Customer Service
Reps walked us through the most common customer questions and complaints. Recurring tickets pointed to gaps in the interface.
Store Managers
In-store pickup was a bottleneck. Store layouts couldn't hold many orders at once, so pickup flows had to work within those physical constraints.
Warehouse Managers
We walked through the logistics app together to map out the full order fulfillment process.
Edge Cases
Defining the edge cases
A large part of scope definition was deciding what happens when orders don't follow the happy path.
Delivery & Cart Constraints
Defined rules for out-of-range delivery addresses, mid-cart delivery method changes, and limiting certain user actions when the order state made them invalid.
Post-order Processing
Temporary holds are placed for when item prices can change from time at sale (normally weighted ones). Order totals can vary slightly between checkout and fulfillment, made sure to communicate changes clearly to minimize customer confusion.
Legacy Data Migration
The new platform disallowed VoIP numbers, which the previous platform permitted. We added an onboarding flow that catches affected users and moves them to a valid number.
Design System
Building the design system
We established a centralized design system and validated each component individually for reusability. It became the shared reference for design, development, and the backoffice teams configuring the storefront.
Interaction Details
Micro-interactions and accessibility
Micro-interactions
Defined patterns for auxiliary feedback, including when and how toast notifications appear to supplement user actions.
Accessibility & Responsiveness
Worked with the development team during the design phase to keep screens responsive across device sizes and compliant with WCAG guidelines.
Testing & Validation
Testing at multiple scales
We built an interactive prototype covering the end-to-end flows and iterated with the development team as features shipped.
Industry Expo
Ran large-scale, in-person user testing and interviews at an industry expo.
Company-wide Beta
Launched an internal beta on the prototype, collecting feedback on both the consumer and warehouse sides.
Handoff
Presenting to the executive board
We presented the final designs, prototype data, and company-wide test results to the executive board and key shareholders for final sign-off.
The app is already live, check it out here.