UX/UI Research & Design

Bloomspace Design/Build Firm Website

 

Case Study:
Bloomspace Architectural Design/Build Firm Website

Your solution to a greener, friendlier space.

My role: Idea definition, stakeholder interviews, market research, I Like I wish What if ideation, user flows, user scenario, site map, lo-, mid-, and hi-fi Figma prototypes.

Tools: Figma, Google Suite, InVision, Zoom, GitHub, Gantt

 Bloomspace, a green solutions design/build firm grew from the idea of retrofitting unused commercial spaces to be more environmentally friendly, needed a website that is engaging, informative, and easy to navigate.Their website needs to attract and educate users, and, ultimately, prompt them to fill out an application.

The Problem

Businesses have unused square footage.

We want to:

 
green and blue tree graphic

Benefit their local communities and natural environments

green and blue polluting factory

Lessen the ecological footprint of their property

green and blue potted plant

Repurpose and improve their space

 

They want to:

 
green and blue money sign

Lower their monthly energy costs

Improve the look and appeal of their space

green and blue paint roller graphic

Improve the look and appeal of their space

 

Initial Solution

At first, Bloomspace could work with be schools, office buildings, rooftops, parking lots, industrial warehouses, and small businesses, offering both DIY project support and all-one-one design/build services. 

This initial business model was expansive and unfocused.

purple sticky notes

Persona Iterations

We created two initial proto personas: one small business owner and one property owner.
Throughout our research it became clear that the project scope was too big and our personas had totally different goals and needs.

The simpler and more effective solution would be to focus on Gordon, our developer persona, to hone in on corporate buildings.

bloomspace personas

Gordon Aster

55 years-old
Developer
St. Paul, MN

  • Gordon has a building that is 20% vacant and has to find a way to increase its appeal.

  • Environmental buildings are an increasing trend that Gordon wants to get ahead of.

  • Gordon needs to lower his building costs while increasing the building income.

Stakeholder Interviews

We spoke with individuals in environmental architecture, real estate development, and landscaping.

Their professional backgrounds helped us to understand that we should be focusing on corporate spaces and that clients are more interested in the aesthetic and financial benefits than the environmental ones. This changed how we would present the information on our site, through emphasizing cost-savings and aesthetic opportunities, and by adding an Education section to help clients learn about the environmental benefits.

User Insights

A commercial property owner in an urban center with a cold climate struggles to pay monthly energy bills, worries about his business’s carbon footprint, and feels like his building needs more appeal and amenities.

+

Research and interviews revealed a historically high volume of empty office spaces. It also showed a considerable ROI on green infrastructure investments, improved public image, and improvements to mental health in offices incorporating plant-life.

=

A service that assesses spaces to curate an eco-friendly architectural rehabilitation strategy would help save on monthly costs, lower carbon footprints, take advantage of tax incentives, shifting public option towards green architecture, support local ecosystems and biodiversity, supplement building amenities, and increase property value.

“There’s a historic amount of office vacancy, especially in cities.”

“Most people are looking to keep up with their neighbors and make it look cute.”

“Clients think they know what they want but the purpose of the designer is to design something livable, legal, and a good space.”

Ideation and Iteration

Stickies with project ideation

User Scenario

We envisioned Gordon going through the process of working with Bloomspace.

Breaking out the exact steps we would want a client to take when entering our website, Gordon helped us to figure out the most important aspects of the site, as well as what blockers we would already be facing.

Styles and Branding

Primary colors


#228B22


#87CEEB


#8B4513


#6B8E23


#FFD700


#0077BE


#E6E6FA


#9696FF

Secondary colors


#556B2F


#C9C9C9


#C4562C


#BDD5A8


#F0E68C


#ADD8E6


#FFE5B4

Buttons

Primary

green button states

Secondary

purple button states

Alternative

moss green button states
 

Mobile page design

Bloomspace mobile page example

User Testing

Since the site was shaping out to be information-based and not action or task-oriented, we opted to center user tests around locating and digesting information.

Task 1: What page do you think you'd find information about bloomspace's methodology? - 63% success rate
Task 2: What's rainwater harvesting? - 75% success rate
Task 3: Apply to Bloomspace and land on the Personalized Proposal Page - 63% success rate

Based on user testing and feedback, we needed to make some changes to our prototypes, including:

  • Strategize section names and content

  • Add context to content

  • Styling updates

  • Renaming site sections

  • Added sections to give more context

  • Added more instructions and descriptions

  • Rearranged sections to reflect a realistic renovation process

  • Integrated information about individual project proposals

  • Added a consultation option

  • Overhauled styling like button colors, page designs, heading font choices, and more.

mobile user testing clip

“Methodology could belong on any page.”

“Are all of the application questions required?”

“It should be more interactive?”

Prototypes

Our final, clickable Figma prototype is a colorful site that not only serves as a service for businesses to potentially cut costs, but also educates potential customers on what they can do for their community.

mobile website gif
Desktop website gif
 

Next Steps

Through interviews and users tests with professionals in architecture, real estate, landscaping, and marketing, it’s clear there is interest in and excitement about this idea. If we were to take further steps to move Bloomspace from concept to reality, we would:

  • Develop the product, prove need in the market, and gather the team

  • Identify and recruit initial client

  • Apply for seed funding and/or angel investing