A collection of high-fidelity desktop and mobile UI mockups showcasing a cross-industry SaaS dashboard. The layouts include a dark-themed delivery tracking map with live driver locations, a restaurant management dashboard displaying sales analytics and hot orders, a clean property listings matrix for real estate agents with high-quality interior images, and a comprehensive CRM client communications pipeline
A collection of high-fidelity desktop and mobile UI mockups showcasing a cross-industry SaaS dashboard. The layouts include a dark-themed delivery tracking map with live driver locations, a restaurant management dashboard displaying sales analytics and hot orders, a clean property listings matrix for real estate agents with high-quality interior images, and a comprehensive CRM client communications pipeline

About project

SaaS platform that facilitate seamless management of products, clients, and sales of businesses across various industries.

The Approach

Using Jakob Nielsen’s UX principle of Matching the System to the Real World, CareerRobo app is created to eliminate the "discovery deficit" caused by abstract career tools. The app is around Gen Z's native digital habits rather than forcing them into traditional, institutional career frameworks.

What I did

Market Research

Competitive analysis

User survey

Flow diagrams

Wireframes

Prototype

High-fidelity UI

Accessibility evaluation

Existing Research

The Data

The SaaS industry has experienced significant growth over the past decade. According to a report by Grand View Research, the global SaaS market size was valued at over USD 158 billion in 2020 and is expected to reach USD 307.3 billion by 2028, with a compound annual growth rate (CAGR) of 10.5%.

The Problem

Businesses such as real estate agents and food chains encounter challenges in effectively managing vast amounts of client and product information due to the sheer volume involved.

A dark blue rectangular graphic displaying a financial data chart titled 'Median Revenue Growth Rates for SaaS Companies by ARR Size,' featuring a vertical bar graph mapping growth percentages against annual recurring revenue milestones.

Competitive Analysis

I analysed 3 most popular platforms in the field - looking both at the user experience and negative app store comments to find patterns

Problems from the comments

I can’t control manage the discount offers. Even updating menu you I had to call customer support.

woman wearing black crew-neck shirt

LAURA

Propertybase User

I can’t control manage the discount offers. Even updating menu you I had to call customer support.

woman wearing black crew-neck shirt

LAURA

Propertybase User

I wish it can keep both CRM and properties listings in sync and better interface design.

man standing near white wall

JOHN

Zillow Premier User

I wish it can keep both CRM and properties listings in sync and better interface design.

man standing near white wall

JOHN

Zillow Premier User

Not that great for email marketing. I can’t see and compare which emails work best.

man in black crew neck shirt

MATT

Uber Eats User

Not that great for email marketing. I can’t see and compare which emails work best.

man in black crew neck shirt

MATT

Uber Eats User

User Survey

I conducted a survey among real estate agents or restaurant manager who needs a solution to manage their business more efficiently on Facebook.

What’s the most important factor you take into account when using a platform to manage your business?

7

80%

Career Assessment Accuracy

Generic quizzes, little real clarity

High school students often lack a clear picture of their own strengths and interests, and the generic quizzes most tools offer don't close that gap. 80% say these assessments gave them little to no real clarity on what path might suit them.

75%

Personalized Pathways

One-time results that never adapt

Most career platforms, service or assesment give a one-time result and never adapt as a student's interests change or deepen. 75% say the guidance they received felt static and didn't evolve with them.

60%

Real-World Industry Insight

Little exposure to the actual day-to-day

Students rarely get an honest look at what a job actually involves day-to-day, beyond a title and a salary range. 60% say they had little to no real exposure to what the work is actually like before committing to a path.

34%

Mentor/Counselor Support

Mostly left to figure it out alone

Most students are left to figure out their career path largely on their own, with little access to real human guidance. Only 34% felt they had meaningful mentor or counselor support when it mattered most.

Notable Comments

For me, the most important is to save all the information of my clients!

closeup photography of woman smiling

HANA

Propertybase User

The platform we currently use make it hard for me to navigate to control my property listings.

woman in white crew neck shirt smiling

Marina

Zillow Premier User

I wanna see the dashboard of all marketing campaigns that I run in one place.

men's gray crew-neck shirt

JOHN

Uber Eats User

Initial research shows

