User Interface Design
Member of a 2 Person Team
Soar is a tablet app for managers of retail locations that allows managers to use customer feedback to improve employee/customer relationships and increase store performance.
Our team of 2 was tasked with designing the UI for the management administrative portal of the feedback platform
Our stakeholder presented us with a customer feedback platform where shoppers could rate their experience with employees in smaller, boutique stores. The goal was to design the management administrative portal that improved store managers’ ability to reference associate and transaction insights at-a-glance and to determine employee training opportunities.
We were also provided with the following problem statement: Store managers as well as upper management need a dynamic interface that can display customer feedback analytics in order to clearly identify areas of improvement and examine the relationship between customer experience and sales.
An interface that clearly and effectively displayed data-heavy information that allowed managers to most effectively apply customer feedback suggestions to improve their employees and increase store performance
We began by researching the customer feedback and employee management interface market. We found there were two main sectors that our app was trying to umbrella - Voice of the Customer feedback software and Employee Management software.
Voice of the Customer
Voice of the Customer describes the in-depth process of capturing customer's expectations, preferences and aversions. Customer Experience (CX) is emerging as an important part of the consumer market. According to Forrester research, 41% of US consumers want to buy from a company that is closely associated with social, environmental or political issues. This was important to explore, we wanted our interface to teach managers how to use CX to help them improve. We focused on Forresters top 3 CSX platforms.
Cards/Modals to organize data
Minimal use of color
This brought us to a discussion about the link between CX and how the employee affects their experience - particularly in a boutique store setting as outlined by the stakeholder. Employee management is the effort to help employees do their best work each day in order to achieve the larger goals of the organization. How can managers help employees provide the best experience to their customers and track their feedback? Currently, employee management apps focus on payroll, employees benefits, time cards and promotions without inclusion of any CX feedback.
More human - focused on who rather than what
Brighter, more broad use of color
More icons and illustrations
Employee Management apps are directed at managers who need to track employees and their benefits in a more visually appealing way rather than a bland, more corporate feel.
There seemed to be a rather large market gap that our product could effectively fill. Because we were told that there was already a customer voice portion of our platform, we wanted to focus on how to direct that information to managers so they could support their employees and create a better customer experience in-store.
Design Statement and Principles
Using the information we gained from our research, our team took our provided concept statement and distilled it to something that could better guide our design direction.
"Soar is a tool for managers to easily and effectively review provided customer feedback and sales data to produce great customer experience and high employee productivity. We keep you well informed so you can organize your team to flaunt their best assets together to uplift them as well as their sales."
This led us to being able to define our design principles to guide decision-making in the design process and ensure strategic alignment:
In a data and analytic heavy interface, managers need to be able to quickly and easily gain information at a glance. We will achieve this with:
A clean, airy interface
Simple, but inclusive, layouts and data
Humanzing of customer/employee feedback is incredibly important to remind managers not only who is working for them, but that they are more than just comments on the page.
Photographs of employees increase humanity
Photographs should be included whenever an employee is mentioned
In order for a mangers to intuitively understand how to best use the platform, all patterns should be recognizable and common. They should be:
Consistent and familiar
Easy to understand
Color and cards should be balanced throughout the interface, providing the user with visual breaks as well as interest to keep them using the platform easily and comfortably. Color in particular should be:
Not overwhelming visually
Used sparingly and thoughtfully
In this moodboard I wanted to create a feeling of space and comfort. The softness of the shapes along with the generous whitespace is well balanced by lush colors to make pertinent information obvious and digestible. Due to the statistic heavy information I wanted to make sure that there would be enough contrast and space to not overwhelm the user
The human element of managing employees inspired me to create this moodboard. I wanted to emphasize the lush, warm tones with rounded shapes and edges to create a comfortable, easy-going environment that would be lighter and straight-forward while still providing all the necessary information.
This moodboard focused on my desire to create an engaging interface that did not bore the user and kept them interested as they used it. The strong graphics paired with the light hearted energy felt fun and exciting. What better way keep a user interested in graphs and statistics?
User Testing - Round 1
To gain initial insight to our design direction, we interviewed 6 users. All users had retail management experience and were aged from 25-30. We began with a 5 second test to gain initial gut reactions and to see what immediately jumped out to users. Each user was asked a series of questions that focused on desirability of the designs to understand the motivations behind users responses and reactions. Finally, we asked participants to choose adjectives from a list for a structured word choice in order to aid users in describing what they did and did not like about the designs.
Style Tile A
In this style tile I wanted to evoke the adjectives soft, comfortable, lush, and light. The card colors are kept light to contrast the deeper colors of the information presented to not overwhelm the user. The icons and text are kept thin to keep the airy and light feeling and cards have soft rounded edges to keep the interface plush and soft.
Style Tile B
I wanted this style tile to evoke a similar feeling of lightness and comfort to the first one, but wanted to focus on the human, warm, and round qualities as well. The buttons, cards, and fonts are soft and round, providing a welcoming experience for the user. The warm browns and greens invite the user into a familiar interface that feels easy to use and interact with.
This style tile, while visually very divergent, has the same lightness at its core. It also is engaging, fun, and graphic. Keeping the information apart from the busy background keeps it digestable and understandable while not detracting from the fun bright colors. The icons are cheerful and lighthearted rather than heavy bold buttons, and sections are easily divided by bright outlines. The graphics keep the user interested and excited even while absorbing data heavy information.
The top findings of our first round of testing were clear:
Users reacted most strongly to straightforward content - specifically simple, bold graphs, clear icons, and obvious hierarchy. They did not like searching for information and enjoyed when it was well organized and presented clearly and pleasantly.
83 % of users rated Style Tile 2 their favorite, noting the soothing colors and the organic feel of the interface.
Users commented on the familiarity, they recognized features and icons and said that they felt like they would know how to use the app without much of a learning curve. This was an important note of most users - knowing that they would intuitively be able to use and interact with the app.
The most desired features were:
Photographs of employees to help users put a face to a name and increase the humanity of reading feedback from customers about specific people.
Customer feedback with timestamps to help managers understand when a comment was left so they could more accurately understand where the employee was or what they were doing
Easy to read, glanceable graphs of information that allowed users to quickly absorb information during their busy days.
We were provided with wireframes for the application by the UX team. While conducting an audit of the annotated wireframes, we discovered areas that had not gone through testing that we would like to improve upon and test with our users. We also wanted to explore adding additional information that was lacking. It was within our scope to discover opportunities to clarify the design to create a better user experience.
Use of whitespace and data organization
appreciation for “easy looking” colors and lower contrast for easy data digestion and understanding.
80% of users commented on the use of color and layout in particular
Color and contextual hierarchy were particularly important to users understanding what was represented and how to interact with certain features and elements
Room for Improvement
Some users struggled with finding and using features when not marked clearly by color or when not labeled obviously. This was clear in the sorting feature on the employee page. Unless directed with a specific question, users did not understand that the arrows located next to the titles of the page were able to be used to sort.
Lack of information or confusion about where information was coming from or what it was referring to.
Due to the little context provided with the wireframes, the high-fidelity designs we created lead to many questions about data delivery and presentation that continued to lead to poor testing results.
The most disliked asset was the tag cloud. Users wanted the option to turn it off or hide it once they understood how it was used. Another suggestion was to list the tags according to negative to positive so that they could be acted upon more easily.
After confirming that our users liked the interface and could navigate quickly and easily between pages, we created some microinteractions using Principle to further enhance user experience and support product communication to the user.
High Fidelity Prototype
With a solid understanding of users needs and desires, we began to move forward with a design that users would find easy to use and enjoyable. The team moved forward with creating a high fidelity design. This design went through 2 rounds of desirability testing to confirm changes made to the original UX wireframes as well as to gain insight into what users found helpful and enjoyed.
I would like to improve upon the sort features:
Employee page sorting needs to be made more clear.
Today drop down menu calendar to be more legible and usable
Increasing font size and padding around the numbers.
Providing an easy access “today” selection to immediately place the user at the current date.
Glaring problems were fortunately few and far between with the exception of the feedback page - in particular the emotion statistics that were provided. Due to lack of explanation and understanding on my end, I could not create a feature that users understood either. I believe there is a good use for this information and with some joint research a solution could be reached.
To continue forward with Soar, there needs to be more research into what managers are looking for in terms of tracking the emotion statistics and other statistics that are included from the customer forward app. It was difficult to define and explain to the users what was trying to be expressed to them because there wasn’t enough of an information base to create clear metrics. I wonder why this was attempted to be included and why the stakeholder felt it was important to learn from and present to managers to use to manage their employees.
I would also expand the manager facing interface to include the specific branding of each store it was related to - as well as defining Soar as a brand unto itself. There is a great deal of potential with branding and logo development I would love to explore that I only got to briefly touch on.
I am very happy with how well my design tested throughout this process. Overall, throughout the design fully encompasses the design principles. I am pleased with how I was able to take a complicated, not incredibly user friendly idea and create something that users enjoyed and found intuitive.
Learning through desirability testing was the most complicated piece of this process for me. Previously I had been testing complete user flows and testing for usability beyond user preference and it was a really interesting challenge to define good, actionable questions that lead to the qualitative data I wanted as well as measurable quantitative data. This process provided me with a solid foundation on how to continue forward with desirability testing in the future to gain repeated, measurable data on top of qualitative information needed to iterate and improve upon designs.