Hüma Interface Design

After

Just want to see the final product? No problem. Our process will be here when you’re ready to read all about the journey to get there.

Show me what you did

Project Basics

Client

Retail store managers use Hüma's platform to track business performance, manage employees and collect customer feedback for analysis.

Brief

We were tasked with updating the design for Hüma, a retail management and business analytics toolset. We designed a platform for busy store managers who must track employee schedules, keep an eye on stock inventory, ensure HQ-mandated store updates are happening, handle customer service interactions and prepare sales reports for upper management. Throughout the process, we worked to bring human empathy into an otherwise statistics-based platform in order to help managers better understand the relationship between customer experience and sales.

My Role

My teammates, Anna Freimoth, Jonah Heath and I worked in collaboration to perform a competitive analysis, exploratory research, and conduct three rounds of user testing. Individually, we created three rounds of design iteration including high-fidelity designs and prototypes, microinteractions, and a full design system.

Tools Used

Sketch
InVision, InVision Studio & InVision DSM
Keynote
Google Docs & Sheets
Miro

Timeline

6 weeks

Platform

Tablet

Let's start with the good stuff:

Lessons Learned

The best part of each project is the opportunity to learn something new. I love the exploratory research phase and the user testing sessions of the design process because they’re an opportunity to learn something new. Don’t get me wrong, the actual designing part is still where I get my kicks, but it’s just so satisfying to go into a project with some real knowledge.

Plus every insight gained adds another layer of empathy and understanding to my knowledge base as a designer. How good is it that we won’t ever reach the point where there’s nothing left to learn? *nerd celebrate* I digress. User testing revealed a lot of insights that could be carried forward into future projects.

1. Efficacy beats beauty.

Good design must first and foremost be effective, and color can simplify data communication by making use of universal color patterns.

2. A little user control goes a long way.

One of our test participants, Casey, works in education and told us that people like to feel some sense of control in the things they use, especially through any form of customization because it makes them feel as though they are expressing their individuality. While the control might be a minor moment like choosing your profile image, the payoff is major in user perception. Providing users with the option to use the platform in either Light Mode or Dark Mode was a perfect illustration of that concept.

3. Familiarity breeds comfort.

The importance of making use of universal patterns cannot be overstated. While all design work was individual, the project itself was a team project, and throughout all three rounds of testing, users responded far more positively to designs that felt familiar to them.

The Challenge

Store managers are responsible for a lot of things. They’re managing employees and their schedules, keeping an eye on stock inventory, ensuring HQ-mandated store updates are happening, handling customer service situations and preparing sales reports for upper management. So when it comes to their management platform, it’s important that it’s showing accurate and comprehensive business analytics in a way that’s easy to digest and turn into actionable insights. 

That’s the straightforward challenge, but we wanted to push that goal further. After conducting our research and analyzing our wireframes, we updated the problem statement to one that felt more effective and focused:

Customer feedback data can feel dehumanizing. How might we bring human empathy into an otherwise statistics-based platform in order to help managers better understand the relationship between customer experience and sales?

The benefits of keeping the focus on good customer service

Revisiting the general layout and feel of the interface to identify opportunities for restructuring content for clarity would reduce cognitive overload, and utilizing familiar design patterns would improve overall flow and navigation.

Refreshing the product interface would enhance user experience and increase perceived ease of use.

Design Systems create cohesion and familiarity by standardizing the design patterns and elements within a product. It takes the guesswork out of the process for developers and ensures all future iterations and products stick to the established.

Provide cohesive visual foundation across their current digital platforms and products so Contract Cloud is able to be consistent and iterate with intent as they grow and expand their product offerings.

So how’d we get there?

We started with a lot of research

Competitive Analysis

It’s important to both understand what the competition is doing well, and where we could help Contract Cloud differentiate itself, so we analyzed two direct and three indirect competitors to Contract Cloud. We organized our findings into two categories: Patterns to Emulate and Opportunities for Differentiation.

Patterns to Emulate

  • Bright, clean colors to make the content feel more engaging.
  • Lots of white space to help information feel organized and clean.
  • Use of visuals (charts and graphs) to communicate data dynamically as well as informationally.

