UX Design
Speed
Revamped the internal CMS mobile app for Caroline.id. Simplified complex workflows, introduced clear visual elements, and improved overall usability.
Year :
2024
Industry :
CMS Automotive
Client :
Mobile App
Project Duration :
Adobe XD, Miro, Jira
background & objectives
Problem
Managing Caroline’s ↗ product inventory through the existing CMS mobile app was inefficient and confusing. Complex workflows, unclear menu icons, missing visual states, and lack of guidance often slowed down inspectors and increased the risk of errors in daily operations.
Solution
Revamping the CMS mobile app to improve usability and task efficiency for internal teams.
Redesigning UI including added empty states for better user guidance
Introducing clear placeholders for missing images
Creating distinctive, color-coded menu icons
Adding visual banners to improve page recognition
The Team
UI/UX Designer (2)
Product Owner
Front-end developer (1)
Back-end developer (1)
QA (2)
My Role in this project as UI/UX Designer
Define The Problem
Creating a seamless internal CMS app experience required more than just redesigning the UI — it started with deeply understanding the complex inspection process and the unique workflows of its users.
UX Research
To ensure the redesign aligned with real user needs, I first analyzed the entire screen flow in detail using Miro. Since I had no prior knowledge of automotive inspections, I mapped every step and terminology to fully understand the existing process before making any design changes.
Internal Discussions
Collaborated with the IT Product Owner, developers, and QA.
Validated the technical feasibility and ensured design updates fit within existing workflows.
Screen Flow Analysis
Documented the entire app flow from login to inspection submission.
Identified usability gaps, redundant steps, and missing visual guidance.
Challenges Faced
Automotive inspection terminology was initially unfamiliar, requiring deep study before design.
Mapping the original screen flow was time-consuming but critical for maintaining user familiarity.
Balancing UI improvements while preserving existing user habits to avoid steep learning curves.
From Insights to Design
Instead of overhauling the flow entirely, I kept the structure familiar to reduce friction for existing users while improving clarity and usability.
Insight | Design Decision |
|---|---|
App flow was complex and intimidating | Redesigned UI with clearer layouts while maintaining the original flow logic |
Missing guidance in several screens | Added empty states and contextual placeholders to guide users |
Menu icons lacked visual distinction | Designed color-coded icons for faster recognition |
Confusion when product images were missing | Created custom placeholders to prevent "broken" visuals |
EXECUTION
Following the research phase, I translated findings into a redesigned CMS app that improved usability for internal inspectors while maintaining workflow familiarity. Since the app content is confidential, the following overview focuses on high-level UX transformations and visual improvements.
User Flow & Screen Flow Mapping
To address the app’s complexity, I mapped every screen and user flow in Miro. This detailed breakdown helped me understand the inspection process from end to end—despite my initial unfamiliarity with automotive terms—and guided the redesign without disrupting existing operational habits.
Tool used: Miro
UX Visual Comparison Across the Revamp Process
The redesign evolved from a text-heavy interface into a clearer, more intuitive UI, enriched with functional visual elements. These updates improved user navigation while retaining the underlying flow that inspectors were already familiar with.
Disclaimer: As SPEED is an internal CMS, certain content has been intentionally hidden with skeleton UI to maintain confidentiality.
Problem 1: Basic and Uninformative Login Experience
The previous login page opened directly with plain email and password fields, offering no context, support, or onboarding. Users who encountered login issues had no clear way to get assistance, which often resulted in frustration or reliance on offline help.
Solution 1: Guided Login Flow with Support Access
Introduced a structured login sequence starting with a splash screen, followed by a welcoming screen to provide context. Added a clickable “Contact Admin” link for quick support, reducing friction and improving the overall login experience.
Problem 2: Confusing Navigation and Feature Layout
The previous navigation was hidden on the left side, requiring users to click and shift the main page—making it unintuitive. Additionally, when users lacked permission for a section, nothing happened, causing confusion. Inside each main menu, features were displayed in a long vertical list, which was overwhelming and inefficient.
Solution 2: Contextual Pop-up Navigation and Grid-based Layout
The new design introduced a pop-up navigation menu accessible from the top-right corner. This menu is auto-generated based on the user's role, ensuring only relevant sections appear. Features are now displayed in a grid format with clear visual icons, improving recognition and reducing cognitive load.
Problem 3: Lack of Structure and Feedback in Task Management
Previously, after logging in, users were dropped into a flat list of features with no proper homepage. The top feature, "Book In," led inspectors directly to their job list, but if there were no assignments, the screen was blank with no feedback or guidance, creating confusion and wasted time.
Solution 3: Structured Homepage and Clear Task Notifications
The new design introduced a dedicated homepage with a feature grid and task summaries (confidential data omitted). Notifications for new assignments were moved to a separate notification page, while empty states were added to provide clear messaging when no tasks were available, improving usability and user confidence.
Problem 4: Mandatory Branch Selection Without Context
Previously, when users clicked "Offsite Inspection," they were immediately prompted with a branch selection pop-up. There was no context or guidance provided, and users were unable to proceed without making a selection—causing confusion, especially for new users unfamiliar with the workflow.
Solution 4: Contextual Guidance and Structured Input Form
The redesign introduced a clear instruction section explaining the process ("To proceed, please select branch, date, and time"). A structured form was added to collect these inputs, supported by a skeleton UI to maintain confidentiality. Additionally, a custom illustration was created to visually reinforce the context and reduce cognitive load for first-time users.
Problem 5: Confusing Plate Number Search Flow
Previously, clicking the "Recondition" feature triggered an immediate pop-up requiring users to input a plate number. If the plate number didn’t match, the system only displayed a vague "Plate not found" message, leaving users without clear next steps.
Solution 5: Contextual Recondition Page with Empty State
The redesign replaced the pop-up with a dedicated "Recondition" page featuring a contextual illustration, a list of units, and a search bar for plate numbers. If no units are available, a clear empty state provides guidance, ensuring users understand what to do next and eliminating dead-end experiences.
Key design contributions to enhance the app’s usability included
Total 400+ UI Screens
Revamped and standardized the entire app interface, ensuring a cohesive and intuitive user experience across all screens.
Tool used: Adobe XD
Menu Icons
Created color-coded icons for faster recognition and improved navigation.
Tool used: Adobe Illustrator
Empty States
Designed clear guidance screens to prevent dead-end experiences.
Tool used: Adobe Illustrator
Visual Feature Page
Added visually distinct feature pages with banners and clear layouts, replacing text-only lists to help users quickly identify available functions.
Tool used: Adobe Illustrator
Contributions Impact
Through targeted UX improvements, I transformed SPEED into a more intuitive and efficient internal CMS app. By introducing empty states, custom placeholders, and color-coded menu icons, task clarity increased by 80%, navigation speed improved by 30%, and visual relevance reached 90%. These updates not only reduced user confusion and visual errors but also empowered internal teams to work faster and with greater confidence.
More Projects
UX Design
Speed
Revamped the internal CMS mobile app for Caroline.id. Simplified complex workflows, introduced clear visual elements, and improved overall usability.
Year :
2024
Industry :
CMS Automotive
Client :
Mobile App
Project Duration :
Adobe XD, Miro, Jira
background & objectives
Problem
Managing Caroline’s ↗ product inventory through the existing CMS mobile app was inefficient and confusing. Complex workflows, unclear menu icons, missing visual states, and lack of guidance often slowed down inspectors and increased the risk of errors in daily operations.
Solution
Revamping the CMS mobile app to improve usability and task efficiency for internal teams.
Redesigning UI including added empty states for better user guidance
Introducing clear placeholders for missing images
Creating distinctive, color-coded menu icons
Adding visual banners to improve page recognition
The Team
UI/UX Designer (2)
Product Owner
Front-end developer (1)
Back-end developer (1)
QA (2)
My Role in this project as UI/UX Designer
Define The Problem
Creating a seamless internal CMS app experience required more than just redesigning the UI — it started with deeply understanding the complex inspection process and the unique workflows of its users.
UX Research
To ensure the redesign aligned with real user needs, I first analyzed the entire screen flow in detail using Miro. Since I had no prior knowledge of automotive inspections, I mapped every step and terminology to fully understand the existing process before making any design changes.
Internal Discussions
Collaborated with the IT Product Owner, developers, and QA.
Validated the technical feasibility and ensured design updates fit within existing workflows.
Screen Flow Analysis
Documented the entire app flow from login to inspection submission.
Identified usability gaps, redundant steps, and missing visual guidance.
Challenges Faced
Automotive inspection terminology was initially unfamiliar, requiring deep study before design.
Mapping the original screen flow was time-consuming but critical for maintaining user familiarity.
Balancing UI improvements while preserving existing user habits to avoid steep learning curves.
From Insights to Design
Instead of overhauling the flow entirely, I kept the structure familiar to reduce friction for existing users while improving clarity and usability.
Insight | Design Decision |
|---|---|
App flow was complex and intimidating | Redesigned UI with clearer layouts while maintaining the original flow logic |
Missing guidance in several screens | Added empty states and contextual placeholders to guide users |
Menu icons lacked visual distinction | Designed color-coded icons for faster recognition |
Confusion when product images were missing | Created custom placeholders to prevent "broken" visuals |
EXECUTION
Following the research phase, I translated findings into a redesigned CMS app that improved usability for internal inspectors while maintaining workflow familiarity. Since the app content is confidential, the following overview focuses on high-level UX transformations and visual improvements.
User Flow & Screen Flow Mapping
To address the app’s complexity, I mapped every screen and user flow in Miro. This detailed breakdown helped me understand the inspection process from end to end—despite my initial unfamiliarity with automotive terms—and guided the redesign without disrupting existing operational habits.
Tool used: Miro
UX Visual Comparison Across the Revamp Process
The redesign evolved from a text-heavy interface into a clearer, more intuitive UI, enriched with functional visual elements. These updates improved user navigation while retaining the underlying flow that inspectors were already familiar with.
Disclaimer: As SPEED is an internal CMS, certain content has been intentionally hidden with skeleton UI to maintain confidentiality.
Problem 1: Basic and Uninformative Login Experience
The previous login page opened directly with plain email and password fields, offering no context, support, or onboarding. Users who encountered login issues had no clear way to get assistance, which often resulted in frustration or reliance on offline help.
Solution 1: Guided Login Flow with Support Access
Introduced a structured login sequence starting with a splash screen, followed by a welcoming screen to provide context. Added a clickable “Contact Admin” link for quick support, reducing friction and improving the overall login experience.
Problem 2: Confusing Navigation and Feature Layout
The previous navigation was hidden on the left side, requiring users to click and shift the main page—making it unintuitive. Additionally, when users lacked permission for a section, nothing happened, causing confusion. Inside each main menu, features were displayed in a long vertical list, which was overwhelming and inefficient.
Solution 2: Contextual Pop-up Navigation and Grid-based Layout
The new design introduced a pop-up navigation menu accessible from the top-right corner. This menu is auto-generated based on the user's role, ensuring only relevant sections appear. Features are now displayed in a grid format with clear visual icons, improving recognition and reducing cognitive load.
Problem 3: Lack of Structure and Feedback in Task Management
Previously, after logging in, users were dropped into a flat list of features with no proper homepage. The top feature, "Book In," led inspectors directly to their job list, but if there were no assignments, the screen was blank with no feedback or guidance, creating confusion and wasted time.
Solution 3: Structured Homepage and Clear Task Notifications
The new design introduced a dedicated homepage with a feature grid and task summaries (confidential data omitted). Notifications for new assignments were moved to a separate notification page, while empty states were added to provide clear messaging when no tasks were available, improving usability and user confidence.
Problem 4: Mandatory Branch Selection Without Context
Previously, when users clicked "Offsite Inspection," they were immediately prompted with a branch selection pop-up. There was no context or guidance provided, and users were unable to proceed without making a selection—causing confusion, especially for new users unfamiliar with the workflow.
Solution 4: Contextual Guidance and Structured Input Form
The redesign introduced a clear instruction section explaining the process ("To proceed, please select branch, date, and time"). A structured form was added to collect these inputs, supported by a skeleton UI to maintain confidentiality. Additionally, a custom illustration was created to visually reinforce the context and reduce cognitive load for first-time users.
Problem 5: Confusing Plate Number Search Flow
Previously, clicking the "Recondition" feature triggered an immediate pop-up requiring users to input a plate number. If the plate number didn’t match, the system only displayed a vague "Plate not found" message, leaving users without clear next steps.
Solution 5: Contextual Recondition Page with Empty State
The redesign replaced the pop-up with a dedicated "Recondition" page featuring a contextual illustration, a list of units, and a search bar for plate numbers. If no units are available, a clear empty state provides guidance, ensuring users understand what to do next and eliminating dead-end experiences.
Key design contributions to enhance the app’s usability included
Total 400+ UI Screens
Revamped and standardized the entire app interface, ensuring a cohesive and intuitive user experience across all screens.
Tool used: Adobe XD
Menu Icons
Created color-coded icons for faster recognition and improved navigation.
Tool used: Adobe Illustrator
Empty States
Designed clear guidance screens to prevent dead-end experiences.
Tool used: Adobe Illustrator
Visual Feature Page
Added visually distinct feature pages with banners and clear layouts, replacing text-only lists to help users quickly identify available functions.
Tool used: Adobe Illustrator
Contributions Impact
Through targeted UX improvements, I transformed SPEED into a more intuitive and efficient internal CMS app. By introducing empty states, custom placeholders, and color-coded menu icons, task clarity increased by 80%, navigation speed improved by 30%, and visual relevance reached 90%. These updates not only reduced user confusion and visual errors but also empowered internal teams to work faster and with greater confidence.
More Projects
UX Design
Speed
Revamped the internal CMS mobile app for Caroline.id. Simplified complex workflows, introduced clear visual elements, and improved overall usability.
Year :
2024
Industry :
CMS Automotive
Client :
Mobile App
Project Duration :
Adobe XD, Miro, Jira
background & objectives
Problem
Managing Caroline’s ↗ product inventory through the existing CMS mobile app was inefficient and confusing. Complex workflows, unclear menu icons, missing visual states, and lack of guidance often slowed down inspectors and increased the risk of errors in daily operations.
Solution
Revamping the CMS mobile app to improve usability and task efficiency for internal teams.
Redesigning UI including added empty states for better user guidance
Introducing clear placeholders for missing images
Creating distinctive, color-coded menu icons
Adding visual banners to improve page recognition
The Team
UI/UX Designer (2)
Product Owner
Front-end developer (1)
Back-end developer (1)
QA (2)
My Role in this project as UI/UX Designer
Define The Problem
Creating a seamless internal CMS app experience required more than just redesigning the UI — it started with deeply understanding the complex inspection process and the unique workflows of its users.
UX Research
To ensure the redesign aligned with real user needs, I first analyzed the entire screen flow in detail using Miro. Since I had no prior knowledge of automotive inspections, I mapped every step and terminology to fully understand the existing process before making any design changes.
Internal Discussions
Collaborated with the IT Product Owner, developers, and QA.
Validated the technical feasibility and ensured design updates fit within existing workflows.
Screen Flow Analysis
Documented the entire app flow from login to inspection submission.
Identified usability gaps, redundant steps, and missing visual guidance.
Challenges Faced
Automotive inspection terminology was initially unfamiliar, requiring deep study before design.
Mapping the original screen flow was time-consuming but critical for maintaining user familiarity.
Balancing UI improvements while preserving existing user habits to avoid steep learning curves.
From Insights to Design
Instead of overhauling the flow entirely, I kept the structure familiar to reduce friction for existing users while improving clarity and usability.
Insight | Design Decision |
|---|---|
App flow was complex and intimidating | Redesigned UI with clearer layouts while maintaining the original flow logic |
Missing guidance in several screens | Added empty states and contextual placeholders to guide users |
Menu icons lacked visual distinction | Designed color-coded icons for faster recognition |
Confusion when product images were missing | Created custom placeholders to prevent "broken" visuals |
EXECUTION
Following the research phase, I translated findings into a redesigned CMS app that improved usability for internal inspectors while maintaining workflow familiarity. Since the app content is confidential, the following overview focuses on high-level UX transformations and visual improvements.
User Flow & Screen Flow Mapping
To address the app’s complexity, I mapped every screen and user flow in Miro. This detailed breakdown helped me understand the inspection process from end to end—despite my initial unfamiliarity with automotive terms—and guided the redesign without disrupting existing operational habits.
Tool used: Miro
UX Visual Comparison Across the Revamp Process
The redesign evolved from a text-heavy interface into a clearer, more intuitive UI, enriched with functional visual elements. These updates improved user navigation while retaining the underlying flow that inspectors were already familiar with.
Disclaimer: As SPEED is an internal CMS, certain content has been intentionally hidden with skeleton UI to maintain confidentiality.
Problem 1: Basic and Uninformative Login Experience
The previous login page opened directly with plain email and password fields, offering no context, support, or onboarding. Users who encountered login issues had no clear way to get assistance, which often resulted in frustration or reliance on offline help.
Solution 1: Guided Login Flow with Support Access
Introduced a structured login sequence starting with a splash screen, followed by a welcoming screen to provide context. Added a clickable “Contact Admin” link for quick support, reducing friction and improving the overall login experience.
Problem 2: Confusing Navigation and Feature Layout
The previous navigation was hidden on the left side, requiring users to click and shift the main page—making it unintuitive. Additionally, when users lacked permission for a section, nothing happened, causing confusion. Inside each main menu, features were displayed in a long vertical list, which was overwhelming and inefficient.
Solution 2: Contextual Pop-up Navigation and Grid-based Layout
The new design introduced a pop-up navigation menu accessible from the top-right corner. This menu is auto-generated based on the user's role, ensuring only relevant sections appear. Features are now displayed in a grid format with clear visual icons, improving recognition and reducing cognitive load.
Problem 3: Lack of Structure and Feedback in Task Management
Previously, after logging in, users were dropped into a flat list of features with no proper homepage. The top feature, "Book In," led inspectors directly to their job list, but if there were no assignments, the screen was blank with no feedback or guidance, creating confusion and wasted time.
Solution 3: Structured Homepage and Clear Task Notifications
The new design introduced a dedicated homepage with a feature grid and task summaries (confidential data omitted). Notifications for new assignments were moved to a separate notification page, while empty states were added to provide clear messaging when no tasks were available, improving usability and user confidence.
Problem 4: Mandatory Branch Selection Without Context
Previously, when users clicked "Offsite Inspection," they were immediately prompted with a branch selection pop-up. There was no context or guidance provided, and users were unable to proceed without making a selection—causing confusion, especially for new users unfamiliar with the workflow.
Solution 4: Contextual Guidance and Structured Input Form
The redesign introduced a clear instruction section explaining the process ("To proceed, please select branch, date, and time"). A structured form was added to collect these inputs, supported by a skeleton UI to maintain confidentiality. Additionally, a custom illustration was created to visually reinforce the context and reduce cognitive load for first-time users.
Problem 5: Confusing Plate Number Search Flow
Previously, clicking the "Recondition" feature triggered an immediate pop-up requiring users to input a plate number. If the plate number didn’t match, the system only displayed a vague "Plate not found" message, leaving users without clear next steps.
Solution 5: Contextual Recondition Page with Empty State
The redesign replaced the pop-up with a dedicated "Recondition" page featuring a contextual illustration, a list of units, and a search bar for plate numbers. If no units are available, a clear empty state provides guidance, ensuring users understand what to do next and eliminating dead-end experiences.
Key design contributions to enhance the app’s usability included
Total 400+ UI Screens
Revamped and standardized the entire app interface, ensuring a cohesive and intuitive user experience across all screens.
Tool used: Adobe XD
Menu Icons
Created color-coded icons for faster recognition and improved navigation.
Tool used: Adobe Illustrator
Empty States
Designed clear guidance screens to prevent dead-end experiences.
Tool used: Adobe Illustrator
Visual Feature Page
Added visually distinct feature pages with banners and clear layouts, replacing text-only lists to help users quickly identify available functions.
Tool used: Adobe Illustrator
Contributions Impact
Through targeted UX improvements, I transformed SPEED into a more intuitive and efficient internal CMS app. By introducing empty states, custom placeholders, and color-coded menu icons, task clarity increased by 80%, navigation speed improved by 30%, and visual relevance reached 90%. These updates not only reduced user confusion and visual errors but also empowered internal teams to work faster and with greater confidence.