HOME


  • CASE STUDIES
  • WEB DESIGN
  • ABOUT
  • ART WORK
  • CONTACT
  • BLOG

Transportation App


My High Fidelity Prototype

overview





This is a real-world project meant to make any future UX/ UI designer more familiar with hand on duty projects.


My client is the transportation agency for a midsize metropolitan area in the Midwest. The city uses a network of public buses. The only way for the town to inform the citizens of the schedule is through the webpage and a written copy of the bus stop program. Because scheduling on paper is different from real-life traffic situations, the system produces many errors.


The users are generally unsatisfied and stressed because they can’t predict with accuracy when their bus arrives. Whenever the bus is on one of the busiest bus stops: “Washington & State bus stop,” the users get confused because they are unsure which bus is theirs. These are the business requirements from my client: 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 target audience is a broad spectrum ranging from college students that forget to pay their tickets to an old lady of 84 who has dementia and lost herself in the transportation system. Mothers with children, Working professionals that try to save time from finding parking in the busy city. Artist’s that try to make some bus by performing guitar at the bus station.





MVP



My high fidelity prototype



/>


personas

























Process



In my first step in the process, I decided if the app would be feasible, then if it would be usable, and then if it would be helpful. This allowed me to create the questions in my User Survey.






















Survey



Through the survey, I discovered that 36% of users thought the app should display traffic delays, 29% thought it should show alternative transportation options, and 21% believed the app should estimate the trip’s price.



































user story



“As a bus rider, I want to find my route with ease and get to my destination on time.”


























site map



We decided to focus on the feature most users complained they lacked: showing traffic delays.








​






























User flows



I developed two user flows:





































​














Visual Design



I created style tiles and developed the color scales for the app inspired by the sunset you see out the window as you’re riding home from work on the bus. I connected the two words Bus and Fly and to create the name and logo of the app




.

























mood board



I used for natural earth colors inspired by the light.




























Logo Creation



I want it to create a logo that is inspired by the sunlight seen through the window of a bus ride home after a busy day at work.











.



outcomes



Usability Test and Iterations



For my usability test, I recruited 2 people: a male, age 21, and another male, age 36. They knew I had been working on a project, but were not aware of the content. Both have cell phones and work with apps on a daily basis. I explained to each of them a four-task scenario they were expected to achieve with Busfly:


  1. You are currently located on Beverly St. and need to catch the nearest bus to McAdams.The nearest bus stop is at Washington and State.
  2. Your first goal is to find out when each of the buses will arrive at the Washington and State bus stop.
  3. Your second task is to find out how long it will take for you to walk to Washington and State and when you need to leave to get there before the bus arrives.
  4. Your third task is to select one of seven bus lines that will reach McAdams and find out future arrival times.
  5. Your last task is to reach your destination in the app by using one of the available businesses.

The first tester was the 36 years old male who was able to solve all the problems, but became a bit confused about the order of the bus lines: I intentionally had created the numbers to be clickable, but he did not understand that the numbers represented the bus lines. Each line could open with more information about each of that bus line’s schedule.



















I solved this problem by adding a design element that indicated that those numbers represent the bus lines. The 36 years old male believed that in a perfect-world situation, I would not have to choose from so many bus lines and that the information displayed should only include the information to my destination. I agreed with him but told him that was not my project brief. He also pointed out to me that the original solution to the problem that I’d created wouldn’t work as the time at the start was 12:05, it was a 15 min walk, and the bus leaves at 12:10. I was able to correct this issue in the text.



















The second tester was a 21-year-old male. He was also able to achieve every point of the project brief. He was confused by clicking other bus stops that did not include Washington and State and ended up on an error screen with no way to leave the page. I was able to create “Back” buttons to solve this issue.



what did i learned



One important finding was that both users believed that searching through bus line numbers complicated the process, and they both wished for it to be streamlined. Rather than choose their path, they wanted the app to automatically select the most efficient route, so they don’t have to waste time planning the trip, so although we solved the project brief, they were incompatible with the user’s mental model of how the app should behave. I would not recommend investing in the project as it stands. I would recommend more research be conducted before finalizing the app.













Thank you for reading my case study!

Ralitsa Holub





more delivarables



Final Figma prototype


https://www.figma.com/file/TtLFnzeldnT2UrPSTGkjsa/High-fidelity-prototype-Wire-one-Done-file


Other Work:


https://www.figma.com/file/k0P4r9x0dotDIQPiFPMymg/Bus-app-personas?node-id=0%3A1 https://www.notion.so/networkdreamer/Busfly-Usability-Test-036d93cf72ef4fb3a357ca0d8b1691ac


https://www.notion.so/networkdreamer/User-Interview-

Homework-by-Ralitsa-Holub-70c5071161754afeba3aa1ca5d7e114b


https://www.notion.so/networkdreamer/Jurney-map-Home-work-by-Ralitsa-Holub-9779f9d2ba38480493602baa88802782 https://www.notion.so/networkdreamer/Case-Study-the-Buss-App-d74df473ced64ad09d7595766402bf5c


https://www.notion.so/networkdreamer/User-Stories-Ralitsa-Holub-Homework-e2b9a2ca20bd4f65bb7a62e37578d81c


https://www.notion.so/networkdreamer/User-flows-02184451a7da4a8bbce0a87d1a1575e9


https://www.notion.so/networkdreamer/Clickable-prototype-b105f1df38a7461db24ba640656bf3a2


https://www.notion.so/networkdreamer/Inspiration-Designs-for-the-bus-app-f57e24346f2340af89ad12ed54f34379 https://www.notion.so/networkdreamer/Design-Best-Practises-The-case-of-Google-Maps-776a71b0626741799b3b6b9c75b0740b


https://www.notion.so/networkdreamer/Errors-in-my-prototype-601fd6c886b649dabbf0523c18fbf212


https://www.notion.so/networkdreamer/My-color-palette-a31924d67b234da09a3d4f5d64708eb3


https://www.notion.so/networkdreamer/New-Wireframes-improved-version-1c7eea4056944a808b808f7baed85644 https://www.notion.so/networkdreamer/High-Fidelity-Prototype-061a2abfa04e492fa9a235c25d4534a1



Ralitsa Holub - Dreamer



I know the direction




ralitsa@networkdreamer.net