The one-stop service tailored for leisure cycling has won the 2022 Taiwan Excellence Award.
Project Introduction
Mio Cyclo's new products will be equipped with the Android platform, and provide users with a complete one-stop service together with the new App and website.
My Role - Design Lead
I am responsible for all the functional processes, interfaces and interaction design of the three platforms, and provide detailed guidelines and specifications to the development team. I guided the overall visual direction and avoided inconsistent experiences. Lead the team to face cross-departmental communication and decision-making. Control the design team's schedule. Review output of projects and user tests to ensure quality.
My Output
Competitor Research Information Architecture UI Flow Wireframe flow Spec UX Writing Prototype Web design, Illustration Web guideline, Assets
Tools
Figma, Sketch Milanote Evernote Diagrams.net Google Slides Marvel Zeplin
Build a complete service system, including product interaction on three platforms.
A new cycling device with new features.
A new app needs to integrate 3 services.
Existing websites need to be updated with new products.
Let's start by establishing design empathy
Be in someone's shoes
Joined bike club and started riding frequently To bridge the cognitive gap with the target audience (cyclists), we must use the product in life. I spend a lot of time actually riding and using various products to make it one of my leisure activities. User journey map I walked through the basic user journey with our own product and noticed a lot of things that could be improved. Such as initialized cross-platform processes and inconsistent product experiences.
User interview We also conducted interviews to try to learn more about how users use the product, what features they care about, what to expect from the product...and so on.
Competitive analysis
This service a mutually beneficial relationship between the bike computer (recording system) and the route editing platform. The products we sell are bike computers, so I divided the research into two parts: 1 - Bike computers I ride with five main competitors' products (Garmin(1030, 830), Wahoo, Bryton, and Sigma), focusing on touchpoints and the previous pain points. Document product features and process differences.
2 - Software service platform 6 mainstream service platforms were selected from user questionnaires collected by the marketing team. I analyze its design architecture and features, comparing the differences with existing products throughout the user journey.
Overall, the current product lacks details
All basic functions are covered. However, the cross-platform operation lacks functional coherence and convenience of use, and relies on users to be familiar with the product and find out the answer by themselves. Users with advanced age and low technical understanding are easily felt negative emotions such as depression and anxiety. I shared the findings, product UI analysis, and personal experience with all stakeholders. Remember what kind of design has positive feelings and which ones will bring negative emotions. Put those info on Milanote, so everyone can leave comments anytime. Sharing can not only reduce the information gap, but also make people feel more involved.
So, who are our users?
List users and scenarios
Marketing team distributed questionnaires to existing members. From the 3500+ questionnaires collected, we can get a clear picture of our users.
More than 90% are male.
Middle-aged to elderly.
More than half of users ride for recreation purposes.
Nearly 80% of users are happy to share their trip memories.
Half of users ride a bike every day.
That's why I didn't make personas. I listed the possible users with scenarios based on the product. These differences may have an impact on the process and the display of information. Take the first-time use process as an example, the user's purpose of use is different. It is very important in UX writing to present what content is needed and consistent with business goals.
Now, turn ideas into actions.
The Challenges
In this multi-platform service system, the main challenges I face are:
Product integration issues. The app needs to integrate 3 services. The device needs to synchronize with app and server. The website needs a redesign.
Cross-platform communication issues. Users should easily use cross-platform features that require Bluetooth and WIFI. Such as initialization process and new feature "WeJoin".
Experience consistency issues. Users should have the same experience on mobile end, device end and website.
The Solutions for ➊ Product integration issues
Mobile end
The new app needs integrates 3 services: MioShare Website, CycloAgent Desktop app and CycloSmart App. I considered the following conditions to determine whether the item should remain on the website and the integrated content.
The scenario of function use.
The convenience of function operation.
Product future strategy.
Limited development time.
Based on the clues of the interview and the product strategy, I designed the App homepage to be the map. When there is data, the records on the map help users to immerse themselves in the memory. When there is no data, users can explore the surroundings through the official recommended tours. At the same time I moved the summary information to history. Let "History" and "Tour" be combined on the same page with two tabs for easy finding.
Finally, it was merged into 5 major menus.
Device end
This is the first time to develop a Cycling device on the Android platform. I connected the functions that should be synchronized between the device side and the app side, to let the team better compare. The synchronized info is defined according to the scenario of function use.
Before the activity Planned tours
During activity WeJoin
After the activity History records
Others Personal / Device Information
Website
I redesigned the information architecture and overall visuals for the following reasons. And according to the development schedule is divided into different stages.
Consistent with the products Let users have the same experience on the website and App.
Highlight features Simplified architecture and categorized content. Make the main function easier to find.
Product strategy Allows users to use some features without logging in, in order to attract people who have not purchase the product.
The Solutions for ➋ Cross-platform communication issues
Such as Initialization process
First, understand the process and limitations of Bluetooth connection. Then, different users have different processes. Based on the goal to provide the corresponding information. Step-by-step flowchart Like passing the ball. Check according to the steps to ensure that the information presented on both sides is complementary. At the same time, use the paper prototype to repeatedly test whether there are any missing details.
Visibility of system status Keep users informed about what is going on with appropriate, timely feedback.
Such as New feature "WeJoin"
The new feature is to let a group of people start an activity together, share each real time location. This allow users without Cyclo to join together through the App. Group riding journey Based on interviews and research the corresponding group riding journey is organized. I create user flow based on this journey.
Different users, different flow Host and participants, according to different roles to create processes and wireframes. Role playing prototype Use rough prototypes to quickly verify the process and scenario.
The Solutions for ➌ Experience consistency issues
Mobile end
Consistency and standards Across all platforms, users can see the same words, elements and colors. Display information according to different users Such as Device management page. In addition to each flow chart, I listed table sheet to let the team can clearly identify the differences between process and information.
Device end
Since the screen is 20% smaller than before, visibility and readability are very important. Reduce page information The design of the homepage and the sequence of functions consider the following points.
Frequency of feature usage
Promote new features
Marketing appeal
Retain feature extensibility
Refer to Apple and Google's small screen guidelines Added the definition of information presented when the user is under recording mode.
Use actual riding tests Based on the test results adjust for clear color contrast, proper font size, and button size.
Website
Unified page layout Standardize the two layouts and define the corresponding usage. Unified color definition Continuing the color definition of MioShare App and matching the brand color system, I changed the style of the website to be more in line with the products.
Define empty state Use the empty state to increase the guidance on the use of functions. Add illustrations Make products more emotional.
The process went smoothly? Of course NOT.
The new feature "WeJoin" is difficult to reach a consensus within the team. To clarify design direction, we used expert reviews, user interviews, and recruited cyclists for usability testing.
Balance user needs and business goals
Iterative design based on test results
We tested the product at different stages of the project.
Low-fi prototypes As a quick verification during the development of various features. Allow all stakeholders to directly participate and provide feedback.
Usability testing In the middle of product development, actual cyclists are recruited for testing and user interview.
Beta testing Before releasing the product, we tested it with all members of the team and stakeholders. Use the product to complete group rides on weekends.
Keep the most important "Share" value
Based on the findings of previous research and interviews, we decided to focus our product on fun experiences that are "Shareable". We divide new features into different development stages. It greatly simplifies the function of phone and device synchronization. In the future, we will use the market reaction to validate the launched product and make further optimization based on the feedback.
This large multi-platform project is very challenging for me. Learning how to balance business goals with ideals is the most important lesson in this project. The next step is to conduct in-depth interviews with users who purchase the product 4 months to half a year after the product is launched. Validate actual feedback on new features and confirm if product strategy needs to be adjusted.
