Overview
Project Scope: Responsive Site, 3 Week Sprint, Client Project
My Roles: User Research, Information Architecture, Interaction Design
Client: Sitework Hub
This project was brought to us by a client during my time enrolled in General Assembly’s user experience course. Sitework Hub is a proposed platform for landscape architects, designers, and engineers to find and share green infrastructure building techniques and products. “Sitework” is a term used in the construction industry to refer to anything on the project site that is not the actual building itself.
The Brief
Starting with just an idea for a website we built an interactive prototype of a responsive site that allows users to search, read, create, and save detailed reports on green infrastructure projects and products.
“At one point rain gardens were a novel innovation and now they are mainstream.”
-Jenny Janis, Landscape Architect
The Problem
When a new project opportunity is presented to an architecture firm they are on a deadline to get a design proposal out the door and sitework can take a backseat to the actual building itself. The Architects and Designers we spoke to told us that they want to include green infrastructure anywhere possible, but having limited time makes it difficult to do the research they need to incorporate new technologies and techniques into the project.
Our client Jenny has been working with other colleagues to build a library of green infrastructure projects and products and she was ready to get them out into the world so that they could be shared with other landscape architects. Her problem was how to structure and build a website that would get other professionals in the industry to contribute to the website and share what they have learned.
The Solution
We created an interactive prototype of our platform that allows users to search, find, and research detailed green sitework projects and products. By doing this we gave our users a place to showcase their own work and the positive impact that green infrastructure projects can have in their communities. Having a place to share new technology and building techniques allows other landscape architects to show stakeholders what’s possible with green infrastructure.
ROLES AND RESPONSIBILITIES
On my team of three my roles included information architecture, researcher, and interaction designer. My goals were to give the site structure and clear usability.
Discovering how to do this included User Interviews, Research Synthesis, Site Mapping, Ideating, Design Studio & Sketching, Usability Testing, Wireframing, and Prototyping.
Discovery Process
Stakeholder Interview
To kick things off we brought our client in for a meeting to discover what the big picture was, our top goals, the user’s needs as she saw them now, and how we would be measuring our success for the project. Takeaways from this meeting were learning what sitework was and why it was important to our stakeholder to make green infrastructure more accessible to other professionals. Our client showed us some examples of what is currently available for landscape architects. She also walked us through the typical architectural design process which allowed us to build a customer journey map showing when during the design process a user would come to sitework hub and browse the projects.
Takeaways
- “Sitework” is everything around the building including landscape and the public portions of the structure like sidewalks and greenspaces.
- Green infrastructure is becoming a requirement by cities and urban developers for new projects.
- Because Green infrastructure projects are new it’s difficult to get buy-in from stakeholders without being able to show precedent for it’s impact in the community.
- Discovering new technologies and techniques for construction is difficult when you only have access to internal resources for detailed plan information.
Photo of our whitebaording session after the stakeholder interview.
Competitive Analysis
In our initial product research we wanted to know what sort of resources were currently available to users interested in finding plans and examples of green infrastructure projects. To do this we chose some of the most popular architecture websites and used the Nielsen Norman Group’s 10 usability heuristics for user interface design to evaluate the features on the sites.
Key Takeaways
1. Menus
Large mega menus make searching for things that are similar to your project difficult, the search and filter options are not intuitive
2. Project Submission
When submitting a project the forms were not optimized to make sorting projects easy for the curator of the content to make searchable, they were mostly made up of large text blocks.
3. Clarity
Projects, products, and advertisements were not clearly delineated. It was difficult to understand if what you were looking at was a real world project or a proposed design. Many of the ads and products look very visually similar to a cover shot of a project.
4. Detailed Plans
It was difficult to find detailed plans showing how the project was actually constructed and what materials were used. There were glamour shots of the project but the projects lacked depth.
5. Scope & Precedent
Being able to determine if a project is within a similar scope to a project you are working on is difficult. Having a way to filter by scale, see precedent, and the results from a design would be helpful to our users.
Users and Audience
Our target audience will be landscape architects, civil engineers, and landscape designers who are looking for inspiration as well as detailed information on how to implement new ideas in green architecture.
Interviews
We connected with our key users to find out how they use online resources to help them in their design process. Our client has been working in landscape architecture for over a decade and brought us a list of contacts that she has made over the years. We reached out and were able to talk to 7 professionals including civil engineers, landscape architects, and urban designers.
Key Interview Questions
What is your role in the construction process?
Take me through your most recent project. What were the steps?
Where do you usually go to find different kinds of materials, products, and contractors?
How would you go about getting buy-in for green elements in your design?
If you worked on an innovative green infrastructure project, how would you go about sharing your learnings? What obstacles would you encounter?
Synthesis
Affinity Map
We collaborated to build an affinity map based on what we learned in our interviews to pull out common themes we heard from our users. Our interviews showed us that most users had similar coping mechanisms due to a lack of shared standardized knowledge.
Top Takeaways
If sustainable infrastructure is going to be a part of the project, it has to be integrated into the plan early in the design process.
Seeing beautiful renderings and photos is nice but our users need detailed information on how a project was built so that they can get an “apples to apples” comparison of feasibility for their own project. Developers and stakeholders like to be shown that something will work before they invest, they don’t want to be the first one to try something.
Most of our users have an internal database that they use to pull project ideas from. This was a coping mechanism to keep track of what is available to them, however it is limited to only the people they work with directly. There is very little shared knowledge with others outside their own firm.
New technology usually comes from direct contacts that they already work with.
“Okay, that looks nice but how do I implement it?”
“We are on a tight deadline to get a proposal together and sitework can take a backseat.”
“Being able to read the story of how someone else sold developers and stakeholders on a green project is helpful to give her ideas about how to get buy in on her own project.”
Persona
Using the information we gathered during interviews and affinity mapping we began to build a persona. The goal of our persona is to encapsulate the common experiences we heard and create a user that we could craft a story around and build a product for, based on our users needs.
User insights
How We Can Serve
Doesn’t have the time she wishes to devote to research at the start of a project.
To get buy-in for new ideas we need to be able to show that the plan or technology has been proven to work in the field before.
It’s difficult to find direct comparisons of projects that are similar to the one I’m working on.
Keeping track of ideas and products that you would like to use is difficult when projects have multi year timelines.
Has to combat misconceptions about the value of green infrastructure projects.
Offer a large and searchable database of green infrastructure projects.
We created a precedence score that gives users the opportunity to see how a project has been done in practice by other architects.
Detailed project pages with standardized categories that users can search based on specific use cases.
Giving users a place to save projects and the ability to share them with colleagues online allows users to see solutions by anyone in the world.
Provide a place to connect with other landscape architects.
M.V.P Features
Once we determined what was important to our users to find on the site and what our stakeholder had on her wishlist, we started to prioritize the features needed to allow our users to navigate the site and use what we have to offer. There were too many to fit into our 3 week time frame so we had to choose MVP’s to focus on. To do this we wrote down all the possible functions that our users let us know they wanted. We then conducted a dot voting exercise to prioritize them into must-haves, should-haves, could-haves, and won’t-haves.
Development
User Flows
To get a high level idea of how and when our users would navigate the site and accomplish their goals we created user flows to show what pages and utilities we would need to create. To do this we spoke to our stakeholder and interviewees about the construction process and when during the process they would be looking for design inspiration. We created customer journey maps to help visualize the process.
Understanding the landscape architects design process
Detailing the customers feelings and goals through the process
Main Pages
We then went into more detail trying to discover what the various steps in the design process would be. We wanted to find the pain points in the process and where our site could be most useful. Using this information we were able to determine our most important pages on the site.
Home page
Search from Home Page
Projects Search and Single Project
Products Search and Single Product
Profile
Project Submission Page/Flow
Saved articles page
Account Creation Flow
Precedence score
Sketches and Wireframes
We met and conducted a few rounds of sketch design studio to generate ideas about how we were going to display our pages.
Sketch Feedback
The homepage gave us the most opportunity to flesh out the personality of the site. We wanted it to feel professional and simple to use.
The Hero image at the top gave us several opportunities to iterate on how we wanted to focus the sites purpose. Some ideas we tested were making a map with locations of green infrastructure projects, a large featured projects banner image, and a search focused instructions box.
Laying out the content on the home page was also an area that was wide open to us. We went through a sketch studio with our stakeholder and received important feedback on how she felt about the sites main features and purpose.
We created wireframes of our pages based on key navigation points in our user flows. We then brought our wireframes to users for some usability testing and feedback.
User Testing & Feedback
User Testing
We tested our mock ups with 5 users who work in landscape design and civil engineering. We gave them task scenarios and observed them using our site to see if it was intuitive to use. We then asked for feedback or features that would make their lives easier when finding resources.
Precedence
Our users told us that often developers and stakeholders don't want to be the first to try something new, they are the ones with money on the line after all and don't want delays. Having examples to show stakeholders that a new technology has been used in the real world can go a long way to getting buy-in on a new project. We designed a precedence score that allows users to give verification that they have used this technique or technology and share the results.
Search and Filter
During our testing we had side bar menus to navigate and filter through the different projects and products. Our users had issues with these because they were not necessarily looking for hospitals or malls when looking for something like stormwater management in parking lots. In those cases the purpose of the building was not as important as the purpose of the parking lot. The menus of preselected categories didn't give enough freedom in the initial search. We decided to go with a tag based search first approach. Our users also told us they were more interested in filtering based on scale, such as the size of the project in acres, cost, or climate zone.
Scope Badges
Our users told us that one of the most important factors they want to see when comparing projects is the scope of the project. The size of the project is one of the easiest ways to make a quick comparison because sites can range in size from a few acres to hundreds. We determined that by making projects scannable from the filtered results using badges we would be able to help them understand which projects are most relevant to them. The badges show the scale of the project based on what is entered in the submission form, and users are able to select ranges from the drop down filter at the top of the page.
Deliverables
Desktop Samples
Mobile Samples
Retrospective
Outcomes
In a three week sprint we were able to deliver a lot of new insights about our users as well as an excellent working prototype for our client to present to potential investors.
Challenges
The biggest challenge we faced was the lack of constraints that we started with. Our stakeholder had an idea for a website and some samples of the types of content she wanted to have outside of that we were completely free to do anything. I believe we were able to deliver on the core features that she needed mapped out to get the project off the ground. We also had no idea what sitework was when we started and now I can recognize it in my daily life so I learned a lot about something I had never heard of and was able to translate what I learned into a useful tool for people in an industry I had very little knowledge about.
Lessons Learned
How to push myself early in the design process to keep iterating on an idea until I came to a satisfying solution. During the design process setting up the information architecture was really a challenge when it came to navigating the site. The mega menus that I saw on many other sites were just too confusing. While I could understand why they were the solution that others chose they presented a lot of problems. The main issue is that they are just to large and unwieldy. Having a lot of options in a big menu seems nice at first, but when you are trying to look for things based on the project type categories and you have tons of categories to choose from you end up missing out on a lot of projects that are close to your project. By searching for terms that are included as features of the design rather than the type of building I was able to give our users a more broad way to look at use case scenarios for technology rather than building types.