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.
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.
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 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.
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.
Sitework consists of everything around and on top of the building, including gardens, sidewalks, curbs, retaining walls, and more.
Cities are increasingly requiring designers, architects, and engineers to incorporate more sustainable elements.
Construction timeframes are becoming more and more compressed, meaning there’s little time for research.
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.
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.
The first three phases of construction Proposal, Schematic Design, and Design Development. Design Development is usually too late to add anything to a project.
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:
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.
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.
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 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."
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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
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.
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.
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.
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.
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.
User could use these links to browse projects by location, climate zone, etc. Testing showed these weren’t the best discovery tools.
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.
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.
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.
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.
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.
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 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.
Because project pages can have so much content, I explored different options for anchor links, including a fixed sidebar (left).
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).
There was a long list of potential sidebar content. Figuring out how to accommodate it all without crowding the page became a priority.
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.
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.
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.
Used for headings and call-out numbers
Used for body copy, captions, and instructions