RPI Partner Portal, UOS (Universal Order System), is a factory and large order customer facing tool that efficiently manages bulk orders in business side and provides information and ability to customize certain order productions based on customer needs or factory loads.

The original Partner Portal was developed around 2017 with dated UI and programming structure. My task is to work with programming team to define visuals and restructure user flow for a more relevant and efficient experience.

As the first designer the team worked with, my task also includes introducing the team with common interaction design practice and strategize workload according to need base requirements.

Beginning the process, I dove deep into how the current partner portal is being used by the professionals and how they feel about the process.

Since I only have access to users working in the company, I first observed their daily work tasks without interfering. Many  professionals only work with certain functions, however, they jump between functions from time to time. RPI is not a relatively large company and people take on multiple roles during work.

To get a clear sense of workflow in reality and understand some potential habits with current UI, I then conducted remote interviews with some core users of each use category, including finance, customer service, order routing, and, factory settings workflows. Since most users had not worked with a designer before, I chose thinking out loud as the bulk of the interview to have them begin to think about the process and possible road bumps they currently experience. At the end of each interview, I asked them to reflect on significant areas they wish were different.

Complying to newly devised company branding, I specified how the company visual system could be used within the user interface.

To reduce jumping back and forth in the old UI, most content in the interface are arranged in conventional reading direction, top to down and left to right.

Smaller blocks of task visuals give a clear view of what's to be expected from the users while providing a sense of direction based from left to right hierarchy. Using accent color to indicate completion of color also provides at a glance overview of what have been done with current flow.

Most interface are designed with space for easy future changes. Modules can be reused in multiple places. Instead of defined by absolute positioning, most boxes are expandable with flex display.

I included a component library built with HTML and CSS as a part of deliverable so it’s easy to add any elements within the DOM tree in the future.

To simplify the mental model and build trust within the interface, I designed this three layer architecture of information that each layer performs exact tasks and made the actions predictable.

Addressing poorly arranged navigation tabs, I rearranged function under each category based on frequency used and importance to each job title.

As mentioned many users take on multiple roles, they may jump between different categories frequently. Thus, some function can exists in duplicates under different categories for convenience.