Work

About

Contact

FAYE TAN

Work

About

Contact

FAYE TAN

Work

About

Contact

FAYE TAN

Work

About

Contact

SGcarmart

Improved information discovery by 82.3% through an optimised used car experience

My Role

As a Product Designer, I collaborated with a remote team of 5 to identify key pain points in used car listings and product detail pages. I co-analysed and synthesised research findings with 2 designers, translating insights into actionable and user-centric design decisions. Utilising data and user behaviour insights, I implemented design iterations that optimised the user experience. Additionally, I spearheaded the creation of UI designs and interactive prototypes, ensuring a seamless and consistent experience across all platforms.

Team Structure

5 UX Designers/Researchers (including me)

Research Methods

Heuristic evaluation, competitor analysis, heatmap evaluation, data analysis, microsurvey, word cloud, user interview, usability testing, A/B testing, affinity mapping

Discipline

UX design, UI design

Platform

Web and mobile

Time Frame

Completed in 4 weeks (2023)

My Role

As the project lead, I led a remote team of 3 UX/UI designers to revamp ZOLO's website's user experience and interface. Through collaborative efforts, we identified the root cause of low conversions. Leveraging user research and insights, I conceptualised and led the development and prototyping of responsive user interfaces, overseeing the project's visual direction to ensure a cohesive experience across all platforms.

Team Structure

3 UX Designers/Researchers (including me)

5 UX Designers/Researchers (including me)

Research Methods

Competitor analysis, survey, interview, usability testing

Heuristic evaluation, competitor analysis, heatmap evaluation, data analysis, microsurvey, word cloud, user interview, usability testing, A/B testing, affinity mapping

Discipline

UX design, UI design, visual design

UX design, UI design

Platform

Web and mobile

Time Frame

Completed in 4 weeks (2023)

Overview

The Challenge

The Plan

Research & Discovery

Insights & Recommendation

Next Steps

Learnings

Overview

SGcarmart is Singapore's leading car platform with over two decades in the automotive industry. They offer a diverse selection of thousands of car listings, facilitating seamless second-hand transactions and providing comprehensive motoring support for seasoned enthusiasts and first-time buyers.

Recognising the need for a more user-friendly experience, SGcarmart partnered with us to redesign their decade-old website, focusing on the used car listings and product detail pages to empower users with a seamless search experience and informed decision-making.

Objectives

Uncover user pain points and usability issues that affect efficient car searching and information access.

Analyse the causes of clutter and its impact on user experience within the used car pages.

Design an intuitive search function to empower users to quickly and easily find their desired cars.

Streamline the user journey to facilitate seamless car browsing and informed decision-making.

Improve the user interface for a more modern and user-friendly browsing experience.

Strategic Value

We identified usability issues within the used car search and browsing experience. In response, we redesigned key interfaces to streamline the search process, empower users to make informed decisions and ensure the platform's continued relevance in the ever-evolving online car market.

Outcomes

↑ 82.3%

Improved information discovery by 82.3% (6.5 secs faster; from 7.89 to 1.39 secs) for finding dealer contacts and essential car details

↑ 12%

The redesign of used car pages increased SUS (System Usability Score) by 12% (81 to 98/100) rated by 6 prospects

100% users

Received 100% positive user feedback on the ease of use and intuitive website redesign during testing phase

Following our design recommendations, SGcarmart implemented several changes based on our design suggestions, marking a positive step forward in the competitive Singapore automotive market.

↑ 82.3%

Improved information discovery by 82.3% (6.5 secs faster; from 7.89 to 1.39 secs) for finding dealer contacts and essential car details

↑ 12%

The redesign of used car pages increased SUS (System Usability Score) by 12% (81 to 98/100) rated by 6 prospects

100% users

Received 100% positive user feedback on the ease of use and intuitive website redesign during testing phase

The Challenge

SGcarmart's website hadn't been updated in over a decade, leading to concerns that it might no longer effectively serve users’ needs. The outdated interface, limited features, and cluttered layout made it difficult for users to find information quickly and easily.

Through research, we identified these challenges:

Ineffective search and filters

Limitations in search functionality and advanced filters made it time-consuming for users to refine their searches and narrow down results.

Unclear information on product detail pages (PDPs)

Unclear information on PDPs made it difficult for users to understand the specifics of the cars they were interested in and make informed decisions.

Repetitive content and cluttered layout

The repetitive information created a cluttered layout, which made finding relevant car information and dealer contact details challenging.

How might we improve the website's design and functionality of the used car listing and product detail pages to enable users to quickly and easily access information?

The Plan

