Email iconShapeUntitled 2Untitled 2ozFill 166crosscupcake-iconPage 1HamburgerPage 1Page 1Oval 1Page 1Email iconphone iconpushpinblog icon copy 2 + Bitmap Copy 2Fill 1medal copy 3Group 7twitter iconPage 1

Introduction

We’re really excited to announce that we’ve been chosen to work with British Rowing to create a prototype for a Spotify App which will show appropriate cue points for training, directly linked to timings within a playlist.

The prototype will be used to demonstrate proof of concept before a full application will be developed, enabling fitness instructors to deliver spinning style training sessions, making indoor rowing the new way to exercise. The app will remove some of the barriers to indoor rowing, helping the fitness industry embrace, what is, an incredible workout tool.

The prototype will be the result of a one week rapid prototyping exercise, where we will deliver a working prototype by the end of the week. See below for our daily progress updates:

Quick links

Monday

We started off with a kick off meeting with Richard Stock (Head of Insight & Product Development) where he and Kirsten wrote user stories.


Eddy did a recce on the Spotify API to get up to speed with that whilst Ryan looked at data structure to support functionality.

Emma carried out some initial concept design work based on RowActiv; British Rowing’s current native app.

Design Phase 1:

Tuesday

Emma had to create the concept design work on Monday without having the user stories. As these have been written, Emma spent the morning working through the critique on the concept and working through the second phase of the design, against the user stories.

Design Phase 2:

Eddy and Ryan spent the morning divvying up the tasks, then syncing up the instructions from a json file, to ‘currently playing’ tracks within a playlist.

Design Phase 3:

Emma has been powering through the user stories and has been experimenting with colour and imagery. We’d love to know what people think.

Design Phase 4:

Design Experimentation:

Wednesday afternoon

We have a working prototype that counts down to the next segment.

Thursday

Eddy has been flat out all morning working on the graph to show the session progress and what’s coming up next. I thought it best that he explains how he did it:

The ‘session summary’ graph is created using a HTML5 Canvas (as Spotify uses webkit we do not have to worry about browser support). First we have to calculate the total duration of a session. Spotify does not provide a native way of doing this so we have to manually sum the duration of each track in the playlist. Cue points are defined in JSON files with timestamps relative to each song, so to calculate the duration of each cue point we must first calculate the start time of the track in relation to the playlist, and then add the timestamp length in milliseconds. The final cue point duration is similar but we have to know the total length of the playlist and minus the final timestamp. Now that we have the durations we can calculate percentages from them as we now have (cuePointDuration / sessionDuration) * 100. Perfect. So we now have the percentages needed, all that is left to do is convert to pixels to plot on the graph! The graph is fluid so we first take the total 100% width of the container in pixels and then grab the the cue point percentage in pixels from it. Et voila.

Friday

Well, after a great week working on the prototype, it’s complete. We’ve just shown it to Richard Stock, Head of Insight & Product Development at British Rowing and he was really pleased: “Thanks to everyone @uv_d for their work on our Spotify app! Looking really good after this week’s sprint”.

We’d love to know what you think.

Share: