In May 2018, Velodash was launched to help cycling enthusiasts track their position and record their cycling routes. As the user base grew, we received more and more feedback for improvement. At the same time, our engineering team decided to use the Flutter language instead of native iOS and Android. We took this opportunity to focus on the specific needs of cyclists and thoroughly improve our existing product. That's why I joined this ambitious project to redesign the Velodash app.
After realizing that our previous product was no longer able to meet the growing needs of our user base, we first decided to bring the user's perspective into the company and identify the core values that needed our focus.
We conducted a survey, 6 usability tests, 12 interviews, and rode with cyclists to understand what issues our users were currently facing and whether they were worth solving.
Led usability testing, including testing scripts, prototype, and moderation
Rode with cyclists and observed use cases
Results of usability tests
1. Cyclists were reluctant to use Velodash as a tool to assist their cycling activities.
2. When cycling in groups, the distance between cyclists often made it difficult to communicate smoothly and they had to rely on other software or tools, leading to additional waiting or misunderstandings.
We found that many users were not willing to use their phones to record during activities, and even if they did start recording, more than half of them left the recording halfway through. This not only resulted in incomplete cycling routes, but also led to unnecessary waste and misunderstandings in communication and interaction between cyclists.
Without a clear and effective communication channel during cycling, users would waste extra time and effort waiting and searching for other riders, and even feel anxious during their ride.
After conducting interviews, we discovered deeper underlying issues that led to the observed situations.
1. Concern about app draining battery
Cyclists were concerned that using the app would drain their phone's battery and therefore avoided using it. Even if they started recording, they would give up on using Velodash when the phone's battery was around 50% or lower due to their concerns.
2. Overlapping information with cycling computers
During rides, many cyclists use cycling computers to track their performance and other information. However, the app's cycling page displays the same information, which some users find redundant and unnecessary, leading to hesitation in using the app.
3. Lack of effective communication channels
Cyclists expected to be able to send messages to each other while riding. However, the complicated process not only made it impossible to send messages during a ride, but also required them to end the ride to communicate.
Through interviews and surveys, we identified three main issues: battery consumption, duplication of information with existing equipment, and poor communication channels. These issues lead to a reluctant to use the app during rides, or abandoning to use it halfway through. Additionally, the lack of effective communication channels made communication during rides difficult.
Therefore, we proposed a question:
"How might we provide a better cycling experience for cyclists?"
Feel the REAL energy saving
Velodash helps you save a lot of power during rides by only providing you with the ideal information when you need it.
See exactly what you need by swiping
Effortlessly customize your information fields and see only what you need, whether you use a cycling computer or not.
Communication made easy
Easy communication with just one tap - stay in the ride while connecting with friends in various ways.
1. Feel the REAL energy saving
Nearly 45% of users found our product to be too power-consuming, and it was also the main reason why most users were hesitant to recommend our product to friends.
The main causes of power consumption are screen consumption, information transmission, and GPS recording, and settings such as Wi-Fi, Bluetooth, and notifications also play a role. We decided to focus on adjusting the screen and information transmission first.
1. Screen brightness: We first adjusted the "power-saving mode for screen" that almost all users have enabled, reducing the brightness from the original 30% to a nearly black screen, significantly reducing the power consumption of the screen itself. With just one click, it can return to normal mode, without worrying about not being able to find the data when needed. In addition, we set the dark mode as the default mode and enhanced the motivation to turn it on, further reducing the power consumption of the screen.
2. Data transmission: We first adjusted the "location receiving frequency", as the new power-saving mode for the screen no longer displays the map and therefore does not need to display location information. We decided to stop receiving location information only when the screen does not display the map (including "screen off" and "automatic power-saving mode"). This change had a significant impact on data transmission, saving a lot of power in both off and on scenarios, meeting all scenarios.
In addition, we found that the frequency at which cyclists view their phones is lower than we imagined, so there is no need to update the location information too frequently. We decided to reduce the "location upload frequency" from "1 time/1.5 seconds" to "1 time/5 seconds", reducing the power consumption of information transmission by about 70%. By implementing these adjustments, we were able to significantly reduce the power consumption of our product and improve the user experience.
2. See exactly what you need by swiping
According to research findings:
1. Almost 50% of users favored the feature of "viewing friends' locations."
2. Less than 20% of users liked the "viewing ride data" feature.
When almost 80% of cyclists already have cycling computers to record their riding data, we don't need to force providing duplicate and potentially less accurate ride data. We only need to provide the information that is truly needed - maps and locations.
Based on these findings, I redesigned the riding data display page to be more flexible. In addition to the original two modes, I added a third mode that only displays the map, allowing cyclists to focus on their friends' locations and map navigation. I also improved the interaction design of the cycling page, allowing users to easily adjust their cycling information by swiping up and down.
3. Communication made easy
Communication played a crucial role in group rides, as we found in our interviews that participants expected to be able to send text messages directly during rides and preferred to share pictures after the ride as a way of preserving memories.
However, the process of sending messages was cumbersome and unintuitive due to technological limitations, and it was not possible to send pictures. Therefore, I improved the process of sending messages during rides to help cyclists to quickly exchange important information. I also designed a picture-sending feature so that riders can continue to stay on the platform and share each other's records and photos after the ride.
Rebuilding the information architecture
After usability testing, we found that users often struggled to find the content they were looking for. To address this issue, I established and redesigned the information architecture of the product, making adjustments to parts that did not align with the users' mental model. For example, I moved user-related content such as "My Activities" and "Saved Routes" from the "Explore" page to the "Profile" page, and made the layout of the product more flexible.
Establishing a clear and efficient design system
Previously, the product design files were all in Illustrator, and different pages or components were divided into different files. In order to better integrate design elements, I rebuilt the product design files in Sketch and created a design system including font sizes, component libraries, and spacing, to help engineers have a more consistent set of design elements and principles to refer when rebuilding the product.
Building a more accessible product
During the testings, we had an interesting finding - our target users usually squint or hold their phones at a distance while using our app. According to the survey, most of our platform's users are between the ages of 40 and 60, so the original font size was clearly not appropriate for them. Therefore, I decided to adjust the font size of our product from 14-17pt to a more readable 16-20pt.
Ensuring product quality
After determining the design solution, we entered the phase of handoff and evaluation. I discovered more design details and states that I hadn't noticed before when discussing with the engineers. This allowed me to consider a wider range of technical limitations and use cases in my future designs.
Furthermore, I was also responsible for the quality assurance process. In addition to paying attention to product quality and design details, finding problems with the test product, and communicating with engineers to discuss possible solutions to problems, I also invited engineers to join us in the outdoor testings before the product's release to help them better understand the use cases.
Preparation before launch
To improve product quality and reduce resource waste, I led quality assurance automation in addition to manual testing. I also planned the scope, form, and process of the automated testing, and worked with the product manager to plan the beta testing process and feedback mechanism before the launch.
The product officially launched on February 2nd, 2021 and received many positive feedbacks from users within the first two months. We consider this as a great encouragement and achievement for the team. In just one year, we were able to redesign and rebuild our product despite of limited resources. We not only solved several major problems but also brought positive impacts to the business.
Monthly active users (MAU) increased by 49%.
