Back

Back

Back

Back

Industry

Rewards & Recognition SaaS

Average Revenue

$42M

Total Clients

2,000+

Total Users

2.5 million+

Compass Mobile App - Redesign

This project is to redesign the sales engagement platform for consistency, improve motivation, user engagement and to improve the user performance through gamified performance tracking.

Compass - Mobile App Redesign

Project Overview

The app is used by sales teams so they can track KPIs, monitor incentives, benchmark performance against peers, also earn rewards. While the existing version functioned necessarily, the user interface was visually inconsistent, navigated unintuitively, and did not motivate users toward basic usage.

Client Requirement

The existing internal sales engagement app will get a redesign once “Flame”, their in-house design system, is adopted so user engagement will improve via gamification, a more modern UI, plus better interactivity.

Objectives

  • Use Flames Design System adoption for ecosystem consistency.

  • To engage users, to retain them, and to provide clarity, modernize the UI.

  • Leaderboards, badges, and rewards are gamification elements.

  • Achieve a reduction in visual clutter via improvement of information hierarchy.

  • Design dashboards that can be motivating and can remain data-heavy and accessible.

Solutions

  • User-centered design (UCD) principles should be employed now. User research interviews should be conducted with sales reps along with managers to gather feedback.

  • User-centered design (UCD) principles should be employed now. User research interviews should be conducted with sales reps along with managers to gather feedback.

  • User-centered design (UCD) principles should be employed now. User research interviews should be conducted with sales reps along with managers to gather feedback.

  • Present complex commission structures in a clear and digestible way via data visualization techniques such as charts, graphs, also progress bars.

  • Present complex commission structures in a clear and digestible way via data visualization techniques such as charts, graphs, also progress bars.

  • Present complex commission structures in a clear and digestible way via data visualization techniques such as charts, graphs, also progress bars.

  • An interface that is clean and intuitive featuring menus that are clear with navigation that is easy and clutter that is minimal should be implemented. The layout needs to be properly optimized now. This optimization should target touch interaction on mobile devices specifically.

  • An interface that is clean and intuitive featuring menus that are clear with navigation that is easy and clutter that is minimal should be implemented. The layout needs to be properly optimized now. This optimization should target touch interaction on mobile devices specifically.

  • An interface that is clean and intuitive featuring menus that are clear with navigation that is easy and clutter that is minimal should be implemented. The layout needs to be properly optimized now. This optimization should target touch interaction on mobile devices specifically.

  • Integrate gamification elements tactically. Features like point systems for achieving milestones, personalized goals with progress tracking, and leaderboards present top performers without unhealthy competition.

  • Integrate gamification elements tactically. Features like point systems for achieving milestones, personalized goals with progress tracking, and leaderboards present top performers without unhealthy competition.

  • Integrate gamification elements tactically. Features like point systems for achieving milestones, personalized goals with progress tracking, and leaderboards present top performers without unhealthy competition.

Design Process

1

Discover

2

Research

3

Analyze

4

Design

5

Test

Users

User Personas

Created personas, empathy maps, and customer journey map to understand more about the user's problems. See the process deck for empathy maps and customer journeys.

Created personas, empathy maps, and customer journey map to understand more about the user's problems. See the process deck for empathy maps and customer journeys.

Created personas, empathy maps, and customer journey map to understand more about the user's problems. See the process deck for empathy maps and customer journeys.

Name: Priya Mehra

Age/Gender: 29 / Female

Occupation: Inside Sales Executive at a Fintech SaaS Company

Location: Bengaluru, India

Tech Savviness: High – Confident using mobile apps, dashboards, and productivity tools

🎯

GOALS

  1. Stay motivated through visual progress tracking and rewards

  2. Easily access earning history and forecast without extra effort

  3. Feel engaged with game-like interactions and leaderboard visibility

  4. Receive timely feedback to improve performance and course-correct quickly

😩

CHALLENGES

  1. Difficulty understanding complex incentive programs with multiple KPIs

  2. Frequently checks with managers to confirm earnings or performance status

  3. Demotivated by lack of real-time feedback and visual progress indicators

  4. Gets overwhelmed by dense data presented in text-heavy formats

👇

NEEDS

  1. A clear and modern interface to track tasks, earnings, and goals

  2. Real-time updates on performance compared to peers

  3. Fun, rewarding elements like badges, scratch cards, and streaks

  4. Guidance through feedback prompts or tips during slow performance phases

Name: Arvind Sharma

Age/Gender: 42 / Male

Occupation: Regional Sales Manager at a Consumer Tech Company

Location: Bengaluru, India

Tech Savviness: Moderate – Comfortable with smartphones

🎯

GOALS

  1. Track team performance with clarity and without switching tools

  2. Motivate team using rewards, recognition, and performance insights

  3. Save time by accessing summary views of KPIs, earnings, and goals

😩

CHALLENGES

  1. Managing multiple team members’ performance and incentive progress

  2. Difficulty identifying underperforming reps quickly from raw data

  3. Too many manual follow-ups and unclear visibility into team-level targets

👇

