Connected Apps 2.0 Redesign


timeline.png

When

September 2016 - November 2016

my role

Principal Designer. I was the sole designer for this project soliciting feedback from our design team at our weekly critiques. In addition I organized and ran all the UX research conducted during the project.


Introduction

One of our flagship capabilities is the ability to connect your Netpulse app to a myriad of fitness trackers such asFitbit, Jawbone UP, MapMyFitness, etc. Due to the variety of gyms we have on our platform we constantly got requests to integrate with new tracking devices, Fitbit was important for a crossfit gym, while MyZone heart rate tracking was how a gym like Orange Theory Fitness ran their classes. These integrations took up to 6 months to complete and as our list grew the time needed to maintain the codebase grew.

CA 1.0

CA 1.0

In September of 2016 we signed Validic as a partner to handle all integrations with us, they would handle all the data conversion and regardless of the partner send us the data in one uniform style, enabling us to turn on new integrations with the flick of a button as needed and as new devices became available.

goals & constraints

  • Speed. The name of the game was speed of turnaround for this one. I was working on Feedback, Find a Class and Dashboard 2.0 simultaneously and our design resources were severely constrained, we allotted 2 weeks for the design phase of this project.

  • Expandability. CA 1.0 supported 10 devices, with the launch of 2.0 we'd be adding 4 new devices immediately and several more over the coming months. CA 2.0 needed to be designed as a catalog that could support any number of devices.

  • Migration. Unfortuneatly when CA 2.0 was to be released we needed every single user to reconnect all of their devices, the migration process needed to be designed to make it as easy as possible.

 


Initial Ideation

List vs Catalog

Connected Apps 1.0 was a straightforward list design that would show a user the logo of the integration and give them an opportunity to Link or Unlink the device. It felt very much like a settings screen, which made sense initially, however when digging further into this I learned that Connected Apps was always featured as a prominent tile in our dashboard, while it might've been better placed under the settings menu it was a feature that our gyms were very proud of and insisted on giving prominence to.

 

All of our features & the key actions a user can take.

 

I played around with the list design and then ended up with a two column grid. I wanted the design to feel like a catalog. 

 

Linked vs Unlinked

Once we have our catalog we needed a state to showcase what devices a user had integrated. Since most users on average sync 2 devices, and at most 4 it made sense to keep your synced devices on the same page as the catalog, providing some hierarchy and seperation between the two.

 

 
 

Syncing

While speaking to our customer support team to understand what kind of requests they got relating to CA (and to make sure I accounted for them in the new design) they mentioned that a lot of our user base that's participating in a challenge checks their connected apps tab to see if their devices had synced their latest progress. In CA 1.0 we gave no indication as to how frequently or when a device was synced. In addition to this, with Validic devices would sync universally on a set schedule, regardless of how many or what devices you had.


Migration from 1.0 to 2.0

With our design set I moved to design how we would handle the migration for all our users, we wouldn't be able to support our old CA 1.0 for long without complications on the engineering side, so we needed to create a blackout period of 3 months, in which users would have 3 months to relink their devices before we stopped syncing with them. We organized this into the following use cases:

  • Users with no devices connected. Even if they had no devices connected, they would still need to update the app in order to link new devices which would enable them to participate in challenges, set goals, etc.
  • Users with devices connected. In order for their data to continue pulling in seamlessly they would need to update their app and relink their devices.
 

users without any devices connected

The flow we designed for users without any linked devices goes as follows:

  • When visiting the Connected Apps tile they're prompted to update the app to access new tracking methods.
  • Once the App is updated we launch an in-app announcement (that's dismissable) to highlight the new capabilities of Connected Apps and encourage them to visit the catalog of devices that they can sync with.
 
 
 

users with devices connected

For users with devices connected it was imperative that we do our best to get them to update the app and relink their devices before the transition period ended, here's what we designed:

  • When visiting connected apps they're prompted to update the app to access CA 2.0, a countdown adds a sense of urgency.
  • Once the app is updated we take them to the Relinking Wizard, this screen lists all of their linked devices and give them an easy way to either relink the device or remove the linking. 
 
 
 

Launch

In August of 2017 Connected Apps 2.0 was launched as a platform wide update!


Read this next: