CXCMYK short.png

chrysalis

Project Overview

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.

Challenge

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.

User Personas

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.

Chrysalis Hero 1.png
Persona 1 - Jackie.png
jackie: boutique manager

Needs:

  • 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

Persona 2 - Victoria.png
victoria: regional director

Needs:

  • Looking to create a benchmark to measure store’s performance

  • Needs a way to easily pinpoint weaknesses in stores

Competitive Analysis

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.

key takeaways
  • 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

Chrysalis Analysis Grid Image.png
Style Development

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.

boutique

This style is inspired by small boutiques and local shops. This style is playful, friendly, nostalgic, warm, and welcoming.

Tile A - Boutique.png
Golden rule

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.

Tile B - Golden Rule.png
digital mint

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.

Tile C - Digital Mint.png

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.

key takeaways
  • 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

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.

Design Principles

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.

Straightforward

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.

Tablet Prototype

After our desirability testing, I began the process of translating the tablet wireframes and style into high-fidelity screens.

Chrysalis iPad v1 - Overview
4 iPads Chrysalis v1 Mockup
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.

key takeaways
  • 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

Chrysalis Testing.png

“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.”

Mobile Prototype

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.

View the full prototype here.

Chrysalis MicroInteractions Gif.gif
iPhone frame.png
Mobile grid.png
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.”

Mobile User Testing.png

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

Final Thoughts

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.