Hero.png

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?

Old My Goggles.jpg

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.

EditDashboard v4_Option1_v2.gif
Edit Dashboard wireframe - v0.png

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

Dashboard UI.jpg

How It Works In FORM's AR Swimming Goggles

Goggles_Render.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.

Goggles - Dashboard - v1.png

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.

Option 5 flow_1.gif
option 11.gif
Option 4 flow_1.gif
Option 6 flow.gif
option 8.gif
Option 3 flow_1.gif
option 9.gif
option 10.gif

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.

Goggles -Dashboard - v2.png