top of page
dfg_4x.png

How I Stepped In

Between 2019 and 2021, I worked as a UX/UI Designer for a platform designed to supercharge sales performance by streamlining lead management processes. The system catered to sales teams looking for faster, more efficient ways to close deals.

​

My role centered on transforming complex workflows into seamless user experiences. Whether it was refining dashboards, enhancing usability, or redesigning critical features for web and mobile platforms, I focused on creating intuitive solutions that solved real user problems.

 

Collaborating with developers, a Product Master, and end-users, I ensured every design decision aligned with both user needs and business objectives.

What is SalesCandy?

It’s a lead management system built to solve two major challenges in sales and marketing operations. First, it ensures every inquiry gets a timely response during that crucial golden window, while also keeping the sales team accountable for follow-ups.

​

Second, it provides accurate, transparent data to pinpoint which ads are actually driving results—not just leads, but actual wins. And the best part? No need for tedious manual data stitching; everything’s streamlined and connected.

How does it work?

The system’s algorithm ensures a seamless contact strategy for your sales team without the need for manual intervention. Incoming leads are instantly assigned to the right salesperson, and if unattended, they’re automatically rerouted to the next available team member within 25 seconds. Salespeople can receive leads anytime, anywhere.
 

The mobile app simplifies follow-ups, prompting the salesperson to schedule the next action in just three clicks while sending timely reminders when it’s due. Every interaction—whether through phone calls or SMS—is automatically logged, including overdue actions, and reflected in real-time reports for complete visibility.

CHALLENGES WHEN I  JOINED

CHALLENGE #1

Untangling a Complex System

The system had evolved since 2017, with layers of updates making it tough to navigate. I focused on understanding the setup and working with the team to bring more clarity and organization.

CHALLENGE #2

Improving
Design Processes

At the time, there was no structured design system in place. I introduced a more systematic approach, ensuring consistency and scalability while making it easier for the team to build and iterate on features.

CHALLENGE #3

Adapting to a New Team

This was my first time leading a team in this capacity. I had to quickly adapt, learning how to manage workflows, align with different stakeholders, and ensure everyone was moving in the same direction.

CHALLENGE #4

Balancing
Feature Requests

With a growing list of feature requests from various teams, it was easy for priorities to get scattered. I created a structured system to evaluate, categorize, and prioritize features, ensuring we tackled the most impactful ones first.

GOALS

We started by getting our team organized before tackling the cleanup.

When I joined the product team, I walked straight into a storm of challenges. The product had a lot of moving parts, and getting it right wasn’t just about fixing what was broken, it was about building a system that could actually work long-term.

​

To make sense of the chaos, we formed internal workflows using AGILE, making sure the team had a structured approach to handling issues. Despite not fully understanding the system from day one, I took things apart piece by piece, figuring out the mechanics while keeping the momentum going.

 

This was also my first time leading a team in this way. Managing expectations, guiding decisions, and pushing features forward while learning on the fly. It was a trial by fire but it set the foundation for everything that came next.

Main quests

1

Restructure and modernize the Manager Portal.

2

Streamline lead management through new feature integrations.

3

Improve design-to-development processes for faster and more reliable outputs.

4

Establish a scalable design system to support future product growth.

WORK APPROACH

Product flow

The flow of features and enhancements are managed within the product team and development team. This flow is following a bi-weekly sprint with AGILE methodology

FIRST WEEK

Brainstorm

The flow of features and enhancements are managed within the product team and development team. This flow is following a bi-weekly sprint with AGILE methodology

Grooming with DEV

Meetings with the frontend and backend developers are conducted to see if they can push the issues that were discussed

Wireframe

Lo-fi wireframe sketches help guide the developers. This step will be skipped if the wireframe already exists from previous features

User flow

The user flow sometimes would go hand in hand with the wireframe

Mockup

Mockups are built for the frontend developers to help understand certain interactions with the UI

SECOND WEEK

Prototype

Mockups are then turned into interactive prototypes for a better understanding of the flow of the feature

