OpenFrame Dashboard in laptop
OpenFrame Dashboard

OpenFrame

OpenFrame

Designing the future of sustainable construction

Designing the future of sustainable construction

Designing the future of sustainable construction

OpenFrame is a disruptive force in the Nordic construction world. This innovative scale-up, based in Copenhagen, is on a mission to streamline how building projects meet their sustainability goals and certifications. Their main objective is to replace the scattered, manual, and documantation heavy workflows with a single, intuitive digital platform. Think of it as 'Jira' for sustainable building.

As the lead designer, my role spanned the full spectrum from brand strategy to product development. I led the redesign of the company's visual identity and the UX/UI design for their new products. The project spanned over two years (on and off) and involved thorough user research, prototyping and testing, resulting in a extensive design system, two market ready products and an app that empower professionals to manage complex sustainability projects with more clarity and ease.

CLIENT
OpenFrame

YEAR
2023–2024

ROLE
Art Direction / Brand / Product design / Concept development

— View website

ROLE
Art Direction / Brand / Product design / Concept development

— View online

ROLE
Art Direction / Brand / Product design / Concept development

— View online

ROLE
Art Direction / Brand / Product design / Concept development

— View online

ROLE
Art Direction / Product design / UX / Concept development

— View website

Openframe identity bento

A brand to build on

A brand to build on

Through a series of collaborative workshops with the OpenFrame team, we explored their core values, their why and vision for the future. It became clear that their existing visual identity didn't match their ambition.

Based on these insights, I redesigned the OpenFrame logotype and created a new visual identity. The new look is cleaner, more confident and better reflects their position as an expert and empowering tool within their market. This work was crucial to ensure the brand felt cohesive across all touchpoints, from the website to the products.

OpenFrame view in tablet

The challenge and the users

The challenge and the users

When I joined the project, OpenFrame had a successful early MVP but was ready to scale. They needed to evolve their brand and create two new, robust products from scratch: Build, for new construction projects, and In Use, for managing existing buildings.

The core challenge was clear: how might we help sustainability managers and project leaders take control of a complex process? They were handling multiple stakeholders, endless spreadsheets, emails and physical paperwork to track progress and provide documentation towards sustainability certifications. They needed one source of truth.

Our goal was to design a tool that felt empowering and simple. It had to guide them through the certification process, making it feel straightforward, manageable and time saving.

openframe_usergroups_comp

Crafting the experience

Crafting the experience

At its core, the system gives users predefined templates for major sustainability certifications. From there, they can customize it to their process, manage tasks, and delegate them to the right team members. With this in mind, we reimagined and crafted the user experience for Build and In Use from the ground up, developing new UX concepts and interaction patterns tailored to the specific needs of our professional users.

OpenFrame UX artifacts

The design process

The design process

Mapping the journey
We mapped out the user journey and primary UX flows to ensure we had a deep understanding of the needs and pain points of all the diffrent user groups involved in achieving a sustainability certification.

Concept design and prototyping in Figma
After designing and narrowing down to a few diffrent concepts, I created hi-fi prototypes for all the main user journeys. This allowed us to test our assumptions and gather feedback as often as possible.

Testing and validating
We conducted several rounds of usability testing with sustainability managers and project leaders. Both through one-ones and also through group feedback sessions. It helped us validate what was working and pinpoint areas that needed more iterations before development.

Mapping the journey
We mapped out the user journey and primary UX flows to ensure we had a deep understanding of the needs and pain points of all the diffrent user groups involved in achieving a sustainability certification.

Concept design and prototyping in Figma
After designing and narrowing down to a few diffrent concepts, I created hi-fi prototypes for all the main user journeys. This allowed us to test our assumptions and gather feedback as often as possible.

Testing and validating
We conducted several rounds of usability testing with sustainability managers and project leaders. Both through one-ones and also through group feedback sessions. It helped us validate what was working and pinpoint areas that needed more iterations before development.

OpenFrame Dashboard in laptop
OpenFrame different UI views

Users on the go

Users on the go

To complement the main platforms, we also designed a companion app for sustainability managers and contractors who are often away from their desks.

For managers, the app provides a quick overview of the latest updates and task changes, and allows them to add comments, documents, and photos on the fly. For contractors, the experience is more focused; they can see only their assigned tasks and easily upload photos or data directly from the building site. This ensures that crucial information is captured in the moment, keeping the project moving forward.

OpenFrame app on concrete and in a persons hand
OpenFrame companion app screens

Building a design system

Building a design system

To ensure consistency and efficiency, I worked closely with the front-end developers to create a foundational design system. The system, built around Atomic design methodology, includes everything from colors and typography styles to a library of reusable UI components and templates: like buttons, inputs, dialogs and data visualizations.

With this system, we enabled the team to develop new features faster and ensure a consistent, high quality user experience across all of OpenFrames products for the future.

OpenFrame Design system

Results: clarity and control

Results: clarity and control

Results: clarity and control

The final products, Build and In Use, deliver a streamlined and intuitive experience that addresses the core needs of sustainability professionals. We've replaced chaos with clarity, giving our users powerful tools to manage their work digitally, all in one place. The great feedback from users has been a great confirmation that we've created something genuinely useful that will have a real impact on the industry and also the environment.

Design team and development teams have worked closely together to create and develop a fully automated onboarding for small businesses. The existing business owners can today become full bank customers in under 7 minutes. Start ups who register and create their company with Svea can also become customers completely online. This thanks to the advanced automated system and connections to Bolagsverket. The first of its kind in Sweden.

openframe_photo_comp

Mattias Kristensson

Mattias Kristensson

Mattias Kristensson

Senior Product & Brand Designer


Senior Product & Brand Designer