BusMapp Case Study
Summary
BusMapp is a hypothetical city transit mobile app that was created for Thinkful’s UX/UI Immersion Bootcamp and aims to be a seamless, user-friendly experience for all the bus riders in the hypothetical Iowa City area. The main objective is to ensure that each rider/app user is able to effectively locate nearby bus stops, view time frames for buses arrival to stop, and to choose a bus line that is most convenient for their daily commute. Our solution was to create a transportation application that has aesthetically pleasing qualities and, according to our usability test participants, as well as an easy to navigate interface.
Overview
In this case study, I will to attempt to explain the BusMapp development, its problems and its features. The BusMapp concept aims to be a seamless, quick and user-friendly experience for all the bus riders in the hypothetical Iowa City area. Iowa City was chosen due to its proximity to the designer and the fact that there are separate bus apps for separate bus routes; one for the University of Iowa buses and another one for public city transit.
Problem Statement
In order to assist the residents of Iowa City who make use of the public bus system, the mobile application BusMapp has been developed. The three main problems that needed to be solved were the following:
- Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.
- Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
- Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
These main problems were the primary focus of this project, and as such, this case study is an attempt to answer them for the potential users of BusMapp.
Users and Audience
The product may be used by bus riders in Iowa City. Many of the residents of Iowa City may not attend the University of Iowa, however they may hold jobs or maintain a social life in downtown Iowa City near the University campus (which is where most of the entertainment is located at). Some users may also be students who do not live near campus and require the city bus in order to get to lectures and classes. Other users may be the elderly who require city bus transit in order to get around the city. Additional users may be the disabled who require the city bus transit in order to get around Iowa City. The background of these four main audiences has been looked at primarily in order to make the city bus app an efficient means of transportation for everyone.
Roles and Responsibilities
The sketching, designing, planning, and wireframing has been created by me, Cristian C. Rodriguez. The prototyping was tested by my partner Megan Newell who volunteered as the first usability test of the prototype. The feedback of the mentors at Thinkful has been invaluable. Additional people who have helped in this project is my brother Mateo Rodriguez and my friend Raul Barrios. Their usability test feedback provided major insight about BusMapp.
Scope and Constraints
The only constraint in the project has been the timing of the grading which has not been an issue with me personally because it has given me additional time to think more clearly about the project and make proper alterations. I did experience issues with my outdated MacBook, but the issues were manageable.
Process
Discover
Name and project planning
The beginning of the project was composed of figuring out what the name of the project was going to be. The first ideas that came to my mind were of names of buses in other languages. La Chiva was the initial idea because it is a method of transportation in Colombia and I visualized the app to have a country feeling (Chivas are buses that have no doors or windows and are used near tourist attractions etc). Several questions were raised during this part of the planning process..
During the project planning 3 objectives that could be measured with Key Performance Indicators were planned for
- Increase commute time
- Increase daily riders
- Accurate bus time arrival
User Survey
A survey conducted at the beginning of the process. The User Survey in which 19 participants answered 16 questions based on the hypothetical usage of this bus app as well as their current use of mobile apps.
- The responses for the questions are here
- The responses to the questions indicated that most people use either Google Maps and Apple Maps, from here we went on to competitor reviews.
Competitor Review
- Competitors for BusMapp include Google Maps, Apple Maps and Transit App - an app based on the Chicago public bus system.
Define
User Story
For the User Story, a user named, Andre Boule was created. Andrew would represent who we believed would be a rider of the bus or a user of the app. An excel worksheet was created to notate all the different actions that our user may take during the course of their experience with BusMapp.
User Flow - 1
Three iterations of the user flow were constucted then graded by a Thinkful instructor
-The first step that we undertook when starting the user flow was a hand sketch.
- The main idea behind the hand sketch was to create access points that would make it easy for a first-time user to access all the required capabilities.
- We started in the middle of the sketch paper, it was decided that the most effective way to access the main points would be with large guides on the landing screen.
- We then sketched out the pages and envisioned how each page would look and the capabilities of each function/button.
- The secondary idea of the user flow is to try to get as few pages as possible in order to not confuse the user too much with other aspects.
The second step was to digitize the sketch.
We found a wire-flow sketch template, duplicated it and used the grayscale components in the template to create a user flow.
This part of the project was submitted and continued on to the next section, wireframes.
Wireframes - 1
In this phase, there were three iterations of the wireframes.
After carefully reading through the assignment, a template for wireframes was duplicated from the Figma community.
The wireframes chosen had a bit of color to them, however they were useful in developing the idea of the user flow further.
A wireframe for an iOS-style app was developed.
Although the wireframes had a great aesthetic, it did not solve the three main problems posed by the project.
User Flow - 2
After receiving the grading for the user flow and speaking with one of our mentors a second user flow sketch was created, this time with a focus on the actions, the shape of the elements (circle, triangle, rectangle) and their uses.
The hand sketch started with a main spot in the middle and it branched down towards other pages or actions for the user.
The digitized sketch also started in the middle and used a single color throughout
A user flow presentation was attached, which included the explanation behind each main part of the app.
User Flow - 3
After receiving the grading for the second iteration of the user flow, a few more revisions were done to this part of the project.
Certain elements were changed from circle to square to make sure the reader understands what action the user is taking at this step.
A legend was added to the user flow to denote difference in elements.
The beginning point was moved from the middle to the left hand side of the page, in the way that a reader would be able to find the starting spot at first.
A few aspects were removed that ultimately weren’t completely necessary in order to complete the assignment at hand.
This submission was ultimately accepted.
Wireframe - 2
After receiving the grading from the first Wireframe, the entire template was scratched and started from the beginning once more
A different template was chosen for the lo-fi wireframes that would better fit the grayscale and more simple user elements that weren't accessible in the original first wireframe
The same style of landing page was used with the hopes that at the end of the usability test, this app will render the ability to get to each idea faster than the common transit/bus apps that are currently out right now.
There were multiple new pages added such as the Bus Stop ETA page and the Bus Stop Walking Distance page in order to fulfill the requirements of the assignment.
This submission was ultimately not accepted.
Wireframe - 3
After receiving the grading for the second iteration and discussing it with a Thinkful mentor, a few iterations were completed.
Combined he Bus Stop ETA page and Bus Stop Walking Distance page into one single page.
Made the problems to be solved the main focus of the wireframes.
Under the advise of making sure that the four-corner idea is user-friendly, a decision was made to scrap the button that would be closest to the finger to make it more user-friendly
After several of tutorials and readings on Figma and its capabilities, I was able to “detach instances” and organize the UI of the app much more clearly.
This submission was ultimately accepted.
- After the wireframes were accepted, a version of the prototype of the lo-fi wireframes was created and tested by myself and my partner.
Prototype
- After the wireframes were accepted, and reviewed with a Thinkful mentor, it was time to create the high-fidelity prototypes in order to utilize them during the subsequent usability testing.
Develop
Mood Board
At the beginning of this stage, we developed a moodboard with 5 main colors that would reflect the colors that we will be using for the high-fidelity wireframes. Other buttons and pieces were used as inspiration as well.
Logo
We created a logo on Adobe Photoshop using the colors from in the moodboard and renamed the app as BusMapp. Next, a sun and a bus icon was combined to create the logo.
Typography
Landscape Wireframes
The lo-fi version of the wireframes was duplicated and a landscape version of every page was created for this part of the project.
High-Fidelity Wireframes
At this stage, the mood board have been combined with the lo-fi wireframes to develop a high-fidelity version of each page within the application.
Deliver
Usability Test
A usability test was developed in order to test the efficacy of all the problems that were presented during the User Flow stage.
Scope
During the course of this usability test, a series of experiments were conducted on willing participants for a bus app named BusMapp, which is a hypothetical bus transit app designed to help bus riders around the metro reach their destination more efficiently.
The prototype for BusMapp was finished on January 2nd and the Usability Test will be conducted over the course of 2 days on January 5 and January 6.
The current prototype for BusMapp is designed to fit an iPhone Pro 11 Max.
Purpose
The primary purpose of this usability test is to determine if a user can get to the page and solve three main problems that were given at the beginning of the project:
Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.
Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
The secondary purpose of this usability test is based on the alternate layout we have chosen for this app. Many other apps utilize tabs in order to separate groups of pages, it was theorized that having these tabs be at the corners of the landing page (minus the one closest to the thumb) would be the fastest and most efficient way for long-time bus riders to access the routes that they typically use.
Schedule & Location
We conducted the test at my home on January 5th and 6th.
Session & Equipment
- The sessions for each participant will last approximately 30 minutes.
- There will only be one session per participant
- Equipment
- Figma Mobile App
- Figma Macbook App
- Paper & Pencil
- Chronometer
Participants
- Megan Newell, partner, 28 years old
- Elkin Rodriguez, brother, 23 years old
- Raul Barrios, friend, 24 years old
Scenario
- Scenario 1: User one picks up his son from the bus route back to home from school. The son stays for after-school activities at times, some days forgetting to mention it. User needs to know when each of the buses stop at the Washington & State bus stop to pick up his son on time.
Optimal path: User arrives at Specific Bus Stop Page
- Scenario 2: User has lunch between noon and one. User has enough time to head back home for lunch and take another bus back. User needs to find out how much time he has to make it to the Washington & State bus stop
Optimal Path: User Arrives at Bus Stop ETA Page
- Scenario 3: Classes at the university just started and user has moved into a new city. User needs to know which of the different color bus lines he needs to use in order to get around to his courses.
Optimal Path: User Arrives at Bus Route Color Schedule.
Key Performance Indicators
Time taken to finish task
Chronometer for each of the three tasks
How many mouse clicks or taps it takes the participant to achieve the task
By hand
Learnability of the interface
User Review at the end of test
Participant satisfaction when interacting with the product
User review at the end of test
How many issues arise
User review at the end of test
User Review
Questions to ask participants
- After all the tests from a scale of 1 to 5 how easy to learn was the interface.
- After all the tests how satisfied did you feel with the way that the app worked on a scale from 1 to 5. One being, didn’t like the layout and five being, you enjoyed it thoroughly.
- Any specific issue that arose during the course of this experiment?
- Any comments or suggestions?
Usability Report
Setting
- The experiments took place at my home in Des Moines, Iowa. Two participants were tested one after the other but kept separate from each other during the course of the experiments.
- The experiments took approximately 20 minutes each, including the user review at the end of the experiment
Process
- Participants were briefed about the experiment and its intentions, its limitations, their privacy and the post-experiment user review.
- During the first experiment we asked the other participant to use headphones and play a video game so they didn’t become a distraction and would not know about the course of the experiment which might influence it.
- The participants were presented with 3 user scenarios listed herein.
- For each scenario, the amount of clicks were tracked by watching the participant and recording their behavior on paper.
- The time was tracked with an Apple Watch chronometer.
- The user used the Figma app on my cell phone while the user scenario was pulled up on a laptop screen.
- At the end of the experiment, the participant was asked three questions and given a chance to provide feedback to the designer.
- The measure of success was based on the participant landing on three different pages for each scenario (based on the original problems).
Scenario
- Scenario 1: Landing at Specific Bus Stop Page
- Scenario 2: Landing at Bus Stop ETA page
- Scenario 3: Landing at Bus Route Schedule
Findings & Results
For a detailed summary of the primary results click here
Outcomes
- At the end of this test we have concluded that the pages created for this app have been sufficient in order to finish the tasks provided, and with this foundation, an app can be built that is more user-friendly than the current apps that are out right now. More testing with a larger audience may be required.
- Another conclusion of the usability test goes back to a personal hypothesis of my own, that the simpler a device of technology is, the more likely people will use it over competitors.
- Third and final conclusion is that although it was made sure the prototype worked to the most efficiency and utilized only the items required, people would still automatically and instinctively drag, scroll or attempt to use the app in the ways, that people have grown used to using them. This is an acquired skill and we need to figure out a way to access users who are not yet proficient with mobile devices.
Conclusion
Minor iterations will be to the prototype following the usability test, including changing the color to a few things for contrast and adding a text tool box in the search box page. The comments and feedback of the participants was taken into consideration and arrived at the conclusions that they would not be necessary to add to the prototype.
High Fidelity Prototype
- In order to make the usability test work efficiently, the prototypes had to be developed and finished - adding all the information required and making sure that every page was connected to each other with the correct modals
- After taking into account the feedback from the usability test, some corrections were made to the prototype.
Delivering Assets
After having finished and developed the final mockup. Each icon, each element, and each button were separated and placed in labeled folders in order to make it easier for developer to add this information into the application software.
The collection of pages has been exported as JPG.
The collection of other elements has been exported as PNG.
Final Thoughts
As the first project I felt that this was one of the most educational activities I have done in my lifetime. With this project I was able to understand how to create an app from scratch by utilizing the User Centered Design process (UCD). Understanding User Flows and Wireframes provided me with a strong foundation about UX design.
Another personal thought about this project is that I would like to see this format being tested more and compared side by side with other bus applications to see which one is more efficient for regular bus transit users. I believe that the design I developed and tested can be tweaked and used in mainstream bus apps.