Staging

In the second week of sprint, the development team will release the new features or enhancements in staging

Test and report

Tests and reports will be done for any bugs found or any mistakes that were made

Roll out

Product will be rolled out to  the production stage for the clients to use the latest version

Test & Report

After the release, tests and reports will be done for any bugs or any mistakes that were made. Most of the bugs will be fixed as a hot fix

Asset 19_4x_edited.png

App flow

The flow below shows how we manage the product across apps, integrating it with the SPRINT chart I outlined above.

Asset 16_4x.png

I documented use cases and features in GitLab issues for discussions with the team and CEO, covering bugs, requirements, and enhancements.

I use Adobe XD for designing every screen of the product, including user flows, wireframes, mockups, and prototypes.

The screens I created in Adobe XD are exported to Zeplin for developers to reference. Along with the screens, they utilize components and styling features to streamline their CSS workflow

We use Trello to manage the flow between the Product and Dev teams, tracking bugs, features, and enhancements, while overseeing product flow for a broader sprint view.

GitLab

Adobe XD

Zeplin

Trello

WHAT I'VE WORKED ON

Version three point zero, here we go!

With everything in place, we tackled the biggest challenge, revamping the Manager Portal. This was my baby for nearly two years, refining and rebuilding the portal while the other designer focused on the app.

GOALS

1

Simplify

With everything in place, we tackled the biggest challenge, revamping the Manager Portal. This was my baby for nearly two years.

2

Responsive

With everything in place, we tackled the biggest challenge, revamping the Manager Portal. This was my baby for nearly two years.

3

Continuity

With everything in place, we tackled the biggest challenge, revamping the Manager Portal. This was my baby for nearly two years.

IDENTIFYING PAIN POINTS

We needed to identify it all before moving forward with the product flow

Our product master helped laid out all of the pain points and complains that we've received from all our clients that were still using the Manager Portal v2. This version of manager portal was built on a very low budget, a few years before i was hired at SalesCandy, with most of its components were left abandoned and missing. It was riddled with bugs. Time to exterminate them. 

An outdated design framework that had remained unchanged since 2017.

UI is not following app’s design

The v2 manager portal did not follow the app's design, we're talking about the colours, buttons. Most of the salesperson found it hard to navigate.

UI is inconsistent

Different parts of the platform followed their own design rules, making the experience feel disconnected.

No on-page content strategy

There was no clear content strategy making it difficult for users to navigate around the portal and app as well.

Design is outdated

The design had served its time but needed a refresh to keep up with modern usability standards.

Not responsive

The platform didn’t adapt well across different screen sizes, making it clunky on certain devices.

Hard to navigate

The interface made it difficult for users to find what they needed quickly.

REDESIGN PROCESS

Revamping the Experience: A Thoughtful Redesign Journey

This is a quick look at the flow we set up to focus purely on the revamp, separate from other features being worked on in AGILE. We carved out space for a few enhancements each Sprint, gradually building things up through our staging releases. It fit everyone's schedule smoothly and made the whole process way less of a headache.

IMPLEMENTATION & COLLABORATION

Shaping Ideas into Reality, Building with the Team

Execution means nothing without teamwork, and collaboration is pointless without action. As we brought new ideas to life, I worked closely with the team to ensure that implementation and collaboration went hand in hand. From refining workflows to aligning on goals, every step was a balance of building and adapting together.

IMPLEMENTATION

Fixing the structure

I mapped out the system’s flows, stripped away unnecessary complexity, and made sure the foundation was solid before touching the UI.

Scalable design system

We built the new portal using an Atomic Design approach, meaning components were modular, reusable, and easier to maintain. No more random one off elements.

Working with what we had

Since we weren’t working with the latest tech stack, I had to balance UX improvements with existing system limitations, making sure my designs were actually feasible for devs. Most notable issue was responsiveness, our kryptonite.

End-to-End Execution

From rough wireframes to polished high-fidelity prototypes, I ensured every iteration was validated before development. No wasted effort.

