Openbuilt
Securing stakeholder buy-in with good design.
Brief
Openbuilt was a co-venture between IBM and Cobuilder. The proposition aimed to create a platform for future digital products that tackle key challenges in the construction industry.
Task
Over 12 weeks to build effective designs for a future industrial platform (Openbuilt). Collaborating with the client teams at Cobuilder to develop pitch material and concept journeys.
Hypothesis
By applying effective design practices, we can demonstrate the value of the proposition, secure funding, and ultimately further develop the venture.
Contribution
Collaborating with a team of four business managers to refine the pitch, design the core MVP journey, and establish branding and visual design principles for the proposition.
AS-IS
Tragic incidents such as the Grenfell disaster highlight the need for stricter regulation on the application of construction objects. Asset Owners are often responsible for specifying materials for use; analysing their performance and technical attributes in order to determine their suitability. This process, along with the actions of other actors within the industry, exposes a range of pain points.
High Level Pain Points
1. Product data for construction objects is non-standardised, with technical standards varying across countries and regions.
2. Manufacturers provide building object information in various formats, including online spec sheets and printed catalogs.
3. Clients (e.g housing associations) have no visibility on the progress being made with their construction project nor the materials being used.
4. Issues cannot be triaged as product information is difficult to find, and ledgers have to be printed and stored physically.
To Be
How might we provide Engineers and Asset Managers a way to compare construction objects in order to determine the correct product based on their performance and technical qualities.
Demonstration journey
I was tasked with designing a demonstration journey to showcase the platform to potential investors. The prototype aimed to illustrate how an Asset Manager could use the platform to find a specific construction object, analyse its technical details, and add it to an organisational project.
Wireframes
I presented the prototype to a range of potential clients, who helped shape the scope of the initial journey, such as adding the option to download 3D objects. During this phase, we partnered with Cobuilder, gaining access to their product data API, which allowed me to integrate the product information into the page designs.
Carbon Design System
I decided to increase the fidelity of the designs by moving the wireframe to the IBM Carbon Design System, this was in order to enable a development squad to build a working prototype using the Co-builder API.
Branding development
A further requirement was to develop a brand identity for the new business. After collaborating with the marketing team at Co-Builder, we identified four core principles for the platform: Transparency, Sustainability, Connectivity, and Transformation. These values became the foundation for creating a logo that could be used across all pitch and marketing material, encompassing the vision for the future platform.
Concept refinement
I began the logo development process with rapid iteration sketching, translating a few of these concepts into more refined digital vectors. I then presented the options to the broader Co-Builder marketing team, who selected the third version. This option was chosen because it best captured the product's vision, with the butterfly symbol representing sustainability and transparency. Following this, I was asked to further refine the icon by demonstrating how the logo could be adapted across the product suite, as the platform supported multiple applications. I accomplished this by adjusting the logo's colors, assigning a different hue to each section to better reflect the product's diverse nature. The final logo was then approved by the wider team.
Presentation material
Design System
After developing the brand identity and design guidelines for Openbuilt, I created a design system in Sketch using the Atomic Design methodology. This provided a structured framework for future product development and improved collaboration and efficiency across the growing team. I then applied the design system to the evolving wireframes, transforming them into concept product visuals.
Atoms
At the Atom level, I focused on font hierarchy and color accessibility. I realized that the brand accent colors from the logo weren’t accessible on black and white backgrounds, so I created two variants for each to suit different contexts. The primary purple was used throughout the product, with orange as the highlight color (e.g., for primary CTAs). Black to grey was designated for text styles and component backgrounds. I also developed variations by reducing the opacity of each color by 10%, with the less saturated versions used for disabled and highlighted states.
Molecules
CTAs (primary, secondary, and disabled), Tabs, Drop-downs and Pills were all built at the molecule level. In order to mobilise the development of the project, I decided to use some aspects of the Carbon Design system such as iconography. These elements were intended to be refined and replaced later as the design system had evolved.
Organisms
The main consideration at the organism level was ensuring that the designs were aligned to an 8px grid system, so that there was a good visual placement and hierarchy. I ensured that the molecules making up each component contained the variable states so that designs could be quickly adjusted.
Page concept designs
Summary
Openbuilt was presented to a wide range of stakeholders and external clients, securing the venture capital needed to advance the proposition to product level. The announcement was featured on both the IBM and CEMEX newsrooms. I then handed over my work to a Design Manager, who formally took on the role of leading the design development.