Greyfox

Redesigning a data-heavy customer engagement tool for new customers.

Screenshot 2022-02-15 at 7.44.36 PM.png
SCOPE

Greyfox, Skellam AI

2020, 11 months

TEAM

1 Designer

2 product managers

1 business lead

ROLE

Product Strategy

UX/UI Design

SOFTWARE

Figma

THE CLIENT

Greyfox is a revenue accelerator that helps e-commerce businesses scale through smart customer engagement. Their core features are campaign automation, offer optimization, and personalized discount creation. The team reached out with a clear road charted out. Their use-cases were elaborate and the product offered extensive features. The new design had to simplify the user experience and successfully onboard new users. Below is a quick breakdown of the dashboard -

 

  1. Home - Actionable summary widgets and upsell objectives

  2. Members - Customer insights, segment creation and suppression lists

  3. Campaigns - Active campaigns and strategy creation for automation

  4. Offers - Active offers and new offer creation with segment and channel customisation

  5. Surveys - Summary widgets and upsell objectives

  6. Channels - Create and customize email and SMS templates

THE CHALLENGE

Redesign Greyfox for onboarding new users and increasing user retention.

RESEARCH & DISCOVERY

My first goal was to identify existing pain points and product scope that we to understand the strongest intervention point. I began by creating a user journey blueprint that mapped the entire end-to-end experience of a Greyfox customer. This involved speaking with stakeholders across the company, from the product, marketing, operations, business, and tech to understand agreed upon pain points and possible areas of product oversight.

Screenshot 2022-02-20 at 12.52.12 PM.png

The exercise revealed three major areas of improvement:

Inconsistency in design and lack of visual hierarchy led to low learnability and frequent errors.

Data collected was getting lost without any visual anchors and adding to the users cognitive load

Creation flows were complex without a clear starting point or a task list for users to follow through.

I also conducted one-on-one conversations with a few existing customers over the course of several months. This brought to light that Greyfox had migrated to stackable widgets instead of standard text flows a few months ago. Since users couldn't rely on their prior mental models and predict the outcome of their actions on the screen anymore, the engagement rates had dropped since their last redesign. Based on all the findings, the following were my key goals for this project -

▶️

Getting users to understand the redesign will require them to migrate from their old mental models.

Show live modal previews as the user interacts with the tool to train and boost engagement

🌀

Users are less overwhelmed if they're exposed to complex features later.

Break down for progressive disclosure across multiple stages allowing for quicker decision-making

🎯

New users have a specific goal in mind when they discover the platform.

Design for the most pressing pain point to maximize the conversion rate.

Screenshot 2022-02-20 at 12.16.15 PM.png
HIGH FIDELITY

After a quick round of prototypes and internal testing, we moved to high-fidelity designs. Throughout the redesign, there were some key considerations that echoed across the design of the product and are summarised below - 

Nature of the dashboard

Gray fox was designed to be an analytical dashboard that provides the user with at-a-glance information. The primary goal of this dashboard is to help users make the best sense of the data, analyze trends and drive decision making.

Group 66.jpg

Permutations and combinations

Perhaps the most challenging aspect of designing for an automation tool was the infinite customizability that had to be factored in while building the conditional logic of the forms that go into building a sales funnel. 

Group 36 (2).png

Data representation

Data representation was a critical element that was included both in the widgets as well as automated lists, be it static or dynamic. I started by looking into internal documents and reports to take a call on how many variables I wanted to show, over what period, and which data points the system could show together. 

Screenshot 2022-02-15 at 11.05.33 AM.png

Consistent building blocks

After I defined the grid, I worked with multiple widgets that would hold the information, charts, and controls. As infinitely manipulatable components, they were designed to be convenient for responsive design.

Frame 41 (4).png
HOME TAB

The platform opens with tutorials and upsell objectives for easy onboarding. Summary widgets for all active campaigns, offers, and surveys in addition to leads are available on the secondary tab. Actionable functions open as overlay forms with secondary drawers if needed.

Group 65.jpg
Group 66.jpg

Dashboard widgets with actionable tasks

Group 68.jpg

Overlay forms for each task to stay on the same page

Group 47.png

Customer activity in timeline view

Screenshot 2022-02-20 at 11.19.11 AM.png

Plan details updated with visual anchors for data representation.

CUSTOMERS

The customer tab provides a single reference point for all store activity. Some of the key design considerations here include design for filters, views, and timeline. The segment creation flow was built after a careful study of user patterns while creating conditional clauses and then incorporating a hierarchy of controls in the design.

Group 48.png

Customer insights can be filtered via duration and segment

Group 49.png

Customer list with revenue, purchase frequency and segments

Group 71.jpg

Controls for segment creation

Group 53.png

All related customer details

Group 72.jpg

Grouping conditions

CAMPAIGNS

View all active and scheduled campaigns and create new ones. While creating campaign triggers, the user is given a live preview of their card helping them learn its behavior quicker. Colour tagging the card based on the category helps them quickly scan large campaign flows.

OFFERS

The offers tab allows merchants to create customized plans for targeting their customers based on pre-created segments. Design considerations for this section included a clear list view with status tags and forms for a combination of reward types.

Group 73.jpg

Offers list

Group 56.png

Types of offers

Group 55.png

Customizability within each type

IMPACT AND LEARNINGS

1. Define the prioritize the layout

The redesign led to a 35% increase in overall engagement (page visit frequency and activity time) within the next 4 months. 

Since there were dependencies within groups of information, organizing the screen in a way that users did not need to go back and forth helped create a continuous flow that allowed easy scanning. Positioning important information in certain corners helped emphasize hierarchy in data. 

2. Show your information

I began by positioning widgets and components one under the another in order to avoid overwhelming the user. However, this led to long scrolls and key information being hidden below the screen view. Incorporating more interactions to nest information helped create stronger widgets and shorter sreens.

3. Disclose progressively

To help users engage with complex automation forms, advanced or rarely used features were pushed to a secondary screen, making the platform easier to learn and less error-prone. It also allows users to only focus on the key features that matter to them.

Scroll to Top