Multiple Dashboard

Multiple Dashboard feature is a complete redesign and update from the previous dashboard experience. More dashboards options are provided for both in-app and AR Goggles experience.

Why This Project?

Before we created the multiple-dashboard feature, we had two dashboards within the goggles and the app - Lap Swim Dashboard and Interval Dashboard. However, whenever users want to change their dashboard during a swim, they will have to go come out of the pool, go to the locker room, go to their phone and change their dashboard, sync with their goggles, put their phones back in the locker, go back to the pool, but maybe the lane was too full to jump in, or during covid hours, your appointment is over.

AHHHH! I didn’t finish my workout :(

What’s included in this project?

The unique part of this project is that it is not only about the app. It will work on both the app and the goggles. The app is the data point where users can set up and edit their dashboards, while the goggles part is the end experience where users will interact during a swim in the pool.

My Role

UX/UI Designer

Designer

Manny Xu | Jane Kim

Nolan Dueck

Tools

Sketch, Figma

Overflow, Principle

Wireframe and Flow

This is the first concept of multiple dashboards feature, where users can set up up to 10 dashboards. The idea behind this is that we want to allow users to have the ability to set up more than one dashboard. in each dashboard they can set up top and bottom metrics they see when they’re swimming. It gives users the flexibility to set up multiple dashboards for different purposes. For example, one dashboard could be for distance focused, while another dashboard could be for swimming lap swim only. With the ability to rename a dashboard, sync to goggles, switch them during a swim, it will give users more flexibility and an optimized experience.

Now we’re all super hyped about this, time to prototype and TEST it.

We recruited a mix of swimmers, fitness, and competitive swimmers. The test was semi-successful. Why did I say that? Testers all like the idea of having multiple dashboards set up in goggles.

BUT, the sole negative feedback is that they’re going deep in a layer over and over again, they lost track of where they were and how they got here.

It was hard for them to go back to the main screen of multiple dashboards.

Open water feature design and release hijacked the project for half a year

Edit dashboard wireframe - v1.png

Now that we’re back from the Open Water feature launch, with fresh eyes on this project, we decided to look at this multiple dashboard project again with a fresh take to solve this going too deep issue.

We did more user testing with this new iteration of multiple dashboards. We recruited the same swimmers we tested with before because they include a range of swimmers who have an understanding of what multiple dashboards could be.


The test was a success. The biggest problem from the former prototype was resolved when users find it very easy to edit their dashboards and metrics, while this version also offers a smoother flow to change any dashboard settings and view all available metrics at the same time.

Click on the image to view full-size flow.

Edit dashboard wireframe - v2.png

We then tested this feature with more users, but fresh eyes who have never seen this before. More issues came out. Because this update is a complete change for FORM app’s dashboard feature, even in house employees of FORM couldn’t understand some of the information, such as - What happened to the Interval and Lap Swim mode? Are they still modes or dashboard? Because of the removal of Lap and Interval mode, how do we know if the user is swimming interval or lap swim? The goggles won’t know if the user is swimming interval or lap. So we need to add an option for users to decide whether they will turn on the interval screen, which will help us identify if they are swimming lap or interval screens.

Another big thing is - Onboarding. For existing users, this update is huge, it will be a big change for users. And the concept of multiple dashboards is freshly introduced, for both new users and existing users, the concept needs to be introduced and explained.

Click on the image to view full-size flow.

Design for Dashboard UI

How It Works In FORM's AR Swimming Goggles

This is the first concept of multiple dashboards feature, where users can set up up to 10 dashboards. The idea behind this is that we want to allow users to have the ability to set up more than one dashboard. in each dashboard they can set up top and bottom metrics they see when they’re swimming. It gives users the flexibility to set up multiple dashboards for different purposes. For example, one dashboard could be for distance focused, while another dashboard could be for swimming lap swim only. With the ability to rename a dashboard, sync to goggles, switch them during a swim, it will give users more flexibility and an optimized experience.

Now we’re all super hyped about this, time to prototype and TEST it.

The first idea I had was to use a time frame to have user switch dashboards automatically, so they can focus on resting and reset their breathe when they’re resting between lengths.

Embedding the dashboards into a setting is another way for users to switch dashboards, if they don’t want to use auto-switch, or want to manually switch dashboards.

A big part of this is to use visuals to show the auto-selection of the dashboard. I did a lot of exploration and animations about how the visual can be with wireframe.

Which one did we choose in the end? NONE! Why? Because the user says no.


We tested these explorations of progressing animations with multiple users, and see how they react to the progress animations. Although some of the animations are well-loved, a key point stood out - based on our current goggle interaction, users are used to using buttons to navigate through the menus. And it is really fast to navigate through all the menus with an easy tap on the buttons. Users still have their muscle memory and habit to tap on the button on the goggles to do something, while the rest of the goggles experience is not going to change into auto selection, it doesn’t make sense to create a brand new interaction for something that could be easily received by users of current interaction behavior.

Besides, user testing says the same, they kept asking, “Can I use my fingers to navigate through the menu?”

So at this point, I know that this auto-selection interaction is not the right way to do it. As fun and refreshing as the progress animations are, they are not the right way to do it at the moment. So I had to change the interactions and flows of multiple dashboard interactions.

Dashboard Onboarding

Onboarding dashboard - v1.png

This is the first concept of multiple dashboards feature, where users can set up up to 10 dashboards. The idea behind this is that we want to allow users to have the ability to set up more than one dashboard. in each dashboard they can set up top and bottom metrics they see when they’re swimming. It gives users the flexibility to set up multiple dashboards for different purposes. For example, one dashboard could be for distance focused, while another dashboard could be for swimming lap swim only. With the ability to rename a dashboard, sync to goggles, switch them during a swim, it will give users more flexibility and an optimized experience.

Now we’re all super hyped about this, time to prototype and TEST it.

Click on the image on the left to view full-size flow.

In version 1 of the onboarding experience, I made all those mistakes I mentioned above, I trusted my assumption that users will want to be guided and explained to about everything we want them to know. Because they fit in the business goal aspect of what this onboarding is going to do. However, it was not necessary. And with so much writing, no one is going to read it.

We took this down right after it went through a review within the design and product team. And I am very glad that we did that because I agree that this is just too much content and too many planned steps for users to go through. What if they don’t want to do something? What if they never will? Why would we want to bring them to that screen at all?

With these notes in mind, I took back the design and went back for trim down and redesign. Although the general idea is still the same, the handholding of explanation was trimmed down, guided tour experience was changed into a design that gives users the freedom to explore.

Onboarding flow - v2.png

Although the experience is now a lot cleaner, there’s still one thing we didn’t do, that is testing. We haven’t got the chance to test with users yet. Boy oh boy, aren’t I happy that we tested. The overall experience is well received, however, there’s a huge confusion point, which is for existing users, because the concept of Lap Swim and Interval Swim mode was embedded in their head, they thought that the now lap dashboard and interval dashboard are modes, instead of dashboards. And they can create more modes.

This is a huge issue because they are confused about the core concept of multiple dashboards. Even with the coach mark that we guided them through, and based on the feedback, they read and liked. So how do we solve this problem? It gave me a little headache at the beginning:

I thought about changing the term from dashboards to mode, but that is also a term we never used in the product line or marketing side, it is going to confuse users again. In the end, we still kept it as Pool Swim, but instead of calling it dashboard screen, we’re calling it “Dashboard - Pool Swim” screen, where it shows off the word dashboard, but also tells users that this is for pool swims. It seemed like a big issue, but a simple solution is the most elegant way to do it.

Another add-on for this is to create a more informative syncing behavior, while current behavior is only shown when users are in My Goggles screen, which is a couple step back from where they usually edit their Goggles.

Along the way, I also figured out a way to very subtly remind users to sync their goggles with the app so that their changes are up to date on the goggles. A big issue before was that user was never able to know their syncing status as well as their progress. This design gives them instant feedback that their goggles is either synced or needs to be synced. It also reminds users that they need to sync their goggles once they made any changes in the app.

The final chapter of this onboarding experience is to craft the UI and animations of the swipeable pagination screens. These are probably the easiest part of the whole design process.

Impact

Multiple Dashboard is such a huge feature, it took over half a year to design and ship. The impact will have for FORM swimmers is massive as it gives users the freedom to change their dashboards to follow their training plan. It saves time and trouble for them to get out of the pool and change dashboards on their phone and run back to the pool. It also serves as a planning feature where users can pre-plan their whole swimming sessions without even getting out of the pool. The flexibility of it is insane, it also gives us the opportunity to create default dashboards where we can recommend certain metrics that will serve for the different goal of swimming, such as pace goal, distance goal, fitness goal or simply just doing kicks with a kickboard. It is making swimming with FORM goggles easier, more powerful, and flexible.