UI Design

Caroline id

Initiated UX revamp for the Branch and Help pages. Proposed cleaner structures and improved content hierarchy for a more user-friendly experience.

Year :

2024

Industry :

Car E-Commerce

Client :

Web App

Project Duration :

Adobe Illustratotr

Featured Project Cover Image
Featured Project Cover Image
Featured Project Cover Image

Background

Caroline is an online platform for buying and selling used cars. During my involvement, the team aimed to modernize its interface and streamline user journeys—particularly on the Branch Page and Help Page, which were outdated and lacked clarity. My objective was to craft a more intuitive experience while aligning with Caroline’s brand identity.


Project Content Image - 1
Project Content Image - 1
Project Content Image - 1

UI Revamp Exploration

Branch Page Exploration

Note: This is an exploration stage and has not been deployed.

To revamp the Branch Page, I conducted benchmarking across multiple platforms:

  • Carsome → For hero sections showcasing services and contextual visuals to help users understand what they can do at Caroline’s branches.

  • IKEA → For branch listing layouts with large, clear images and branch names, paired with structured operating hours (weekday vs weekend).

Idea Adoption

Based on this research, I proposed:

  • Adding a service-focused hero section, inspired by Carsome, to give immediate context about branch offerings.

  • Displaying branches in a grid layout with large visuals (adopted from IKEA) for better scannability and visual appeal.

  • Including a service reminder section, inspired by Carsome, at the bottom of the page to help users navigate between “buy car,” “pre-order,” “sell car,” and “trade-in.”


Help Page Exploration

Note: This is an exploration stage and has not been deployed.

To revamp the Help Page, I conducted benchmarking across multiple platforms:

  • Carsome → For a clean hero section with simple, direct messaging to help users quickly identify the page's purpose.

  • Spotify & Sociolla → For tab-based categorization that improves content discoverability and allows users to switch between sections seamlessly.

  • Traveloka → For step-by-step guidance layouts that provide clear, sequential instructions supported by visuals.

  • Sociolla & Carsome → For FAQ structures that display information efficiently on a single page without additional navigation.

Idea Adoption

Based on this research, I proposed:

  • Adapting Carsome’s “keep it simple” hero section for a focused and distraction-free entry point.

  • Organizing FAQs into tabbed categories (steps & FAQs) to improve clarity and usability.

  • Implementing a vertical step-by-step guidance format inspired by Traveloka to make processes easier to follow.

  • Using Sociolla’s split-page layout to display steps on the left and FAQs on the right, ensuring quick reference and better user flow.


Icon Design

Developed a custom icon set to modernize Caroline’s website interface. Icons designed to be simple, recognizable, and visually consistent with Caroline’s color palette.

Tool used: Adobe Illustrator

Execution

While the UI revamp for Caroline is still in the exploration phase, several deliverables are already finalized and prepared for future deployment.

The visual comparison below illustrates the shift from the previous homepage to the proposed redesign:

  • Before (left): The UI relied heavily on text and lacked quick-access visual cues, making navigation less intuitive for users.

  • After (right): The redesign introduces a cleaner layout, a prominent icon set for key actions (e.g., Buy, Sell, Trade-In), and improved visual hierarchy, providing a more modern and accessible interface.



This revamped foundation not only enhances usability but also establishes a scalable design framework that supports future updates without disrupting the current user flow.

Contributions

  • Delivered icon designs that are ready to deploy, improving visual clarity and consistency.

  • Produced UI revamp explorations for the Branch and Help Pages, creating actionable design references for future development.

  • Established benchmarked design strategies, ensuring that Caroline’s next iteration is user-centered and aligned with industry standards.

Although the redesign has not yet launched, my work provides a clear roadmap and a strong visual foundation for Caroline’s next phase of growth.

More Projects

UI Design

Caroline id

Initiated UX revamp for the Branch and Help pages. Proposed cleaner structures and improved content hierarchy for a more user-friendly experience.

Year :

2024

Industry :

Car E-Commerce

Client :

Web App

Project Duration :

Adobe Illustratotr

Featured Project Cover Image
Featured Project Cover Image
Featured Project Cover Image

Background

Caroline is an online platform for buying and selling used cars. During my involvement, the team aimed to modernize its interface and streamline user journeys—particularly on the Branch Page and Help Page, which were outdated and lacked clarity. My objective was to craft a more intuitive experience while aligning with Caroline’s brand identity.


Project Content Image - 1
Project Content Image - 1
Project Content Image - 1

UI Revamp Exploration

Branch Page Exploration

Note: This is an exploration stage and has not been deployed.

To revamp the Branch Page, I conducted benchmarking across multiple platforms:

  • Carsome → For hero sections showcasing services and contextual visuals to help users understand what they can do at Caroline’s branches.

  • IKEA → For branch listing layouts with large, clear images and branch names, paired with structured operating hours (weekday vs weekend).

Idea Adoption

Based on this research, I proposed:

  • Adding a service-focused hero section, inspired by Carsome, to give immediate context about branch offerings.

  • Displaying branches in a grid layout with large visuals (adopted from IKEA) for better scannability and visual appeal.

  • Including a service reminder section, inspired by Carsome, at the bottom of the page to help users navigate between “buy car,” “pre-order,” “sell car,” and “trade-in.”


Help Page Exploration

Note: This is an exploration stage and has not been deployed.

To revamp the Help Page, I conducted benchmarking across multiple platforms:

  • Carsome → For a clean hero section with simple, direct messaging to help users quickly identify the page's purpose.

  • Spotify & Sociolla → For tab-based categorization that improves content discoverability and allows users to switch between sections seamlessly.

  • Traveloka → For step-by-step guidance layouts that provide clear, sequential instructions supported by visuals.

  • Sociolla & Carsome → For FAQ structures that display information efficiently on a single page without additional navigation.

