RPI

Background

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 based requirements.

Contextualize

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.

Propose

Current UI needs more work than a simple visual redesign. Possible areas to improve includes navigation arrangement, direct feedback on action, mental model mismatch...

Given the size of the dev team and my limited time as an intern, I need to prioritize features, implementation difficulty and balance their expectations.

Design Principles

Sustainable

The interface design should be easy to propagate and allows freedom for future variations or additions.

RPI’s programming team has limited resources and needs to react to many emergency calls produced by the factory. Thus the implementation of this UI redesign should not take too much effort. This means parts of the UI needs to prioritize programming difficulty.

Learnable

Flows sharing similar process should share similar visuals with enough differentiation for easy navigation.

The company is currently training new employees to utilize the Partner Portal. However, a large portion of the users would still be those who already use the interface professionally. Here, it’s important to balance learnability and already established knowledges.

Helpful

Mishaps happen, it is also the interface’s duty to safeguard users through unexpected situations.

Current UI already have ways to resolve many accountable mishaps. However, they are generally not findable unless being shown through previous knowledge. The new UI could be more responsive to such situation given these situations can mostly be predicted.

Clear

As a business facing interface, efficiency and aesthetics are equally important for UOS.

One of the main focus of the new design system should clarify hierarchies within screens. Easily findable = efficiency.

UOS(Universal Ordering System) 2.0

Visual

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.

* In necessary places, plain texts are replaced with clearer and more recognizable visuals. This is to save screen space and make easier navigation.

Modular UI

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.

Reaction Based ‍Architecture

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.

#1
Static Base Layer 

This layer contains all current information to view. This layer is what users will first see to determine if there’s any action needed. (Because all changes within Partner Portal affects many other aspects of business and no need for quick actions were expressed, I decided not to include any quick actions)

#2
Action Layer

This is the layer that prompt changes within the system and will affect company’s database after the final confirmation. A floating window will guid users through the action process and give subtexts of possible effect and seriousness.

#3
Confirmation/Alert Windows

This layer calls for highest form of attention and displays clearly the effect of action or the state of the alert.

Helping Text

One of the strength of the old Partner Portal is it gives clear descriptions and directions of actions within the interface. To continue this feature, I differentiated such texts visually and assigned roles specific to such texts.

1. Possible helping texts in individual action to help users understand each tasks.

2. Additional responsive texts at setting stage to help making decisions.

3. Effect of action texts appears when confirming action and gives clear influence of this action.

Flow Specific Navigation

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.

Reflection

I am genuinely grateful for this opportunity to work in a small business as my first internship. There was no already built UI/UX workflow, so I took on the role of laying some groundwork of Interaction design within the company.

Aside from finishing task assigned, I also spent time advocating how working on user experience and gathering insights from the employees could not only make employees' lives better, but also increase efficiency and eventually benefit the company in the long run.

It's nice to have a close working environment as in a small business so I can make real impact.