Joe Hines Makes Stuff
Designer + Maker
COMMUTER_X.png

COMMUTER

 

COMMUTER

 

 

COMMUTER

An alternative best sellers list curated by the straphangers of NYC. 

 

 
 
iphone mock_final.png
 

PROJECT DETAILS_The Commuter project began as a personal study focused on to cataloging the books that have been spotted on the cramped trains of the NYC subway. Although it was just a quick study, I believe a great deal can be learned from what New Yorkers are reading day in and day out. Ultimately, one could begin to extract and extrapolate larger cultural trends based on this data, as the relate to to any given subway line.

TEAM_Joe Hines - Personal Project

TIME FRAME_3 Weeks

METHODS_Sketch, Illustrator, Marvel

 
 

 

What opportunities exist to foster the discovery of new books and promote increased readership?

 
 

01. There are tremendous benefits to introducing reading into your daily routine. Studies show that doing so stands to reduce anxiety, promote better sleeping habits and in some cases increase a reader's empathy.  

 

02. The time spent commuting offers up an an opportunity to introduce uninterrupted reading time into one's busy schedule. 

 
 
 
 

IDEATION + WIREFRAMING

Commuter is a self directed visual / interaction design exercise. As such the design process moved swiftly from initial sketches to high fidelity mockups.

 
 
Proces.gif
 
 
 
 

LOW FIDELITY MOCKUPS

Low fidelity mockups allowed for quick layout decisions to be made and iterated upon. Additional markups were added  to indicate the prefered interactions / gestures, serviving as a blueprint for the prototyping exercises that were to follow in the design process.

 
 
 

 
 

FURTHER REFINEMENT

With the basic interaction principles defined within the low fidelity mockups exercise the visual design styles were subsequently pushed further.

 
 
01 - Mock.png
 
01. Welcome.png
04. Todays Read.png
02. Sign In.png
04. Todays Read Copy.png
03. Profile.png
04. Todays Read Copy 2.png
03.1 Favorites.jpg
00. End of line.png
 
subway lines.png
 
 

VISUAL STYLES + GUIDELINES

The visual style of Commuter draws inspiration from the existing design language of the New York City subway lines. The background color of each listed book reflects the color of the subway line that that title was spotted on. 

 

 
04. Todays Read.png

#DEBC4C

07. Todays Read.png

#DEDEDE

04. Todays Read.png

#DE904C

08. Todays Read.png

#4CDE9B

05. Todays Read.png

#4C8ADE

09. Todays Read.png

#A24CDE

06. Todays Read.png

#DE4C4C

10. Todays Read.png

#CB8F6B

 
 

Prototyping with Principle

Exploring Favorites

When user’s first open Commuter they can find a summary of their activity including a breakdown of their submitted and featured posts as well as their favorited books. As they engage with the app Commuter takes note of the users preferred subway line and genres and customizes the app’s primary color scheme to reflect it.

 
Favorites.gif
 
ColorChange_Mock.gif
 
 

Exploring New Titles

By swiping left and right, users can explore the submitted title of the year. Each book “card” indicates the title/author submission number (one for each day of the year). The color scheme reflects the subway line that the book was spotted on.

 
 

All in the details

Users can swipe up on a title of their choice to explore a more detailed description and cover art, as well as the option to purchase the book at a local bookstore.

 
Details_GIF
 
 

End of the Line

Once a user reaches the end of the available “book cards”, they are greeted with a screen that allows them to explore a random title in the series.