GA in 2023 to 325,000+ retailers

Increase order completion rate by 40%

Reduce time spent on creating orders by 66%

• Retailer Buyers iOS App
• Joor Retailer Buyer App
• GA Design
• Product Catalog, Workspace

"Reskin" the old app before the Beta release?

I received the initial design requirement to reskin the old app (update all the UI elements to be similar to the new web app visual design language)

The Retail iOS app is the retailer buyer’s first-stop tool for shopping in the field and on the go.

So I asked,

• What outcomes do we want to achieve from reskinning?
• Do we have an absolute timeline?

Initial Research

I contacted some internals for internal testings, to start and save a new order.

And the result showed that even the basic order flow didn't perform well. with metrics like:

Field research in a tradeshow

To understand the current user behaviors and user scenarios better, I worked with the PM to get a chance to go to Coterie, a tradeshow where the Joor iPad app acts as a tool for retailer users. I used this show to do more research to understand the problems holistically.

User needs

Find brands, draft orders

• Retail buyers work with many brand reps simultaneously.
• They hold physical folders and an iPad to save product styles they are interested in.
• They work on several orders at the same time.
• They fill out order details later in a quieter environment.

Set MVP scope based on user needs.

Pivot: revamp instead of reskin

I shared the impact and effort it took to reskin, and led the team to redirect from reskin and pivoted to a revamp. Then with the wider team meeting, I incorporated views from eng and stakeholders, and defining the goals and scope for this project. Focusing on the core flow of shopping.

Goals

• Redesign iOS App shopping to be consistent with the web shopping flow
• Save on cost: maximize iOS native capabilities and components
• Improve general UX affordance, copy, navigation
• Create mobile components based on Joor new Design System

Priority: Start shopping flow

Entry 1: Start from linesheet, selecting products

Agreeing on the shopping entry flow with all stakeholders, I started to transform some components of the JOOR web design system to be iOS-compatible and accessible components. With the cx personas and scenarios in mind, I identified two entry points to start: start from linesheets, which is basically starting from choosing brand and products

Entry 2: Start from editing details, then add products

The other entry point I identified was when buyer have orders info set up so they first fill out the details of the order, and then add products to this order or here it's the workspace. from here "add product" direct to the previous flow.

Shopping scenario: Switch workspaces

Switch workspaces while working on several orders

I designed for the special use case reflected from testings also confirmed by customer support was when buyer meet with two brand reps at the same time in a booth. like this image on the left, let's say I’m a buyer, I just started an order with A, and B saw something they want to add too. I designed the switch workspace feature to allow auto-save the current process while starting on another order at the same time.

Product table with good accessibility

Product table

I improved on touch size, on readability. Compared to the old product table, I improved the hierarchy and accessibility based on design critique feedback and Human Interface Principles.

Same task, different results

100% of testers rated the task process to be “easy” and “very easy” to complete

30% of the testers interact on the workspace page with memory from using the legacy app pattern

Impacts, Learnings