Intelligent app to enhance the E-Motorcycle rider experience
Research, Product managment,
Product Concept, UX / UI design, Interaction design, Prototyping
Wanrou Zhu
Yiqi Zhong
2022
Figma, Sketch, Zeplin, AE
iOS
Android
The project was completed in 2021 at Davinci Motor, an electric motorcycle startup. It was exhibited at CES 2023.
The traditional motorcycle ecosystem cannot provide riders with user-friendly features and a user experience matching riding behavior.
While the automotive industry is rapidly developing in intelligence, motorcycles are still stuck in the traditional stage. Independent systems lead to a lack of information transmission and human-vehicle and human-human interaction and experience. In detail, owners can only rely on the small dashboard to understand their motorcycles. The only way for the owner to interact with the motorcycle is through this dashboard. There are no more channels and touchpoints for users to interact with motorcycles.
Connecting e-motorcycles with the Internet to create an intelligent app that covers most scenarios of motorcycle riding, enabling a digital, intelligent riding experience for e-motorcycle owners.
We want to be game changers. We are connecting electric motorcycles to the Internet so riders can manage all aspects of their motorcycle with just one app. The rider's phone is the electronic key or even the dashboard, and the rider can upgrade the motorcycle system unassisted. The product is designed to make motorcycle riding smarter and more user-friendly. And the interaction design makes the product more usable and intuitive.
We delivered a complete product information architecture, product requirements documentation, interactive product prototypes, UI design for iOS and Android, and video demo of key interface animations.
Creating a smooth user experience that matches the behavior of motorcycle riders.
Davinci Motor app is a software that allows riders to manage the motorcycles. There are five very significant and frequently used scenarios and functions.
1. Driving out
2. Charging the electric motorcycle
3. Checking motorcycle status
4. Upgrade motorcycle system
5. Reviewing riding history
1. Unlock the vehicle and ensure it is workable
2. Enter destination (navigation function is optional)
3. Options for different route conditions
4. Dashboard and navigation display
.png)
.png)
5. Different dashboard modes displaying data while riding
6. Different dashboard appearance choices
When the user wants to take the motorcycle out, the user needs to unlock the motorcycle and make sure the vehicle is in proper condition. The user then chooses whether they want to use the navigation while riding (they can enter their destination and follow the navigation). Users use the dashboard mode to view the information they need while riding.
.webp)
1. Power capacity, remaining mileage display
2. Display nearby charging stations
3. Charging station details and navigation
4. Display charging status
5. Display battery status
When users find their motorcycle is low on power, they need to go to a charging station to charge their motorcycle. So the user wants to find an available charging station nearby to set up their electric motorcycle so the user can drive the next time without worrying about the power level. The user follows the navigation to the charging station to charge the motorcycle, at which point the user can go to a nearby place to relax while checking the charging process through the app.
.webp)
1. Unlocked status
2. Unlocked and safe to ride
3. Small error status
4. Un-ridable status
5. Motorcycle parts status display
6. Detailed error indication
When the user needs to ride, the user can see if the vehicle is unlocked and can also notice the status of the motorcycle, such as if it meets the requirements for safe riding. When the user finds an error indication, they can click to see detailed instructions on what is wrong.
1. New system pop-up notification
2. New System Feature Information
3. Upgrade process display
4. Notification of upgrade results
Engineers regularly release motorcycle upgrade installation packages. The system will inform the user via a pop-up window, and the user will choose to upgrade after reading the new features. It takes 5 minutes to wait during this period, and the user's motorcycle system can be upgraded to the latest version to enjoy the latest performance of the motorcycle.
1. Multi-time dimensional cycling statistics
2. Information about the daily ride log
3. Time filter to filter specific historical rides
4. Show filtered results
5. Display specific ride data
When users want to view their riding statistics for a year, they can see how long and how many miles they drove their motorcycle during the year. In addition, users can view their riding history, including routes, speeds, times, etc.
We used comparable product analysis, interviews, and hands-on experience to understand the current context of the industry, the functionality of vehicle intelligence apps, and the needs of cyclists.
By analyzing the industry leaders in smart mobility, we learned the functions and features of current smart car apps, which helped us a lot in our design. We know the functions that users use frequently and the interaction logic of these apps. And we can learn the features that are proven by the market.
We interviewed some motorcycle users to research their riding habits and riding behavior. It also included their pain points of riding traditional motorcycles and their expectations of smart motorcycle mobility. This helped us to better design the product features to provide value to them.
To get to know the riders better and think from their point of view. As designers, we went to a motorcycle training school to practice riding a motorcycle. By riding, I can learn what is essential to the rider when riding and what data they need to know.
What if riders could manage and interact with their E-motorcycle through an intelligent app?
An intelligent app is a key to the motorcycle, allowing riders to meet the needs of their riding scenarios on the app
We created the concept of using the phone as a motorcycle dashboard, where riders can use navigation and read primary riding data on the phone. In addition, riders can lock and unlock their motorcycle, find charging stations, upgrade their systems, view their riding history, and check the status of their motorcycle on the app.
We combined the dashboard and map. When entering the dashboard mode, riders can view primary ride data and navigation. We designed horizontal, vertical, and full-screen modes and various dashboard visual designs that riders can adjust to suit their needs.
Riders can find available charging stations nearby and search for relevant charging stations within the app. Charging can be completed using navigation to the charging station they want to visit.
With color-coded and shapes designed to give riders the quickest and most intuitive way to understand and view the status of their motorcycle, status includes locked status, unlocked, secure, faulty, and in need of repair.
Riders can view ride logs and stats in multiple dimensions and can share to social media and friends.
Riders are made aware of the release of the latest motorcycle system through push and in-app pop-ups, making it the easiest for riders to upgrade their systems and maintain a smooth user experience.
Use information architecture to organize the entire app's functional framework at a higher level, to clarify the hierarchical relationships between features and the information that users can see, and the possible connections between parts.
_edited.webp)
Using low-fidelity wireframes supported us to quickly translating ideas into visual sketches, presenting design concepts to team members, and getting feedback. And at this stage, we focus on the user flow, thinking about how users use the app and how information is navigated.
-min_%E5%89%AF%E6%9C%AC.jpg)
Taking unlock as an example, first, we used the interaction design of a long press to unlock, but in testing, we found that users didn't know that unlock action was a long press and that their finger would block the progress bar, which led to low usability.
In the iteration, we adopted a more intuitive and straightforward interaction design, swipe to unlock, making it simpler and easier to use.
In the original design, there were too many elements on a page, and the page's focus would be distracted. We found that users only need to know the specific vehicle status some of the time. Users only need to know whether the vehicle is rideable or not.
In the iteration, we used a color-coded background to indicate the overall status of the vehicle, with a shape design. It makes it very intuitive for the user to understand quickly. In addition, a drawer design was used to hide the very detailed content.
Using low-fidelity wireframes supported us to quickly translating ideas into visual sketches, presenting design concepts to team members, and getting feedback. And at this stage, we focus on the user flow, thinking about how users use the app and how information is navigated.
We used Figma and Zeplin to design and deliver interface design, including mobile pages, dashboards, and physical dashboards. In addition, we created clickable prototypes. In the design, we adhered to the principle of simplicity, a design style in line with the company, and maintaining the visual continuity of the brand.
Created visual assets for DaVinci Moto Mobile, including colors, fonts, typography, components, icons, and more to ensure a consistent user experience across Android and IOS platforms.
We created a visual assets folder for designers and developers, making it easier for everyone to be on one page.
We created a visual assets folder for designers and developers, making it easier for everyone to be on one page.
To facilitate developers to clearly understand the interaction design and interface design of our app, we wrote interaction documents, which clearly record the functional structure of the whole app, the introduction and interaction logic of each function, the interaction logic between pages, the correct interaction path, and every possible error situation.
During the development process, We established close communication with the developer team to ensure that the product development would go as planned.
35 iterations of the app version ensure the product meets design expectations
Taking out development deliverables that do not conform to the design, I will flag them in detail to the developers to ensure that the developed version meets the design expectations.
In development, we test the app and test the interaction between the app and the motorcycle to ensure that the app and the motorcycle will work well during the product launch.
A checklist to do the test
On July 16, 2021, we successfully accomplished the scheduled goal of implementing all the planned functions and were able to run smoothly at the launch and demonstrate to the on-site users.
Research: This was not a very user research-heavy project, and we did not spend much time on potential user research. Most of the research focused on analyzing similar products and market research. This may lead to a gap between product features and users' needs and habits. How to spend more time on potential users in the early stage to discover their needs and behavior patterns may make the product better.
Concept: Incorporating new technology into the traditional motorcycle industry was a very exploratory product design. We were thinking about the possibilities of intelligent design for motorcycles. Is it possible to have an intelligent user experience like the automotive industry?
Testing: I was not involved in the subsequent optimization of the app after it was released. User testing is essential for the optimization of the product. I have been considering whether using the phone as a dashboard is a good design. Is there a smooth user experience? This needs to get feedback from user testing.
Thank you for visiting my portfolio. I would love to hear from you!
.png){kind=small}