Opportunities for Differentiation

  • Utilize platform to keep customer experience as the main focus and the reason for employee performance analytics.
  • Connect CX mission to the brand differentiator.
  • Include ways for managers to ensure employee engagement with CX mission remains high - either identifying areas for employee training through platform insights or providing managers with information and tips on how to motivate and inspire their employees to provide better CX.
  • Ensure platform design is intuitive and easy to learn for managers within a wide age demographic.
  • Allow for customization within analytics tracked as brands shift focus or CX targets.

The Wireframes

We took our research and design challenge and created

Our Design Principles

Design principles are the guidelines, rules or laws that establish alignment across design decisions by holding teams accountable to a specific set of standards and values. The guiding design principles listed below are based on specific insights gained from the user testing and competitive/market research. They were used by the team to guide decision-making in the design process and ensure strategic alignment.

1

Intuitive to use

Being a manager is complex; using employee management software shouldn’t be. Our application will be simple enough to allow users to get their job done even if it is their first time on the platform.

2

Brand fluid

Branding between our clients varies. Our platform is flexible so that it goes well with a range of brand aesthetics.

3

Never not human

Each component of our design will be broken down and optimized to make sure that not only our designs are human focused, but our users are as well.

4

Limit distractions

We provide a streamlined platform to reduce cognitive load and prioritize the content that matters most to the user so that they can get the information they need quickly.

First Iteration

Moodboards

In addition to creating designs that embodied our defined design principles, my goal for the moodboards and style tiles was to differentiate the platform from the competitors visually through color palette and visual style. The competitors’ platforms generally felt bland or even boring, so an easy way to set Hüma apart from the crowd was by creating a visually dynamic interface that worked as well as it looked.

Not just pretty faces, Moodboards and Style Tiles provided design direction that we could test with users

Style Tile A

The interface is kept simple to help focus the viewer’s attention on the information that matters most to them. The occasional instances of neomorphic design along with patterns that wrap over or under interface elements, play with the sense of perspective and create visual interest.As seen in the moodboard, there is some reimagining of what the data representation might be. For instance, instead of using only numbers to represent customer satisfaction, an animation might be shown that displays that information using an illustration of a customer with varying facial expressions that range from very unsatisfied to very satisfied.

Style Tile B

One source of inspiration came from my own experience working in retail. The managers’ office with the computer they would use to manage the employees, store analytics and customer feedback was always located in the back of the store, and was usually a poorly-lit, windowless room. My own eyes are sensitive to bright lights in dim lighting, and I use Dark Mode versions of every program I can and used that as the inspiration for this design.

Rather than a true black, I used a charcoal grey that felt just a little softer on the eyes. With the charcoal grey, I could use much brighter accent colors that popped in fun and exciting ways without the strain that comes from a high contrast pairing. The playful color palette is also reflected in the menu navigation indicator.

Style Tile C

One of the primary inspirations for this design is the wire bead maze toy that is found in every pediatric office. In considering our design goal, I wanted to create something that would engage managers in the platform, so I looked to pull that feeling of tactile discovery through this design. The neomorphic design of the buttons entices the user to press them and the use of sliders and levers to show the different chart forms bring that element of playfulness and enjoyment.

Knowing that management platforms can feel boring and data heavy, I felt that creating a design that felt more fun and playful would help managers feel more connected to the data, and ultimately more connected to the employees and customers behind the data.

The wire bead maze toy also pulls through the design as seen in the curving, intersecting lines in the background of the screen - helping direct the user through the content, and bringing movement and fun. The colors are bright and cheerful, bringing a sense of energy and positivity to the platform.

Now, about those user tests...

Testing Strategy

In total, we conducted three rounds of desirability testing with 13 participants in all and a mixture of 6-7 new and returning participants in each round. Testing methodologies used were Open-Ended Preference Explanation and Structured Word Choice. Designs from each team member were included in all the testing rounds which provided us with the opportunity to broaden our user insight and deepen our design knowledge even as we continued to develop our designs individually.

During the course of each round of testing interviews, the users either uncovered or confirmed some key insights that encompassed all design directions and often related back to many of our established design principles. Those key insights along with the new insights were then applied to the following round of designs, and each consecutive round tested the updates applied from the previous round so that the designs and the tests built upon each other. At the end of our testing, we compiled the test results from all three rounds along with our synthesized findings into a Desirability Test Report.

Testing Goals

