Ring Security Redesign

Last Summer, I replaced the old security system in my house with a system by Ring. Going from a system that relied on landline and a single keypad on the wall to an IoT smart system was a huge jump, and it has been an improvement on the previous system in just about every way. That being said, I immediately noticed that some areas of the app were less-than-ideal. While the functionality was good, everything was hidden in layers of menus with no obvious sense of order. In addition to this, there was little visual appeal.

Check out all of those options in the hamburger menu.

Menus on menus on menus

The biggest problem was the hamburger menu. There were many different actions that could be grouped together, and the order of items didn’t make any sense. I tried to chart out all of these options to get a sense of how the app was laid out.

That’s a tall chart!

Pinpointing the issue

I talked to some people who used the app, including those who use it in my family, and received some insight on how they feel about using the app. First, I asked about what they used the app for. I found three main uses:

• Turning on the security system.
• Checking a doorbell ring notification.
• Viewing a new post on Neighbors through a notification.

When asked how to open the app and check the doorbell notification or Neighbors post without going through notification, most users didn’t know how to navigate to the correct location.

Similar issues also appeared when asking users how to edit various settings. They were asked how to access doorbell camera settings, security settings, account details, and more.

Settings galore.

• Most users tried several different places before arriving at the correct settings menu — to edit device settings, you don’t go to settings, you go to devices, find your specific device, and click the settings icon.
• For security settings, you need to find the specific device — you can’t edit all security settings all in one place.
• To edit account details, users typically clicked on the settings tab on the menu before noticing the account tab lower on the menu.

These weren’t the only ways to change these settings, many of them had several different routes to achieve the desired result. While this can be useful, the separation of all of the various settings menus made it hard to quickly adjust options or fix an issue.

More efficient navigation

That’s a lot smaller, isn’t it?

The primary issue found during user testing was navigation, so I focused on grouping activities together and providing users a clear path to their intended action. This can be achieved with a simple bottom navigation bar, split into “Neighbors”, “Dashboard”, and “Your Ring”.

• “Neighbors” contained all of the same content, but is much easier to access and presents itself as a primary feature of the app.
• The dashboard remains largely unchanged, acting as the home page for the experience.
• “Your Ring” contains all of the settings that the user could want to change. This includes notification settings, account details, security settings, and specific device settings.

Beautiful low-fidelity mockups.

Using this information, I put together an idea on how this would look. By completely eliminating the hamburger menu and replacing it with a bottom navigation menu, we can easily get an idea of all of the functions of the app.

• “Neighbors” follows much of the same design as the current app.
• The dashboard now stretches to the top of the screen and enlarges the security options.
• The ticker below the security options is replaced with information stating all of the open door and windows directly. Before it would slowly cycle through this information, requiring you to wait if you wanted to see the status of a device.
• “Your Ring” contains all of the settings in one place. While you may be able to access some of these settings from elsewhere, everything you want to modify is self-contained.

The fun part

After doing some testing with this new design, I was ready to develop some high-fidelity wireframes.

Let’s compare the old and the new!

Neighbors

• The incident map and safety report buttons are widened and shortened
• Cards are made full-size. Why does each one have to be titled “Neighbor?”
• Card content is compressed. I might want to add some more white space here in the future, now that I’m looking at it.

Dashboard

• The security options are changed from buttons to a slider/button
• All open doors/windows/motion detection are clearly visible
• Cards are expanded to full-size

Settings (left three condensed to right, some settings not shown)

• Using a similar design, all primary settings are kept in one convenient place
• I may want to split this up a little more in the future, first prompting the user which settings they would like to edit and then directing them to that specific settings page

Devices

• Similar style is kept
• Increased font size, device status made more visible
• Open/closed status is made more clear

Future ideas

I like how these turned out, but after spending some time on them I have already realized many flaws (a few of which I mentioned above). I’d like to go through all of the possible screens in the Ring app and redesign them to get a good idea of how this would actually work. From there, making it interactive and testable in a working state to get more user feedback!

This project was fueled by a personal vendetta against this app (just kidding, it’s not that bad). I can’t wait to continue developing this project, and maybe one day a few of these ideas make their ways into the real thing!