Designing a More Accessible Building Materials Database to Encourage Sustainability
Role: Lead UX/UI designer; Brand creator; Strategy & writing contributor
Company: Catabolic, a design consultancy based in Oakland
Quartz Project was a collaborative open-data initiative designed to help owners, architects, and designers plan better, more sustainable buildings, backed by Flux, thinkstep, Health Building Network, and Google(x).
Problem
Quartz had built an impressive and comprehensive database of building materials and products, but it was hard to use and not user-friendly. Some builders wanted to be more sustainable, but had difficulty in accessing the very complex and hidden information about the materials they were using on the site. Some of these materials were toxic, unsustainable, or otherwise problematic. The company’s value prop was that making this information easier to access would result in a cleaner, more sustainable industry.
Approach
At this point, our client only had brochureware and a large database. Our job was to make a user-friendly, accessible resource for people in the construction trade. We shaped the site's content strategy and UI/UX. We worked with the client to craft an appropriate brand identity and to provide visual design assets.
The compressed timescale and close collaboration drew from a more agile work cycle, as Flux's developers were working while we were designing. We used several Goal-Directed Design® techniques to move the design forward, including personas, scenarios and workflows.
Our work made it easy for visitors to browse for ideas, explore commonalities, conduct comprehensive analyses, and offer feedback.
Whiteboarding
We quickly sketched the functionality that needed to be present on different screens, and gestured at the page layout:
Whiteboard sketch of common product database interface with interaction notes
wireframes
We started to ground the design with common use cases and scenarios during the wireframing stage:
Wireframe of common product database interface. This is one screen from a series of storyboards.
high fidelity visual design & branding
We played with geometric patterns and riffed off a Swiss modern style to align with the brand attributes of precision, fact, and standardization:
The visual design is based on the Swiss Modern style, a look associated with standards, straightforwardness, and facts.
impact
Our clients presented the sustainable building product portal at a major building tech conference, which was so positively received that they secured another round of funding to pursue sustainable building projects in software.