Fashion Retailers Shopping Experience

Product Designer
Joor

GA in 2023 to 325,000+ retailers
App Store

I owned the end-to-end design process for the redesign of the iOS iPad App for retailer users, from discovery research to design crafting to testing with real users, to deliver to the market. Joor is a B2B digital platform that connects brands and retailers together and streamlines their work processes.

Increase order completion rate by 40%
Reduce time spent on creating orders by 66%

Retailer Buyers iOS App

  • An image of the Cultural Center.

    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:

Completion rate

40%

Time spent

3 min

Drop off

50%

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.

Long term

How can we make it easier for retailer buyers to shop and work with multiple brands on the go?

With current restraints

HMW improve the UX without changing too much of the engineering data infrastructure and still achieving the outcome we want?

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 linesheets

    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

    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

    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.

Impact

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

Completion rate

90%

Time spent

1 min

Drop off

0%

Impacts, Learnings

  • 👍 Important clients' satisfaction: Providing an excellent first impression to users in the field helps Joor's goal of gaining more revenue and monetizing the existing platform. (Neiman Marcus etc.)

  • 💰 Budget saving: Revamp the design on the basis of existing Eng work and save months of budget (90k+) before the Beta release this September.

  • 🎉 Setting up iOS design system: Kickstarted the foundation for the future App design at JOOR