Project banner image

Ubike App Redesign

PROJECT
#User Research # Mobile APP # UIUX Design
MY ROLE
UX Research UIUX Design
TIME
1 Week

Overview

According to official statistics from Youbike, the total usage in Taipei City for 2023 has surpassed 46 million, marking a 35% increase compared to 2022. This shows that the number of rides is rapidly rising post-pandemic. The stations established in the Taipei area are extensive and densely located, making it highly convenient for short-distance commuting. However, due to the differences between Youbike 1.0 and 2.0 versions, as well as issues with the app, there are still many problems that need to be addressed to improve the overall Youbike user experience.

Ubikes parked on the strret
Ubike official statics image

Design Process

Define

User Research

Ideate

Competitor Analysis
Brainstorming
Wireframing

Design

Hi-Fi Design
Prototyping

For this design challenge, I set aside a week. Initially, I gathered feedback on Youbike from online resources and conversations with friends and family. After defining the issues, I identified areas for optimisation. I then conducted competitive research to analyse feasible solutions, created wireframes to conceptualise interaction and flow, and ultimately designed a high-fidelity prototype.

User Research

Through Google Store, Apple Store, and community forums, many reviews point out similar issues, including "different vehicle models cannot be returned," "the number of available bikes does not match the app display," and "bikes are unavailable at popular stations." After interviewing friends and family who use Youbike, I found that they have indeed encountered similar problems.

Reviews on the internet

Problems

I also conducted a preliminary design strengths and weaknesses analysis of the existing Youbike app and identified several usability issues, including "the main CTA is not clear" and "the types of bikes at stations are unclear." I refined my initial research findings into three specific pain points and developed design optimisation solutions addressing these issues.

Current app problems screenshot
Difficult to View All Available Bicycles
YouBike 1.0 and 2.0 are not integrated, making it difficult for users to view "all" available bikes. This forces users to switch between platforms to find a bike to rent.
Unclear CTA on the Homepage, Overcomplicated Functionality
The page is cluttered with too many CTAs (top-row search, site map, AI customer service, scan to rent, personal location), lacking clear guidance to quickly direct users to rent or return bikes.
Discrepancy Between Station Bike Status and User Expectations
The system's status updates are unclear, leading to situations where users see available bikes on the app, but upon arrival at the station, find no bikes available. The inability to reserve bikes in advance may result in users arriving at the station only to discover that the bikes have already been rented out.

Goal

How can the Youbike App make it easier for users to find available bikes for rent?
These pain points mainly cause inconvenience for users in terms of "convenience" and "usability," so I have focused on how to solve these challenges, with the goal of improving both aspects.

Competitors
Analysis

To brainstorm viable solutions, I focused on analysing similar domestic and international competitors. I gathered and organised effective features from these competitors, which helped me identify concrete areas for optimisation.

Vam Dam app screenshot
1.Display Numbers
2.Reserve Feature
3.Clean UI
Smile bike app screenshot
1.Clear CTA
2.Filter Feature
3.Status Refresh
Zolo app screenshot
1.Model Type
2.Reserve Feature
3.Clear CTA
iRent app screenshot
1.Easy Filter
2.Vehicle Switch
3.Clean UI
Lime app screenshot
1.Vehicle Switch
2.Clear CTA
3.Clean UI

Solutions

Here are the solutions I have identified from competing products. By formulating clear solutions, I can effectively help in the development of future design drafts and interaction flows.

Integrate Youbike 1.0 and 2.0 and use a filtering function to quickly find available bikes
Although the bike frame systems of 1.0 and 2.0 are different, we can still use the filtering function to allow users to maximise their search for nearby available bikes without needing to switch platforms.
Simplify the interface and provide clear objectives while streamlining the user flow
Display the primary objective clearly on the page to capture the user's attention. By simplifying the interface, users can focus on their main goals and quickly search for the nearest stations.
Provide features such as page refresh, bike reservation, and navigation
A manual refresh feature ensures that the data displayed on the screen is the most up-to-date, helping users make more accurate decisions. For urgent users, allow bikes to be temporarily reserved with prepaid options to ensure they can rent as expected. Offer navigation functionality to guide users to rental or return locations.

Design Principles

To optimise both "convenience" and "usability," I have summarised several design principles from competing products and solutions: simplicity, intuitiveness, and usefulness. These principles guide me during the design process, reminding me to stay focused on critical details at all times.

Clean
A simple UI not only makes the interface visually comfortable but also reduces the cognitive load of processing information. This allows users to focus more on their primary goals—"finding a bike" and "renting or returning a bike."
Intuitive
Intuitive operations help users avoid wasting time learning how to use the app, making the process of finding a bike more efficient and convenient.
Useful
The main purpose for users opening the app is to "find and rent a bike." In addition to simplicity and intuitiveness, ensuring that users can successfully rent a bike when needed is what brings real value. This focus on being "useful" is essential for delivering a valuable user experience.

Wireframes

After defining the solutions and design principles, I had a clear direction that helped me brainstorm how to design the interface and interactions. I started by sketching wireframes, marking the essential features and interactions during the process.

Hand draw wirframe

Design Versions

Using these wireframes, I proceeded to create more high-fidelity design prototypes, experimenting with different design versions.

Version 1
Version 2
Version 3
Version 4

Final Design

Throughout the iterations, I considered that users might use the app with one hand (while riding or walking) and that most users are right-handed. I chose a version that best fits these usage scenarios while aligning with the principles of "simplicity," "intuitiveness," and "usefulness" as my final design.

Demo image with features description
Redesign app image-1
Redesign app image-2
Redesign app image-3

Before & After

Here, I will explain the issues I found in the old design and analyse how the optimised design can improve the user experience. Through a comparison of the before and after versions, the differences and improvements will become more apparent.

Old Design
Old app screenshot image-1
Manual station selection: It takes time to find the right station.
Cannot quickly view all stations: Increases search difficulty.
Unclear purpose: User goals are unclear.
Optimized Design
Redesign app image-1
Simplified interface: Secondary functions are grouped for easier station finding.
Unified system: View all stations and available bikes for better decision-making.
Convenient search: One-click to find the nearest station with a refresh feature for accurate info.
Old Design
Old app screenshot image-2
Single bike type: Unable to view all stations.
Confusing CTA: Route planning button misleads users.
No reservation: Bikes may be unavailable upon arrival.
Optimized Design
Redesign app image-2
Redesign app image-3
Bike filter: Lets users select bike types and find stations easily.
Clear buttons: Provides clear CTAs and station info for quick decisions.
Reservation: Users can book and pay in advance to guarantee bike availability.

Reflection

Insights from Competitor Research:
Good competitors, having gone through many iterations, are often mature products. By carefully studying them, I realised that their decisions were made to solve specific pain points and deliver value to customers. This analysis helped inform my design choices.
Limited Time and Effective Project Planning:
In past projects, without time pressure, I could follow my own process of research, design planning, and testing. For this challenge, I only gave myself one week, using fragmented time after work. This required careful planning of how much research I could do and whether testing was feasible. This experience taught me how to manage a project effectively and produce a design within the deadline.
Validation Is Essential:
Although I produced a design, I couldn’t test it due to time constraints, which left me feeling uncertain. Only validated designs can truly measure whether the optimizations are beneficial. I later shared the design with friends and family I had previously interviewed, and their feedback helped confirm the success of my work. This experience reinforced the importance of real-world feedback in verifying design outcomes.
Thank You

Other Projects