During the year that I have worked for Agilence Inc., I was given the opportunity to redesign a highlighted feature of their core product. As a major loss prevention analytics company with clients like Calvin Klein, CVS, L’Oréal, and RiteAid, they provide a digital product to manage and analyze all store transactions and track down any potential losses.

I first began by dissecting how the widgets were already constructed. When it comes to setting up a widget, the user first selects the background color. Next, they select a widget icon (which represents the category in which the key metric belongs under) to be presented on the left half of the frame, and then selects the data to be drawn to be displayed on the right.

Before making ideations and designs, I wanted to make sure I understood the functionality of the widget feature as best as I could. I met with people from the product team, development team, and customer success team to ask questions and understand what can and can’t be done with the redesign and also to learn the many ways that clients typically use widgets.

Though I was gaining familiarity with best practices for widgets in a UI lens, I wanted to step into the shoes of the users to figure out the many purposes for why they may use this feature. To do this, I created two user personas of clients with different positions (Richard and Sarah, as depicted below) who use dashboard widgets in different ways. By doing some reading into the roles that can be found among Agilence's clients as well as speaking with members on the customer success team, I was able to assemble some charts involving preferred features, how the user's day may look, and what a user would need at a glance.

Finally, before making any new designs, I completed some market research of how KPI dashboards from different companies incorporate widgets. This was incredibly insightful to see, as I became familiar with the look of modern widgets and studied how different sources make a widget seem so minimal yet effective.

After collecting my different types of research, I fleshed out some of the logic in the steps a user would take to build their widget. I wanted to explore the different types of data that could be involved, as well as what those types of data may additionall entail.

Once I felt comfortable with my understanding of KPI widgets, I began my process with design iterations.

In phase 1, I really wanted to just block out the elements in the widget in a minimal sense. I didn't add any complex content that was new -- only used the core elements that needed to be present and visually tested a few things out.

After conducting my different phases of research, I tackled the designs again but with functionality in mind (and less design). Below, the widgets may not be aesthetically pleasing, but I tried many different combinations of features to test the relationship between different types of data.

The third phase combines a couple of different design sprints, but below is a collection of the key contenders. Ultimately, I maintained the two column layout, but created different options (that the user can configure to their needs) for the user to choose as their supplementary data point. This can be in the form of a graph (line, pie, or bar, with their own restrictions to meet the standards of the small space they situate in) or another key metric. I gave more care into visual balance and consistency, and upheld the blue branding that Agilence has.

Of the projects I've worked on for Agilence, this one was one that I was able to see through from start to finish. The features found in Agilence's product are quite complex as they tie with a lot of data management, and I wanted to keep the simplicity of the widgets while adding more functionality to it.

Being able to get more information at a glance would help productivity and efficiency for store managers and the like, and the final designs of these widgets focus on having a a good balance of pleasant visuals and powerful function. Its required information is the title, time frame, key metric, and an accompaniment to show on the right and there are many available options of supplementary data for the user to enable to customize their widget.