COLLABORATION

Tight Dev & QA Collaboration

I worked closely with engineers to ensure the new UI didn’t break anything, addressing constraints early to avoid unnecessary back-and-forths.

Agile & Fast Iterations

We moved in biweekly sprints, constantly refining designs based on feedback. I also documented everything properly in Figma, so there were no “lost in translation” moments between teams.

Design Feedback Loops

Regular syncs with the team ensured that what I designed actually worked in the real world—not just on a Figma artboard.

...628 Adobe XD files later

SUMMARY

Simplified

The Manager Portal was cluttered, outdated, and tough to navigate. Through careful redesign, we stripped away unnecessary complexity, making it more intuitive and efficient. Every decision focused on ensuring managers could get what they needed with minimal friction, so they could spend less time figuring out the system and more time making impactful decisions.

Bug-less

A sleek design means nothing if it doesn’t work. Throughout the revamp, we focused on reducing friction—not just in usability but in functionality too. By tightening feedback loops and refining our testing process, we built a system that’s not just better-looking but more reliable, cutting down on frustrating bugs that slowed teams down.

Agility

With an evolving product and fast-paced workflows, the new design embraces flexibility. Built to scale and adapt, the system now supports iterative improvements without disrupting daily operations. Whether refining features or rolling out new ones, the foundation is set for seamless enhancements that keep up with the team's needs.

bg (1).png

HOMECOMING

A fresh welcome for managers

Managers now arrive at a brand-new login screen, designed for a smoother and more modern experience. The refreshed UI sets the tone for an improved workflow right from the start.

DASHBOARD

Real time insights at a glance

The dashboard now features a live data feed, giving managers instant visibility into all ongoing activities within the project. From top performers to lead traffic, everything is accessible in one place.

DATA AND SYSTEMS

Seamless Data Processing and Instant Insights

The system now processes and analyzes data in real-time, giving managers accurate and up-to-date insights without delays. This ensures better tracking, faster decision-making, and a clearer understanding of overall performance.

INTERFACE AND FLOW

Seamless Flow, Intuitive Interface

We designed the flow from portal to app to be seamless and easy to navigate. Every step was built to keep things intuitive, so users could get things done without friction.

DESIGN SYSTEM

Adobe XD didn’t have the features Figma offers today, so we had to improvise.

Back then, Adobe XD lacked the flexibility and collaboration features that Figma has today, so we had to get creative. We built our own design system from scratch, ensuring consistency across the board while making it easy to scale and adapt as the product evolved.​

SUGAR, SPICE AND EVERYTHING NICE

V3 launched with overwhelmingly positive feedback, imperfect, but delivered.

V3 hit the ground running with great feedback from users. It wasn’t flawless, but we shipped a solid update that made a real impact. The focus was on delivering improvements while keeping things agile, and the response showed we were on the right track.

FEATURE #1

WhatsApp integration

One key feature I worked on was integrating WhatsApp into our system. Salespeople can use the app to interact with leads after they engage with a WhatsApp bot.

​

I designed the flow for the manager portal, allowing managers to set template messages via Twilio. Leads initially chat with the bot, which then routes them to a salesperson after the conversation.

WhatsApp setup -
Manager portal flow

The manager begins the setup by integrating the WhatsApp number that has been established on Twilio. The manager selects the particular number from the integration page and selects the project with the template message for the lead to see

FEATURE #2

Likelihood to win

This feature leverages a machine learning model to predict a salesperson's likelihood of closing a deal. I collaborated closely with our data analyst to design a simple, intuitive UI that made the insights easy to understand and act on.

 

It was one of my favorite features to design, but unfortunately, we never had the chance to fully test it.

The progress bar within the action log gives salespeople a clear view of their lead’s status, tracking updates that influence their likelihood to win

A clean and intuitive UI that visualizes the likelihood of a win, making progress easy to track at a glance.

Here, a dynamic progress bar adjusts based on lead updates, visually representing the evolving likelihood of a win.