We began the project with these questions to gain insights into user preferences, pain points, and behaviour to make data-driven decisions for website improvements:

How well does the current website serve its customers?

What should we prioritise on the website?

What is the typical user journey when considering purchasing a used car?

Research & Discovery

To gain a comprehensive understanding of user needs and identify areas for improvement, we initiated the project focusing on three key areas:

Identifying user pain points

•

Conducted a heuristic evaluation to identify existing problems and areas for improvement.

Evaluating PDP effectiveness

•

Analysed the heatmap to see which parts of the product detail page (PDP) users interacted with the most, providing insights into what was working and what wasn't.

Understanding the typical user journey

•

Interviewed 6 users (potential used car buyers and SGCM website users) to understand their experiences and validate our heatmap findings.

•

Conducted usability testing to identify potential issues and confirm heatmap findings related to the used car PDP and listing pages.

•

Ran a micro survey to gather qualitative feedback on the website’s design and navigation.

These research activities helped us identify usability issues impacting the used car search experience. Based on these findings, we designed solutions that streamline the user journey and empower car buyers to make informed decisions.

(Note: We conducted five of the eight research activities to understand user needs better. I'm happy to provide a more detailed breakdown of the research process if you'd like to learn more.)

Insights & Recommendation

Insight 1

Inconsistent menus and a disappearing navigation bar on the desktop created friction for users, making it difficult to find the information they needed.

Our heatmap of the desktop version showed minimal interaction with most navigation options. Users primarily interacted with a few key options relevant to their needs, indicating an issue with the navigation options and an opportunity for improvement.

A heatmap analysis of user interactions with SGCM's website navigation menu

Inconsistent menus across platforms

The original SGCM website before the redesign

Some menu options on the desktop were not found on the mobile version, leading to confusion when switching platforms and making it difficult for users to find the information they previously accessed on the desktop.

“I can't find the same menu when I switch to my phone. It’s hard to continue what I was doing.”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Disappearing navigation bar

Original Navigation Menu

The navigation menu is not fixed when scrolling down, requiring users to scroll back up to access it.

The original SGCM website before the redesign

During the usability tests, we also noticed that users frequently scrolled back up to access the menu after scrolling down the page.

Original Navigation Menu

The navigation menu is not fixed when scrolling down, requiring users to scroll back up to access it.

The original SGCM website before the redesign

Recommendation 1

Enhance and simplify the navigation menus for a friendlier browsing experience.

Our findings highlighted the need for a navigation redesign on desktop and mobile versions to ensure consistent menus, streamline information discovery, and enhance overall usability.

Standardise navigation menus across platforms

Ensure a seamless transition between desktop and mobile by using consistent menu labels across all platforms. This eliminates confusion and allows users to pick up their search easily between devices.

Revamped SGCM navigation menu

Prioritise essential options and categorise for simplified navigation

Leverage user research and heatmap data to identify the most frequently used navigation menu options. Categorise the less-used options into broader categories to simplify navigation and reduce clutter.

Revamped SGCM navigation menu

Implement a sticky navigation bar

Provide users with quick access to navigation options by implementing a sticky navigation bar. This will reduce the need for excessive scrolling and improve the browsing experience.

New Navigation Menu

With the sticky menu, users can now easily access it at any time.

Revamped SGCM navigation menu

Outcome

Users can now switch platforms without worrying about not finding the same menu options, leading to a more seamless browsing experience.

New Navigation Menu

With the sticky menu, users can now easily access it at any time.

Revamped SGCM navigation menu

Insight 2

The current search and filter categories offer limited options and lack customisation, resulting in longer search times for users to find their desired car listings.

The heatmap data showed the advanced search (11,703 clicks) as the second-most used option, surpassing the search box (10,689 clicks) and basic filters (with significantly fewer interactions). Additionally, user interviews confirmed that users relied more on advanced filters for car searches, indicating that the search box and basic filters do not fully meet their needs.

A heatmap analysis of user interactions with SGCM's search and filter functions

Missing search suggestions

The original SGCM website before the redesign

The search box did not provide users with auto-suggestions to refine searches. Users had to type out their entire query, increasing the time spent searching and making it more difficult to refine their results.

“I was expecting a suggestion as I typed, but there isn’t and I need to type the full model name out.”

“The custom search function seems unintelligent.”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Limited and unintuitive filters

The original SGCM website before the redesign

While the website offers price sorting, users cannot sort listings in ascending and descending order. This limitation made it hard for them to browse car options based on price, and other options (e.g., depreciation and mileage), as highlighted by a user's comment: "Scrolling through all the cars is a pain. Why can't I sort cars from lowest to highest price?"

