BCycle Mobile App Rewrite

Before & After

A closer look at design decisions that transformed the BCycle app, making for a more modern and user-friendly interface and minimizing the number of steps it takes to utilize bike share.

Map Screen

The map screen is the general landing page within the app. From the map page, users plan their trips, take note of nearby stations, and see available bikes.

Before (left): the map screen provided users with the option to check out a bike, but all other information was effectively hidden without more clicking around. Station pins also did not provide available bike data when zoomed too far out of the map.

After (right): the map screen became a one-stop shop to see all relevant information with minimal clicks. Easy access to the Info and Support menus made getting help easy. The Profile icon indicates if the user is logged in or not, with the title “Sign In” if the user is not yet logged in. The Unlock button indicates if the user has an active pass, otherwise the button reads “Get a Pass” to avoid confusion. Users can simply click to see all pass options and purchase a pass before unlocking a bike.


Bike Checkout Modal

The bike checkout modal is the last step of the bike checkout process, and the last screen the user sees before they in theory would put their phone away and start cycling.

Before (left): the bike checkout modal blacked out the rest of the screen, preventing the user from seeing their whereabouts. With little additional information, some users were confused with what to do once they had already checked out a bike.

After (right): the bike checkout modal became a drawer, allowing the user to orient themselves with their current surroundings. A note about returning the bike to a dock reduced confusion among first-time users, making for a more seamless user experience.

Previous
Previous

Salty's Clothing Company

Next
Next

Truckee BCycle Implementation