The overarching goal of these interviews was to gauge effectiveness of various divergent design directions and ultimately pin down a visual language which would resonate with our users and further our overall design objective of keeping the customer service experience front and center. Our team hoped to learn:

  • A clear understanding of which design elements were working well and what areas could be improved, but most importantly, the "why" and the "how" behind them
  • A clear understanding of which design direction would be optimal to move forward with and how the participant feedback helped determine that decision

User Testing Demographic

Retail managers come from a variety of different ages and job experiences so we targeted an audience that closely emulated the average demographic of managers. Some of the main criteria we used to vet our interviewees was:

  • Age: 21-60
  • Job Experience: either management experience, or experience working in retail
  • Gender: we were interested in all genders
  • Experience with similar programs: we were interested in experience at all levels as inexperienced users would provide valuable feedback on the clarity and perceived navigability of the interface, while experienced users would be able to quickly identify positive and negative aspects based on their direct experience

Affinity diagrams help identify patterns and key insights

User Testing Takeaways

During the course of our interviews our users either uncovered or confirmed some key insights that encompassed all design directions and often related back to many of our established design principles. These insights were then applied to our next round of designs:

  • In a B2B platform, consider the branding of your potential clients - your platform should be flexible enough that it works well with a wide range of brand aesthetics.
  • Creating clear hierarchy in typography, colors, and visual elements is key to designing an intuitive design - managers want to be able to quickly glance at a screen and see the information they value most first.
  • In technical interfaces like these, it helps to use color to signify positive and negative states of certain design elements as well as guide the users attention without overwhelming them.
  • Icons and layouts felt familiar which enhanced the intuitive feel that users knew how to read and understand the interface - despite the lack of exposure most users had to procurement and CRM platforms.
  • White space plays a key role in perceived cleanliness of a design.

Style Tile A

The takeaways for this specific tile were:

  • In general, participants liked the color combination and design elements but when it came down to it, they weren’t totally sold on the colors themselves.
  • Participants had mixed reactions to the use of an illustration to bring a human element, with just a couple more users in favor of it.
  • The neomorphic style was also a polarizing element for participants, so the next round should soften the shadows further, or simply remove it altogether.

Style Tile B

The takeaways for this specific tile were:

  • While 5 out of 7 participants chose “Fun” to describe this style, participants preferred the other two options over this one.
  • In general, the color scheme felt a little too bright to users.
  • While a few users liked the dark background, most participants didn’t like it and wanted to see a white background.
  • When it came to content, participants generally felt that it was easy to read and understand the data.

Style Tile C

The takeaways for this specific tile were:

  • 6 out of 7 participants chose the adjective “Fun” for this style tile, and “Professional” was selected 3 times for this style tile.
  • The majority of participants said they felt like the information present was clear and easy to read.
  • In general, participants liked the styling of the buttons and slider, but they didn’t appeal to all the users.
  • Despite the generally positive feedback for this Style Tile, it was felt to be perhaps a tad too playful for its intended purpose, and pulling back on some of the playfulness would help it fit the profile better.

Challenges

Something that's interesting to note, is that testing style tiles with users who are unfamiliar with the concept is not easy, because they have a hard time (very understandably) considering the  elements they're seeing as individual elements and not part of a finished interface design. Our team had a difficult time explaining the concept to our user interviewees in a way that made sense despite multiple strategic approaches. It ultimately begs the question, should style tiles remain an exclusively internal tool?

Second Iteration

High Fidelity Designs

While users were split between Style A and C as their favorites, I chose to continue developing Style A because it was ultimately more aligned with the overall user feedback. Based on the user feedback for that specific tile, I revisited my color palette and removed the neomorphic effect. While users had disliked a dark background as the primary background, I decided to build out my original goal of having a Dark Mode version of the platform because I felt like it was a design feature worth exploring in another round of user testing. But this time I made it a choice instead of the default.

You can check the prototype out yourself by clicking on the button below!

Take me to the prototype

With a design direction determined, I needed another round of user testing to understand how well (or not) the design was working

Testing Goals

The overarching goal of these interviews was to evaluate the visual language which each team member chose in order to iterate and improve the designs.

  • A clear understanding of which design elements were working well and what areas could be improved, but most importantly, the "why" and the "how" behind them
  • How the design would affect the users' ability to perform tasks, positively or negatively
  • How the design would affect the user's experience within the platform

