Greyfox
Redesigning a data-heavy customer engagement tool for new customers.
SCOPE
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 -
-
Home - Actionable summary widgets and upsell objectives
-
Members - Customer insights, segment creation and suppression lists
-
Campaigns - Active campaigns and strategy creation for automation
-
Offers - Active offers and new offer creation with segment and channel customisation
-
Surveys - Summary widgets and upsell objectives
-
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.
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.
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.
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.
.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.
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.
.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.
Dashboard widgets with actionable tasks
Overlay forms for each task to stay on the same page
Customer activity in timeline view
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.
Customer insights can be filtered via duration and segment
Customer list with revenue, purchase frequency and segments
Controls for segment creation
All related customer details
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.
Offers list
Types of offers
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