Leadguru - mobile app

Transforming a desktop-based lead management system into an intuitive mobile app focused on clarity, accessibility, and real business needs.

Transforming a desktop-based lead management system into an intuitive mobile app focused on clarity, accessibility, and real business needs.

Transforming a desktop-based lead management system into an intuitive mobile app focused on clarity, accessibility, and real business needs.

Deliverables

Deliverables

Wireframes (low & high fi)

Wireframes (low & high fi)

Mobile UI Design

Mobile UI Design

UI kit (styles, components)

UI kit (styles, components)

Interactive Prototype

Interactive Prototype

Role

Role

UX/UI Designer

App state

App state

MVP

Project duration

Project duration

2-3 months

Tools

Tools

Figma

Figma

Technology

Technology

MUI React

MUI React

Material Design

Material Design

Tools

Figma

Technology

MUI React

Material Design

πŸ“‘Context

πŸ“‘Context

πŸ“‘Context

What is LeadGuru

LeadGuru is a B2B web platform that connects insurance and finance agents with verified leads β€” real people actively searching for financial or insurance products.

LeadGuru system

How the system works

Step 1.

Leads are verified by a call center, categorized and added to the system.

Leads are verified by a call center, categorized and added to the system.

Step 2.

Agents buy leads (access to their data) using points β€” either exclusively or with limited sharing.

Agents buy leads (access to their data) using points β€” either exclusively or with limited sharing.

Step 3.

After purchase, agents contact leads directly on their own.

After purchase, agents contact leads directly on their own.

Step 4.

If a lead cannot be converted, agents can file a claim.

If a lead cannot be converted, agents can file a claim.

Step 5.

Approved claims return the lead to the pool for others to access.

Approved claims return the lead to the pool for others to access.

Who are the users

Independent insurance and finance agents

Independent insurance and finance agents

Often operate on desktop

Often operate on desktop

Average age ~50

Average age ~50

Non tech savvy

Non tech savvy

❌ Design challenges

❌ Design challenges

The original mobile experience was not just outdated β€” it actively got in the way.

Agents, many of whom are in their 40s and 50s, struggled with tiny tap targets, unclear layouts, and confusing flows. The product was originally built for desktop and simply scaled down, without adjusting for mobile usability.

The original mobile experience was not just outdated β€” it actively got in the way.

Agents, many of whom are in their 40s and 50s, struggled with tiny tap targets, unclear layouts, and confusing flows. The product was originally built for desktop and simply scaled down, without adjusting for mobile usability.

  • The original product was designed for desktop and only scaled down to mobile, without a dedicated mobile UX.

  • The original product was designed for desktop and only scaled down to mobile, without a dedicated mobile UX.

  • UI lacked visual hierarchy and clarity, especially for older users with limited tech skills.

  • UI lacked visual hierarchy and clarity, especially for older users with limited tech skills.

  • The interface was cluttered, inconsistent, and not optimized for touch interactions.

  • The interface was cluttered, inconsistent, and not optimized for touch interactions.

  • As a result, users often abandoned tasks or avoided using the app on mobile altogether.

  • As a result, users often abandoned tasks or avoided using the app on mobile altogether.

πŸ› οΈRedesign process

πŸ› οΈRedesign process

πŸ› οΈRedesign process

πŸ”

Exploration

Understanding the system

Sketching

Benchmarking

Understanding the system

Mapping things out

Benchmarking

πŸ”

Exploration

Understanding the system

Sketching

Benchmarking

Understanding the system

Mapping things out

Benchmarking

πŸ”

Exploration

Understanding the system

Sketching

Benchmarking

Understanding the system

Mapping things out

Benchmarking

>

>

>

>

πŸ”

Iteration

Understanding the system

Sketching

Benchmarking

Low Fi wireframes

Test & refine

πŸ”

Iteration

Understanding the system

Sketching

Benchmarking

Low Fi wireframes

Interactive Prototype

πŸ”

Iteration

Understanding the system

Sketching

Benchmarking

Low Fi wireframes

Test & refine

>

>

>

>

🚚

Delivery

Understanding the system

Sketching

Benchmarking

UI Kit

Dev Handoff

Interactive Prototype

🚚

Delivery

Understanding the system

Sketching

Benchmarking

Interactive Prototype

UI Kit

Handoff

🚚

Delivery

Understanding the system

Sketching

Benchmarking

UI Kit

Dev Handoff

Interactive Prototype

Exploration

In this phase, I explored a wide range of layout options, interaction models, and content structures.
It was all about asking β€œwhat if?” and testing different directions before narrowing down to the most usable and scalable solution.

Iteration

Throughout the project, I explored many design directions and iterated extensively to improve usability, clarity, and visual consistency.

Delivery

Prototype, handoff, UI kit

βœ… Final Design & Solution

  • Designed a dedicated mobile app instead of adapting the desktop version.

  • Simplified user navigation by redesigning the most frequent tasks and screens.

  • Created touch-friendly UI components with improved spacing and visual hierarchy.

  • Refined system messages and microcopy for clearer guidance.

  • Optimized layout and interactions for older, non-tech-savvy users.

In the future

In the future

In the future

The current version is an MVP. In the coming months, a built-in chat will be introduced, allowing agents to message clients directly within the app.