The original SGCM website before the redesign

Even within the "Advanced Search" filters, users faced difficulties with its restricted and inflexible preset options. They could not customise essential criteria like specifying their desired price range or selecting multiple choices within a filter.

“It will be ideal to set our price range instead of using the system's fixed ranges.”

“I need to do 2 to 3 searches to find cars between $35,000 and $50,000 because the fixed price range doesn’t show them all.”

“Have a price cap instead of a price range?”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Unlike an ideal car search, where choosing a brand like Toyota instantly narrows results to available models, the SGCM website requires users to select the car make first, and then navigate to a separate filter for models, which is less intuitive and requires additional clicks to refine their search.

The original SGCM website before the redesign

“Why can't we choose car make and model at the same time? The search function is somehow not intelligent.”

“Can the scroll position for makes/models stay and not reset to the top whenever the cursor moves?”

“Why are the filters nested within other filters like car makes and models.”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Inconsistent and missing “Advanced Search” filters

“Advanced Search” filter accessed from the used car listing page.

“Advanced Search” filter accessed from other sections (e.g., Vehicle Types or Car Categories) on the used car listing page.

The original SGCM website before the redesign

During usability testing, we discovered that users accessing "Advanced Search" from different sections of the used car listing page saw different filter options. This inconsistency led to users who accessed it from car categories (like COE Cars) missing out on some filter options that could have helped them refine their search more effectively.

The original SGCM website before the redesign

During user interviews, many users expressed a need for more filter options beyond what is currently offered. Specifically, they wanted filters for car colours and transmission types.

Users accessing "Advanced Search" from the used car listing page could select transmission type, while those accessing it from different sections of the used car listing page did not have this option.

During user interviews, many users expressed a need for more filter options beyond what is currently offered. Specifically, they wanted filters for car colours and transmission types.

“I can’t filter by car colour.”

“Why there’s no option to specify colour.”

“Would be good if we could select car colours and transmission.”

“Filters are not relevant! I’m searching for a convertible and there’s no option for that.”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

“Advanced Search” filter accessed from the used car listing page.

“Advanced Search” filter accessed from other sections (e.g., Vehicle Types or Car Categories) on the used car listing page.

The original SGCM website before the redesign

Unclear availability information

The original SGCM website before the redesign

The "Status" filter displayed "Sold Vehicles" alongside available cars. This misleading information created confusion, as users were unsure if the "Sold" cars listed on the website were for sale.

“Please inform the user if the cars are sold out!”

“It’s so weird to see cars that are sold out here.”

“Why are sold cars listed here?”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Recommendation 2

Improve search and filter options for an enhanced car discovery experience

Personalised search with auto-suggestions

Simplify the search process with an auto-suggestion feature in the search box. This feature displays relevant suggestions like popular models or recent searches based on user input and search history, helping users find the cars they are interested in more quickly and efficiently.

Revamped SGCM search box

Enhance and refine filter options

Informed by user research and competitor analysis, prioritise displaying the most relevant and frequently used filters (e.g., price range, COE left) on the used car listing page. This provides quicker access to car discovery without navigating the advanced filters.

Additionally, provides users with the flexibility to sort car listings in ascending (low to high) and descending (high to low) order for quicker car discovery.

Revamped SGCM search and filter options

Empower users to further refine their search by allowing them to set custom filter criteria and make multiple selections within each category.

Revamped SGCM search and filter options

Standardise and expand “Advanced Search” filters

Ensure all access points within the used car listing page lead to a consistent "Advanced Search" experience with the colour filter included. This way, users can refine their search by colour regardless of where they access it (main listing page, car categories (like COE Cars), etc.).

Revamped SGCM search and filter options

Show only available cars

Eliminate confusion by removing the "Sold Vehicles" filter to ensure users only see available cars for purchase.

Outcome

These improvements provide users with a more intuitive experience and improve search efficiency, making it easier to find their desired cars.

Insight 3

65% of users found the used car product detail page (PDP) confusing and overwhelming due to unfamiliar car terminology, missing or unclear information, and repeated elements.

Unclear information and confusing car terms

The original SGCM website before the redesign

The unclear information within the car listings – values like "$32,710/yr" or "23,682km" – were displayed without context, leaving users unsure if it represented an instalment cost, depreciation, or mileage.

Users also found unfamiliar car terms like "ARF," "OMV," and "PARF Cars" confusing because not all car terms had accompanying tooltips with explanations.

“What is PARF? OMV? ARF? Vintage Car? Very hard to understand as a new buyer.”

