Herd
An administrative portal for store managers, improving their ability to access associate insights and determine employee training opportunities
OVERVIEW
Herd allows shoppers to rate their interactions with store associates. The platform measures individual associate performance and tracks business goals, offering data that can be leveraged to improve customer service strategies.
ROLE
UI designer
Brand designer
Interaction designer
DURATION
The goal of this project was to design a refreshed look and feel for the Herd brand and responsive mobile site.
5 weeks
The Problem
The scope of this project rebrand included naming the platform and designing a logo as well as creating a design system and applying it to a set of provided wireframes. With regard to the UI, I set out to create a look and feel that prioritized the following:
ENGAGEMENT
Our brains can simply shut off when viewing data. The interface had to be interactive, delightful—but never distracting.
DIGESTIBILITY
How can we make data visualizations less intimidating and information more glanceable?
Research
In order to better position Herd in the market, we conducted a visual analysis on several direct and indirect competitors. We ultimately discovered that, among competitors, there were two prevailing design directions:
BOLD & FUN
MINIMAL & PROFESSIONAL
In terms of functionality, we also noticed that similar administrative portals incorporate modular, flexible layouts more often than not, as they serve a variety of businesses with diverse needs and goals.
Competitive analysis to identify branding opportunities and compare features
Design Principles
After gaining insights from exploring the competition, we converged on a set of design principles to guide us throughout our project.
CLARITY
Prioritize clear labeling to make sense of data and remove information barriers.
INCLUSIVITY
Be flexible in scope and functionality to account for diverse needs.
ENGAGEMENT
Be bold. Create visual interest with regard to functionality.
Through the lens of our design principles, I applied the UI elements from my most user-favored style tile to the wireframes. We tested our initial prototypes with subjects who had employee management experience, experience with CRM systems, and some retail or foodservice experience.
I received and the following user insights about my first high-fidelity design:
FUNCTIONALITY
"What’s the point? Does it rate my individual employees? Give me data? Is it somewhere that I manage my goals?"
"It does a lot of things that in theory go together well, but I don’t know if they’re married in the right way here."
Assorted modules
VISUALS
"It’s too green and the pixilated logo doesn’t fit."
"I want more personality."
"All the modules look exactly the same—like powerpoint graphics, like wireframes.”
Menu & module
First Concept
Iteration
Based on feedback from user testing, I reexamined the wireframes with a more critical eye. This led to a major pivot in the project. I decided to make the functionality of the product more cohesive by cutting most of the graphs and all of the nitty-gritty business analytics.
REVISED FUNCTIONALITY
My mobile-first web app is devoted to customer feedback and goals—only the most glanceable data, because the user is on the go.
More advanced functionality could of course be included in the desktop version of the platform.
Selected pages
Menu & module
REVISED LOOK & FEEL
In order to create visual interest, I diversified the modules, reducing the cognitive load on users who previously struggled to tell them apart.
I also made the color palette more robust and used an iconographic motif to aid in the storytelling aspect of the platform and add brand character.
The Solution
This final iteration of Herd is grounded in user feedback. It ultimately offers value to our target audience by adhering to the brand principles established at the onset of this project.
CLARITY
Modules come with info icons, just in case the user requires context or further elaboration.
INCLUSIVITY
Because every business is unique, Herd features a modular homepage, so clients can prioritize the metrics important to them.
ENGAGEMENT
In addition to the expanded color palette and iconographic motif, microinteractions have been employed to foster engagement.
Handoff
At the end of the final design sprint, I compiled all of the relevant materials into a Zeplin document.
These included a the logo and several icons I designed, including the information robot.
Zeplin styleguide
Takeaways
After completing the first version of my high-fidelity design, I knew something wasn’t quite working, but I wasn’t sure what.
The aha moment came with user testing. Through interviewing participants with management, CRM systems, and retail experience, I discovered that Herd was missing personality. It was dull. More importantly, users had trouble differentiating between the modules. The UI had become a blocker.
Fortunately, design is an iterative process. The problem redefined, I set out making the functionality of the site more cohesive, the look and feel more engaging. This project demonstrates my ability to empathize with users, to ideate on feedback, and to be agile. It was a difficult, often frustrating process, but one that greatly improved my skills.