Updating the UI and UX for a data heavy admin portal.

MY ROLE
Designing

For this project I worked with my project manager to better understand the needs of the user, we didn’t have the budget/time to conduct user testing.

Approach

Improve the user experience through ux and ui

While working at Objective Inc, a digital product agency, I was tasked with updating the UI for one of our clients. They were a corrugate supply company and my job was to make the admin portal prettier and easier to use. The page I was working on was where admin could view individual customer settings and parts. There was a large quantity of data to show, so for the redesign to be successful I would need to set up a clear hierarchy and appropriately divide the information.

 

Initial UX Exploration

Prioritizing the Right Use Cases

We were on a very short timeline, so I was mainly working with my project manager to understand the users better. As I learned more about the common use cases I began to create basic wireframe designs to map out the UX before I updated the UI. As I showed these different ideas to my project manager, we realized that I was prioritizing some of the wrong use cases. Through more discussion of the use cases, we were able to appropriately prioritize them to provide the most intuitive and non-disruptive experience for the user.

 
 
 

UI

Updating the UI System

Now that I knew how the new interface would work, it was time to take the wireframes to high fidelity mockups. Because this was the first UI work done for the project, I needed to create these new design components. I had a basic color scheme and typography to follow from their marketing site.

 
 
 
 

The Final Product

UI That Supports UX

I used the typography to create a hierarchy of information and colors to call extra attention to action items. We ended with a focused view on each page, protecting the user from being distracted by data that didn't pertain to the task they were trying to complete, and allowing space for the company to continue to grow as their product becomes more robust. I designed individual screens for the different possible interactions, adding and editing, as well as mapping the user flow with a tool called Overflow that also produced a working prototype.