The UserIQ Design System

Hi there. My name is Mark Tegtmeier and I’m the Lead User Experience (UX) Designer here at UserIQ. We’re shaking things up with this blog post, and I’m taking over the author responsibilities from our marketing team. Sweet!

I’m excited to share some of the great visual updates we’ve made to our platform recently. Since not everyone nerds out on the nitty gritty details of UX as much as I do, I’ll be giving you a high-level overview of the process we went through to make these enhancements a reality. Not only will we highlight some of the design changes we made to the platform, but we’ll also focus on the research we did, along with the rationale behind these updates. 

UserIQ wants to make customer success an indispensable part of our and our customers’ company strategy and day-to-day functioning, and these design improvements were made with that customer-centric mission top-of-mind.

While the refreshed dashboard shows the same UserIQ platform that our customers are well-accustomed to being cheerfully greeted by, here is a sneak peek at our revamped look.

A Bit of Background

I’ll start with a little bit of insight into my journey to UserIQ. In previous work lives, I taught UX at General Assembly and also worked with the Enterprise UX team at The Home Depot, both of which gave me a broad and deep understanding of design concepts. I was stoked to bring this knowledge to the UserIQ team so I could help them continue to build out their powerful customer success platform. I officially joined UserIQ in the summer of 2019, and I was most excited by the opportunity to build out a design team at a growing, fast-paced startup. Speaking of this team, I want to give a quick shout out to Chanel French, Denise Jimenez, and Monet Burse for all of the tireless work they have put into this effort! 

Meanwhile, UserIQ had been doing some exciting foundational design work before I arrived. The UX team had gathered data from fellow UserIQ colleagues, and more importantly, from customers. The team sought direct user feedback through in-app engagements, web-based meetings, and on-site, in-person interviews. 

Through this research, the team was able to pull together four key user personas—the Builder, the Guide, the Synthesizer, and the Detective. Now, user personas differ from the marketing personas you’re probably used to hearing about. Marketing personas refer to prospective buyers, whereas user personas are behavioral archetypes of actual users, emphasizing behavior and not demographics. User personas really get to the heart of why and how your customers utilize your platform. UserIQ’s research examined the nuances of what users say they do versus what tasks and activities they actually do in our platform.

Getting the Ball Rolling

Since the topic of user personas could probably be an entire blog post in and of itself, I’ll leave the explanation there. But to summarize, we had insightful research and a powerful product to work with, so we felt great about our starting point for design updates. That being said, we needed to get serious about establishing a more formalized design system for the UserIQ platform. 

What is a design system and why do you need one, you ask? Whether we have it in our title or not, everyone at our company contributes to the customer experience, and we each have the opportunity to intentionally design it. Because we all have this opportunity, we need to align with basic standards in order to design cohesive and empowering experiences for our customers—from the moment they’re first exposed to UserIQ through to their daily interaction with our platform as paying customers. Also, a design system is a critical foundation for any company to have as it expands its platform and capabilities. At UserIQ, we are currently building out some exciting new product features for the coming months, so it’s especially important for us to have a solid design system in place. A design system acts like a compass, orienting the team around common principles, which serve as a set of prepped ingredients—allowing your team to easily add new buttons, tabs, and page layouts that showcase new features, but without having to reinvent these patterns every time.

These living and evolving standards—comprising design principles, aesthetic standards (including colors and typography), interaction design patterns, brand voice, copywriting guidelines, reusable front-end code components, and more—are what make a comprehensive design system that can be leveraged by all departments.

The North Star

When creating a design system, it’s easy to simply pick colors that look good together, type that’s clean, and design patterns that are trending. A strong design system, however, is built on foundational design principles that inform and act as a measure of all design work that is produced by the company. We likened these design principles to prepped ingredients earlier, and that analogy really holds true here. As designers, we’re like the sous chefs who are chopping up veggies and preparing the sauces so that the chef can easily pull together the entree.

Using all of that research and preparation, the team established UserIQ’s seven design principles. Here’s what we drew up to describe design at UserIQ:

I’m sure this sounds all well and good to you, but you might be asking, “How exactly do these principles translate to actual product design?” I’ll walk you through our thinking on some of these design principles, along with some examples of how we put these guidelines to use in real life.

(1) Honest and approachable

