Redesign

Calipsa 2.0 Transformation

Oct 2019

Team: 1 CTO, 3 full-stack engineers, 1 designer
Status: Incrementally implemented in Jan 2020, beta in May 2020, and then fully published in June 2020

Summary: From Humble Beginnings to Modern Design

Calipsa is a testament to exceptional technical innovation. However, the initial interface, built by a lean team of engineers since its first launch in 2016, lacked the design polish needed to keep pace with its growing user base. Recognising this, we embarked on a UX redesign aimed at achieving two key objectives:

Modernization and Usability: Transform Calipsa's interface from its improvised state into a modern, user-friendly design that prioritizes ease of use.
Future-Proofing for Growth: Lay a solid design foundation that can accommodate the long list of exciting new features planned for the platform.

By implementing these goals, we aimed to ensure Calipsa not only looked stunning but also functioned seamlessly as it continues to evolve and serve its users.

Calipsa’s interface before the redesign

How to connect cameras to Calipsa

Stage 1: Diving Deep into Calipsa's Journey

Joining Calipsa as a fresh face, I had a lot to learn about the security industry and its users. To bridge this knowledge gap, my first step was to delve into Calipsa's story. The CTO, one of the founders, walked me through the platform's evolution.

Originally, the founding engineers built a powerful computer vision model capable of analyzing CCTV footage with exceptional accuracy.
Their initial target was the road traffic sector, but intense competition and public safety sector hurdles proved significant challenges.

This initial roadblock led them to a valuable market insight. While most private sector buildings had CCTV cameras installed, these were often basic models with limited capabilities. Security personnel were overwhelmed by constant false alarms triggered by minor movements or lighting changes. Moreover, "smart" cameras relied on expensive hardware with built-in chips that quickly became outdated due to rapid advancements in graphics processing technology.

Calipsa, with its innovative cloud-based machine learning model, offered a groundbreaking solution. It could connect to existing, untapped CCTV cameras, transforming them into "smart" systems. By October 2019, Calipsa had reached a crucial stage – finding market fit and gaining traction from paying customers.

With this information in mind, I began to grasp the vision of the Calipsa product, who our customers are, and how we might want to portray ourselves. This understanding became the foundation for the upcoming user research phase.

Stage 2: Discover the issues

Understanding our users was paramount. I began by creating user personas, focusing on two key groups:

Monitoring Station Managers: These occasional users log in to review Calipsa's performance and access reports.
Security Camera Operators: These frequent users set up cameras and configure settings based on specific site requirements. They are also the persons who review the alarms.

Typical setup of a monitoring room

Through an in-depth analysis of Calipsa's interface (around 20 unique pages at the time), I pinpointed several areas for improvement.

My analysis of the Dashboard screen.

Beyond individual page issues, I identified recurring visual problems:

Outdated Interface: The overall look and feel lacked modernity, failing to reflect Calipsa's innovative technology.
Inconsistent Design: The absence of a design system led to a jumbled user experience with varying component styles and layouts across pages.
Poor Accessibility: Insufficient color contrast between text and background elements hindered readability.

These findings highlighted the need for a comprehensive redesign that not only addressed usability concerns but also established a consistent and modern visual identity for Calipsa.

Stage 3: Transforming Insights into Solutions: Ideation & Design Library Creation

Following confirmation of my findings with the CTO and colleagues, I embarked on the ideation phase. To gain a comprehensive view of the user journey, I prioritised low-fidelity wireframes for the most critical screens.

In parallel, I began building the design library – a crucial element for ensuring a cohesive user experience. To establish a foundation for consistency, I started with basic elements like text styles, colors, and buttons. Collaborating closely with the marketing team, we developed a visual direction that aligned with Calipsa's brand identity: innovative, modern, and user-friendly software that instills trust.

This revision emphasises the prioritisation of wireframes, details the initial design library components, and strengthens the connection between design and brand identity.

Design system set up in Sketch

Stage 4: Refining Experience

Leveraging the design library, I transformed the low-fidelity wireframes into polished, high-fidelity mockups. These mockups showcased the new interface, addressing the previously identified usability issues and visual inconsistencies.

Additionally, I strategically introduced several new functionalities within the design. The clear value proposition of these features demonstrated through the mockups, convinced the CTO of the investment required for their implementation.

Wireframes I delivered for Calipsa 2.0 in 2019

Stage 5: Reflection and Learnings

As the sole designer on this project, I gained valuable insights that will continue to shape my design practice. Here are some key takeaways:

Thriving as a Solo Designer:
Navigating a complex redesign project independently required effective prioritization, clear communication, and the ability to wear multiple hats.
Dark Mode Mastery: Incorporating a dark mode option challenged me to consider accessibility and user preferences when establishing a cohesive visual language.

For example, I learned that ensuring proper color contrast for text elements in both light and dark modes required careful adjustments to the design system's color palette. This experience provided valuable insights and improvement ideas that I'll carry forward when establishing future design systems, particularly regarding the impact on dark mode implementation.

How I set up dark mode in Sketch.

Building a Collaborative UX Process: As the first full-time designer for this startup, I shouldered the responsibility of establishing and leading the UX process for the engineering team. This involved setting clear expectations, fostering open communication channels, and defining a collaborative workflow. By prioritizing clear communication, we ensured design and technical considerations were in sync, paving the way for a smooth and efficient implementation.
Change Management: Transitioning users from a familiar, legacy UI to a new, modern design involved careful consideration. We implemented a proactive communication strategy through email communications and blog posts to keep users informed about the upcoming changes and highlight the benefits of the redesign.

Recognizing the potential for user resistance, we adopted a phased approach. We began by subtly changing the UI on the most impactful pages and non-critical elements such as background colors and fonts. We then gradually rolled out updates to additional pages over a three-month period. This measured approach ensured a smooth transition for users and minimized disruption to the platform's operation.

Linkedin post promoting the new UI

Interesting numbers

💰 Calipsa MMR in Dec 2019 was £66k and in Dec 2020 was £129k
🌍 Expanded presence from 4 countries to 10 countries
📹 The number of active connected cameras on the platform in Dec 2019 was 48,646. The figure for Dec 2020 was 91,076.

Paphavee