Process

We conducted a survey of users of transportation apps in order to ascertain two pieces of information: users’ reasons for using their transit apps of preference and how they prefer to use these applications. 

1. Of the 11 respondents, their ages ranged from 21 to 46 and comprised users who reported both car ownership and variety of dependence upon public transportation in Chicago. 

2. The majority of these Chicago-based users selected tracking times over finding directions, meaning Chicago transit users already know what lines they need but are seeking up to the minute information. 

3. Respondents reported a preference for Google Maps, which explains why most had not engaged with a saved line feature when asked about it. The next most popular app was Transit-Stop, the regionalized app specific to Chicago, which does offer a saved lines feature. Those who had used a saved line feature were all interested in the ability to compile and organize them.

4. This indicated that updates and tracking were the primary reasons people used their transit apps and that, when given the option, would save these lines crucial to them.

Competitive Analysis

We compared Google Maps, Transit App, Transit-Stop, and Waze. Among these apps, we noticed a distinct difference in the purviews of transit or mapping apps. Google Maps and Waze are nationally advertised applications that share mapping information via Google (Google acquired Waze in 2013 and have cross-pollinated features from both apps into one another), servicing every city in the nation, if not the world.

Transit App and Transit-Stop are advertised in specific cities for specific information. Transit App supports the transit system in 175 cities across the globe, Transit-Stop focuses on Chicago, but both aim to provide up-to-date tracking information on buses and trains that Google is often wrong about since it is the second-party reporter.

Transit-Stop is the official product of the CTA, Transit App aggregates posted delay information for localities it supports and synthesizes crowd-sourced information for unreported time-tracking information with the reported tracking.

Thus you have the universal mapping apps and the local transit apps, despite the former being the most popular and the problem set requesting information found in the latter. We determined it was best to tailor Chi-Route to the makings of a local transit app to best address the problem set while integrating visual and structural elements that produce the feelings people associate with Google Maps.

Personas

• Karen uses her transportation app to check minute-to-minute tracking, not searching on her daily routine. She only searches for new places she hasn’t been. Karen embodies the survey and interview respondent desire to have the most relevant, pressing information about her saved lines easily accessible as her use is more mundane and quotidian than Faith’s.

• Faith uses her applications to search for her day-to-day routine and compares with other lines to see which works best for her schedule, spending more time overall within the app and customizing regularly. Faith is a persona developed to speak to the respondent desire for customizable, adjoined lines as her use is more inquisitive than Karen’s.

• Kevin was a law student who traveled between Hyde Park and his internship in the Loop, visiting friends and their family in the suburbs on holidays. Faith and Karen cover those two geographical demographics. Karen has his priorities regarding timeliness for his internships, but also Faith’s nonchalance as he also has a car. I found Faith and Karen represented a wider swath of users and greater extremes, while allowing me to tailor my visual design to color schemes that are divergent from those of the traditional transit app market, which use colors preferred by both genders in color theory.

Wireframe Sketches

I quite liked the interface of Transit-Stop as a base because of its emphasis on the tracking elements, emphasizing the information it holds. However, the Route feature would not allow for the minutes to be instantly visible because they hold many lines within them.

Instead, within the Saved page Routes show how many status updates are recorded total among the lines saved within any given route to show you how many delays you will encounter on your journey. I also sought to parallel the Search page with the search functionality in Google Maps.

The Setting page was modeled after the Transit-Stop Settings page. The Search functionality mirrors that of Google Maps with the trifurcated bottom navigation.

Digital Wireframing

Wireframes operated from a base grayscale. No logo had yet been developed. We built out the Search landing in Figma myself to get a better sense for how to lay out lines later on in development.

Usability Testing on Wireframing

• In order to get a sense for the app’s functionality, I asked my test users to try to update their email address, to search for a taco spot their friend recommended, and try to add that line to their saved lines for the “Lit District,” a neighborhood they go to for parties and socializing. 

• Users experienced certain dead-ends when trying to save the route after having searched for it. Additionally, there were complaints about the placement of subtext relative to headers, the sizes of the text, and the contrast between the subtext and the background.

• It was clear that a better sense of unity within the style guide would be necessary when moving to the prototype. Connecting the dead-ends with other elements of the app would also be important, making sure there would be as much to do as possible within the app so as to demonstrate the versatility of Chi-Route.

Branding

Color palette:

The aesthetic of Chi-Route derives from my choice to design a transit app that turned away from the existing norms of white, red, and blue in the Transit Stop app and the transportation industry at large. I chose a violent-purple because it creates a feeling of both luxury and reliability, something often denied to people who use public transportation. My other color is sand, meant to mimic the pale brown which can be found in both Apple and Google Maps as the color for the spaces where buildings are.

The combination of an unexpected yet pleasing color with a familiar color associated with transportation apps embodies Chi-Route’s intention to innovate upon established technology and become users’ new most reliable source.

Typography:

Chi-Route appeals to the more style-minded user, someone who appreciates Chicago for its cultural history and present and not just its place as a center of industry. Red Hat Display is the primary font for the subheadings within the app, Arimo is for the informational copy.

Logo design and process:

The Chi-Route logo evokes old Chicago, whether it be its art deco past or its gilded age. It evokes moments of great artistic output in Chicago. Chi-Route seeks to appeal to the user who is more interested in their destination in Chicago than the journey.

Iterations of visual design prior to usability testing:

We implemented a screenshot from Google Maps to get a higher-fidelity image of the Search Page. We needed to create continuity through making each of the action items the same shade of the violet purple.

Preference tests

Users reported enjoying the color choices of the layout. There was a preference for black copy versus a lighter purple color.

“The colors felt like an app I already knew.” - Alaya Carr, Tester