This principle refers to ways that we can make the app as straightforward as possible. Using plain English to say exactly what we mean, and speaking in the same voice and tone that our users do. Wherever we’re seizing an opportunity to make things less confusing and more inviting for the users shows an example of how we utilize this principle.

(2) Consistent and reliable

Consistency is critical with any SaaS application. Ensuring that customers have some level of certainty and predictability in their experience is key. We want to make sure things like number and date formats are consistent, along with a consistent appearance with our colors, buttons, filters, graphs, and other design elements.

(3) Communicative and orienting

This principle is here to help our users understand where they are at any given point, where they can go, and what users are able to do from a given screen (for example, by providing help text and tooltips so users can understand what certain metrics mean or how certain actions lead to specific results). In a nutshell, all in-app communications should strive to be as directive as possible, so that the user can easily find their way.

(4) Learnable and simple

The easier it is for users to navigate your app on their own, the better the user experience. For example, we always want to strive for a minimalist interface—making actions you can take from a given screen explicit, designing graphs with clear and concise labeling, minimizing use of specific lingo and abbreviations, and using design patterns we’re familiar with in other tools our users interact with in their daily lives.

(5) Empowering and supporting

All users have to feel supported during every phase of their customer journey. One way we do this is by making the product more accessible. For example, text colors should appropriately contrast with their backdrops (for readability). We also want to provide help along the way. If data is missing or not populated for some reason, we need to always have a concise explanation as to why the ’empty state’ exists and how to remedy it. We should always be seeking ways to provide users with quick and specific assistance in the platform.

(6) Thoughtful and anticipatory

With all of the user persona and customer journey research we’ve done, we know a lot about typical user workflows. This principle means that we’re always trying to find ways to anticipate what users will want to do next, and to add options, new descriptions, and specific guidance to continually improve the user experience.

(7) Delightful and positive

Yay! The fun part. UserIQ does a great job with developing fun in-app campaigns that showcase a more playful personality and brand. But, we admittedly have more we can do to increase the delight and positivity within the app features themselves.

UserIQ’s New ‘Do

While there is still work to be done to optimize our platform from a design perspective (after all, it’s an ongoing effort!), we recently made some updates to our app that reflect some of our newly outlined design principles. There are a lot of updates where we’re making the platform’s look-and-feel cleaner, simpler, and we’re adding more areas of contrast for readability. Check out the progress we’re making thus far!

New Header

Below are some more detailed explanations of the header updates we’ve made (as you can reference in the image above), and the design principles that they adhere to:

• Anchoring the app with a dark purple header color that aligns more with our marketing brand guidelines (#2 Consistent and reliable)
• Adding icons to each of the menu items (#3 Communicative and orienting)
• Clustered all menu items on the right side, instead of having some on the left and others on the right (#4 Learnable and simple)

Graphical Changes

There are many graphs within UserIQ’s platform, but here is just one example of how we revamped the design of the Sessions and Users Over Time section of our dashboard: 

• Increased the contrast among colors within graphs to enhance readability (#3 Communicative and orienting)
• Removed dotted line graph and bar chart elements to create a simpler, more cohesive look (#4 Learnable and simple)

List Page Updates

There also are a few areas within the UserIQ app where we have lists (Segments, Campaigns, Event Notifications, Journey Paths, etc.). The new Segment list page is copied above and here are some of the design updates made to this page:

• The hyperlinked name of the segment (that you can click into for more details on that segment) is now a darker colored teal that is underlined to clearly indicate that it is a hyperlink (#3 Communicative and orienting, #5 Empowering and supporting)
• The Create a Segment button on the top right has been redesigned to add contrast and more closely align with other similar buttons across the app (#2 Consistent and reliable, #4 Learnable and simple)
• The number of Segments in scope has been added to let users know how the filters they select impact the number of segments they are viewing (#3 Communicative and orienting)

So, What’s Next?

There’s always a ‘what’s next’ when it comes to design. Our UX team’s work will continue and expand as the year progresses and as our platform grows. If we haven’t mentioned it before, know that UserIQ has some exciting new product capabilities in our 2020 roadmap. 

By having a well-defined design system in place, we are able to lay the groundwork for all of these new features and product updates to come. Adding consistency and simplicity to our design helps make processes repeatable, so that we can get up and running with new page layouts and feature additions without having to start from scratch.  

Stay tuned for more from the UserIQ product newsdesk!