misfit-device-screen-redesignmisfit-device-screen-redesign

Misfit Device & Settings Redesign

With the features finalized for the Misfit Shine 2, it became clear that we needed to update the devices section of the Misfit app. Aside the impending launch of a new product, the devices tab of the app was seen as one of the least useable experiences for Misfit users. I took up the challenge of creating a improved device and settings experience that would decrease user friction, highlight the features of our new line of products, and look as sleek and minimal as the products we were representing.

Reviewing the Old Device Screen Design

We had plenty of data to suggest that the devices section was a pain point for our users, and we knew it could be improved visually, so once the timing was right I began this project by breaking down the old device screen. One thing to note is that we would likely need to add features with the release of new products coming down the pipeline.


#1 Visual Inconsistencies
Originally, this section of the app had been designed with an orange header, inconsistent with the rest of the app. I knew we would want to update the visual style to use color sparingly, and increase the background contrast so the type could be more easily read.

#2  Activity Tagging
Originally users could use a tap command on the Misfit Shine to tag an activity before it began, or specify an activity type in the app after it is tracked. Our user data suggested that users who tagged at least a few activities a week were more satisfied and engaged with their Misfit experience. We also noticed that users had a difficult time remembering to tag their activity with the device, so we made the decision to cut device tagging, and put more focus on editing activities in the app.

#3 Wearing Position
For misfit users, changing the wearing position gives you a more accurate reading of your activities by using algorithms tailored for specific locations such as the chest, wrist, or ankle. After syncing, this feature is the most likely to be used often by Misfit users.

#4 Spacing and Grouping
The old device screen had inconsistent spacing between list elements, and felt disjointed. I wanted to make sure the updated settings screen felt more cohesive and focused, to help our users better understand the features of their device.

Reviewing the Old Settings Screen

In addition to updating the device screen, it was important to make sure the app settings screen in the profile section of the app had a consistent UI pattern.


#1 More Inconsistent Patterns
The old settings screen had more inconsistent settings patterns for our users to remember. I knew pretty quickly that these would have to be cut for a more unified experience.

#2 App Theme
One of the smaller features of the app was letting users change the app theme. I wanted to give users a better idea of what theme they were currently using and what colors or photography they would expect to see on the app home page without actually needing to take users out of the settings screen.

#3 Sign Out
Having the sign out button right under the theme switcher led to users being signed out of the app when they did not want to. This had to be fixed and I consider this kind of UX flaw unacceptable, and something that can be fixed with basic user testing.

Wireframes & Flow

With a compressed schedule, there wasn’t a lot of time to go into higher fidelity wireframes. I made sure to spend some extra time in my sketchbook and really make sure I got the correct flows down. After some internal review we were able to determine that the design should be modular, such that if we ever wished to move the order of device settings around, we would be able to do so.

  • gallery-image
  • gallery-image

Creating a New Workflow

With many new features being added to the Shine 2, I realized the alerts and notifications would be large enough features to need their own sub section. Doing this would allow the device section to have less vertical scrolling for users, as we wanted to make sure that section of the app was useful, but not overwhelming.

devie-screen-flowdevie-screen-flow

Visual Design

Once the visual design portion of the project began, there were a few things I wanted to keep in mind. First, I wanted text to be high contrast for users so they would be able to quickly read through settings. Second, I wanted the settings screen to look as sleek and fashionable as the Misfit product it was representing.

Final Device Screen Design

The design for the device screen was completed in individual chunks, then we used our user data to determine the optimal placement for each settings group based on how frequently they are used.

 

#1 Device Renders
Instead of using a vector, I reached out to the Industrial Design team to get high quality 3D renders of all Misfit Products.

#2 Syncing
Across the app we decided to change our buttons from outlines with text to a design that had more depth. These buttons tested better with users and better matched the visual design aesthetic of the app.

#3 Wearing Position
Wearing position was brought to the top of the grouped features, remaining mostly unchanged but laid out in a way that would take up less vertical space.

#4 Alerts & Notifications
It was important to showcase the new features for the Misfit Shine 2 for users in a way that was clear and allow for more specific experiences once users went into a feature on the menu. Feature status was shown right next to the arrow signifying that tapping that menu item would open up a new window.

#5 Misfit Link
The Shine 2 features assignable button commands, so users can integrate their device with their lifestyle. This is managed through a separate app, so to help users get started with this we provide a short informational tutorial on this feature, and a link to the app store.

#6 General Settings
For other settings that were more general and infrequently used, a general settings group was put at the bottom of the device section. This includes users who might need to troubleshoot problems with their device a “locate device” feature or device serial number.

Active Notifications

These notifications are on by default when users unbox their Misfit Shine 2, and are frequently used my Misfit users. These types of notifications have similar settings screens but different icons, colors, and photography in the headers that help explain what the features do.

Wake Up Alarm & Add Device

The wake up alarm screen allows users to schedule a silent alarm on their Misfit Shine 2 that uses a vibe to wake them up. I wanted to make sure users had the ability to use multiple alarms, and set what days they would repeat.

The add device screen can be accessed by the “+” button at the top right of the device section screen. It uses photography found on Misfit packages to help users identify their device faster.

Final Settings Screen Design

Once completing the visual design for the device section, things fell into place pretty quickly for the settings screen.


#1 App Theme
I wanted to make sure that users could see what their current theme was, since most themes feature a photo background. By making this larger, we let users know that this feature existed as many were previously unaware that they could customize the look of their app.

#2 Consistent Grouping
Like the devices section I wanted to make sure we grouped settings and features accordingly, allowing users to quickly find what they are looking for.

#3 Consistent Patterns
Unless a settings group needed a specific UX, I updated the user settings to fall more in line with a traditional list view layout

#4 Sending Feedback
This wasn’t so much of a UX change as a policy change I helped implement on the UX team. I made sure that all customer service emails sent from the app regarding problems related to app user experience were sent to us in a gmail filter.

Final Thoughts

This was a very satisfying project to complete, as we had been putting off updating the settings screen for some time. However it was a great exercise in learning when to prioritize certain features to get the maximum amount of results. In this case, pairing the device screen redesign with the Misfit Shine 2 launch helped us communicate new features to users, while updating the visual look to match the rest of the app and brand.

One unexpected result was how presentable this section was for our marketing & brand partnership teams. They frequently used the device section to showcase all of the different features Misfit Products had to offer. Working on a settings flow isn’t always the most satisfying design work for some designers, but I had a blast working on this feature.

I’m currently looking for a full-time product design role, let's chat:  stegalldesigns@gmail.com