Developing the Dark Mode option was the right move, because within context, users loved it

User Testing Takeaways

One big note was that the illustrations felt a little bit like an afterthought, and while every participant understood what they were communicating, they didn’t feel natural or useful enough to justify their use.

Layout

  • In general, participants felt like the layout was clean, and easy to read and understand. Making strong use of white space helped contribute to that feeling. The two most chosen adjectives for this design were “Practical” and “Professional” because of the layout.
  • Most people responded really well to the Dark Mode setting, and almost liked it better than the light mode, though it would not replace the Light Mode.
  • Navigation felt really clear and easy, and generally each page had a clear hierarchy, with the exception of the “Today” page - the users felt like the elements were a little too close together and the content too small.
  • Making use of modals for descriptive information in platforms like this is very important - consistent feedback we received is that having descriptions in the cards caused them to feel busy, and that consistent users would not need to see that information displayed up front. If this were a desktop program, making use of hover states would work as well.

Color

  • Color Usage
  • Assigning purpose and meaning to color combined with consistency in use plays a crucial role in the readability and clarity of communication of the content for the user. Having clear meaning behind the color usage makes the designs more intuitive and instantly understandable.
  • Use of red colors when detailing employee performance gives off a negative tone. It works with store performance, but for real people the colors should be more neutral and less harsh. Additionally, users felt as though showing increases or decreases in employee feedback scores didn’t feel like it was either helpful or promoted positive motivation. Users felt like it would be important to understand long term trends, but showing arrows that resemble stock market tickers felt dehumanizing for the employees.
  • General Color Feedback
  • Most participants responded positively to the updated colors and use of colors in this design. Its communication was understood on a high level, with a few instances called out where clarity could be improved, specifically the difference between the bright “positive state” green and the green used in the branding, as seen on the "Compare" page.
  • The colors used provide enough contrast for general readability and accessibility, but they also ended up making the platform feel a little boring and dated to some of the participants, so for the next round it would be worth exploring different ways to bring some personality into the platform without it being distracting.

Typography

  • Based on this round of research it’s worth revisiting the typography in this design. Some participants loved the serif header, but most found it distracting and more importantly, felt like it created a splintered design focus. They much preferred to see san serif used throughout the design. The san serif used, while unoffending to most, felt boring enough that it was better to find a font family a little more interesting.
  • Overall, participants agreed that the hierarchy in the type was clear and strong, with a few exceptions where the headers felt too similar in size.
  • Sizing-wise, the body should be bumped up a bit because it was small enough that users found themselves squinting just a little to read it. On the flip side, the headers were found to be a little oversized and needed to go down a point or two.
  • Sizing and contrast of both colors and copy was important for readability and clarity - this was something that users called out when the text was too small or the contrast too low to read, and it was interesting to see the difference in screen quality between participant’s screens.

Third Iteration

High Fidelity Design

Based on the insights gained from the second round of testing, I updated the brand color to blue in order to create greater distinction between the colors used for communicative purposes and those used for neutral branding purposes.I also updated the font family and adjusted the text styles to create clarity in hierarchy, and I made layout adjustments to make better use of the space within the platform, and got rid of the illustrations entirely.

You can check the prototype out yourself by clicking on the button below!

Take me to the prototype

Testing Goals

This iteration we were focused on continuing to refine our individual designs, so our testing goals and strategy carried over from the second round of user testing. Each round of testing got us closer to a better solution, and by keeping the same plan and goals, we were better able to pinpoint any changes in user reactions.

  • A clear understanding of which design elements were working well and what areas could be improved, but most importantly, the "why" and the "how" behind them
  • How the design would affect the users' ability to perform tasks, positively or negatively
  • How the design would affect the user's experience within the platform

I found out in this round that my designs now felt busy because there was less white space around the elements

User Testing Takeaways

This iteration was definitely the best received yet, with just a small areas which were called out as still in need of refinement.

