Compass by Xoxoday— In Progress
Compass Mobile App - Redesign
Redesigning the sales engagement platform for consistency, improved motivation, user engagement, and gamified performance tracking.
Industry
Rewards & Recognition SaaS
Average Revenue
$42M
Total Clients
2,000+
Total Users
2.5 million+
Designing for Engagement
Project Overview
The app is used by sales teams to track KPIs, monitor incentives, benchmark performance against peers, and earn rewards. While the existing version functioned, the user interface was visually inconsistent, hard to navigate, and didn't give users a reason to come back.
Client Requirement
The existing internal sales engagement app would get a redesign once "Flame", their in-house design system, was adopted - so user engagement would improve via gamification, a more modern UI, and better interactivity.
Objectives
Adopt the Flame Design System for design consistency. Modernize the UI for better engagement and clarity. Integrate gamification elements - leaderboards, badges, and rewards. Reduce visual clutter by improving information hierarchy. Design dashboards that are motivating yet data-heavy and accessible.
Solutions
I applied user-centered design principles throughout. I ran research interviews with sales reps and managers. Complex commission structures were visualized through charts, graphs, and progress bars. I designed a clean, intuitive interface with clear navigation and minimal clutter. The layout was optimized for touch on mobile. I integrated gamification elements - point systems, personalized goals with progress tracking, and leaderboards that show top performers without making it feel cutthroat.
Design Process
User Personas
Created personas, empathy maps, and customer journey maps to understand more about the user's problems.
Priya Mehra
29 / Female · Inside Sales Executive, Fintech SaaS
Bengaluru, India · High tech savviness
🎯 Goals
- Stay motivated through visual progress tracking and rewards
- Easily access earning history and forecast without extra effort
- Feel engaged with game-like interactions and leaderboard visibility
- Receive timely feedback to improve performance quickly
😩 Challenges
- Difficulty understanding complex incentive programs with multiple KPIs
- Frequently checks with managers to confirm earnings or performance status
- Demotivated by lack of real-time feedback and visual progress indicators
- Gets overwhelmed by dense data presented in text-heavy formats
👇 Needs
- A clear and modern interface to track tasks, earnings, and goals
- Real-time updates on performance compared to peers
- Fun, rewarding elements like badges, scratch cards, and streaks
- Guidance through feedback prompts or tips during slow performance phases
Arvind Sharma
42 / Male · Regional Sales Manager, Consumer Tech
Bengaluru, India · Moderate tech savviness
🎯 Goals
- Track team performance with clarity and without switching tools
- Motivate team using rewards, recognition, and performance insights
- Save time by accessing summary views of KPIs, earnings, and goals
😩 Challenges
- Managing multiple team members' performance and incentive progress
- Difficulty identifying underperforming reps quickly from raw data
- Too many manual follow-ups and unclear visibility into team-level targets
👇 Needs
- A centralized dashboard with sortable, filterable team data
- Visual cues for performance health, upcoming deadlines, and earning gaps
- Feedback module to share suggestions or push nudges
- Easy access to incentive breakdowns to answer team queries faster
Empathy Map
Captures what each persona thinks, feels, says and does with their commission plan - highlighting the motivational gap the redesign needed to close.
Priya Mehra · Sales Executive
Arvind Sharma · Sales Manager
Information Architecture
Shows how the information and navigation of the app were organized to give users quick access to what matters.
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, typography, and component library across all modules.
Flame Design System
Adopted the Flame design system to establish a unified color palette, typography scale, and reusable component library across all modules of the app.
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 allowed a more rapid validation of the layout clarity, accessibility, and hierarchy of data prior to visual design.
Dashboard UI
I structured the performance metrics, earnings summary, and task views into modular, card-based layouts - making data easy to scan with visual indicators like badges, charts, and 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.
New UI
The redesigned user interface offers a clean, modern layout with a better visual hierarchy and intuitive navigation. Gamification elements, 3D illustrations, and simplified task flows make for an experience that actually feels good to use.
Design Outcomes
The redesigned mobile experience improved 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 gave the product a consistent look that matched the brand.
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.
Let's WorkTogether
I'm open to new opportunities, collaborations, or just a good conversation.