Page Navigation
Retail store managers use Hüma's platform to track business performance, manage employees and collect customer feedback for analysis.
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 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.
Sketch
InVision, InVision Studio & InVision DSM
Keynote
Google Docs & Sheets
Miro
6 weeks
Tablet
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.
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?
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.
Our research showed that there is a strong positive correlation between good customer service and sales. 51% of consumers will walk away from a business after just a single negative experience and on the flip side, 17% of U.S. consumers (21% for Millennials) are willing to pay more just for good customer experience.
It’s estimated that U.S. companies lose $62 billion annually due to poor customer service. Retaining customers can have a positive impact on sales as well.
Improving customer retention by just 5% can increase profits anywhere between 25% and a whopping 95%. The research was clear: good customer service equals profits.
With the assurance that good customer service translates into sales, we felt that the best way to ensure that positive customer experience was to begin with the managers. Managers set the tone for the workplace. Their leadership and the example they set for their employees will often directly affect employee motivation and their own experience with customers.
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.
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
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
Branding between our clients varies. Our platform is flexible so that it goes well with a range of brand aesthetics.
3
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
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.
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.
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.
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.
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.
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.
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:
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:
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:
The takeaways for this specific tile were:
The takeaways for this specific tile were:
The takeaways for this specific tile were:
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?
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.
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.
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.
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.
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.
This iteration was definitely the best received yet, with just a small areas which were called out as still in need of refinement.
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.
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.
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.
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.
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.
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:
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.
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.
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.
