project case study

Campbell Scientific Web Application Design



The Challenge

Campbell Scientific builds some of the most rugged and dependable products for clients like Environment Canada – and their CCFC field camera is no different. They came to us needing a custom web application interface for setting up, scheduling, and controlling this camera remotely over WiFi in some of the most harsh and remote conditions on earth.

The Solution

In order to hit the 5 week deadline, we integrated with the client team and adopted an agile approach in order to define workflows and create a custom, responsive web interface for the CCFC camera. At the end of the day, we completely reimagined the experience of using the application and brought the UI up to par with the newly designed, modern camera.

Key Project Features

  • Journey Mapping
  • UX
  • User Interface Design
  • Front-End Development
  • Mobile-First
  • Iconography

The Details

The experience of using a high-quality product is defined by each touchpoint along the user journey. After redesigning the next-generation CCFC camera itself, the team at Campbell Scientific realized the existing web application for controlling the camera wasn’t of the same quality. They came to us on a shortened timeline, needing to completely re-invent the user experience of the application.

With no time to spare, we quickly outlined who the users were, and what context they’d be using the application in – which was unique to say the least. The primary user group for the CCFC camera involves scientists out in the field – remote areas, with harsh weather conditions and low bandwidth. Often, the setup of the camera itself would take place in two steps, in two locations: initial setup in an office, then secondary setup out in the field likely using a mobile device.
That discovery meant we needed to account for this in the core workflows of the application, and ensure we designed the setup experience around the user instead of forcing an unneeded change of behaviour. Of paramount importance was the likely switch in devices in the middle of the workflow – meaning the mobile usability needed to be top notch.

We started from scratch, and worked through variants of these workflows using prototypes with the client. Once we ironed out the best way forward for workflows like User Onboarding, Camera Setup, Capture Settings, Media Settings, and Lens Profiles, we moved into visual design.

ccfc mobile ui

Visual Design

Visually, we were given a blank slate from the client. Considering the new CCFC camera had been redesigned and modernized, we wanted to create a connection between the UI and the actual device itself, in both look and feel. We did that by designing a visual interface that uses tasteful CSS gradients and transparencies alongside screen-specific contemporary & geometric typography – and given the user context wherein bandwidth is at a priority, we designed an interface that is low on resources. In fact, we even figured out an innovative way to create a blurred background using only CSS for better performance!

Developing the UI

The interface itself was built out using Bootstrap as a responsive framework. Performance optimization was key, considering the environmental context of the user, alongside the aforementioned importance of the mobile experience. A toggled collapsible navigation system was designed to account for the frequent use case of netbooks & small laptop screens, alongside a smart Set Up Wizard for first-time users. Finally, dashboard data visualization was built out with JavaScript to communicate important information to the user, including remaining memory space, temperature, weather, and time of day to name a few.
ui details

The End Result

The CCFC project was an extremely fast-paced and unique one – it put us to the test in terms of efficiency and designing for rare problems. The client was extremely happy with the outcome and the marked improvement in not only the visual look of the UI, but also the overall experience of controlling the considerable complexities of the camera setup. Shipped on time, the CCFC is out in the wild all across the world.

contact us

Let's make something amazing together.

Interested in working together, or maybe just having a conversation? We’d love to hear what you have in mind, and answer any questions you might have. Let’s make whatever’s rolling around in that brain of yours happen.

Onwards to view The Next Project →