Security System Mgmt

CASE STUDY

Security System Management App

Client

Bold Group

Timeline

1 year - 10h / week

Media

Single Page Web App

the back of a woman's head working at a computer in an office imagining a security system.

UNDERSTAND

Modernize a software suite aimed at alarm installation and monitoring companies to help run their business.

The goal was not to change functionality, but to upgrade the tech stack and reinvigorate the brand with a bold new interface.

The existing product consisted of over 100 screens. Taking them one at a time would be a mistake. My strategy was to introduce a UX Guide (or design system) with prescribed templates for various screen types such as forms, landing pages, and detail pages.

I introduced a bold new visual style for the app.

BEFORE

AFTER

DESIGN

I created a design system consisting of components and page templates.

1. Form Templates - Adding and editing data
2. Grid Templates - Viewing, searching and filtering multiple records
3. Detail Page Templates - All info pertaining to a single record

These three templates accounted for over 90% of pages in the app.

I also provided guides for color, typography, and spacing.

Using my components and page templates, I was able to mass produce designs for the dev team.

An example to a Grid template, where users can view multiple records, search, sort, and filter records, as well as execute bulk actions.

An example to a Form template, where users can complete data entry tasks.

An example to a Detail page, where users can view all information related to a specific work order.

Screens like dashboards and calendars were not template driven and required individual attention.

While there were many dashboards available to the different user roles, each had a slightly different layout depending on which facts and figures were important for that role.

DELIVER

I would deliver new designs every week to meet the dev team's sprint goal.

A key to success for this project was working directly with a dedicated UI developer. While all developers consumed components, limiting the number of developers creating components to those trained in front-end development increased quality and consistency.

Thanks for reading.
Check out another case study.

Next Case Study

Back to Home

Product UI/UX Designer

LinkedIn ↗

Security System Management App

Modernize a software suite aimed at alarm installation and monitoring companies to help run their business.

I introduced a bold new visual style for the app.

I created a design system consisting of components and page templates.

Using my components and page templates, I was able to mass produce designs for the dev team.

An example to a Grid template, where users can view multiple records, search, sort, and filter records, as well as execute bulk actions.

An example to a Form template, where users can complete data entry tasks.

An example to a Detail page, where users can view all information related to a specific work order.

Screens like dashboards and calendars were not template driven and required individual attention.

While there were many dashboards available to the different user roles, each had a slightly different layout depending on which facts and figures were important for that role.

I would deliver new designs every week to meet the dev team's sprint goal.

A key to success for this project was working directly with a dedicated UI developer. While all developers consumed components, limiting the number of developers creating components to those trained in front-end development increased quality and consistency.

Thanks for reading.
Check out another case study.

Security System Management App

Modernize a software suite aimed at alarm installation and monitoring companies to help run their business.

I introduced a bold new visual style for the app.

I created a design system consisting of components and page templates.

Using my components and page templates, I was able to mass produce designs for the dev team.

An example to a Grid template, where users can view multiple records, search, sort, and filter records, as well as execute bulk actions.

An example to a Form template, where users can complete data entry tasks.

An example to a Detail page, where users can view all information related to a specific work order.

Screens like dashboards and calendars were not template driven and required individual attention.

While there were many dashboards available to the different user roles, each had a slightly different layout depending on which facts and figures were important for that role.

I would deliver new designs every week to meet the dev team's sprint goal.

A key to success for this project was working directly with a dedicated UI developer. While all developers consumed components, limiting the number of developers creating components to those trained in front-end development increased quality and consistency.

Thanks for reading. Check out another case study.

Thanks for reading.
Check out another case study.