BIKE BREEZE

The list generating app that prepares a cyclist for any occasion.

bb_ux.png

UX WRITING

bb_user research.png

USER RESEARCH

The idea for the app truly developed from being a commuting cyclist myself. I started to find that I was going on trips or commutes and forgetting items or having my bicycle fall into need of maintenance. I began writing down paper lists that I would keep around so I would not forget what to bring. 

 

There needed to be something easier. 

bb_user flow.png

USER FLOW

The challenge here is to deliver an app that provides all of the facets of different rides, but is still simple enough to not waste the users time. Creating the categories was easy enough, but having the user thumb through all of these items created quite the roadblock. 

 

This was solved by keeping the categories the main deal and making sure that the user was not lost when getting down to minute details by the use of color. 

WIREFRAMING

Creating the windows for the app required a look that expedited the user to get going onto the bike ride. There needed to be a hierarchy that was easily understood right away. 

This may have been the easiest part of the project as the speed of quick drawing tapped into the speed of thumbing through the app.

 

Speed is key here.

bb_wireframe.png
bb_prototype.png

PROTOTYPING

At this point in the creation, it became obvious that there were going to be windows that were either icon heavy or list heavy. The prototypes presented the challenge of making sure the switch between pictures and words did not become a hinderance. 

 

The solution presented itself by being certain the icon design and the typography married each other on the same level. 

bb_visual.png

VISUALS

With the main challenge being quick user interactions - colors, iconography and typography were going to be the main players. The 3 categories needed to be very different from each other resulting in the contrasting colors against the grays and blacks since those are prominent bicycle colors. 

 

I also wanted the icons to be thin lines to coincide with bicycle spokes and the Bicyclette font was not chosen for the name, but due to it being easily understood and a straight shooter for easy understanding.

INTERACTION

I discovered a real issue with the flow once the windows were put into play. I was getting lost as a user and it showed as well with user testing. Solving this required a heightened understanding of where the user is with very simple and bold interactions with buttons and window slide direction. 

 

There also needed to be a direct understanding of where you are in the app. This was solved by giving item selection windows solid background colors and the lists being a completely different look. 

bb_mobile design.png

MOBILE DESIGN

After much testing and tinkering, I found this app to very much in the right space on a small device as that’s where it will primarily be used. The category buttons and list management work beautifully for quick thumb action. 

 

It needs to be quick so that the rider remembers to bring those rain pants!