• Warehouse App

  • ❊

Warehouse App

Stoqo, 2022

Stoqo is B2B company who have vision that aims to streamline the F&B business supply chain. In early 2020, the company want to have massive improvement in our internal warehouse process. On the design side, we also try to identify the problem with our existing warehouse app and improve its warehouse experince as a whole. I was the person in-charge for this project. I work closely with design lead, warehouse staff, and tech team to make sure the new UI will improve their daily work flow. I've made hypothesis with the old UI, provide improvement ideas that translate into 3 design variations that I've test it with the users.

OUTPUT

- New Warehouse App UI - Internal App Design System

Warehouse App

Stoqo, 2022

Stoqo is B2B company who have vision that aims to streamline the F&B business supply chain. In early 2020, the company want to have massive improvement in our internal warehouse process. On the design side, we also try to identify the problem with our existing warehouse app and improve its warehouse experince as a whole. I was the person in-charge for this project. I work closely with design lead, warehouse staff, and tech team to make sure the new UI will improve their daily work flow. I've made hypothesis with the old UI, provide improvement ideas that translate into 3 design variations that I've test it with the users.

OUTPUT

- New Warehouse App UI - Internal App Design System

APPROACH

Generally, it’s easier to design products for people we’re most familiar with: ourselves. However, this experience looks different for warehouse worker. They have different needs.

Warehouse staff in the middle of working in our warehouse

For example, warehouse workers are required to work fast & accurate. They also have high-mobility since they needs to move items in the warehouse. This understanding led me to make hyphotesis with existing app.

Hypothesis 1

Too many information that hard to read

To perform their task, warehouse workers needs to read a guide that provided in the app. In existing app, small text size and low contrast ratio make them difficult to understand the task they need to be done. Imagine if there are 20+ warehouse task, they also need to concentrate and recheck those 20+ information to make sure they have zero mistake.

Hypothesis 2

Some clickable element doesn’t look like clickable

We have two type of clickable UI element: button and link. Both have blue color variant for high-emphasize action and grey color variant for low-emphasize action. Interestingly, our warehouse workers doesn’t perceive the grey color one as clickable action.

Old warehouse app UI

Opportunity

How might we design app interfaces that help warehouse workers who has high-mobility to work fast & accurate?

Obvious

The UI element is easily recognizable by the user. For example, user can easily identify which clickable element and not

Glance-able

In few glance, users can know the main information that they need to know to perform their task.

One at the time

If possible, chunk the task into different flow. This help user focus on the primary task and minimize distractions.

DESIGN CONCEPT

Before I jump into design, I create the design principle to act as compass of the design. These are the principles that I thought will fulfil the user’s needs:

INTERFACES DESIGN

Once I satisfied with the concept, I detail those exploration into detailed UI. I create the 3 styles. The one that I still needs to figure out is whether the design will work better on the light mode, dark mode, or the mix of it since the user when using the app are on indoor and outdoor environment.

VALIDATE THE DESIGN

I turn the design into prototype and then validate it with the warehouse workers. The 3 variation designs is tested with desirability studies to 6 workers with variation in indoors and outdoors enviroments.

Testing the new design using existing warehouse operational flow

FINDING

  • All participant prefer the the new design style compare the design in existing app, this include the big element UI and high-contrast

  • Most of the participant prefer light-design because its more clear on indoor or outdoor environment, easy to scan the layout, and easier to read the content.

  • All participant feels the mix-design looks odd and hard to read.

  • Most of the participant also think that the dark-design still okay but if compared with light-design, they choose the later. The dark-design makes also make the text hard to read when seeing in outdoor environment, especially directly under the sunlight.

    Upon that finding, we decide to go with the light design.

IMPACT

Unfortunately, we can’t track the outcome of the new design due the major company incident that happens when the new app is under development.

If things gone differently, we can track it by comparing the old design and the new one, if we saw increase in our completion time-to-task of warehouse workers activity, its mean we go the right direction.

Also, if the new design perform well, we plan to applied it to other operational product like delivery app. This helped us maintain consistency and a high bar for craft across the app. For designer and tech team, it means increasing our productivity by having the guidelines.

KEY TAKEAWAYS


  1. Always back to the user - The general design practice may not work the best with the our user. We need to make adjustment or make the new one for the sake delivering the optimal experience.


  2. Things happen in life - This project feels very personal to me since this is my last project in this company.

    Sometimes, things happen in life and not goes according to plan. Tbh, I feels little bit disappoint by the fact we can’t shipping the app and track its outcome. Its feel like you finish creating the manga but you don’t know the response or the impact of the reader because you never publish it.

    This project thought me lot how to deal with sudden changes and unfulfilled expectation.

❊

❊

❊