Davinci
E-Motorcycle
App

Intelligent app to enhance the E-Motorcycle rider experience

UX/UIProduct designMobile

Overview

Role

Research
Product management
Product Concept
UX / UI design
Interaction design
Prototyping

Design Team

Wanrou Zhu
Yiqi Zhong
0This is some

Design Tools

Figma, Sketch
Zeplin, AE

Time

2022
This is some
This is some

Platform

iOS
Android

The project was completed in 2021 at Davinci Motor, an electric motorcycle startup. It was exhibited at CES 2023.

Problems

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 touch points for users to interact with motorcycles.

Our Solution

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.

Outcome

Final delivery

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.

Product Usage Scenarios

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

Usage Scenario 1

Driving a E-motorcycle
to go out

  • Unlocked vehicles
  • System detection
  • Destination search and navigation
  • Dashboard mode display

User Scenario

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.

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
5. Different dashboard modes displaying data while riding
6. Different dashboard appearance choices

Usage Scenario 2

Charging electric
motorcycles

  • Find a Charging Station
  • Navigation
  • Check Charging Status

User Scenario

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 charge their electric motorcycle. 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.

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

Usage Scenario 3

Checking
Motorcycle Status

  • System detection
  • Display of different status
  • Error alerts
  • Motorcycle data information

User Scenario

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.

There are different status of the E-motorcycle

1. Unlocked status
2. Safe status
3. Small error status
4. Un-ridable status

Checking specific motorcycle data

1. Unlocked status
1. Motorcycle components status display
2. Detailed indication

Usage Scenario 4

Upgrading motorcycle
system (OTA)

  • New System Notification
  • System feature information
  • Upgrade process display
  • Notification of upgrade results

User Scenario

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. New system released notification
2. Upgrade pop-up in app
3. New System Feature Information
4. Upgrade process display
5. Notification of upgrade results

Usage Scenario 5

Reviewing the riding
history

  • Multi-time dimensional cycling statistics
  • Time filtering
  • Ride history data display

User Scenario

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.

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

Product Design Process

Research

Understanding the current condition of the industry and riders

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 riders.

1. Comparable product analysis

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.

2. Interview

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.

3. Hands-on experience

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.

Concept Development

Concept

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.

Key Features

The phone as a motorcycle dashboard

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.

Finding charging stations

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.

Checking the status efficiently

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.

Reviewing the riding history

Riders can view ride logs and stats in multiple dimensions and can share to social media and friends.

Upgrading systems

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.

Information Architecture

We used 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.

Interaction Design

Low-fi Wireframe

Using low-fidelity wireframes supported us to quickly translating ideas into visual sketches, presenting design concepts to team members, and getting feedback. Moreover, at this stage, we focus on the user flow, thinking about how users use the app and how information is navigated.

Iteration Example

Simple and easy

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.

Focused and intuitive

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.

User flow

Use the user flow to represent the user's path to complete a task using the app. Taking the example of riding out, the user completes the actions required to ride out, from unlocking to using a dashboard.

Visual Design

Visual Assets

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.

UI Design

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.

Product implementation

Product requirements document

To facilitate developers to clearly understand the interaction design and interface design of our app, we generated the product requirements document, which clearly reflects 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.

Functionality Testing

35 iterations of the app version ensure the product meets design expectations

Using checklists to test each function in case of missing

In development, we test the app and test the interaction between the app and the motorcycleto ensure that the app and the motorcycle will work well during the product launch.

Conclusion

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.

Reflection

If there was more time

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.

Research

It was a top-down project from executives. So, it 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. But these can be tested and iterated on during the optimization phase

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?

Collaboration

Visualization is one of the most effective ways to communicate. Using interactive prototypes, UI design, and video demos allow executives and developers to understand the design intent and content most intuitively.

OverviewOutcomeResearchConcept
UX/UI DesignImplementation
Back to top
Go to other projects