An increasing demand exists for a user-friendly, cost-effective solution that allows businesses to handle their products and customer data efficiently.

User Flow

To out line all the necessary functionality I created a simple flow diagram of the main tasks users can do. One of the flows is shown below.

Main Client Flow

A detailed UX user flow diagram outlining the system architecture for client management. The flowchart connects rectangular action blocks with arrows, mapping the user journey from viewing the main dashboard, filtering product inventories, tracking real-time client sales communication, and generating custom discount codes or email marketing campaigns.
A detailed UX user flow diagram outlining the system architecture for client management. The flowchart connects rectangular action blocks with arrows, mapping the user journey from viewing the main dashboard, filtering product inventories, tracking real-time client sales communication, and generating custom discount codes or email marketing campaigns.

Low-fidelity Wireframes

Once the flow is established , I stared creating the low-fidelity wireframes of the main flow.

A monochrome low-fidelity desktop wireframe detailing the main analytics dashboard interface. It features a thin left-hand navigation sidebar and a spacious content arena containing three small, rectangular KPI metric blocks stacked horizontally above a massive, wide placeholder card meant for primary data charts or performance graphs
A monochrome low-fidelity desktop wireframe detailing the main analytics dashboard interface. It features a thin left-hand navigation sidebar and a spacious content arena containing three small, rectangular KPI metric blocks stacked horizontally above a massive, wide placeholder card meant for primary data charts or performance graphs
A monochrome low-fidelity desktop wireframe illustrating a systemized data management or client log view. The top zone features nested search and filter inputs with clean rectangular borders, positioned over a dense vertical data table containing multi-line text blocks, interactive checkbox components, and action link placeholders.
A monochrome low-fidelity desktop wireframe illustrating a systemized data management or client log view. The top zone features nested search and filter inputs with clean rectangular borders, positioned over a dense vertical data table containing multi-line text blocks, interactive checkbox components, and action link placeholders.
A monochrome low-fidelity desktop wireframe displaying a split-screen operational layout. The left half of the grid is dominated by a substantial, framed square placeholder designed for an interactive logistics map or asset visualization, paired with a right-side panel layout stacked with secondary metric counters and input fields.
A monochrome low-fidelity desktop wireframe displaying a split-screen operational layout. The left half of the grid is dominated by a substantial, framed square placeholder designed for an interactive logistics map or asset visualization, paired with a right-side panel layout stacked with secondary metric counters and input fields.
A monochrome low-fidelity desktop wireframe outlining an individual record detail configuration or user editing layout. The design features a header section detailing specific entity details, which sits directly above an organized matrix of multi-column text rows, data tables, and structured text fields for modifying product settings.

High-fidelity UI Design

Once the initial flow was complete. I started by creating a couple of the main screens of the app. I started by defining the fonts and colors

Color palette

Accent, primary, secondary, background

Main CTA button color

Font

Plus Jakarta Sans

AaBbCcDdFfGgHh

AaBbCcDdFfGgHh

A UX/UI design showcase section titled 'Figma File' presenting a collection of high-fidelity desktop and mobile application layouts against a clean cream background. The top left features a minimalist style guide outlining a typography system set in 'Plus Jakarta Sans' next to circular UI color palette swatches, highlighting a vibrant green circle designated as the 'Main CTA button color.' Arranged below the design assets are multiple polished operational dashboards, including a dark-themed logistics delivery tracking map displaying vehicle routes, a white real estate listings grid featuring thumbnail photos of modern properties, and an analytical management platform layout showing sales performance graphs, client communication message threads, and active order pipelines.

High-fidelity dashboard screens for a multi-user business management platform serving restaurant and real estate workflows.

Figma File

A snapshot of my Figma file.

A comprehensive snapshot of a Figma design workspace displaying a grid of numerous user interface wireframes and artboards for the SaaS platform. The left side panel shows a dark mode layers and pages hierarchy list. The main canvas area organizes dozens of interface designs into structured rows and columns according to user flows—including initial wireframe concepts, component asset testing, mobile app screens, and full-width desktop operational dashboards mapping out real estate management matrices and restaurant delivery tracking analytics grids.

Create a free website with Framer, the website builder loved by startups, designers and agencies.