Sitework Hub

Case Study

Rooftop gardens were once considered groundbreaking, but today, they wouldn’t look out of place atop office buildings, hospitals, or private residences. Our client's mission was to enable architects, engineers, and other construction professionals to make newer, emerging sustainable infrastructure technologies just as mainstream.

Project Details
  • Client project
  • 3-week design sprint
  • 3-member team
Methods
  • User interviews
  • Competitive analysis
  • Journey mapping
  • Wireframing
  • Prototyping
  • Design system
Role
  • Visual Design Lead
Deliverable
  • Figma Prototype
One

Project Overview

Over three weeks, we helped our client hone in on the short-term goals she needed to get to the next step of her project: creating a clickable prototype that she could use to secure funding for her early-stage startup. We conducted research, synthesized our findings, iterated increasingly high-fidelity wireframes, and assembled a component library.

Psst—hit any of those links to skip down to the section you're most interested in.

The brief

Our client's vision was a repository of green infrastructure projects that construction professionals could use to advocate for adding sustainable elements to ongoing construction processes. In order to help her seek funding for her early stage startup idea, we designed a clickable prototype in Figma to demonstrate how her idea could be realized.

My role

As the project’s Visual Design Lead, I lead our wireframing, visual design, and prototyping work, including creating a design system of colors, type styles, form elements and more. During research, I conducted user interviews and lead our journey mapping work. During information architecture, I helped define the project’s final search-first approach and standardized the content on project and product pages.

Our solution

Our Figma prototype showed how users could search for projects and products by tags. Users could search with multiple tags, yielding fewer results until they found the right project for them. Users could also create an account, save projects and products to their personal libraries, and submit their projects. We also created a way for users to indicate that they had used a project for precedent, which increases a project’s usefulness.

two

Design Research

Our research started with stakeholder interviews with our client. To verify that our client’s goals matched with user needs, we conducted user interviews with six industry professionals. Then we conducted a competitive analysis of six websites.

Stakeholder interviews

Our client was a fountain of information and gave us a crash course on the construction process, including the different specialists and the timelines involved. We held a whiteboarding session right after our first stakeholder interview to unpack what we’d heard.

Above, the results of our whiteboarding session after our stakeholder interview.
Defining Sitework

Sitework consists of everything around and on top of the building, including gardens, sidewalks, curbs, retaining walls, and more.

Regulatory context

Cities are increasingly requiring designers, architects, and engineers to incorporate more sustainable elements.

Time pressures

Construction timeframes are becoming more and more compressed, meaning there’s little time for research.​

Precedent

Industry professionals rely on precedent to make and support their decisions. Few are willing to try a project that hasn’t been successfully done by someone else first.

Designing for multiple purposes

There’s more emphasis on multi-purpose design. For example, sidewalks that give pedestrians a way to get around, but that also help mitigate flood risks.​

Project phases

The first three phases of construction Proposal, Schematic Design, and Design Development. Design Development is usually too late to add anything to a project.​

User interviews

To make sure our client’s ideas matched with actual user needs, we interviewed six industry professionals including landscape architects and civil engineers. Our main takeaways included:

Content is often un-actionable​

Often, information about green infrastructure projects consists of a blog post with lots of photos—with none of the detailed information that industry professionals need.​

Ideas need to be brought up early

Green infrastructure ideas need to be introduced as early as possible in the design and planning processes. It’s much more expensive expensive and difficult to retroactively fit them in.​

Homemade libraries

Industry professionals have their own methods of keeping track of projects and products that they're interested in. These include using spreadsheets, Google Docs, and other software. The onus is on them to keep the information organized.

There are assumptions to overcome

There are a lot of negative assumptions about green infrastructure that make buy-in hard to get—most of all that it’s an extra expense rather than an alternative way of accomplishing the same thing.​

"We want more information. What about the utilities? How did it all come together? We know it's out there."
- Cameron Campbell, Campbell Landscape Architecture
Competitive analysis

With a clearer sense of our users’ pain points, we looked at six websites that showcase construction projects. We wanted to get a sense of their information architecture through things like their navigation; their browsing and search experience; and what interactivity they offered. Later on, I drew design inspiration from these six as well as from Architectural Digest, The New York Times, and 8tracks.

Above, from left to right, abstracted versions of project pages on Landezine, Arch Daily, and GO Explorer.
Potential language and culture barriers

We noticed some potential language and culture issues. For instance, on Arch Daily, you would find retirement homes under the category “Asylum,” which might be a logical connection in other parts of the world where asylum has a different connotation. This would make search more complex.

Forums are rare

Only one of the websites, Archinect, offered a forum for visitors to chat with each other. The forum wasn’t specialized in any way; everyone was free to create a new thread about any topic to any category including a catch-all general category. There was also an integrated forum-specific search function.

Wide range of approaches to categories and search

When it came to information architecture, some websites had very long menus with very specific categories, while others were more streamlined and generalist. Tagging was common across sites. All of them had search functions, although Arch Daily went a step further by letting visitors filter before they submitted the search form. Designer Pages was built around search, but it didn’t allow you to filter your search results.

Project pages have a Goldilocks problem

