Bringing flexibility into a templated data model.

Company

Captego Aps

Role

Product designer

Timeline

12/2022 - 04/2023

Team

Christoffer Kaalund - Tech Lead
Rasmus Taalstrup - Front-end Engineer
Gareth Taft - Mobile Engineer

Captego serves as a comprehensive data collection, storage, and management solution widely employed across diverse industries, with a primary focus on the construction and insurance sectors. The platform includes an intuitive mobile application for efficient data capture, complemented by a robust web-based Admin platform.

The Admin platform plays a crucial role in configuring inspection structures, allowing for customization and sharing of reports, and providing access to valuable insights.

Problem Statement

Narrow workflow for diverse clients.

Some clients encountered challenges when trying to capture the full range of necessary on-site data due to the limitation of Captego's one-image registration model. They required the ability to collect multiple images within a single registration to thoroughly document issues found on-site.

Why was this problem significant?
It posed a barrier to the company's expansion into industries requiring greater flexibility, resulting in missed opportunities for growth.

Discovery

Broadening the scope

Our initial step was to deepen our understanding of the core problem and identify the specific use cases that required a solution the most.

We engaged with internal stakeholders, including customer success colleagues who possessed valuable insights into customer workflows. We also reached out to customers who had expressed the need for these functionalities.

After brainstorming and drafting potential solutions, one of our internal stakeholders proposed an intriguing idea: expanding the scope of the feature to address the root issue—the lack of flexibility in the templated model. Recognizing the brilliance of this suggestion, we immediately launched into a iteration session.

Challenges

In this project, we encountered a range of challenges, from the need to enhance an already robust product with added complexity without causing confusion for casual users, to the requirement to accommodate a multitude of use cases.

1. Data consistency

The data needed to be easily queryable and filterable in the database and efficiently managed in external data visualization software. Data is powerful only when it can be consistently gathered using the same parameters across the entire dataset.

2. Flexibility

The challenge here was that in attempting to create something for everyone, we ran the risk of helping no one. Our goal was to ensure that users could customize the templates to meet their specific requirements.

3. Simplicity

The target user, apart from the early adopters and a few expert users, often lacked strong technological literacy. This was a common complaint within the industry and in competitor product reviews.

4. Lack of resources

Because our development team was overwhelmed, we had to design a scaled-down solution – a version 1 of the full-scale feature – that would still provide users with the necessary functionality.

Design

Diving in

The most enjoyable part was the iterative process that led us through numerous fascinating approaches. We drew inspiration from exceptional products like Notion and Monday.

We dedicated time to contemplate edge cases and various use cases across the industries we served, constantly checking in with the developers to ensure our ideas were technically feasible.

Create all the fields, then assign them as needed.

I appreciated that users had a dedicated space for creating fields and accessing an overview. The assignment process was highly intuitive and straightforward, with the icons serving as valuable signifiers.

Due to capacity constraints, the developers couldn't create an additional page for the fields, so everything had to be managed within the category view for Version 1 of the feature.

The all in one place model.

The next idea was to enable users to add, create, and assign fields all in one place. I appreciated that this approach provided users with context and direct access to the categories.

We were concerned that users might mistakenly think that the fields were being created specifically for the categories.

Separately together.

To ensure utmost clarity, we separated the creation flow into a standalone modal. At this point, we had gained confidence in the overall approach, so we delved into the finer details of the design.

refining

Fitting in all the functionality

Create, add, remove, reorder, edit, rename, delete, inherit, add and remove inheritance.

Now it was time for the puzzle game – playing with the components and trying to make them fit.

I loved the overall approach of the stacked elements, the interactive features for adding and removing, and the drag-and-drop functionality for reordering.

We initially adopted a straightforward approach, but after a preliminary moderated usability test using Maze, it became evident that it wouldn't suffice. Users typically didn't read the informative text, and the lock icon led users to believe it was an interactive element. Furthermore, the lower opacity text presented accessibility issues.

We switched the position of the inheritance interaction since it's a less frequent action and should be separated from the main CTA. The usability test results were positive, further confirming our chosen direction.

The final piece left to implement was the renaming and deleting of the created fields. We brainstormed, rearranged elements during the ideation phase, and ultimately reached a compromise by adding an edit icon to each element, which would only become visible on hover.

While this solution crowded the already busy interface, we knew that in Version 2, there would be a dedicated 'Fields' tab where editing would migrate to.

hand-off

Passing on the goodies

I was fortunate to have great engineer colleagues who were very open to giving feedback along the way, so we established an effective hand-off template.

Reflections

Lessons

It's always valuable to step back during the ideation stage and attempt to break free from the framework in which the problem is initially placed.
‍
Every successful solution often appears obvious in hindsight, but it's rarely the case before reaching that 'aha' moment. Another important lesson is that constraints will always exist, and the sooner they are clearly defined, the quicker the path to resolution becomes.

NExt case study