Hey everyone, Daanish and Niv here.

We’re doing this post together since we want to talk about the design and development process behind the creation of the mobile application that will be part of the Valour riding experience.

When we set out to design the mobile application for the Valour, we wanted to make it an interface that built around the experience of riding a connected bicycle. This meant we would be treading new waters, since no [one] had ever created a bicycle that required an advanced user interface that was part of the actual product. Being avid cyclists and commuters ourselves we knew the problems we were going to face and focused on the ones we knew all commuters faced.

The application had to do the following as its core functionality:

  •  provide a bike specific navigation solution in a map interface that we were used to
  • provide metrics from our rides
  • offer a central location for us to control our Valours.

With these guidelines and other requirements at heart, we went through several design iterations before we came to the version that we are currently implementing. Previous versions solved the above problems but were too clunky or contained too much information. See below for a look at one of our first iterations.
Activity Default.png Trip Breakdown.png
Old Activity Default.png Old Trip Breakdown.png

(*Please note that these are original internal design/development mockups. The colours, values, copy and other design elements are all placeholders. We believe in you seeing what we actually work with, rather than creating “prepared” imagery for you to see.)

As we designed and tested each iteration, we learned new things about what we were building and what we wanted the application to be.

We eventually changed one of our central guidelines to:

  • provide commute relevant and understandable metrics from our rides

Design is an iterative process and it can only get better as you go through many solutions.

However, development and implementation are an important part of the process as well. What makes a design come to life is the implementation behind it all, so we always work with both views.

We chose to focus on making one for commuting, and one of the ways we could do that is to focus on the stuff that matters to a commuter: displaying relevant trip data in a manner that makes it easy to go day-by-day to week-to-week or even month-to-month. So, this is what the latest version of the mobile application looks like now.
Activity Weekly View.png Trip Breakdown.png

(*Again, please note that these are original internal design/development mockups. The colours, values, copy and other design elements are all placeholders, and will change as we progress. We believe in you seeing what we actually work with, rather than creating “prepared” stuff for you to see.)

We focused on summaries as the central visual style for the Activity Tab.

As commuters, we wanted to be able to compare individual days with other days and do the same with weeks and months as well. This focus freed up a lot of space and provides clean and relevant information.

Moving forwards or backwards in time is done by simply scrolling up and down. Switching between Daily, Weekly, and Monthly can be done from the buttons above the list and by selecting the respective week or month item.

The individual trip breakdown pages were also changed to reflect the new guideline. We are incorporating a slider that will progress through your ride line and display your distance, time and calories up to that point. This method actually gives you a detailed breakdown of your trip, as opposed to a trip summary page. There are many other reasons why we’re incorporating a slider and we believe it will evolve overtime to incorporate future iterations.

In the end, our design process allows us to make changes that give us better solutions to our current iterations as well as laying the development groundwork for all future iterations too. As all things app design go, nothing is ever finished but that’s the beauty of it all.

Cheers,

~Daanish & Niv

You can follow Daanish and Niv at @DaanishMaan and @nivivon