Layout

  • Levels of information are important for providing context without visually overwhelming the user. This includes explanatory text which gets moved to a modal dialog.
  • Users appreciate the ability to customize platforms - it makes them feel as though they are expressing their personality. Even something as simple as having a light mode and a dark mode can create that effect.
  • Interestingly, between Round 2 and Round 3, user feedback changed from the design feeling clean to feeling busy, which was chosen by 5 out of 6 participants as one of the adjectives that best described the design. Fixes for the perception of busyness would include moving more information to a modal state, such as the percentages on the overview graph, and removing the benchmark performance.
  • Despite increased perception of busyness, the second most chosen adjectives for this design were “Engaging” and “Professional” because of the layout, the use of colors, and the readability.
  • Navigation felt really clear and easy, and users liked that the icons changed color to highlight which page they were on.
  • Users wanted to see the profile image on the upper right-hand corner of the screen because that felt like the location they were most familiar with.

Color

  • Generally participants felt like the color usage was both clear and consistent.
  • Areas of opportunity included bringing a little more brightness to the darker blue to make it feel fresher, and bringing the CTA blue more in line with the rest of the color palette.
  • Another potential issue area raised were the colors used in the graph on the “Compare” page because a color-blind user might have difficulty in distinguishing them.
  • There were a few individual negative responses from participants about the neutral and negative state colors and their usages, but because they didn’t align to the majority opinions, I felt that it would make more sense to explore them with further testing before making any major changes.

Typography

  • Participants felt like the typography was really clear and easy to read. Part of what contributed to this was the high contrast in the majority of the copy, and the relative size of the type.
  • The only area really highlighted for readability issues was the negative state on the dark mode.
  • While not a readability issue, one participant did mention that the text styles generally felt so similar that on copy-heavy pages he felt like he had to work harder to see patterns in the copy. A fix for this could be introducing additional shades of the main copy color, adjusting sizing a little more, or even spacing elements out further to create clearer groupings of information.

Overall feedback was very positive, but I felt like I could really level up with one final iteration...

The Final Design

Final Design Breakdown

Based on our third and final round of user testing, I felt like I needed to make another update to the platform even though it wasn’t required. The opportunity to level up was just too tempting to pass up.

The navy blue felt static and outdated to users, so I replaced it with a more vibrant blue and made a number of small adjustments throughout the platform to finesse the design overall.

Design System

The Design System for this project was minimal as there were only two days allotted in the schedule for it. The purpose was to practice creating systems and thinking strategically about the elements and patterns included in one.

Microinteractions provide another layer of communication to the user through feedback

The Splashscreen Microinteraction

The splashscreen is the first interaction a user has with the platform and it should make them feel interested and excited to use the platform. I kept the animation simple because users don't have a lot of time to waste, so it should be quick and effective.

Automatic and Manually Triggered Microinteractions

To help make the data feel more dynamic and engaging, I envision the performance bars growing to their appropriate data point. All the transitions between sections and filters would be smooth to boost user confidence in the robustness of the platform.

Hover/Tap Microinteraction

A key piece of feedback we heard over and over again from our users was that they wanted to move as much information as they could to a secondary level, so modal states were recommended throughout. This worked especially in some of the more detailed charts and diagrams. Users could understand top level information at a glance, then explore further to get more details.

Project Success

This was an interesting and truly multi-faceted challenge to tackle, and in a real world scenario there would be a lot of different perspectives I'd want to explore in order to understand the dynamics between each one and ultimately how they relate to the customer, the sales associate, and the store manager. With so much complexity in the challenge, the target for success would be equality multi-faceted.

Things I'd want to measure beforehand and afterwards would be:

Customer Satisfaction

Our research showed that it's much more cost effective to retain customers than attract new ones, and it also showed that it's easy to lose customers from just one negative experience. So with our goal to strengthen the connection to the customer trickling down from the manager to the sales associates interacting with the customer, I'd be looking to see changes in the customer feedback before and after the product platform update.

Sales Associate Satisfaction

Just as customer retention allows businesses to increase earnings, employee retention is also financially beneficial to the business. The goal of having the platform feel human-centered extends to the sales associates as well. I'd like to know how happy and satisfied the sales associates are with their manager interactions and their management style.

Sales

Ultimately, business need strong sales to thrive and grow, and this was our ultimate goal in choosing a human-centered approach to the platform design. While there would be many other factors affecting the sales to be taken into account, I'd at least like to see if there are changes.

Next Steps

No project is ever truly finished. There's always something else you wish you could have done but were prevented by either time, budget, ability or some outside factor. These are the features/refinements/updates that got away.