Project pages tended to be either long and confusing to navigate, or shorter but lacking in detail. On some, large images stacked near the top force you to scroll far down to get to the writeup. Arch Daily has more detail, but don’t contain the same type of information page-to-page, making comparison hard.

Three

Synthesis

Synthesis kicked off with affinity mapping to identify trends from the user interviews. Based on those insights, we developed a journey map to consolidate our findings and then created a persona for our typical user. Together, these insights helped us clarify our problem and solution statements.

Affinity mapping

The first iteration of our affinity map was, unsurprisingly, very messy. But once we were able to see everything on our makeshift butcher paper whiteboard however, it became easier to see patterns.

We started the second iteration by clustering insights based on topic areas like cost and vendors. As we talked, we pushed ourselves to move beyond what our interviewees had said and focus more on the beliefs, behaviors, and expectations they were revealing.

Coping mechanisms

Our interviewees had developed a few ways of compensating for some much-need functionality. This cluster of insights included those techniques as well as the missing functionality driving those behaviors.

Bottlenecks

There were common barriers to that stood between our users and the information they wanted. These included NDAs that make sharing detailed information unfeasible and limited transparency from vendors.

Aspirations

Our interviewees had explicit requests like the ability to make apples-to-apples comparisons between projects. They also had behaviors that we believed reflected a desire to share information with colleagues.

Buy-in

It’s often difficult to get developers, clients, and other stakeholders on board with implementing green infrastructure projects. This cluster highlighted some of the underlying beliefs and needs our users are confronting.

Myth-busting

Cost is considered a barrier to green infrastructure projects, but we also heard that it’s not a simple story. If they’re effectively executed, these projects can save money. Moreover, some developers use them as selling points for their properties.

Journey mapping

In order to better understand the construction process, I asked our client to take part in a customer journey mapping exercise. During our stakeholder interview, she roughly explained the schematic design and design development processes, but here I asked her to break down some concrete milestones and pain points. This first iteration of the customer journey map also helped us identify some of the gaps in our knowledge, which informed our approach to user interviews.

Left, the results of our mapping exercise with our client, already hinting at chaos. Right, as we got to understand how chaotic the construction process can be, we also saw many opportunities for interventions.

We quickly saw that there were several opportunities for an intervention, partly because construction plans are always changing. A product may no longer available, requiring users like Dana to find an alternative, which can have cost implications that will require changes elsewhere and so on. Although our journeys were broken down into proposal, schematic design, and design development phases, we saw that a Sitework Hub could be a resource that industry professionals turn to at multiple phases.

User persona

Dana Gibson is an established landscape architect who values sustainable design and constantly looks for opportunities to incorporate green infrastructure projects into her work. In order to get buy-in from stakeholders, Dana relies on examples of similar projects to use as precedent for her ideas.

She currently learns about projects and products informally through tribal knowledge, shop-talk with colleagues, professional associations, and blogs. But the information Dana discovers is often incomplete, inconsistent, and disorganized. She wishes she had a reliable source of detailed project plans and inspiration.

Pain points

Doesn’t have a lot of time for research

Lacks a go-to library of precedent she can use to generate buy-in

Current sources of information are disorganized and lack technical detail

Has to combat misconceptions about the value of green infrastructure projects

Doesn’t have an easy way to bring in green infrastructure ideas early in the planning stages

Needs

Access to detailed project plans that go beyond photos and descriptions

The ability to filter projects by location or sustainability challenge

A better way to coordinate with colleagues and share her ideas and findings

A simple, automated way of keeping track of projects and products

How we can serve

Offer a large and searchable database of green infrastructure projects

Deliver story-bound content that can be used to generate buy-in

Enable construction professionals to submit their own detailed projects

Provide a place for storing and sharing information

Problem statement

Dana needs a comprehensive, go-to resource for fast research that will give her the detailed information she needs for planning, and provide relevant examples she can use to establish precedence when proposing green infrastructure ideas. With the right information readily at her fingertips, she can become a better advocate for sustainable construction processes.

Solution statement

Currently there is not a place focused on sharing green infrastructure design projects between landscape architects, designers, and engineers. We believe that by building this resource we will be able to facilitate the sharing of innovative technology and techniques. We will know this to be true when we see our product being populated and contributed to by landscape design professionals.

FOUR

Wireframing

With our findings consolidated, we were able to prioritize features based on our client's goals and our timeline. We then began generating several rounds of increasingly high-fidelity wireframes, gathering internal feedback daily and client feedback every few days.

Prioritizing features

Our client had a long list of features she wanted to include—long enough that we knew we couldn’t get to everything in 3 weeks. We used three rounds of dot voting to narrow in on our priorities, keeping in mind that her number one goal at this stage is to communicate her vision effectively to potential investors.

With that in mind, we didn’t build out a direct messaging or forum feature. We also didn’t build out a map view feature, believing it would work better in a second or third iteration of the website. We focused our time on user accounts, search, saving to a personal library, and submitting content.

Homepage wireframes

My first rounds of sketches and wireframes focused on the homepage and the project page, which I knew was likely to be the most difficult to lay out given the large amount of content on it.

