Overview
This project involved conceptualizing solutions for SMOU, a major bicycle application in Barcelona. The goal was to address user pain points and achieve business objectives by conducting extensive research on user needs and redesigning the interface to improve user-friendliness. Through my research and insights, I focused on redesigning the onboarding process to better align with the current user's requirements.
This project's goal was to comprehend our users' conduct in great detail. I did user research, conducted interviews, and ultimately created a user persona to accomplish this. In addition, I used Figma to build a mood board, high-fidelity interfaces, branding components, and prototype interactions. In order to assess the effectiveness of the product, I lastly performed usability tests.
Time Frame: January 2023 -5 Day's
Role: Product designer, Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing, Information Architecture
Mentor: Bruno Pavani
Redesign an app
By addressing problems, streamlining the user interface, and enhancing functionality, an app redesign can greatly enhance the user experience. A redesign can give users a more intuitive, interesting, and pleasurable experience by taking user input into account and incorporating contemporary design principles. Additionally, a redesign can improve user engagement, retention, and happiness while assisting a business in remaining competitive in the rapidly changing digital environment.
Since I love biking and reside in Barcelona, Spain, I discovered the SMOU mobility app. I chose to redesign it because I could see a few things that could use an update; Although the app has worked well so far, there are many issues we, as users, run into that would be ideal for redesigning as a UX designer.
SMOU
Bicing is a Bicycle-sharing system in the city of Barcelona, Catalonia, Spain, which was implemented in March 2007 and promoted by the City Council.
My Goal
I aimed to redesign a simple, intuitive app focused on accessibility and user-centered. This is while considering that the app will always be used outdoors in sunny conditions.
Discovery
I began the process of making a new account while taking screenshots of each step up until the point where I was ready to hire a bike.
I talked to users during the discovery phase and concentrated on what I could alter to make it more user-friendly.
During my research, I discovered a pattern in the complaints through surveys and interviews. According to almost everyone, the buttons were too small, and the font was challenging to read outside. Additionally, the visual of the main focus bikes was contaminated by the app’s other services, such as cars and motorbikes, making it difficult to locate them. With this, SMOU uses its mapping feature, coloring some roads blue, cycle lanes green, etc. This led to a confusing chart that required assistance.
The following statistics support the arguments mentioned earlier:
77.8% expressed the need for more Google Maps interfaces.
66.7% struggled to find stations.
44.4% reported issues with button size.
33.3% had problems with font size.
User feedback on the application.
• Especially on a sunny day when the sun makes it difficult to see the screen, the button and font sizes were too small to tap or read.
• Because there isn’t a picture, symbol, or other indication that the app is a bicycle app when you first obtain it, you might not be entirely sure it is one.
• The program does not include Google Maps integration.Besides those complaints
The app is very popular despite the pain points mentioned. Using bikes around the city is fantastic because it helps the environment and our pockets since it is less expensive to use the service.
Empathise
User-feelings
Connectivity
Features/Interface
Moodboard
Ideation
I began by determining the users’ pain points for my design. I started with fonts and button sizes to make a meaningful difference and accomplish my objectives. The registration procedure was the next area I decided to focus on because it is essential to the user experience.
I chose a round button over a square one to increase the fluidity and smoothness of the app. The round button also gave the user a feeling of security and comfort. I added a picture to the second page of the onboarding process to highlight the app and make it evident that it is a bicycle rental app. To expedite the registration process, I also offered additional login choices.
Last but not least, I made the button round and larger to improve accessibility, particularly outside.
Instead of the current registration, which requires you to complete all the questions on one screen, resulting in small boxes and small letters, I’ve made the registration step-by-step for the following screens.
To prevent overthinking, I came up with the idea to make it step-by-step, telling the user via a timeline how many screens he needs to complete and asking one question at a time.
You are logged in, have an app overview, and are prepared to hire a bike on the last screen. On top of this page, I made the icons for the profile and filter.
A profile would contain all of the user’s settings, information about their preferences, and a filter icon allowing them to access additional modes of transportation, such as bikes, vehicles, and motor sharing.
At the bottom of the screen, I have only included the three significant icons for bicycling (the app’s primary function), public transportation, and more. You can also see the other options the program provides on the button.
Although there is still much to be done to reorganize the items to fit better on a single screen, I stopped here due to the challenge’s short deadline.
Usability test
I carried out five usability tests on my project to verify my design, and the results showed that users were pleased with the new app’s layout. On the final screen, there is, however, room for improvement.
The consensus was that the app must be updated to satisfy today’s users' needs. With a clear, step-by-step plan, the onboarding procedure was usable, readable, understandable, and accessible.
Design comparation
SMOU before the redesign
SMOU after my redesign
Style tile
Prototype
wrap-up
I discovered during the redesign process that a website's design can greatly affect its usability and user experience. I was able to develop a new design that was visually appealing, simple to use, and mobile device optimized by taking the time to comprehend the target audience and their requirements. I also learned how crucial it is to conduct user research and take user comments into account when making improvements. Overall, this experience has helped me understand the importance of user-centered design and how it can affect how well a website performs.