An overview of all salespeople in the project, highlighting win trends. This helps managers assess who’s closing deals and who might need extra support.

FEATURE #3

Trackers

Trackers was one of the last major features i worked on. The main idea of the tracker is to track where the lead came from. This involves Google ads, Facebook click id, Adobe, and custom trackers that is set by the managers

ENHANCEMENT

Tables & forms

The new manager portal implements new tables and forms UX into the system. Managers can easily browse through 21 different tables and customise the columns to their likings.

MANAGEMENT

Leading the Charge: 5 Months as Acting Product Master

For five months, I stepped into the role of Product Master, balancing priorities, managing sprints, and ensuring the team stayed aligned on our goals. It was a crash course in leadership—one where I had to make tough calls, keep things moving, and adapt on the fly. My focus was to refine our workflow, improve communication, and create a system that made collaboration seamless. From backlog grooming to sprint reviews, I worked closely with the team to ensure every feature was built with clarity and purpose.

BACKLOG GROOMING

A messy backlog leads to messy development. I made sure our backlog was consistently refined—removing outdated tasks, prioritizing upcoming work, and making sure requirements were crystal clear. This helped the team focus on what truly mattered without getting bogged down by clutter.

SPRINT PLANNING

Each sprint kicked off with a clear plan, ensuring that the team knew exactly what to tackle next. I led sprint planning sessions, aligning priorities, defining deliverables, and breaking tasks down into manageable chunks. The goal? Keep everyone on the same page and prevent last-minute scrambles.

SPRINT REVIEW

At the end of each sprint, we took a step back to review what worked and what didn’t. I facilitated discussions where the team could showcase their progress, gather feedback, and iterate for the next round. Every sprint review was an opportunity to refine our approach and push the product forward.

IMPACT

Revamped the Manager Portal to streamline navigation and improve usability for managers and sales teams.

Enhanced UI consistency across the platform, addressing user feedback to create a more cohesive experience.

Successfully integrated WhatsApp as a communication channel, making lead engagement more seamless for sales teams.

Restructured detail pages to prioritize key information, improving the flow of data retrieval for managers.

Facilitated better collaboration between product and development teams by providing detailed user flows and interactive prototypes.

IN RETROSPECT 

Learning, Failing, Adapting, Growing as a Product Designer

Jumping into this role as a UX/UI and Product Designer for the first time was like being thrown into the deep end, but in the best way possible. I was given the space to experiment, make mistakes, and truly learn.

It wasn’t just about managing the product; it was about learning how to manage myself, how to adapt, how to make better decisions, and how to stay resilient when things didn’t go as planned. Looking back, every challenge, misstep, and breakthrough shaped me into a designer who doesn’t just create, but also thinks strategically about the bigger picture.

I truly miss our evening breaks and hang outs more than the gig itself at times. The product team were the loudest, most chaotic fun I've been with.

RECAP

Revamped the Manager Portal to modernize its UX/UI, improve usability, and make it fully responsive across devices.

Designed and delivered key features, including WhatsApp integration and activity trackers, to enhance lead management capabilities.

Collaborated with developers and stakeholders to create detailed user flows, wireframes, mockups, and prototypes.

Streamlined the design-to-development pipeline using Adobe XD, Zeplin, GitLab, and Trello for efficient communication and execution.

Conducted user testing and iterative improvements to ensure smooth functionality and alignment with user needs.

Thanks for reading.

I hope you enjoyed my case study!

If you have any questions, want to discuss new opportunities / side hustles, or simply want to say hi, feel free to drop me a line

Note: the work displayed belongs to respective company and me, the designer. Please refrain from downloading, copying, or sharing them with others.

Other works

Trading system for money brokers

Strategy, UX/UI design, Design system

Crypto trading app with a wallet manager

Strategy, UX/UI design, Design system

Personal trainer tracking app

Strategy and UX/UI design

Loyalty app with a reward system

Strategy and UX/UI design

bottom of page