Carguru App
UIUX DESIGNER & RESEARCHER • WEB & MOBILE APP
Car Wash, Warrenty, Smart Parking, and more!
CONTRIBUTION
Researcher
UI Designer
SKILLS
User Research
Product thinking
Prototype
Interaction design
Visual design
TOOLS
Figma
HTML/CSS
TIMELINE
02/2023 - 04/2023
3 months
OVERVIEW
Carguru 2.0 was the main product I designed during my time in Taikoo Motors Group, Swire Group. It was launched to enhance user experience in car washing and intelligent parking services, with a focus on optimizing user transactions and boosting member loyalty. However, the app faced challenges with low page views and confusing features, affecting user engagement. To address these issues, I concentrated on redesigning the 'Home' and 'Member' pages for a more intuitive cross-device experience. This involved streamlining the user interface and simplifying feature presentations to make them more user-friendly. As a result, the app saw a significant increase in user engagement, with a 21% rise in user interaction with key features and pages. This improvement not only bolstered user retention but also set the stage for future expansions like warranty reservations and a vehicle marketplace.
DELIVERABLES
1. Mobile App UI
The revamp of the mobile app UI was centered around prioritizing and organizing the major features for future focus. I restructured the information architecture to streamline user flows, making them more intuitive and user-friendly. This was coupled with the application of a new, consistent design guideline across the app. The goal was to enhance user navigation and engagement by making key functionalities more accessible and the overall visual experience more cohesive.
2. Web UI
For the Web UI, the redesign involved integrating the current official website's content with the new version's web features. This merger was carefully executed to ensure a seamless transition for users between the two platforms. Responsive Web Design (RWD) principles were applied to ensure the website was optimized for various devices and screen sizes, enhancing accessibility and maintaining a consistent user experience across platforms. This approach aimed not only at improving the visual appeal but also at ensuring functional consistency and user satisfaction.
CHALLENGES & LEARNINGS
Working on the Carguru App presented a unique set of challenges and provided valuable learning opportunities. It was a journey that required balancing meticulous design work with strategic business considerations and tight deadlines. This experience not only honed my technical skills but also deepened my understanding of the complexities involved in a large-scale project within a corporate environment.
Direct Presentations to Leadership
Successfully collaborated with the store manager, staff, and suppliers to gather essential operational insights for design accuracy.
Time ManagementMeeting Tight Deadlines
Managed to complete the design, usability testing, and iterations of all deliverables within a tight three-week deadline.
Impact of product in a Large Corporation
Continuous engagement with stakeholders provided critical feedback, shaping the project's direction.
PROBLEMS
Low Page Views
A major problem was the app's inability to attract and retain user attention. Users were not spending enough time on the app, resulting in low page views. This indicated a need for a more engaging and user-friendly interface to draw in and hold the interest of users.
Confusing Features
Another significant issue was the complexity and lack of clarity in the app's features. Users found it challenging to navigate and understand the various functionalities offered by the app. Simplifying these features and making them more intuitive was essential to improve the overall user experience and encourage more frequent usage.
GOALS
Increase User Engagement
Given the issue of low page views, a major goal was to revitalize the app's interface to make it more engaging and user-friendly. This involved rethinking the design to make it more appealing and intuitive, encouraging users to spend more time exploring and utilizing the app's features.
Simplify App Features / IA
To address the confusion caused by the app's complex features, our second goal was to streamline and clarify these features and their information architecture. The focus was on simplifying the user interface and making the app's features more straightforward and accessible, thus enhancing the overall user experience and making the app more approachable for a broader audience.
RESEARCH
Quantitative Analysis
Our approach involved an in-depth examination of Google Analytics data from the past three years of Carguru App usage. We analyzed unique user patterns across different features, frequency of use, and trends in user count for each feature. This analysis revealed that the car wash feature was the most used, showing steady growth and high user adoption. Therefore, prioritizing the optimization of the car wash feature became a key focus, followed by intelligent parking and warranty services. This data-driven strategy helped us identify which features were most impactful in driving user engagement, allowing us to make more informed decisions on product enhancements.
Product Positioning
Guided by our data analysis and competitive market insights, the optimization of Carguru 2.0 was tailored to meet three main user objectives: time-efficiency in transactions, optimal location finding for services, and integrating online payment and membership systems. Each objective was carefully chosen to strengthen Carguru 2.0's market position as a convenient, time-saving, and technologically sophisticated solution in the automotive services industry.
DESIGN SYSTEM
Visual Elements
The design system of Carguru 2.0 places a strong emphasis on visual elements to clearly and attractively showcase its four main features: car wash, warranty, parking, and the marketplace. Each of these functionalities is distinctly represented with unique illustrations. Drawing inspiration from Uber's minimalist approach, the design incorporates primary colors, borderless icons, and life-like illustrations. A notable example is the marketplace feature, depicted with an illustration that echoes the architectural style of Carguru Plaza, providing a tangible link to the real-world location. This use of relatable and visually engaging illustrations not only conveys the app's functions effectively to users but also significantly enhances the interface's visual appeal.
UI Guideline
The UI design of Carguru 2.0 aligns with Uber's design principles, focusing on simplicity and clarity. The color palette is limited to three primary colors, creating a clean, minimalist UI style. The UI Component Guidelines outlined in the design system detail specific instructions for all states, sizes, and usage of components. These guidelines are instrumental in ensuring smooth collaboration between the design and front-end development teams, facilitating consistency across various stages of the project. By adhering to these standards, Carguru 2.0 achieves a uniform look and feel across all interfaces, reinforcing the brand identity and enhancing user experience.
UI DESIGN
Unified Login/Registration Process
To ensure a seamless user experience, we aligned the login and registration process with other company products. Recognizing that users may not frequently use the app and might need to re-login periodically, we implemented a unified approach for both new and returning users. This strategy simplifies onboarding and re-engagement, accommodating both security needs and user convenience.
Homepage & Main Features Layout
The homepage of Carguru 2.0 is strategically designed to highlight our four main services, with a focus on car wash and warranty locations. We dedicate a significant portion of the screen to displaying locations based on user proximity or recent visits, streamlining transaction processes. The events and notifications page is crafted to avoid ad blindness, providing useful updates on orders and maintenance. Simplified account functionalities, including membership, wallet, and service record, are categorized for ease of use.
My Wallet Design
The Wallet page in Carguru 2.0 features a tiered structure for handling payment methods, coupons, discounts, and e-invoice settings. This design targets user segmentation, offering a straightforward interface for general operations while providing intuitive access to more detailed functionalities for those who need them.
Service Record Accessibility
The service record section is designed to provide users with a clear view of their past transactions, including order reviews. This section simplifies what was once a complex array of member functions, making it easier for users to review and manage their service history.
Package Page Optimization
The Package page now focuses on displaying accessible user packages with a transaction-oriented interface. It includes features to help users understand package details and, in cases of an empty page, guides them towards exploring and starting new packages. The 'Used Packages' section includes a 'Repurchase' CTA to enhance the user journey.
Gift Page Functionality
The Gift page pop-up in Carguru 2.0 is designed for straightforward user interaction. It allows users to send gifts without cumbersome processes, such as checking membership status or reading extensive instructions. While simplifying the gifting process, we've also retained pathways for users who wish to understand the finer details of gifting within the pop-up.
PROTOTYPE
Mobile App
The Carguru mobile app prototype focused on user-friendly navigation for booking, wallet management, and marketplace access. It emphasized intuitive transaction flows and clear interactions for key features, providing a realistic preview of the user experience.
Web
The web prototype complemented the mobile app, adapting its functionalities to suit larger screens. It demonstrated responsive design for various devices, ensuring a uniform experience across the platform, especially in service navigation and account management.
KEY TAKEAWAYS
Pitching to Executives
Presenting weekly to the CEO and CTO taught me the importance of clear communication. I learned to convey complex design concepts in a way that aligned with the business goals, improving my presentation skills.
Handling Pressure
Meeting tight deadlines set by the product manager was challenging. It pushed me to work efficiently, balancing quick delivery with maintaining high-quality standards.
Corporate Environment Adaptation
My first experience in a large corporation showed me how my design decisions affect many people. Managing diverse stakeholder expectations was crucial for the success of the design.