Electric Scooter Control Page
Product Design · B2C · Mobility
Overview
In early 2022, I led the design of Gogoro’s iQ page—a new vehicle control interface that consolidated existing features into a single, intuitive dashboard. This new interface was introduced in response to growing user frustration caused by fragmented functions and complex navigation. As the sole product designer, I was responsible for the full design process: from user research and information architecture to interface design and developer handoff. The iQ page brought together key functions, such as Bluetooth pairing, battery status, and lock/unlock, while redefining the user flow and improving discoverability. It also laid the foundation for future interface and design system improvements.
Role
Product Design, Interaction Design, Competitive Analysis, Information Architecture, Wireframing, Prototyping, Testing, Design Review, Design System
Team
1 Product Designer, 1 UX Designer, 3 Product Owners, 1 Project Manager, 10+ Engineers
Timeline
Sep 2020 — Dec 2021
Background
Gogoro is a leading sustainable mobility brand in Taiwan, best known for its electric Smartscooters and battery-swapping network. The Gogoro App serves as a companion tool for riders, offering Bluetooth connectivity, vehicle diagnostics, battery status, and other core features.
As the product ecosystem expanded, the app introduced more vehicle-related features, but without a cohesive information architecture. Users struggled to locate key functions and maintain a clear overview of their vehicle status. While the Home page originally surfaced key vehicle information through cards, like battery status or warning alerts, it relied on notification-based entry points that were often transient or easily overlooked. Users frequently had to scroll through stacked cards or navigate via the side menu to access core functions like ride status checks or vehicle settings, resulting in inconsistent interaction flows and increased friction.
Problem Statment
How might we create a more accessible and cohesive interface that enables users to effortlessly manage all key vehicle controls and information, while reducing cognitive load and improving overall usability?
Snapshot of the Previous Design
In the previous Home page layout, key vehicle information was presented through cards—typically starting with battery status—stacked vertically within a scrollable feed. When the control drawer was expanded, users could only see one card at a time; even when collapsed, only 1 to 1.5 cards were visible above the fold. As a result, important alerts such as warnings or maintenance reminders were often hidden below, requiring users to scroll multiple times to access them. This made it difficult to gain a clear, at-a-glance understanding of their vehicle’s status.
Design Goals
This redesign aimed to simplify fragmented workflows, improve clarity in daily tasks, and establish a modern design language that could scale with future features. It also introduced updates for upcoming connected vehicles, such as remote control and proximity-triggered status, while enhancing visual elements across the app to boost user engagement and sense of ownership.
Information Architecture
To support the redesign, we introduced a new iQ page in the tab bar to centralise all vehicle-related features that were previously scattered across Home, Map, and other nested menus. I collaborated with our UX designer to regroup and reclassify key functions, prioritising them based on usage frequency and user scenarios. High-frequency tasks like lock/unlock appear at the top, while other core functions are arranged by relevance. Alerts are triggered only when needed, reducing distractions and keeping the interface focused.
Initial Information Architecture
Updated Information Architecture
Concept Iteration
Competitive Analysis
To align the design with global trends and user expectations, we analysed leading electric vehicle control apps by comparing design patterns, feature offerings and interaction flows to identify best practices and areas for differentiation.
Crafting and Iteration
We explored multiple layout directions to balance information clarity and feature hierarchy, testing concepts such as separating controls from read-only data and arranging content into different tiers. Early explorations also looked at how personalised elements, like vehicle visuals and user greetings, could build emotional connection without sacrificing clarity.
While initial versions leaned towards minimalism, internal feedback from design and product leads pointed to the need for a more distinctive visual identity to better differentiate Gogoro from other mobility brands. This led to a second round of iteration based on competitive insights and stakeholder input. The final layout adopts a modular card system that supports future features, reflects the brand’s updated visual tone, and reinforces user engagement through personalisation and scalable structure.
Final Outcome
iQ page: Simplifying Vehicle Management
The iQ page enhances the user experience by consolidating vehicle controls and information into a cohesive interface. Improved information architecture and logical grouping provide intuitive access to key functions, offering a live, comprehensive view of vehicle status, parking location, maintenance alerts, and more. Model-specific visuals add a personal touch, strengthening users' emotional connection with their Smartscooter.
Optimised Bluetooth Pairing
When the app is disconnected from a vehicle, either due to inactivity or a change in pairing, the iQ page displays an empty state. A prompt in the status section encourages users to reconnect and update their data. The pairing action, previously hidden within a card, has been relocated to the bottom banner for higher visibility, allowing quicker access to reconnection.
Intuitive Vehicle Switching
Previously, switching between vehicles required navigating through account settings—a complicated and unintuitive process. To address this, we introduced a garage feature accessible from the top app bar, where users can view their current vehicle with license plate and imagery. Inside the garage, all vehicles are displayed as cards, enabling users to easily switch and confirm the pairing status.
Stay Alert, Stay Safe
When issues such as vehicle falls or low battery occur, persistent notifications appear at the top of the page to alert users before and after their ride. Minor alerts can be dismissed after review, while critical ones remain until resolved through diagnostics or confirmation at a service centre.
Locate Vehicle Effortlessly
The iQ page release introduced a new vehicle location feature on the Map page. Users can check their last parking spot, view current status, navigate to the vehicle, and—when in Bluetooth range—activate flashing lights or sound the horn to locate their scooter in crowded areas.
A Foundation for Consistency
As the iQ page marked the first milestone in the app’s redesign roadmap, I proactively organised its components and styles into a dedicated component library. This ensures visual and functional consistency, supports future scalability, and reduces friction between design and development.