EU bike
At the end of the first year of my UX design education, we were tasked with evaluating and improving the design of the EU bike app. The app was used to rent bikes in Uppsala and Stockholm and had received a lot of criticism in articles and reviews.
The project was carried out independently with mentoring and without the company's involvement.
Project details
Project type
● Conceptual redesign of mobile app
● Individual project
● School project
Tools used
● Figma
● Miro
● Excalidraw
My roles
UI & UX designer
Project duration
4 weeks, 2021. Revisited and updated in 2023.
My tasks
● Make the app more user-friendly overall.
● Achieve more transparency regarding prices and terms.
● Create a better function for support.
● Invent a better system for payments and credits.
Concept
EU bike allows people to spontaneously, efficiently, and safely rent a bike at an affordable price. The rental process is quick and easy thanks to an app. Users can easily find a free bike, use it for up to 12 hours and leave it at any legal location within Stockholm county.
Business goals
● Create positive awareness around the service
● Increase use of the bikes
● Increase accessibility to the bikes
● Improve customer satisfaction
What I learned
● Graduating from education does not mark the end of personal growth; especially for those passionate about learning and exploring new avenues, the journey of evolution continues.
● It is extremely important for both credibility and user reassurance that a solution looks professional and well thought out.
● A competitor analysis can be a very good source of inspiration when redesigning a solution that is too simple in its design.
● If a solution is both technically unusable and unpleasant to look at, it will probably result in users being extra angry 🙃
The problem
Bicycle traffic in Stockholm's inner city has significantly increased in the past decade. In Stockholm and Uppsala, Green Economy provides rental bikes labeled EU bike, offering convenient unlocking through QR codes and payment per hour through an app.
However, the app has received criticism for its usability and has faced competition from other bike rental companies and electric scooters, leading to challenges in the market.
The challenge
EU bike has previously been accused of being misleading and inflexible in its pricing. Furthermore, the company has been criticized for its extensive and unclear user agreement, which collected sensitive personal data. The company has now reviewed the situation and removed the deposit fee as well as cleaned up the user agreement. However, the service still suffers from a bad reputation, largely due to the app's lack of usability.
Would it be possible to increase the number of users by providing a working app?
The solution
I made substantial improvements to the app by incorporating the requested help functions and expanding the user's payment options. Furthermore, I addressed the issue of inadequate information regarding the usage of the service.
The app received a stylistic update, featuring a modern design that improved usability and addressed issues like unreadable text. In the final stages, I conducted usability testing to identify and resolve any remaining minor issues, guaranteeing a seamless user experience.
Design process
1
Gain industry insight and user understanding.
Desk research
Usability analysis
Competitive analysis
Target group analysis
Interviews
2
Articulate the problem and set a focused design challenge.
Behavioral persona
Value Proposition Canvas
3
Generate a wide range of ideas and potential solutions.
User story mapping
User flowchart
Sketches
4
Simulate the user experience and validate the solution with users.
Style guide
Hi-Fi prototype
Usability testing
UI corrections
1. Explore
DESK RESEARCH
What people are saying
To gain insights into the current state of the service, I began by examining users' opinions, thoughts, and feelings. By reviewing articles and feedback on platforms such as Facebook, Apple App Store, and Google Play, it became evident that the majority of users held a negative view of the service.
Positive reviews were scarce, with ratings of 1.4 out of 5 on Google Play and 2.2 out of 5 on Apple App Store, highlighting significant room for improvement. The predominant complaints centered around issues with bike unlocking, bike condition, and insufficient support and user-friendliness.
Quotes from users
Apart from an ugly design that is difficult to understand, the app also fails to work.
Hopeless. Sad, I would have used the service if the app had worked.
I don't understand why I have to pay 99 SEK when I only want to cycle for half an hour??
Crashes all the time. Insufficient price information. The Swedish Consumer Agency should look into this!
... it’s not even possible to send reports when the bike won’t unlock.
USABILITY ANALYSIS
The state of the current solution
I conducted an investigation to identify interface issues that could impact the user experience in the app. To guide my evaluation, I employed Nielsen's 10 usability heuristics, a widely used approach in this methodology. Additionally, I considered accessibility guidelines (WCAG), although they are not currently applicable to apps.
Some of the issues I found
Register
1. Image that looks like a placeholder, distracting the user from the task.
2. Non-descriptive information about the service and its purpose.
Map
3. Inadequate reporting function. The link takes the user out of the app in the form of a "mailto" link.
4. Non-descriptive button text, unclear to the user what is happening.
Menu
5. Help section and contact functions are missing. There is nowhere for the user to turn if they encounter problems.
Wallet
6. Font that is hard to read. People with visual impairments may not be able to read this.
7. Inflexible payment method. The user may have to buy a lot more credits than they know that they will consume.
COMPETETIVE ANALYSIS
The state of the market
The purpose of the competitive analysis was to explore the market landscape and identify gaps, weaknesses, and saturation in demand among companies offering similar services. By examining these factors, I aimed to gather information that would guide the direction and target audience selection for my project.
I looked at companies that offer..
🚲 Bicycle rental
Examples: Stockholmcykel.se, Rent a Bike, Cykelstallet, Djurgårdsboden
In common:
● Tourist-oriented.
● Pick up and drop off in the same place.
● Deposit often required (approx. 3000 SEK).
● Access to a helmet and child seat.
● Different types of bikes.
● Guided tours with or without a guide (self-guided)
● Relatively high hourly rate.
● Focus on service.
🛴 Electric scooter rental
Examples: Voi, Lime
In common:
● For everyday transport between A & B.
● Encourages spontaneity.
● Relatively user-friendly apps.
● Limited to the inner city.
● Clear rules and instructions.
● Often possible to reserve a vehicle.
● Has rewards programmes.
● Relatively expensive.
● Accessible support.
Disadvantages
● No easily accessible rules or information.
● Unpredictable access to bicycles.
● No rewards program.
● No available support.
● Non-flexible credit system.
EU bike compared to competitors
Benefits
● No fixed parking.
● Lower cost.
● No deposit.
● Large accepted area for parking.
● Exercise while transporting.
TARGET GROUP ANALYSIS
Defining the main target group
The competitive analysis revealed a saturated market for bicycle rentals catering to individuals seeking to explore specific areas with higher equipment demands. Tourist-oriented bicycle rentals effectively address this need. Additionally, the market is saturated with companies offering electric scooter rentals, providing convenient and effortless transportation between destinations A and B.
One group whose needs were currently not being met was:
Eco-conscious individuals seeking spontaneous travel between A and B, valuing exercise during their commute.
INTERVIEWS
Understanding potential users
To gather deeper insights into the thoughts, feelings, and opinions of potential users, I conducted two interviews. Given the tight time constraints, I opted for convenience sampling by selecting two individuals from my immediate vicinity who belonged to the target group.
I opted for semi-structured interviews, primarily utilizing open-ended questions along with spontaneous follow-up inquiries. The interview questions primarily focused on participants' daily transportation habits, preferred modes of transportation, and their overall relationship with cycling and the environment.
Quotes from participants
I think cycling is a fun way to get around!
I ride Voi sometimes but it makes me feel lazy...
Public transport is expensive and crowded.
I feel guilty when I use the car in the city.
I used to cycle a lot when I was a kid, would love to cycle more!
I have an expensive bike that I'm afraid to use because of the theft risk.
Needs
● Users need to be able to pay, unlock and re-lock in as short a time as possible.
● Users need a reliable alternative to owning a bike.
Insights
Must be convenient & reliable
Both my participants expressed that these services must be technically easy to use, otherwise, the value of spontaneity is lost.
The participants both had experience of owning a bicycle, but did not have one they wanted/could use for daily or spontaneous transport within the city. The reason was that bicycle parking inside the city is both complicated and a source of concern, as the risk of theft is increased.
2. Define
BEHAVIORAL PERSONA / USER ARCHETYPE
Defining a potential user archetype
I created a behavioral persona/user archetype based on my insights from the interviews to get a better idea of whom I'm designing for. It was also created to make different design decisions more accessible and to make sure that I always have the user in focus when I design, which is easier if I have a well-defined vision of them.
The spontaneous cyclist
Characteristics
● Impulsive
● Comfortable
● Economical
● Versatile
● Restless
Motivators
● Wants to be spontaneous
● Wants to be efficient
● Wants to feel healthier
● Wants to be a better environmentalist
● Wants to keep costs down
Challenge
Making the solution technically efficient and attractive enough, so that the Spontaneous Cyclist does not choose another option instead.
Purpose of use
● Wants to be able to quickly, easily and affordably rent a bicycle.
● Do not want to feel limited by designated drop-off points or short rental periods.
VALUE PROPOSITION CANVAS
Clarifying what matters
To connect the user's needs with the values the service needed to offer, I made a Value Proposition Canvas. This way I could easily see if the user's main needs were being met and clarify where my service needed further development. It also helped me come up with ideas for exclusive features.
3. Ideate
USER STORY MAPPING
Prioritizing features
To potentially extend the value of my service, I conducted a brainstorming session in Miro that generated a variety of feature suggestions. I sorted out the ones that felt most relevant to the target audience and behavioral persona and prioritized them in a user story map.
In the user story map, I grouped features according to which should/must be included in a first release (MVP) and which could wait until later releases (Release 2 & 3). This gave me a clear idea of what to focus on when starting to draw up the design, and a helpful visualization of the different steps of the user's journey.
FLOWCHART
Mapping out the structure
Once I knew more about the potential users and functions of the service, I went on to map out the basic structure. I started by visualizing the interactions between users and the interface in the form of a flowchart. The flow represents the main flow for a first-time user, from registration to completing a bike ride.
SKETCHES
Visualizing design ideas
In order to explore different visual ideas, I drew up a number of different sketches in Excalidraw. While I typically prioritize the sketching step, I have noticed that sketching in Figma, although equally feasible as on paper or in dedicated sketching tools, often leads me to invest excessive time refining a design that may ultimately be discarded.
I've also noticed how much easier it is to give feedback on sketches that look like rough drafts compared to something that looks more polished, even if you've spent the same amount of time on both. Unfortunately, I didn't have enough time in this project to get anyone's opinion on the sketches, but it's a good habit to keep up!
4. Design & test
First version
This project was started at the beginning of my education in 2021. I had recently started learning UI & UX design and had neither a complete understanding of design principles nor the knowledge and experience that make a good designer.
This version features a minimalistic approach, devoid of vibrant colors. During that period of my life, I was unaccustomed to working extensively with color, both in design and my artwork, which is evident in hindsight. The app was initially in Swedish but was subsequently translated into English (see Version 2).
Second version
As I embarked on the process of refining my portfolio upon graduating, I couldn't resist the urge to revisit my initial solution and make some much-needed updates.
My goal was to infuse the app with more vitality and a modern touch. I accomplished this by creating a generous color palette and addressing the most pressing issues, such as alignment and overall visual guidelines that I had learned since the first version.
Third version
About half a year after graduating, it was time to majorly update my portfolio. During a new review of my projects, I noticed that this solution still had some issues. The generous color palette made the app appear cluttered, and the fonts didn't feel sufficiently modern. Additionally, there were structural and usability problems that I had not discovered in the second version.
To address these issues, I simplified the color palette and made the app more minimalist by streamlining elements and interactions. I replaced the headline font with a more modern and app-specific typeface, while also ensuring consistent margins and spacing between elements.
Creating a third version of the app made it clear to me that graduation did not mark the end of my learning and growth as a designer, which, although not surprising, was still an exciting discovery!
Selected views
Version 3
📝 Registration
To use the service, the user needs to sign up first. The initial home screen had a generic image that didn't provide any information about the service. Additionally, there was no mention of what kind of service it was.
In my design, I added some helpful info about what the user is expected to do. I emphasized user agreement and privacy policy information, as these aspects have received negative feedback from users. In this latest iteration, I also implemented a feature enabling the selection of a country concerning the phone number.
Styleguide
Version 3
Interactive Figma prototype
USABILITY TESTING
Exploring how my solution performs
To gain insights and refine the usability of my solution, I carried out an essential usability test. I tested my solution on one individual from the target group, who had average app experience. Using Figma's app Figma Mirror on a smartphone, the participant was asked to think aloud and explain their actions. We discussed the participant's main problem areas and received valuable suggestions for improvements.
Although I would have liked to conduct more usability testing, the insights gained from the test were helpful. Further usability testing would be a beneficial next step to gather more feedback from potential users and understand their perspectives on the solution.
⚠️ Problem
Unclear headings that are not prominent enough.
✅ Solution
Thicker and larger font in a color that pops better.
⚠️ Problem
Cluttered impression of the Wallet page.
✅ Solution
More whitespace and more significant distinction between the different text styles.
⚠️ Problem
Some buttons look different, hard to understand the meaning of this.
✅ Solution
Consistent button design with clear hierarchy.
⚠️ Problem
Difficult-to-read text on terms and conditions on the home page.
✅ Solution
Larger and darker text.