![](https://static.wixstatic.com/media/2049f7f4ffdc48609efde296172737d8.jpg/v1/fill/w_1920,h_1080,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/2049f7f4ffdc48609efde296172737d8.jpg)
![1.png](https://static.wixstatic.com/media/bb8af1_b0717ca0b0ea4728ab87b100b3138fbb~mv2.png/v1/crop/x_105,y_193,w_285,h_121/fill/w_169,h_72,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/1.png)
![Traveling with Headphones](https://static.wixstatic.com/media/11062b_01d14a619eff482eb019060ada42f98b~mv2.jpg/v1/fill/w_542,h_362,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/11062b_01d14a619eff482eb019060ada42f98b~mv2.jpg)
JoyRide- A more joyful way to ride
The Midwest metropolitan area is having many issues with their public transportation services especially at the very busy bus stop at Washington & State. Confusion on bus schedules and times has been creating many issues for the local riders and transportation services. JoyRide would create a more fast and efficient way for riders to get accurate and updated information on their buses to ensure a more seamless and joyous rider experience.
![Web Designing](https://static.wixstatic.com/media/11062b_53fd61938d2c44c798c23d147449520f~mv2.jpg/v1/fill/w_490,h_276,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/11062b_53fd61938d2c44c798c23d147449520f~mv2.jpg)
Overview
The goal of this project was to combine empathy for my users with my love for art into a cohesive and easy to use design. The design was created for use with mobile devices for local public transportation services. My time was very limited on this project, so I had to design quickly and efficiently.
Summary
My motivation for creating Joyride was to restore a sense of ease and trust when using transportation services in the Midwest by helping riders get a faster and accurate method for riding public transit.
Summary
![Beige and Brown Sale Mock Up Instagram Post.png](https://static.wixstatic.com/media/bb8af1_4194fc05417349109e5d1e4465728f19~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_4194fc05417349109e5d1e4465728f19~mv2.png)
![Prototype Designer](https://static.wixstatic.com/media/11062b_51b3c353893c4cd9bf7e236bd46e6538~mv2.jpeg/v1/fill/w_490,h_320,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/11062b_51b3c353893c4cd9bf7e236bd46e6538~mv2.jpeg)
Conduct user research and testing. Create wireframes based on user flows and needs. Collaborate to design and develop intuitive and user friendly software.
Roles & Responsibilities
Users & Audience
I created Joyride for anyone who can operate a mobile device and that uses public transportation. My target audience is frequent public transit users who rely heavily on public transportation to get around in their day to day lives.
![Audience](https://static.wixstatic.com/media/16366a164cdf42c08d53b2e2f575f01e.jpg/v1/fill/w_490,h_327,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/16366a164cdf42c08d53b2e2f575f01e.jpg)
![Beige and Brown Sale Mock Up Instagram Post (1).png](https://static.wixstatic.com/media/bb8af1_383e0275f91749978bd4f1419c72e9e6~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_383e0275f91749978bd4f1419c72e9e6~mv2.png)
Solutions
Public transit riders of the Midwest metropolitan area were experiencing many issues when riding local public transportation including inaccurate bus schedule information, delayed arrival times, and confusion on bus lines. With JoyRide, users can get accurate route and time information right from their finger tips.
Competitive Analysis
By studying a few competitor apps (Moovit, Transit, City mapper, and Google Maps) I was able to establish some basics for what makes for a great public transit app. By offering accurate location detection, street maps, traffic conditions, and route planning, these apps stand as pinnacles for transportation applications.
![Beige Autumn Sale Ripped Paper Instagram Post.png](https://static.wixstatic.com/media/bb8af1_bc105276889e49759ce6405ae1ecfd54~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_bc105276889e49759ce6405ae1ecfd54~mv2.png)
Persona: Lindsey K.
Lindsey is a daily bus rider. Living working, and going to school in the city, Lindsey doesn't have much need for a car. She currently uses Google Maps to get her bus routes and times but finds that the information is not always accurate, which has caused her to be late to both work and school many times. She loves using her phone and wouldn't go anywhere without it. Lindsey is always looking for better apps to help make her busy life more efficient.
![Beige Autumn Sale Ripped Paper Instagram Post (1).png](https://static.wixstatic.com/media/bb8af1_71c6b25bfa4e46479a110db0cb2604c5~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_71c6b25bfa4e46479a110db0cb2604c5~mv2.png)
![Persona.png](https://static.wixstatic.com/media/bb8af1_1a9be214b5af44cfaf01f60d26f7d7dd~mv2.png/v1/fill/w_453,h_604,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_1a9be214b5af44cfaf01f60d26f7d7dd~mv2.png)
Pain Points
Lindsey has a tight schedule and relies solely on public transportation to get her to school and to work. On many occasions, the bus has been delayed, causing her to arrive to her locations late. She has frequently got in trouble at work because of the unreliability of public transit in her area, and can not afford to lose her job because of this consistent issue.
User Stories
User stories help us understand the perspective of of the end user. It helps us articulate how a certain feature will add value to the customer.
In this case our users needed to know accurate time information on bus arrivals for better travel planning. They also needed the ability to view future arrival times to know when their specific bus would arrive at the stop.
![Beige and Brown Sale Mock Up Instagram Post.png](https://static.wixstatic.com/media/bb8af1_d50a41e5287b4615b89e19817166efee~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_d50a41e5287b4615b89e19817166efee~mv2.png)
![Beige and Brown Sale Mock Up Instagram Post (1).png](https://static.wixstatic.com/media/bb8af1_1908861c577c4e738627bd6c45d8759a~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_1908861c577c4e738627bd6c45d8759a~mv2.png)
User Flows
User flows allow a designer to better understand how to achieve a minimum viable product or MVP for a typical user. With a simple flow and just a few clicks, users like Lindsey can get the information they need as easily as possible.
Wireframes
Digital wireframes allow designers like me to create a skeletal structure of a possible app where I can visualize spatial relationships and determine placement of design elements.
​
After a few different attempts, I was able to come up with a wireframe that met my MVP.
![Beige Autumn Sale Ripped Paper Instagram Post (2).png](https://static.wixstatic.com/media/bb8af1_f1c5613294c24200a7fbe2622494c4e9~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_f1c5613294c24200a7fbe2622494c4e9~mv2.png)
![Beige Autumn Sale Ripped Paper Instagram Post (1).gif](https://static.wixstatic.com/media/bb8af1_43522a6d2c864ecc8062a7396ec678b5~mv2.gif/v1/fill/w_490,h_490,al_c,usm_0.66_1.00_0.01,pstr/bb8af1_43522a6d2c864ecc8062a7396ec678b5~mv2.gif)
Usability Testing
After I created a wireframe, I did some usability testing. With usability testing, I can gather valuable feedback about my design, and focus in on areas that could use some improvement.
​
I focused in on three main areas when iterating my design.
After iterating on my design, I started to focus my attention on branding for my app. In this case, I created a mood board of inspiring pre-existing app designs, colors, patterns, and typographical choices. I'm very inspired by dark mode apps with bold accent colors. For this project I gravitated towards white and black as my primary colors, red as my secondary color, and turquoise as my tertiary color.
Branding
![Beige Autumn Sale Ripped Paper Instagram Post (4).png](https://static.wixstatic.com/media/bb8af1_6e729067462e47ddb6e6fdb5d364980f~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_6e729067462e47ddb6e6fdb5d364980f~mv2.png)
![Bus App Project - Logo.png](https://static.wixstatic.com/media/bb8af1_b7f8dfafc0814a7c8ea06de6ab36b252~mv2.png/v1/fill/w_490,h_564,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_b7f8dfafc0814a7c8ea06de6ab36b252~mv2.png)
Logo Design
Considering some of the current frustrations that riders were experiencing when using public transit, I wanted to create an app that eased frustrations, and brought riders a sense of joy. I gravitated towards the name joyride for my app. This name was a word already associated with transportation, and conveyed a happy message. I then created a logo that displayed my brand colors and clearly conveyed my apps intentions.
Prototyping
After establishing branding for my app, I began creating my high-fidelity prototype. On my first iteration, I was having trouble deciding where to place my colors. I started with too many variations of colors, and a navigation bar color that I felt conveyed a more agitating and aggressive feeling. Thinking about being a public transit rider early in the morning trying to get my transportation information for the day, I thought these colors urged a more stressful experience.
![Beige Autumn Sale Ripped Paper Instagram Post (6).png](https://static.wixstatic.com/media/bb8af1_c0bf43d1b6d142658cfc6c13a5575067~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_c0bf43d1b6d142658cfc6c13a5575067~mv2.png)
![Beige Autumn Sale Ripped Paper Instagram Post (5).png](https://static.wixstatic.com/media/bb8af1_38270c7856de4393bef2ad71b2315e27~mv2.png/v1/fill/w_490,h_490,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bb8af1_38270c7856de4393bef2ad71b2315e27~mv2.png)
Second Iteration
After finally coming up with a more cohesive use of colors, I started my second iteration. I went with a dark mode design with small pops of colors and rounded buttons. My user interface design helps users easily find bus station information, locate different bus lines and times, as well as see individual bus route information with only a few motions. This simple and easy design allowed for a more intuitive and empathetic experience.
Final Thoughts
Public transportation is a necessary part of life for many people. With public transportation systems being far from perfect, the experience can be very frustrating at times for many users. With JoyRide, I focused on creating a fast, reliable, and more efficient way for users to get the information they need to travel easier. Although there are many more features that can be done with this application, this design achieved my MVP. I plan to iterate on this design in the future
![Designer's World](https://static.wixstatic.com/media/d4367b20ae2e4036b18c34262d5ed031.jpg/v1/fill/w_491,h_327,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/d4367b20ae2e4036b18c34262d5ed031.jpg)