Design,
Code,
and HCI

Metrics Widget UI Redesign

Sketch
Summer 2018

Overview

The Solomoto metrics widget is a tool within the Solomoto platform used by small businesses to view business metrics generated by users on their website, online store, and any social media pages linked to the platform. As of summer 2018, the existing widget is simple: it displays one type of data but has an outdated interface that does not fit in with the rest of the platform. As the final task at my Solomoto internship, I redesigned the UI and user flows of the widget.

The goal of this redesign was several: increase ease of use and user delight, display a broader range of metrics with intuitive data visualization, make the tool customizable to the business owner’s needs, and integrate better visually with the rest of the platform. This redesign makes use of and hopes to further cement the card-based design language used by Solomoto in some more recent designs.

The Process

Unfortunately, there was not enough time to conduct a full UX case study nor perform extensive user research, but a sizable portion of some of my previous tasks included completing market research for Solomoto and its competitors as well as learning what kinds of users Solomoto is targeting. The company didn’t have any user research on hand either, so I relied on the knowledge of my previous tasks I completed.

I first took a look at other widgets in the platform and tried to get a sense of what I can do to maintain some visual cues (especially card-based design) and design guidelines while still providing a fresh look for the new UI. I then gathered a list of possible sources for the metrics (website, store, Facebook, Twitter, etc.) and thought about what types of data can be displayed from each platform and ways I can display the data. For example, gender can be retrieved from a Facebook page visitor’s profile but not from a website visitor’s IP address. With all that in mind, I started to plan things out in Sketch and experimenting with different layouts and methods of customizing the interface to see how to best maximize the usage of screen space.

After creating the slices and linking user flows, I asked a few co-workers what they thought and iterated based on the feedback. Once again, time wasn’t on my side so user testing and further iteration were left out.

Brief Tour of the Redesign

The dashboard is what users see immediately after they enter the widget. The “At a Glance” section displays some key metrics with priority being the information’s ease of processing. The graphs are void of numbers and meticulous details, the numbers are easy to read, and the percent increase/decrease in activity is coloured so the user can quickly get a general trend of what’s happening. Below you can see the old widget followed by the new dashboard.

The information in the “At a Glance” section can be customized to the user’s will via the “Change metrics” option in the top right hand corner. A question bubble will provide more information about what the options does if the user gets confused.

Once the user enters the “Change metrics” customization panel, they can choose from a variety of information and display styles, all organized by the source of the metrics (website, store, or social pages).

The second section of the dashboard displays some detailed metrics from a source that the user can specify. All social pages are collapsed under the “Social” option via a dropdown menu to declutter the interface.

Of course, the information in the Detailed Metrics section varies depending on the source selected. Some information cards have display styles specific to the source. For example, the “Likes, Retweets, and Replies” card is only available for Twitter. Other cards, such as location information of visitors and followers, is available for more than one source. Horizontal scrolling is available for more information cards to be displayed, as indicated by the darkened right arrow. Images below show how the “Detailed Metrics” section changes depending on the selected source.

The data on the cards in this section is only a simplified version of the full-detailed view. That way, it’s easy for the viewer to briefly glance at what data they want to investigate in more detail. To access the full details, the user clicks on the “View details” option. Some detailed views simply displayed information in greater depth, while others (usually graphs that don’t have many labels) are interactive to give the user more information upon hover.

The reason why I chose to create a pop-up card instead of redirecting to another page was that the user can feel like they’re living inside of this widget instead of feeling disconnected from it when they leave for another page. I treated the metrics widget as a large community of information that the user sees as a dependable and trustworthy accompaniment to running their business. Avoiding the need to frequently leave the dashboard enforces a stronger sense of cohesiveness and reliability in the tool.

Below are a couple examples of detailed views from the website tab:

And here’s a couple detailed views from the Twitter tab:

Conclusion

The next logical step in the process would be to create an interactive prototype by animating the mockup’s user flows. The prototype could then be sent out for some much needed user testing to set off the cycle of feedback collection and iteration. Perhaps some more ways of presenting the data can be developed based on feedback to process information even faster and more intuitively without losses in accuracy.

From a technical standpoint, it would be necessary to research the APIs of some of the metrics sources to see if the types of data in the mockup can easily be displayed. There may also be other insightful data that can be retrieved using the APIs that were overlooked in the mockups.

Overall, with this being my first substantial UI project, it was a great experience getting to know Sketch better and implementing some of the design techniques I had previously read about or seen in other products.