Umo Application
In a hectic world, it’s difficult to plan for transportation effectively. Our method? Umo is a clean, forward-thinking application that simplifies the process of buying tickets and getting up-to-the-minute information for the latest bus, train, and other modes of transportation in your city.
About Umo
Umo’s platform based approach simplifies transportation management, enabling everyone from the smallest bus operator to the largest regional transport authority to deliver a reliable public transit experience for their communities. Umo’s goal is to improve lives through mobility is at the heart of Umo. This application keeps riders moving efficiently by offering multi-modal journey planning, contactless payments, real-time travel information, and loyalty rewards through the Umo Mobility App.
My Role
I was one of the UX/UI designers on the Umo application. I worked closely with our front and back-end developers, our product manager, architect, and the senior designer who worked on other pages in the application. I partnered with my UX Team Lead for feedback and input, while I created the initial visual design specifications. I created sketches, wireframes, prototypes, and helped run user research throughout the entire project.
The Problem
Umo’s application was requiring updates on certain screens where riders were not able to navigate or accomplish the tasks they set out to complete. We focused our redesign efforts on the global navigation and the pages needed to accomplish the primary goals of buying tickets effectively, and booking a trip. Users found issues with the location of the search bar, as well as converting physical cards to the application. These pain points affected the usability of the application. I needed to redesign the application to better connect with our audiences, including building a more intuitive application and an easier task flow for the rider.
Umo App Version 1.0
The Goal
In response to these issues, a redesign of the Umo app was required. Three main goals were defined:
Improve UX design, making use of more widely-known UX patterns to produce smoother user flow between core functions of the application in the order they are most often utilized.
Redesign the visual appearance of the search bar, task flow, CTA’s and card validation.
Implement additional features to provide the user with helpful information to assist in planning their movements and keeping the user informed during their tasks.
UMO APP
User Research
Our first steps were to:
Perform an initial review of the existing site.
Search the web for Booking Applications to find everything that was already out there.
Determine pain points within the application, it was necessary to first understand exactly how users interact with the app, and the situations & scenarios in which they use it.
Use a site map generator to make sure we had a full picture of the existing IA.
Use the internet archive to explore previous versions of the site.
Create a business model canvas and competitive analysis.
We then conducted interviews and performed A/B testing with around 10–15 people total. We synthesized our data to create mid-fidelity prototypes addressing issues that were discovered during the research phase.
Card Sorting
Card sorting was a great exercise for understanding our user’s mental models and a helpful way to question our customers’ biases and validate the information with real people. I wanted to understand where riders expect certain content to be found within the application. Throughout my research, I would focus on how people understood different concepts for the redesign.
Trust
Price and trust/feeling safe are primary factors when deciding what application to use.
Travelers rely heavily on reviews and photos
Privacy and security are a concern for the majority of our users
Users are continuously confused and frustrated as they navigate the site
Users have difficulty booking trips if they do not feel secure with the mobile application
Task Flow
Problem:
To create a seamless flow for a user to buy a transit ticket
Design Goal :
To figure out what screens are required for purchasing a ticket.
Summary:
I had to make sure all the screens were designed in a way to ensure the user could achieve the task at hand.
By creating the task, I was able to look at what screens would need to be developed for the next iteration.
A/B TESTING
With A/B testing we made our current application more responsive by addressing the CTA and other pain points. A/B testing helped us understand what changes on the app can be beneficial. We noticed the search bar was exactly what the users expected in the current location by doing the testing. With the help of the test we were able to address any issues we had with the usability.
Proposed Solution
Our next step was to gather all of our insights and create a document prioritizing problems and potential solutions. This helped us organize our ideas and form our strategy as to what aspects of the site redesign we would tackle within the deadline.
Converting A Card Solution
User testing was conducted to find reoccurring pain points when locating a card number to convert this to the application. Creating new iterations and testing was very informative to choose the screen design most users preferred. The final screen we added was the first screen above. The users were able to convert their card to the application and this was the most intuitive option.
Wireframes
After we defined the flow and thus what screens we needed I proceeded with creating the wireframes to explore the experience in more detail on a screen-by-screen level. The main focus was the trip planning flow which sits at the heart of the app.
Solution for the Search Bar
I moved to exploring the overall look of the app. I did this by creating 3 search bar options using the same layout but different styles. Taking this route helped communicate different directions we can take more vividly as we could clearly see the impact each direction would have. Our research validated that the users preferred the search bar beneath the map as seen in the first design below.
Umo App
Umo Application High Fidelity
I applied the branding from the Style Guide to the mid-fidelity wireframes, the result of which was a set of high-fidelity wireframes. The purpose of our application is to show how we can optimize the booking process and make it not only convenient, but also with clean UI. In the process of the work we conducted user research to identify the need of the consumers who would use the app. Umo is a smart travel companion and mobility platform that provides simple and flexible travel for users, transit agencies, and mobility service providers. This new iteration is to help define the ticket process and make it more convenient and available for a wider audience.