“Very convoluted with no emphasis on key information.”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Even for car terms with tooltips, requiring additional clicks to access them via lightboxes instead of appearing on hover discouraged users from seeking clarification.

Car term tooltips did not appear on hover; instead, users had to click to view the information and then click again to close the lightbox.

The original SGCM website before the redesign

Car term tooltips did not appear on hover; instead, users had to click to view the information and then click again to close the lightbox.

The original SGCM website before the redesign

Missing essential details

The original SGCM website before the redesign

While the PDP displayed some financial details, it did not provide a financial calculator. This prevented users from personalising calculations based on their preferred loan amount, terms, and interest rates. They had to navigate to a separate tab or link to access this information.

Additionally, for some cars, mileage information was missing, making it difficult for users to estimate running costs.

“I realised some cars don’t provide mileage information. Would be good to make this mandatory to make the information complete.”

“Why can’t the finance details be shown on the main page?”

“I need to know the monthly payments and interest rates without going through multiple tabs.”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Repeated elements

The original SGCM website before the redesign

Repeated elements were seen in multiple places on the website. Users were confused by duplicate elements like a "Photo" tab replicating an existing image gallery. This redundancy led them to click on both elements and believe there was additional information.

“When I clicked on the photos, it led me to the list of the same car images…”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Lack of clear call-to-action (CTA) buttons

The original SGCM website before the redesign

Call-to-action (CTA) buttons are crucial for guiding users toward their next steps on a website. During usability testing, we observed that the lack of CTAs on the product detail page (PDP) made locating dealer contact information time-consuming for users. They spent an average search time of 9.58 seconds on the web and 12.40 seconds on mobile.

“Is there a way to make contact info clearer and more obvious?”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Recommendation 3

Enhance used car pages with clearer information and improved usability.

Provide clear explanations

Improve user understanding by adding tooltips and visual cues for all car terms. These tooltips will appear on hover to eliminate the need for extra clicks and help new car buyers understand complex terms like "ARF," "OMV," and "PARF Cars," improving their browsing experience.

Add accompanying icons to the text to clarify its meaning, indicating whether it refers to depreciation or mileage, to remove any confusion.

Revamped SGCM used car pages

Ensure essential car details are included

Provide customers with comprehensive car information by requiring dealers to include essential details such as mileage before listing a car for sale.

Revamped SGCM used car pages

Additionally, embed a financial calculator on the main PDP to make financial information more accessible. This allows users to see real-time estimates based on variables like loan terms, interest rates, and down payments, without navigating to a separate tab.

Revamped SGCM financial calculator

Remove repetitive content

Reduce clutter by removing duplicate content, consolidating information on the main product page, and ensuring only one instance of buttons and tabs serving the same purpose.

Revamped SGCM used car pages

Implement clear and prominent CTAs

Improve the findability of dealer contact information and guide users towards contacting dealers through clear and prominent call-to-action (CTA) buttons on the product detail page (PDP). These buttons are placed prominently to direct users towards the dealer information section to ensure they can easily access it.

Revamped SGCM product detail page

To empower first-time or inexperienced car buyers, include a car buying guide to provide information on the purchasing process, helping users make informed decisions.

Revamped SGCM used car pages

Outcome

Users can easily access complete car information without needing extra clicks or navigation, leading to 81% faster access to car details.

Insight 4

Over 60% of research participants found the website’s cluttered, poorly organised text, and unintuitive features make it difficult for users to scan and read information, and navigate smoothly.

Cluttered layout and ad placement

A heatmap analysis of user interactions with SGCM's website advertisements

The heatmap showed that users rarely clicked on the ads despite their prominent placement. This was confirmed during the interview, users found multiple ads on the webpage distracting and cluttered, making browsing difficult.

“It’s annoying to have so many pop-up ads blocking my view!”

“Able to select the same model advertised within the same model page selected for easy comparison and reference.”

“Very convoluted with no emphasis on key information, especially for new users.”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Poor visual presentation and hierarchy

The original SGCM website before the redesign

The desktop version overwhelmed users with excessive information. At the same time, small text sizes on web and mobile platforms, coupled with inconsistent button labels across listings and product detail pages, made it difficult to read the information.

“Too old school, too many words, not interactive or interesting.”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

Incomplete and unclear car images

A heatmap analysis of user interactions with SGCM's used car pages

Users' high interaction with the photo on the car listing page indicated that photos are the first things users look at. However, the small image size made it difficult for them to see and evaluate the car's design and features without clicking on the listing.

“The photos are too small; I can't really see the details of the car.”

“It's hard to see the car properly. I always click on the images first to get a sense of the car's condition and features.”

Research insights from surveys and interviews with potential buyers, including those familiar with SGCM

