parallax circle item parallax circle item parallax circle item
Case study

Designing the award winning app: A UX/UI case study on Responda

Designing the award winning app: A UX/UI case study on Responda

Specialities
Client

First Security

Tags
UI/UX Custom Software Development Mobile App Development

Responda by First Security is an award-winning, product category defining mobile application that puts access to manned security services in the palm of your hands. 

Winning the NZSA Outstanding Product or Service of the Year, the app offers customers the convenience of booking rapid response patrols for their homes or businesses directly from their phones, providing them peace of mind for their property’s security.

But designing an app that’s instantly familiar for new customers and easy to navigate, even in a panicked state, posed a unique challenge. 

A challenge whose solution would require the combined efforts of design and development teams to ensure the marriage of user interface (UI) and user experience (UX). 

Fortunately for First Security, this is where Sandfield excels.

The brief

True to our tested process, the Design team began by understanding First Security’s project requirements and user needs. The brief was clear: align the app’s design with brand values: 

  • Be timely. Match the swift response times that First Security offers by empowering users to move through the interface quickly and confidently.

  • Take control. Prompt users with real-time updates, highlighting features and actions they need, when they need them.  

  • Peace of mind. Employ assuring, responsive aesthetics and user flows, meaning users are never left guessing or in the dark. 

With the brief on hand, the team worked with First Security and, for a short period, a third-party UI designer. The initial goal was to map key user flows, and get a sense of the customer journey when interacting with the app.

 

Responda workflow image 1
Responda workflow image 2

Meeting a customer’s needs through a clear, thoughtful user journey.

 

Wireframing

Clarifying app hierarchies — the next step — establishes a clearer sense of user experience. This is where menu items are itemised and arranged, and page structures are defined.

The benefit of an in-house design team means that collaboration between designers and developers is already underway at this stage. Feasibility and practicality is assessed and re-assessed on the fly as working closely together means both teams stay on the same page.

We used our extensive app development experience to achieve a minimal amount of menu items, setting clear navigational paths using known terms for discoverability and ease of use.



Responda workflow image 3

Responda workflow image 4

Where function meets form — the blueprints for app Responda

 

Prototyping and iterations

Interactive prototypes then bring the designs to life. Screens from across the application — from sign-up to service request — are built in an environment that closely emulates the look and feel of a final product. Client, designers and developers, working closely together, iterate on choices of placement, style, navigation and more.

At this stage, additional design collateral required is created, from stagnate and animated icons through to components and marketing mockups.   

We brought in Responda's iconic blue colour to convey the brand's established sense of trust whilst also achieving consistency.


Responda Prototype design

User testing

An undeniable proponent of Responda’s success has been user feedback. Undoubtedly, the overwhelmingly positive response from both consumers and industry post-launch is thanks to engaging users in application testing as a part of the development phase. 

After hearing from users that they wanted a callout quote pre-request, as well as the opportunity to add further details after submitting a request, the team set about strengthening the process. Key to this was not compromising on the app's fundamental promise of blending simplicity with functionality.

Responda workflow image 5

Taking into account customer feedback to create functional yet simple experiences.

 

Development

Though a typical handoff to the development team may mean the job of the designers is done, Sandfield’s collaborative approach means that the teams continue to work closely together even once coding commences.

By sharing the same brief, we’re able to deliver on both aesthetics and practicalities, implementing the approved design with ease. 

 

three people sat in a meeting room

 

Designed, sealed, developed.

Beyond just streamlining the project’s journey to completion, this collaborative approach to design and development ensures the holistic app creation is taken care of. From feature implementation to accommodating responsive text and screen sizes, Responda is ready to launch as a fully-fledged, user-approved app. 

Having come into the project without the in-house capability, First Security walks away with an app that delivers on their project needs. Within a number of months, Responda goes on to win the Outstanding New Security Product award at the OSPAs.

Perhaps the real winners here though are the customers. Now all it takes for greater peace of mind over a property is to reach a hand into the pocket.

With Responda, users are in control, well-informed and empowered with a sense of security. All due to First Security’s product category-defining success of an app — designed, developed and delivered by Sandfield.