NEEDS

  1. A centralized dashboard with sortable, filterable team data

  2. Visual cues for performance health, upcoming deadlines, and earning gaps

  3. Feedback module to share suggestions or push nudges

  4. Easy access to incentive breakdowns to answer team queries faster

Empathy Map

The purpose of this empathy map is to capture what a salesperson thinks, feels and does with their commission plan.

The purpose of this empathy map is to capture what a salesperson thinks, feels and does with their commission plan.

The purpose of this empathy map is to capture what a salesperson thinks, feels and does with their commission plan.

Information Architecture

It shows how the information and navigation of the app were organized to provide access to key functionalities.

It shows how the information and navigation of the app were organized to provide access to key functionalities.

It shows how the information and navigation of the app were organized to provide access to key functionalities.

Key Enhancements

Unified Visual Language

Originally, the user interface deployed multiple color schemes, layouts, and structures that were inconsistent. With the design of the Flame Design System, I established a consistent color scheme and typography, and component library across all modules.

Originally, the user interface deployed multiple color schemes, layouts, and structures that were inconsistent. With the design of the Flame Design System, I established a consistent color scheme and typography, and component library across all modules.

Originally, the user interface deployed multiple color schemes, layouts, and structures that were inconsistent. With the design of the Flame Design System, I established a consistent color scheme and typography, and component library across all modules.

Improved Dashboard Readability

The wireframe assisted in reshaping the dashboard by eliminating redundant components, linearly organizing important metrics, and fostering user engagement via performance tracking and badges. This low-fidelity format allows a more rapid validation of the layout clarity, accessibility, and hierarchy of data prior to visual design.

The wireframe assisted in reshaping the dashboard by eliminating redundant components, linearly organizing important metrics, and fostering user engagement via performance tracking and badges. This low-fidelity format allows a more rapid validation of the layout clarity, accessibility, and hierarchy of data prior to visual design.

The wireframe assisted in reshaping the dashboard by eliminating redundant components, linearly organizing important metrics, and fostering user engagement via performance tracking and badges. This low-fidelity format allows a more rapid validation of the layout clarity, accessibility, and hierarchy of data prior to visual design.

Dashboard Wireframe

Dashboard UI

I structured the performance metrics, earnings summary, and task views to create explicit, modular and easy to understand data and modern, card-based layouts along with visual indicators like badges, charts, and other KPI formats.

I structured the performance metrics, earnings summary, and task views to create explicit, modular and easy to understand data and modern, card-based layouts along with visual indicators like badges, charts, and other KPI formats.

I structured the performance metrics, earnings summary, and task views to create explicit, modular and easy to understand data and modern, card-based layouts along with visual indicators like badges, charts, and other KPI formats.

Old UI

New UI

Old UI

The original user interface lacked a clear visual hierarchy. It had cluttered layouts and limited user engagement. Key flows like performance tracking and rewards were difficult to navigate, which reduced overall usability.

The original user interface lacked a clear visual hierarchy. It had cluttered layouts and limited user engagement. Key flows like performance tracking and rewards were difficult to navigate, which reduced overall usability.

The original user interface lacked a clear visual hierarchy. It had cluttered layouts and limited user engagement. Key flows like performance tracking and rewards were difficult to navigate, which reduced overall usability.

New UI

The redesigned user interface offers a clean, modern layout with a better visual hierarchy and intuitive navigation. Gamification elements, 3D illustrations, and streamlined task flows make for a more engaging and user-friendly experience.

The redesigned user interface offers a clean, modern layout with a better visual hierarchy and intuitive navigation. Gamification elements, 3D illustrations, and streamlined task flows make for a more engaging and user-friendly experience.

The redesigned user interface offers a clean, modern layout with a better visual hierarchy and intuitive navigation. Gamification elements, 3D illustrations, and streamlined task flows make for a more engaging and user-friendly experience.

Design Outcomes

The redesigned mobile experience greatly increased user engagement and made tasks clearer. With gamified dashboards, easy navigation, and visually engaging empty states, users could track their progress more easily, complete goals, and stay motivated. The updated UI also matched the client’s design system, "Flames," and created a more consistent brand experience.

Before Redesign

  • Cluttered dashboards had limited visual hierarchy.

  • Progress tracking was unengaging.

  • Empty states were difficult to understand and boring.

  • Navigating between programs and badges was hard.

  • There was a disconnect from the brand identity.

After Redesign

  • Clean layouts improved readability and flow.

  • Gamified incentives and performance goals came with rewards.

  • 3D illustrations on empty screens boosted engagement.

  • Navigation was simplified with clearly defined modules.

  • There was complete integration with the in-house "Flames" design system.

Back to All Projects

Next Project

Contact

Let’s Work Together

I’m open to new opportunities, collaborations, or just a good conversation.

gbruklin@gmail.com

9840106142

Contact

Let’s Work Together

I’m open to new opportunities, collaborations, or just a good conversation.

gbruklin@gmail.com

9840106142

Contact

Let’s Work Together

I’m open to new opportunities, collaborations, or just a good conversation.

gbruklin@gmail.com

9840106142

Contact

Let’s Work Together

I’m open to new opportunities, collaborations, or just a good conversation.

gbruklin@gmail.com

9840106142