After analysing our competitors' websites and conducting user interviews, we discovered a difference between SGCM and its competitors. We learned that car images are crucial in helping buyers make informed decisions. However, we noticed that many car listings on SGCM have incomplete or low-resolution photos, making it difficult for users to evaluate the vehicle's condition.

The original SGCM website before the redesign

Recommendation 4

Redesign the used car listing and product detail pages' interface to enhance the user experience.

Reduce clutter and improve ad placement

Move advertisements to less distracting areas and ensure they are contextually relevant to the content. Remove pop-up ads and allow users to close specific ads to minimise distraction while browsing the page.

Revamped SGCM used car pages

Enhance visual presentation and hierarchy

Enhance readability and navigation with a clear visual hierarchy, including increasing the font size, using clear headings and subheadings for easier scanning, and implementing a cohesive colour scheme to guide users through the website.

Revamped SGCM used car pages

Improve car listing visuals

Improve presentation of car listings with high-quality visuals, mandating car dealers to upload high-resolution photos from multiple angles (front, back, side, interior) to provide users with a complete and accurate view of the vehicle's condition.

Enable users to effortlessly browse all car photos without navigating the car listing itself, using an image carousel on the listing page.

Revamped SGCM used car pages

Help users quickly identify listings from the same dealership or seller by adding an avatar (seller profile picture) to car listings, building trust and creating a more credible user experience.

Revamped SGCM used car pages

Provide users with a quick visual overview of the car's design and features by placing car images at the top of the product detail page.

Revamped SGCM used car pages

Outcome

The redesigned used car pages received positive feedback from the client and users, with 100% of users in usability testing finding the revamped design intuitive and easy to use.

Next Steps

To advance further, we recommend a strategy focused on improving user engagement and facilitating informed decision-making during the car browsing and purchasing process. This will elevate the user experience and contribute to an overall enhancement of the user journey. The strategy includes the following:

Introduce 360-degree or virtual tours

Enable interactive exploration of vehicle conditions through immersive images and videos. This feature will enable users to assess the car conditions before visiting dealerships, improving their decision-making process.

Implement a car comparison tool

Offer detailed specifications and facilitate side-by-side comparisons. This will empower users to make well-informed decisions by providing comprehensive information about their preferred vehicles.

These suggestions require further assessment for feasibility, resource needs, and alignment with project goals. Research, user testing, and stakeholder input will inform final decisions.

Learnings

Adaptation to different work styles

Working with individuals with different work styles on this project while juggling full-time work can be challenging. However, it has motivated me to become more proactive in seeking common ground and understanding diverse perspectives to ensure everyone feels heard and aligned. I've discovered that embracing differences and fostering open communication is essential for creating a collaborative environment and reaching our shared objectives.

Adaptation to different work styles

Understanding and selecting the right research methods

In this project, I learnt the value of aligning research methods with project goals. This experience taught me the importance of understanding the rationale behind each research method, such as using heuristic evaluation to identify usability issues. Focusing on the "why" alongside the "what" helps us streamline our approach and save time gathering the most relevant insights.

Understanding and selecting the right research methods

More Case Studies

ZOLO

Increased B2B order management startup sign-ups by 80% with a website revamp

ZOLO

Increased B2B order management startup sign-ups by 80% with a website revamp

ZOLO

Increased B2B order management startup sign-ups by 80% with a website revamp

ZOLO

Increased B2B order management startup sign-ups by 80% with a website revamp

SaladStop!

Streamlined salad artist efficiency: Saved ~2.2k employee hours annually (~$18k) with improved preparation system

SaladStop!

Streamlined salad artist efficiency: Saved ~2.2k employee hours annually (~$18k) with improved preparation system

SaladStop!

Streamlined salad artist efficiency: Saved ~2.2k employee hours annually (~$18k) with improved preparation system

SaladStop!

Streamlined salad artist efficiency: Saved ~2.2k employee hours annually (~$18k) with improved preparation system

ZOLO

Increased B2B order management startup sign-ups by 80% with a website revamp

ZOLO

Increased B2B order management startup sign-ups by 80% with a website revamp

SaladStop!

Streamlined salad artist efficiency: Saved ~2.2k employee hours annually (~$18k) with improved preparation system

SaladStop!

Streamlined salad artist efficiency: Saved ~2.2k employee hours annually (~$18k) with improved preparation system

Let's Collaborate

Looking for a passionate digital art director or product designer who thrives on co-creating intuitive experiences to empower users and bring your vision to life? Let's chat! Feel free to reach out via LinkedIn.

Let's Talk

11:40:29 AM UTC