Introduction
This is a user experience case study carried out by myself, a product design student, and a team of 3 student engineers on an existing electric car sharing application called BlueSG based in Singapore. We’re not affiliated with the application but undertook this project to learn more about user experience design and research.
Research
Today's Solution
BlueSG owns charging stations located across Singapore which cars can be rented from and dropped off at after traveling from point A to B. Users can reserve cars and parking spaces within the locations in advance or they can rent cars upon arrival at the station and park in any free space at any station they would like. We downloaded the android application in order to identify user experience problems that we could potentially fix.
User Stories
We conducted user interviews to gain information about the users' experience. We asked participants about the applications ease of use and their understanding of how the applippcation worked. We then conducted user testing where we would ask our user to walk through the application to complete a specific task, recording what they had problems with.
Pain Points
From our user interviews and testing, we defined their problems into pain points and then grouped them together using affinity mapping to create a set of issues that we could strategically deal with.
The main pain points that we boiled it down to are:
Overcomplication
Information
Customer Support
Product
Technical
We decided to tackle the application being over complicated, the information issues and the customer support issues within the application. The issue with the product itself and the technical issues are things we can’t do much about at this time so we’ve focused on the first three pain points.
Overcomplication: Defining the problem
The main problem with this pain point is how much work the user has to go through to reserve a car and or parking space. If the user wants to look on the map they have to change between a cars available map and an available parking spaces map booking each separately. If the user wanted to book both a car and space at the same time they could use the Express button however they would have to select the map on the express screen and manually look for their destination. If there were no vehicles or if there were no spaces available, this left the user to go all the way back to the main screen selecting queue and then manually searching for their location again within the queue screen, which frustrated the users that we observed.
Another thing that was identified was that the icons were confusing to the user, on the first landing screen image the little book at the top is a list of your favorited locations, when you select the available cars drop down menu the little button in the top right is how you change the views from map to satellite which users weren’t aware of before discovering it for themselves through curiously experimenting.
Information: Defining the problem
The information issues the user experienced are that on first use of the application very little information was given about how the app works. The application loads straight into the landing screen and when testing the application on first-time users we found that they didn’t know how to proceed because there was no explanation of the rental process. The users were confused about the express function because they didn’t intuitively know what its purpose was and when they tried to use the help section it opened a user guide in the form of a pdf. We felt that this wasn’t the most efficient way for users to find the relevant information.
Customer Support: Defining the problem
The problem here was that some customer support issues were more common than others, there were issues with people having to pay for parking when picking up a car. The user is only meant to pay rent but because some of the charging stations are located within privately owned lots, parking fees of around $20 could be charged. Currently, the only way to get reimbursed is to write to the company. Other common issues were dirty interiors and external damage to the car. Essentially regardless of the nature of your customer support issue, the solution is to call customer support on the phone number provided. This is fine but other companies within this sector offer a range of more specialized solutions to deal with their more common issues efficiently.
Design
User Flow
I created a user flow of the application to gain more of a technical understanding of how the system worked, this user flow highlighted a problem that we had already identified, the amount of backtracking the user had to do. When we looked at this user flow we believed that we would be able to make some positive changes.
Ideate Solutions
We decided that to create the new design we would have to redesign much of how the application already worked so instead of changing small features within the already existing application we started looking at a large scale redesign of the system itself.
Lo-Fi Prototyping
We discussed and came up with potential solutions for each pain point, made rough UI sketches on paper, refined them down and then I recreated them in Adobe Xd to get feedback and iterate before creating the hi-fidelity mockups.
Overcomplication: Design Solutions
The main problem here is that the flow to rent a car is more complicated than it needs to be. The new user flow attempts to streamline the reservation process. In the previous flow, the user would have to constantly backtrack if there were no cars and or spaces available so I designed the new flow to try to constantly keep the user moving forward within the application.
I had this idea of simplifying as much as I could as a lack of simplicity was an important issue that the users were constantly picking up on. I attempted to remove the need for switching between separate maps, one for the cars available and one for the charging stations available, by using a drag & drop feature that highlights either cars or stations within a certain radius, depending on which icon you drag & drop, showing you quickly what’s available in that area.
How this design works is that users can either choose to search a broad location with the radius drag and drop icon or zoom in on the map to see more specific stations. By adding a reserve button it means that users can reserve both a car to rent and a charging station from the landing page without the need for a separate express screen. This also allows users to only reserve a car or charging station if they wanted.
I added information to the close-up map view showing cars and charging stations available at the same time. I tried to do this in the simplest way possible using icons and numbers in order to condense the information from two separate maps into one without cutting anything.
I removed the option to select queue or express, the user can select a station with no cars or spaces and will be prompted whether they want to join a queue or not when they go to confirm their reservation. What I was trying to do here was to eliminate the need to backtrack to join the queue.
Information: Design Solutions
The information issues that users faced were that on first use of the app nothing was explained about the product, that combined with confusing icons was a nightmare for new users. Onboarding is something which some people love and some hate, for this project we believed that onboarding would help to improve the overall experience and explain how the app works in general.
Using the information on the BlueSG website I created 5 Onboarding Screens using iconography from Flaticon that would be shown on first use. We made the screens easily accessible through the menu so that users could go through them again at any time. If I had more time on the project I would’ve liked to develop my own custom icons but because of the time constraints, I’m using these for now. The references to all the icons I’ve used can be found at the bottom of the page.
The previous iteration of the user manual was in the form of a pdf, for a modern app we believe that this has to change, we’ve simply organized it into separate screens with a menu which makes it easy to access specific information, the user manual change is important for the users opinion of the brand.
Customer Service Interaction
For the customer service pain point currently within the application all that is available for users is a telephone number. Looking at other companies within this sector many offer alternative options for customer support, for example allowing the user to fill in a short form or to send in a photo of their problem instead of calling. Talking directly to a person is useful but we believe the company can offer a range of contact methods to allow the user to choose what’s best for them.
We designed a simpler way to deal with customer support issues such as being able to easily request compensation for parking charges that shouldn’t have occurred by inputting the cars registration number, the station location and by uploading a picture of the receipt so that the user can be compensated. Importantly I have also added specialized ways to deal with more common issues like dirty interiors and external damage, as well as a range of different contact information.
Visual Design
These screens are a concept/mockup of what the outcome of this research and design could look like. I tried to use elements similar to popular tech-focused applications such as messenger to help create a visual design language for the brand that was more modern than the original. The current visual design is something I would like to improve on if I was to spend longer working on this project.
Testing
I conducted a walk through with potential users asking them what they would do at each screen in order to reserve a car. One of the things that could be improved in the next iteration that I picked up on was that users weren’t immediately aware that they could drag and drop the icons in the bottom of the screen on the location page.
Thanks
Thanks for reading! I hope there is some information within this case study that is useful to BlueSG or others. It’s definitely been useful for myself to complete this user experience project.
References
Satellite Icon made by Freepik from www.flaticon.com
Google Maps Icon made by Freepik from www.flaticon.com
Key Icon made by Freepik from www.flaticon.com
Unplug Icon made by Smashicons from www.flaticon.com
Debit Card Icon made by Monkik from www.flaticon.com
Location Icon made by Smashicons from www.flaticon.com
Plug Icon made by Smashicons from www.flaticon.com
Dollar Icon made by Eucalyp from www.flaticon.com
Drink Icon made by Freepik from www.flaticon.com
Wrench Icon made by Freepik from www.flaticon.com
Car & Charging station Icons made by me
