Johnson Controls

Redesigning a decade old video SaaS to an efficient system

How a design thinking approach solved challenges of one of the largest video management softwares in the market

Home

Context

About the product

Exacq, is a product by Johnson Controls with 1M+ users used for video surveillance management. The config module, which I redesigned enables security integrators to add and manage cameras and their recording servers.

My work

I led the end-to-end redesign of Exacq with a focus on improving the configuration experience for users. The redesign significantly streamlined complex workflows, making it faster and easier for integrators to set up and manage their video surveillance environments.

InFO

Role

UX/Product Designer

Responsibilities

Product strategy, Interaction design, Prototyping, Design system

Duration

9 Months (Aug'23 - Apr'24)

Team

2 UX Researchers, 2 Product designer, 1 Product Manager

Problem and Solution

Problem at a glance

Exacq had various problems that accumulated over a decade. According to market reports, the major problem was its poor user experience and an outdated UI.

Business Impact

Once a market leader in 2013, Exacq saw a 91% decline in customer satisfaction ratings and heavy customer shift to other competitors.

Problem Overview

Security Integrators found it hard to configure cameras and servers in Exacq

Exacq had various problems that accumulated over a decade (2013-23) when it was last designed. According to market reports, the major problem was its poor user experience and an outdated UI. This business impact of this was a heavy decline in customer satisfaction ratings and customer shift to other competitors.

RESULT

Outcomes at a glance
54%
increase in user
satisfaction
2.7X
faster workflows
for users
76
Usability Score
(A-rating)
Example comparison of the Add Camera Tab

Here's how my design process helped solve problems with Exacq↓

Product , Market & USER RESEARCH

Project kicked off by analysing Exacq's low market fit and identifying user pain points. This involved conducting 5+ interviews, field visits, competitive analysis, and a thorough UX audit revealing 3 key problems...

DESIGN GOAL

I facilitated collaborative brainstorming sessions with my team to map out journey maps and translate key problems into 3 opportunities to solve for during the redesign

Lengthy
🠒
Fast

The redesign should have faster and streamlined workflows, improving system efficiency

Cluttered
🠒
Relevant

The redesign should make key features and information easier to find using an intuitive layout, improving user focus

Outdated
🠒
Modern

The redesign should be visually refreshing and use modern design trends boosting overall product appeal

How can we make Exacq
fast, relevant and modern?

Design Decision #1: Dashboard

Design started with the dashboard. Exacq's lack of a centralized hub forced users into frustratingly long workflows. I collaborated with PMs and Devs to create an optimized user flow with single point of access for all client features, result of which was the client dashboard

Design Decision #2: Data Visualizations

To combat information overload of complex storage and monitoring data, I redesigned these raw data components into interactive data visualizations, allowing users to easily identify storage and device issues.

Design Decision #3: visual design improvement

Exacq's was designed on wxWidgets, an outdated UI library. Therefore, I spearheaded the creation of a modern design system, establishing clear visual guide for consistency and improved aesthetics of the config module

FInal Designs

Optimized Dashboard shoe for Faster Server Setup

Security integrators now have a holistic understanding of the client features through the dashboard. This allows them to perform priority actions like setting up the recording servers faster than ever

Click to pause/play

Effortless Camera Controlshowand Server Management

Intuitive controls, bulk actions, and clear system status simplify tasks like adding a camera and organized server dashboard makes it easier to process large chunk of critical data

Camera Configurationshowwith a Modern Interface

Clear settings organization, setting discovery through search and helpful visual cues streamline the camera configuration process while providing user a visually refreshed and modern user interface.

user testing

In a total of 7 user testing sessions, these were the 3 key takeaways:

6/7 Users found the redesigned config module as more intuitive

1

Users liked the clean and modern product appeal of the redesign

2

2 Users suggested that the dashboards could have been personalized

3

PRoject Takeaways

  • Solving industry level problems requires planning and time
    Designing an impactful solution for a real-world business problem needed a timeline and planning that allowed for flexibility, challenges and adjustments as needed.
  • Taking ownership elevated the project
    By taking initiative of core processes, I negotiated design solutions with the team that ensured positive outcomes
  • Designing for Flexibility and Scalability in future
    Redesign was implemented with a forward-thinking approach minimizing costly redesigns and easy expansion of features

Interaction Design IDeation

Crafting the optimized dashboard for Visual Clarity

Club cards display the basic information to identify the club before clicking to view more. They play a dominant role in shaping the visual experience. Therefore, this singular piece went through the most iterations by far.

The Solution

Core Experiences
‍‍‍Shipped

To discover and define the problems, our team used double diamond process. This approach enabled me to dive into the intricacies of the data experience within Autodesk.

Integrated Dashboard shoy for a Holistic View

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla,

Integrated Dashboard shoy for a Holistic View

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla,

Integrated Dashboard shoy for a Holistic View

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla,

Let's step back to see how did I reach here...

Adding a server

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Adding a camera

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Configuring cameras

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Precision

Tortor interdum condimentum nunc molestie quam lectus euismod

Prioritization

Tortor interdum condimentum nunc molestie quam lectus euismod

Efficiency

Tortor interdum condimentum nunc molstie quam lectus euismod

DURATION

9 Months

responsibilities

Product thinking, Interaction design, Visual design

Category

SaaS, Security System, B2B, Capstone

ROLE

UX/Product Designer

TEAM

2 UX Researchers, 2 Product designer

TOOLS

Figma, Miro, Balsamiq