Chrysalis is a platform for mobile and tablet that helps retail store management visualize and monitor product sales and customer feedback which can be leveraged into actionable employee development.
Store managers and 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.
In order to create a successful brand or product, you first need to understand the needs and wants of the end-users. User persona’s help keep the potential customer in mind every step of the design process. For this project, two persona’s were provided.
jackie: boutique manager
Looking for a glanceable way to digest both employee and the store’s performance
Wants a way to measure customer feedback that is specific and actionable for delivering feedback
victoria: regional director
Looking to create a benchmark to measure store’s performance
Needs a way to easily pinpoint weaknesses in stores
There are many existing products and companies that collect customer feedback and employee performance. My team and I researched a number of competitors to analyze common visual trends as well as product features in order to help guide our design decisions with our product.
Companies Evaluated: NICE Satmetrix, HubSpot, Qualtrics, Ask Nicely, Survey Monkey, BirdEye Zendesk & Clarabridge.
Blue, Green & Red were most common colors used in data & graphs
White or light grey backgrounds, almost sterile light palettes used in most competitors
Sans Serif typography with varied weights were used to assist visual hierarchy
Data & Graphs were the most eye catching elements in competitor platforms
Competitors rely on cards and widgets to differentiate sections
Few competitors use visual indicators to incentivize employee development
Many products have poor color contrast or consideration for color-blind users
Lots of small thin typography which raises legibility concerns
In order to define the visual style of Chrysalis, I explored three potential style directions. First I created mood boards to choose potential colors and overall brand tone. Those mood boards were then developed into refined stylescapes that include typography, palettes, and data representations.
This style is inspired by small boutiques and local shops. This style is playful, friendly, nostalgic, warm, and welcoming.
The second style has a more corporate and professional tone, using a minimal blue and gold color palette. This style defines the product as professional, calming, trustworthy, and reliable.
The third style is loosely inspired by vintage computers and science fiction graphics by using experimental shapes and vibrant greens to resemble old monitors. This style defines the product as fresh, futuristic, and vibrant.
Our design team each voted to select one of our designs for desirability testing, and Digital Mint was selected as my design direction to proceed with as it was the most unique and modern of the three. Boutique is very colorful but potentially too niche for a broad audience. Golden Rule was perceived to be a bit too sterile or corporate for the intended audience.
Style Desirability Testing
Our team conducted user interviews on the desirability of our individual stylescapes with 9 individuals in the US and UK. Our goal was to gather their feedback on chosen color palettes, perceived brand tone, existing brand resemblance as well as their likes and dislikes regarding typography and data representations at this early stage in our design process. When asked, all of our participants stated that the visual style is very important to them when selecting an interface to use for their daily workflow.
The green used was too bright for many users, consider a darker shade
The color palette should be broadened to assist with glanceability of data
Graphs should remain fairly standard as overly experimental designs can confuse new users
All data needs to be clearly labeled in the final product
Body typeface is too thin and raised legibility concerns
Wireframes for mobile and tablet were provided for this project. These helped our design team understand the general user flow and the required pages and modules for this product. The challenge of this product is to design an interface that can work on various screen sizes and while offering the same functionality and level of glanceability.
Our team established some guiding design principles to keep in mind through our design process to keep our work to a high standard keeping the end-users time and desires in mind.
Colorful & Engaging
Users’ attention is grabbed and then held in the right moments with color usage and visual hierarchy in an intentional way. All data is displayed using a colorblind safe palette to improve glanceability for users. Color is also used to highlight those employees that require feedback.
Keep It Human
Being empathetic with the user, keeping the user emotions and frustrations in mind throughout the entire design process. Text is large and easy to read, data is is represented in a traditional format and the layout uses common design systems to keep navigation intuitive.
All screens, especially graphs and data are kept obvious to avoid ambiguity or confusion. Graphs utilise large sections of color and filling in negative space to assist the user with identifying trends and areas of opportunity regarding customer relationships and sales goals.
After our desirability testing, I began the process of translating the tablet wireframes and style into high-fidelity screens.
Tablet User Testing
Our second round of user testing focused on the tablet designs. Similar to our desirability testing, our goal was to evaluate our users opinions on the color palette, typography, graphs and UI elements.
This first version of Chrysalis received positive feedback, and participants were able to provide some valuable insights to address in future iterations.
Increase the visibility of employee status rings
Include neutral customer feedback rating
Reduce number of colors used for employee attributes
Increase spacing between text and widget borders
“I really like the color scheme that’s going on here… the strict red and the green here, was pretty clear what’s improving and what’s declining.”
“Intuitive, very straightforward as to what is interactive and what isn’t. I really like how they divided up a lot of the charts within the same block; being able to switch between the two different tabs.”
“I struggle with the bubbles. I’m not sure if its because that font shouldn’t be used in a small font size or the color of the bubble and the text color is an issue.”
Building on the feedback from the tablet user testing, I designed a mobile phone version of Chrysalis. The challenge of this was not only to translate the visual elements into a glanceable format for smaller vertical screens, but to introduce micro-interactions into a functional prototype.
Graphs and data now animate upon loading a screen, which creates a more engaging experience for the user.
The navigation bar was modified to work within the small screen size, and new animated elements were added to help the user keep track of where they are in the application.
Users can now use swipe gestures to update an employees feedback status.
Tablet User Testing
Our final round of user testing was focused on the mobile prototype, further evaluation of the visual aesthetic, and the desirability of newly introduced micro-interactions. Participants continued to react positively to Chrysalis, and received the highest rating amongst the 4 prototypes they tested, with a task completion rate of 97%.
“The animation behind them grabbed my attention, I wanted to look more into them and it truly didn't take long for me to figure it out.”
“Prototypes I saw with like this coloring around the people which I like. This isn’t a screen that tells me how they’re doing, but there’s still a color indicator that gives me that feedback about how they’re doing.”
If I were to continue to develop this platform, there are some elements I would address based on user feedback and personal motivation:
Introduce subtle textures or gradients into graphs to develop the visual aesthetic further and keep designs from being flat. This could also assist usability for color blind users.
Moving the navigation on mobile to the bottom of the screen for a more standard experience
Add visual indicators to screens that use swipes and gestures to assist new users
Avoid abbreviated words which can confuse some users
Designing a data focused platform was a new experience for me, and initially very challenging to wrap my head around establishing a visual style. My intention early on was to make this as engaging as possible considering a project of this sort could easily look very boring and uninspired. User testing was very beneficial to the success of the Chrysalis platform, and the increase of user acceptance after each round was very obvious. The initial stylescape was the lowest ranked on the team, and by the end of the project is was the highest ranked! Several participants expressed that Chrysalis was significantly more polished and engaging than the tools they currently use.