• Casestudy

Tracking System

Overview

The LPT Connect Intake Wizard is an AI-powered digital onboarding tool designed to streamline the client intake process for agents and professionals. It automates form collection, enhances transaction details-client matching, agent commissions and ensures secure, compliant data handling—reducing administrative workload while improving engagement.
  • Casestudy
  1. Poor Navigation – Users struggled to locate files quickly due to an inefficient folder hierarchy.
  2. Cluttered UI – Too much information was displayed at once, leading to cognitive overload.
  3. Lack of Status Visibility – Tracking file approval/rejection status was not intuitive.
  • Solution

Allow users to see detail in thumbnail view with indication. Display information with trendy font with clean design.

Project Timeline

  • Casestudy
Research
Setting Goals
Scope Agreement
  • Project Planning
Wireframing
User Journey UX
Sitemaps
  • Content & Design
Content Creation
Desktop Design
Mobile Design
  • Development
Code & Functionality
Optimisation & Performance
QA & Testing
  • Website Launch
Post-Live Checks
Publishing & Promoting
Support & Maintenance

Design Process

Emphasize

  • User Research
  • Interviews
  • Competitors Analysis
  • Survey

Define

  • Problem Statement
  • User Personas
  • Empathy Map
  • Story Board

Ideate

  • Brain Storming
  • User Flows
  • Information Architecture
  • Sketching

Prototype

  • Mid-Fi Wireframes
  • Visual Design
  • Prototype

Testing

  • Usability Testing
  • Getting Feedback
  • Conclusion

Participant Demographics

Users Age

Phone Type

Internet Browser

User Persona

I learned about the users by creating detailed profiles called user personas, helping me understand their needs, goals and frustrations.

Sarah Thompson

Organization

20

Location

New York

Age

24 Years

Occupation

Sales Manager

Tech Sevy

Social Skills

Org Activity

Biography

Sarah has been working in project management for over 8 years. She manages multiple projects simultaneously and collaborates with various teams, including design, content, and development. She is tech-savvy and uses various software tools to streamline her workflow.

Frustrations

  • Finds it difficult to keep track of who has accessed or modified files.
  • Often struggles with updates, leading to confusion among team members.

Needs

  • To reduce the time spent searching for files and improve overall productivity.
  • To efficiently track and manage files.

Personality

Internet

Socialmedia

Online Shopping

Personality

Extrovert

Introvert

Thinking

Feeling

Empathy Mapping

Empathy maps provides a simple view of what users say, think, feel, and do. It helps to understand their experiences.

Says

  • “It’s important that I get real-time updates on changes.”
  • “I don’t want to miss any notifications about the file status.”
  • “The system should be clear and easy to understand.”

Does

  • Checks the tracking system frequently to monitor file status.
  • Sets alerts or notifications for critical updates or delays.
  • Uses the tracking info to plan next steps or escalate issues.

Think

  • “Is the tracking information accurate and up-to-date?”
  • “Am I the only one responsible for following up on these files?”
  • “Can I easily spot issues or delays without digging too much?”
  • “Will this system save me time compared to manual tracking?”

Feels

  • Confident when the system provides timely and clear updates.
  • Frustrated if the tracking data is delayed or inaccurate.
  • Anxious when a file’s status is unclear or missing.

Typography

A great design system helps you design and build digital products a lot faster because they give you access to icons, typography rules, color palettes, and other design rules to follow during app or web development and the Fonts for apps play a major role in your users’ experience. We have used more advanced and trending font.

Colors

Primary Colors

Main Gradient Colors

Main Gradient Colors Details

Text Colors

Icon Set

As a pictogram, an icon is a graphical representation of an object, place or idea.

AI Tools (We Use)

Enhances human creativity with generative AI. We use AI Tools for generate some kind of images and icons.

User Research

Users struggle to stay consistent without reminders or clear weekly tracking.

Many users find layout cluttered and confusing, especially for beginners

Users want runtime indications

What We Have Done

In this screen:

  • We improved the responsive design.
  • Users can check status at runtime.

Responsive Layout

In this screen:

  • We added thumbnail view of runtime status.
  • Details and indication added.

Responsive Layout

Features & Functionality

  • Real Time tracking
  • Thumbnail Preview
  • Detail on Hover

Low Fidelity

Low-fidelity refers to a state of reduced quality or detail, commonly used in contexts like audio, visual representations, and prototyping.

Desktop View

Mobile View

High Fidelity (Desktop)

Transaction Detail

User Access

Popups

High Fidelity (Mobile)

High fidelity (hi-fi) design closely matches the final result of a product’s design. Content, visual styles, and animated transitions — all work together to make high fidelity assets look and work as close to the final product as possible.

User Access

Transaction Tracking

Prototype

Prototype link
Play

What I Have Learned

  • User-Centric Approach Matters: Prioritizing intuitive navigation and clear data visualization significantly improves usability.
  • Consistency is Key: Maintaining uniform design elements (colors, fonts, buttons) enhances user experience and brand identity.
  • Feedback Loops Help: Regular user testing revealed pain points early, allowing for iterative improvements.

What I’d Do Differently

  • Simplify Complex Features: Avoid overloading dashboards; use progressive disclosure for advanced options.
    Optimize for Mobile
  • Earlier: Design responsively from the start rather than retrofitting later.
    Document Design
  • Decisions: Keep better records of UX choices to streamline collaboration with developers.

Challenges Overcome

  • User Onboarding: Created interactive elements to reduce the learning curve.
  • Cross-Team Alignment: Used wireframes and prototypes to bridge gaps between designers and stakeholders.