Carguru App
Car wash, warranty, and smart parking at anytime!
Overview
Carguru 2.0's initial phase focuses on enhancing user experience with its primary offerings - CARO's car washing and intelligent parking services. The objective is to optimize user experience, streamline transaction processes, and reinforce our member base through existing loyalty programs to augment user retention.
Our future second phase introduces additional features such as warranty reservations, a marketplace for buying and selling vehicles, and an array of promotional activities to drive continual user growth.
This presentation showcases cross-device UI designs for the 'Home' and 'Member' pages, which are instrumental in the overall user journey. These designs represent our commitment to offering seamless experiences that meet our users' needs, while positioning Carguru as a reliable platform for all automotive necessities.
Time
02/2023 - 04/2023
Role
Researcher, UI Designer
Quantitative Analysis
Drawing insights from Google Analytics data encompassing the past three years of Carguru App usage, we examined patterns from unique users across various features, usage frequency distribution, and the rise or fall in user count for each feature over the period.
Our analysis indicates that the car wash feature commands the highest usage, displaying consistent growth in user adoption. When formulating the development priority based on user count, optimizing the car wash feature emerges as the most crucial task, followed by intelligent parking and warranty services.
This data-driven approach enables us to strategically prioritize features that drive user engagement, leading to better-informed decisions on product enhancements and ultimately, a more user-centric service delivery.
Quantitative Analysis Charts
Product Positioning
Informed by the aforementioned data analysis, competitor analysis, and product orientation, the optimization of Carguru 2.0 aims to achieve three key user objectives:
Time-Efficiency: Users should be able to swiftly complete transactions for car washes or parking services, thereby saving valuable time.
Optimal Location: The app should empower users to find the best locations, verify the correct routes, and navigate to the desired destination efficiently.
Online Payment & Membership Mechanisms: By incorporating digital payment solutions, we aim to reduce transactional barriers, thereby enhancing the overall ease of use.
Each of these objectives is designed to reinforce Carguru 2.0's market position as a user-friendly, time-saving, and technologically advanced solution in the automotive service sector.
Product positioning
UI Style
Carguru 2.0's process and design aesthetics take inspiration from Uber's design framework, emphasizing simplicity and precision. We've confined the primary color palette to a maximum of three colors, resulting in a UI style that is streamlined and minimalist.
Below, you'll find the UI Component Guidelines employed in this design. These guidelines provide explicit directions for all states, sizes, and usage standards, facilitating smoother collaboration between design and front-end development teams in subsequent stages of the project. By adhering to these standards, we ensure a consistent look and feel across all our interfaces.
UI Guideline
Carguru 2.0's homepage prominently features our four main functionalities: car wash, warranty, parking, and the marketplace. Each feature is uniquely represented through the following illustrations.
Our visual design style takes cues from Uber's minimalist primary colors, borderless icons, and life-like illustrations. For the marketplace illustration, we've mirrored the architectural style of the existing Carguru Plaza, resulting in an artwork that aptly represents its physical counterpart.
This use of relatable, visually appealing illustrations helps instantly communicate the app's functionalities to users, while enhancing the aesthetic appeal of our interface.
Illustration concepts
UI Design
Please refer to the links below for our interface designs catered to both mobile and web platforms. Our commitment to providing a seamless user experience is reflected in our thoughtful approach to designing for different devices, ensuring an intuitive and consistent Carguru 2.0 experience across all platforms.
Mobile link here.
To maintain a consistent user experience, our login/registration process is aligned with other products under the same company. We’ve implemented a unified login/registration approach which is suitable when:
A. The likelihood of users needing to register and login is comparable, and B. The product is not frequently used and users may need to re-login after certain intervals.
Many products have periodic auto-logout mechanisms in place for security reasons. If your product is not one that users interact with frequently, there's a high probability that users will often need to re-login. In such instances, distinguishing between 'logged out' visitors and 'new users' becomes challenging. Thus, we deploy a unified login/registration approach, ensuring a seamless onboarding and re-engagement process for all users.
The homepage prominently showcases our four main services, focusing on car wash and warranty locations. A third of the screen real estate is dedicated to displaying the locations most recently visited or in proximity to the user, adhering to user habits to expedite transactions.
Our events and notifications page seeks to avoid ad blindness. Besides displaying promotions from CarGuru, it also allows users to keep track of their order progress and get updates on maintenance of the premises. This information replaces the original scrolling ticker and will also appear in prompts during subsequent car wash and transaction processes.
The account page simplifies the once-complex member functions into a few key categories: membership card (for immediate scanning), wallet (payment tools and coupons), and service record (order review). This approach provides a more streamlined experience, making it easier for users to navigate and utilize their account.
The Wallet page encompasses functions such as payment methods, member coupons (transferable), member discounts (non-transferable), and e-invoice settings. Given the more detailed nature of these operations, they are tucked away within a three-tiered page structure, aimed at user segmentation. The intention is twofold: A. We aim to prevent average users from feeling overwhelmed by an excess of information, providing a streamlined, accessible interface. B. We also ensure that users seeking detailed operations, such as modifying their e-invoice settings, can intuitively locate these functionalities.
The homepage prominently showcases our four main services, focusing on car wash and warranty locations. A third of the screen real estate is dedicated to displaying the locations most recently visited or in proximity to the user, adhering to user habits to expedite transactions.
Our events and notifications page seeks to avoid ad blindness. Besides displaying promotions from CarGuru, it also allows users to keep track of their order progress and get updates on maintenance of the premises. This information replaces the original scrolling ticker and will also appear in prompts during subsequent car wash and transaction processes.
The account page simplifies the once-complex member functions into a few key categories: membership card (for immediate scanning), wallet (payment tools and coupons), and service record (order review). This approach provides a more streamlined experience, making it easier for users to navigate and utilize their account.
The Package page showcases the packages that users currently have access to. This 'transaction-oriented' interface replaces the original design, which contained an excessive amount of plan and transaction information, leading to ambiguous user tasks. Furthermore, we've also integrated a path to help users understand the unique features and details of the packages.
In the case of the Package page being empty, beyond merely displaying an empty state, we've introduced a pathway to help users understand more about the packages. By replacing the term 'Purchase' with 'Start', we aim to lower the users' purchasing resistance and effectively guide them towards the package plan page.
The 'Used Packages' page could potentially be a place where users review orders and repurchase services. As such, we've augmented the originally static page, which only showed completed packages, with a 'Repurchase' CTA (Call to Action) button to streamline the user journey.
For the Gift page pop-up, the fields are directly presented in the interface, allowing users to directly interact without being hindered by process issues, such as whether the friend is a member or needing to read gift instructions. The design allows for the action to commence without the necessity for extensive reading of instructions or terms and conditions. However, we've still retained the detailed pathway for understanding friends' membership statuses and the specifics of gifting instructions within the pop-up.
Take Away
The most significant learning from this project revolves around product management. Carguru's feature development and interface design requirements underwent many changes after multiple discussions among the company's senior leadership. Throughout the design process, I had to constantly communicate with the product manager and CEO to understand the end-users' needs, refine the user journey, and coordinate with front-end and back-end engineers to figure out the most cost-effective and efficient development approach.
Ultimately, we successfully launched the Carguru 2.0 version within a two-month timeframe, earning substantial positive user feedback. Since then, I have continued to design additional versions and features for Carguru in my role as a solid designer. This experience reinforced the importance of flexible communication, user-centric design, and cross-functional coordination.