Idea Adoption

Based on this research, I proposed:

  • Adapting Carsome’s “keep it simple” hero section for a focused and distraction-free entry point.

  • Organizing FAQs into tabbed categories (steps & FAQs) to improve clarity and usability.

  • Implementing a vertical step-by-step guidance format inspired by Traveloka to make processes easier to follow.

  • Using Sociolla’s split-page layout to display steps on the left and FAQs on the right, ensuring quick reference and better user flow.


Icon Design

Developed a custom icon set to modernize Caroline’s website interface. Icons designed to be simple, recognizable, and visually consistent with Caroline’s color palette.

Tool used: Adobe Illustrator

Execution

While the UI revamp for Caroline is still in the exploration phase, several deliverables are already finalized and prepared for future deployment.

The visual comparison below illustrates the shift from the previous homepage to the proposed redesign:

  • Before (left): The UI relied heavily on text and lacked quick-access visual cues, making navigation less intuitive for users.

  • After (right): The redesign introduces a cleaner layout, a prominent icon set for key actions (e.g., Buy, Sell, Trade-In), and improved visual hierarchy, providing a more modern and accessible interface.



This revamped foundation not only enhances usability but also establishes a scalable design framework that supports future updates without disrupting the current user flow.

Contributions

  • Delivered icon designs that are ready to deploy, improving visual clarity and consistency.

  • Produced UI revamp explorations for the Branch and Help Pages, creating actionable design references for future development.

  • Established benchmarked design strategies, ensuring that Caroline’s next iteration is user-centered and aligned with industry standards.

Although the redesign has not yet launched, my work provides a clear roadmap and a strong visual foundation for Caroline’s next phase of growth.

More Projects

UI Design

Caroline id

Initiated UX revamp for the Branch and Help pages. Proposed cleaner structures and improved content hierarchy for a more user-friendly experience.

Year :

2024

Industry :

Car E-Commerce

Client :

Web App

Project Duration :

Adobe Illustratotr

Featured Project Cover Image
Featured Project Cover Image
Featured Project Cover Image

Background

Caroline is an online platform for buying and selling used cars. During my involvement, the team aimed to modernize its interface and streamline user journeys—particularly on the Branch Page and Help Page, which were outdated and lacked clarity. My objective was to craft a more intuitive experience while aligning with Caroline’s brand identity.


Project Content Image - 1
Project Content Image - 1
Project Content Image - 1

UI Revamp Exploration

Branch Page Exploration

Note: This is an exploration stage and has not been deployed.

To revamp the Branch Page, I conducted benchmarking across multiple platforms:

  • Carsome → For hero sections showcasing services and contextual visuals to help users understand what they can do at Caroline’s branches.

  • IKEA → For branch listing layouts with large, clear images and branch names, paired with structured operating hours (weekday vs weekend).

Idea Adoption

Based on this research, I proposed:

  • Adding a service-focused hero section, inspired by Carsome, to give immediate context about branch offerings.

  • Displaying branches in a grid layout with large visuals (adopted from IKEA) for better scannability and visual appeal.

  • Including a service reminder section, inspired by Carsome, at the bottom of the page to help users navigate between “buy car,” “pre-order,” “sell car,” and “trade-in.”


Help Page Exploration

Note: This is an exploration stage and has not been deployed.

To revamp the Help Page, I conducted benchmarking across multiple platforms:

  • Carsome → For a clean hero section with simple, direct messaging to help users quickly identify the page's purpose.

  • Spotify & Sociolla → For tab-based categorization that improves content discoverability and allows users to switch between sections seamlessly.

  • Traveloka → For step-by-step guidance layouts that provide clear, sequential instructions supported by visuals.

  • Sociolla & Carsome → For FAQ structures that display information efficiently on a single page without additional navigation.

Idea Adoption

Based on this research, I proposed:

  • Adapting Carsome’s “keep it simple” hero section for a focused and distraction-free entry point.

  • Organizing FAQs into tabbed categories (steps & FAQs) to improve clarity and usability.

  • Implementing a vertical step-by-step guidance format inspired by Traveloka to make processes easier to follow.

  • Using Sociolla’s split-page layout to display steps on the left and FAQs on the right, ensuring quick reference and better user flow.


Icon Design

Developed a custom icon set to modernize Caroline’s website interface. Icons designed to be simple, recognizable, and visually consistent with Caroline’s color palette.

Tool used: Adobe Illustrator

Execution

While the UI revamp for Caroline is still in the exploration phase, several deliverables are already finalized and prepared for future deployment.

The visual comparison below illustrates the shift from the previous homepage to the proposed redesign:

  • Before (left): The UI relied heavily on text and lacked quick-access visual cues, making navigation less intuitive for users.

  • After (right): The redesign introduces a cleaner layout, a prominent icon set for key actions (e.g., Buy, Sell, Trade-In), and improved visual hierarchy, providing a more modern and accessible interface.



This revamped foundation not only enhances usability but also establishes a scalable design framework that supports future updates without disrupting the current user flow.

Contributions

  • Delivered icon designs that are ready to deploy, improving visual clarity and consistency.

  • Produced UI revamp explorations for the Branch and Help Pages, creating actionable design references for future development.

  • Established benchmarked design strategies, ensuring that Caroline’s next iteration is user-centered and aligned with industry standards.

Although the redesign has not yet launched, my work provides a clear roadmap and a strong visual foundation for Caroline’s next phase of growth.

More Projects

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