Interaction Design / Product Design


Make Chicago's bikesharing project more convenient and more social, therefore increasing their value for both commuters and tourists.


Integrate Divvy kiosk functions into existing CTA Ventra infrastructure and design Divvy mobile app which includes functionality such as finding stations to check bikes in and out, fostering social- and self-motivated competition, and account management.

Image source: WBEZ

Divvy bikes were introduced in 2013 as a supplement to Chicago's public transit system. Although a great concept, their kiosks were found to have a multitude of usability and technical issues and also failed to have a useful accompanying mobile app. This project began with an embodied design and proceeded on to an interaction design of the proposed mobile app. The UI design of the Divvy bikes app began with observation and interviews, continued on to interface design and user interaction research, and concluded with a design for a mobile application. Our target audience included both users who had previously used bike share programs as well as users that had only used Divvy's existing system. Following the analysis of our results, we created a mobile product that enhanced the biking experience from beginning to end. Our application allows the user to engage in all three phases of the activity curve:

1 Anticipation and Research

  • Accessing account
  • Finding available bikes
  • Purchasing and renewing Divvy memberships and passes
  • 2 Event

  • Checking out a bike
  • Mapping out a route
  • Checking in a bike
  • 3 Reflection and Reminiscence

  • Viewing stats such as distance biked
  • Comparing stats and competing with friends within the Divvy network
  • 1 To begin designing the interface of the app, we wrote a system concept statement in order to focus our team during a great span of activities. Our concept statement sought to answer the following questions:

  • Who are the system users?
  • What will the system do?
  • What problem(s) will the system solve?
  • What is the design vision and what are the emotional impact goals?
  • 2 We carried out a contextual inquiry to observe potential users of the product as they perform tasks relevant to Divvy bikes. Our findings included:

  • Users biked for work, leisure, and exercise
  • Users had issues with Divvy's 30-minute ride limit
  • Most users do not listen to audio devices while biking
  • Finding parking was a major issue
  • 3 To specify what the app should do we established a baseline set of requirements for Divvy bikes.

  • Finding available bikes and bike parking spaces
  • Bike-friendly area information
  • Fitness tracking
  • User connections and networking
  • 4 We created a flow diagram to illustrate the flow of information between user and artifacts of the Divvy app.

    5 We created a concept map to represent the concepts and relationships between them.

    6 We created personas and conceptual task scenarios for distinct classes of users.

    7 Our team identified interaction types for the app to model how the user interacts with the interface metaphors.

    Direct Manipulation

  • Tapping on wallet, search, and fitness stats icons
  • Pinching and spreading fingers to zoom in and out of the map
  • Flipping through large lists of achievements and leaderboards with fingers and thumbs
  • Tapping share to share stats with friends
  • Tapping to slide out the hamburger icon in order to display an ordered list of functions
  • Conversing

  • Speaking to the Divvy app using hot work (e.g. "Hey Divvy") to ask for directions
  • 8 An open card sort was performed on the application content to group and categorize the contents. Based on the result of the card sort, we created a site map to clarify the information hierarchy and prepare to design the wireframes.

    9 We designed low-fi wireframes using MyBalsamiq and tested them in order to make changes and improve the design.

    Next project →