One challenging part of this process was understanding the information architecture. I designed several ways that users could filter through projects, but the categories and filter options were unclear. For example, we spent 10 minutes with our client figuring out whether eco-type or climate zone was a better filter name.

Above, my second round of wireframes for the homepage. Below, the third round.
1. Hero image

One of my early ideas included having a large, featured project as a hero. I abandoned this once the breadth of possible projects became clear.

2. Browse-by-filtering​

User could use these links to browse projects by location, climate zone, etc. Testing showed these weren’t the best discovery tools.

3. Submit a project​

Most of Sitework Hub content will come from industry professionals, so I wanted to find a way to direct users to a Submit Project form.

4. About Sitework Hub​

Since the site will be brand new, I explored a couple of options for including a welcome blurb that could link to the About page.

5. Featured or recent products​

Projects were the priority, but we needed to leave room to showcase some products on the homepage, so we gave our client a few options.

6. Map view​

We decided a map view would be a more useful feature for a second or third version of the site, once there were more projects.

7. Featured projects​

I decided to feature only a few projects on the homepage. Since it’s a priority to help users find projects that meet their needs, I wanted to avoid having a long or endless homepage full of the most recent projects.

8. Search-first experience​

We ultimately decided to put search front and center, instead of trying to funnel users down any categories. I’ll talk more about these in the Challenges section.

Project page wireframes

Project pages needed to accommodate a large amount of text. A pleasant reading experience was nice, but it was much more important that users be able to find exactly what they were looking for, such as total budget or size of the construction team.

On the project pages, my two biggest challenges were keeping the sidebar uncluttered and easy to scan and honing in on what specific content needed to be represented on the page. After usability testing, we were able to sit down with our client and settle on those requirements.

Above, my second round of wireframes for the project page. Below, the third round.
1. Navigation

Because project pages can have so much content, I explored different options for anchor links, including a fixed sidebar (left).

2. Images

Carousels were a tempting, but they also took up a lot of space. As did adding images in between paragraphs. Another option was displaying them as a grid of thumbnails (right).

3. Sidebar

There was a long list of potential sidebar content. Figuring out how to accommodate it all without crowding the page became a priority.

4. Stacked sections

To get around the problem of long sidebars, I explored creating stacks of elements that would visually break up the page into easy-to-scan sections.

Review process

I presented each round to my teammates and got feedback on what particular parts of a design were working well, rather than asking them to pick a favorite. Once I had narrowed down to a few options, I presented wirefames to our client and asked her to give the same feedback.

Five

Component Library

In order to handoff a robust and flexible design file, we also created components and nested components. These included type styles, buttons, form elements, and more.

Primary Blue

#0D4D68

Primary Dark

#06232F

Primary Light

#9EB8C3

Secondary Gold

#E9AB17

Tertiary Orange

#CD5334

Background Gray

#FAFAFA

Serif Typeface

Domine

Used for headings and call-out numbers

Sans-serif Typeface

Source Sans Pro

Used for body copy, captions, and instructions

Searching and filtering

The problem

At first, we imagined users browsing by categories and then filtering and sorting within those categories. But each new category seemed to spawn more categories, making the site impossible to navigate without a map. Internal alignment was elusive; even our client wasn't sure whether one of our filters should be called "Climate Zone" or "Eco-Type."

Our solution

We settled on a search-first, tag-based approach. Users could search with one tag and then add more on the subsequent search results page. As they added more tags, they would see fewer and fewer results until they found what they need. And whereas our early versions had multiple dropdown filtering and sort options, we were able to use a single sort dropdown.

Below, a user is browsing through 43 projects that match all four of the tags she has entered into the search form. She no longer needs to worry about knowing where to look to find certain filters.
Below, rather than designing a direct messaging feature (out of scope), we took a lightweight approach and left it up to users to connect offline.

Precedent score

The problem

We wanted to show a project's precedent value. Our client confirmed our assumption that the more a project has been used to establish precedent, the more valuable it is. To generate ideas, we asked our client to undertake a design studio exercise with us, putting five minutes on the clock and rapidly sketching out ideas.

Our solution

For this version of the website, we decided to go with an option that would allow users to "raise their hand" to show they had used a project for precedent. Visitors could see a list of everyone who had raised their hand and could contact them directly via email or phone.

This lightweight approach let us capture this info without requiring users to take on the extra work of submitting their own projects. Having users contact each other offline also made sense for this first version of the website that didn't include a direct messaging or chat capability.

Sidebar organization

The problem

One of my biggest concerns was about displaying the potentially large amount of sidebar content on the project pages. I settled on a modular approach using collapsible panels that allow users to see as much sidebar content as they want.

Our solution

There were a couple of elements I wanted to always be visible on the page. That included the "Save Project" button since that was a key feature, and a panel of metrics about the project, including the number of comments and precedent score. Clicking on these numbers would take you down to that content on the page, improving in-page navigation.

Below, with the ability to collapse sidebar panels, users can tailor their reading experience.
More case studies
Visa

Designer & Prototyper

Kohler

Designer

IdentityForce

Project Manager & UX Research Lead