Clink. is a physical social app that promotes genuine, in-person connections through the novel phone stacking interaction.
4 MONTHS
Internship
Web Interface
Industry Project
My Role
As the first designer on the team, my duty involves more than creating high quality deliverables. I was also responsible to familiarize the dec team with modern interaction design practices and prioritizing tasks according to the company's needs.
TEAM
RPI Dev Team
Contextualize
Interview Fly on the Wall Research
Deliverable
Presentation Handoff
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.
J.J.
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.
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.
Contextualize
Research
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...
J.J.
Given the size of the dev team and my limited time as an intern, I need to prioritize features, implementation difficulty and balance managers' expectations.
Design Principle
Based on analyzing the qualitative data we gathered in primary research, current social context, we came up with these insights.
J.J.
I created these principles to better communicate the important themes I gathered from interviews and field studies.
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.
Deliverable
UOS 2.0 (RPI Partner Portal) is a reimagined order management system, which significantly improved efficiency, usability, and visual coherency.
From Text Interfaces to Graphic Interfaces
In necessary places, plain texts are replaced with clearer and more recognizable visuals. This is to save screen space and make easier navigation.
Here I introduced graphical representation of timelines.
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.
J.J.
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.
Static 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)
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.
Confirmation /Alert
This layer calls for highest form of attention and displays clearly the effect of action or the state of the alert.
J.J.
This model is designed with RPI's current database structure in mind. I worked with engineers to discuss the validity and efficiency of such information architecture.
Helping Text
One of the strengths 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.
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.
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.
Acknowledgements
Many thanks to coworkers who helped in this project in most need.
