Community Land Trust — A UX Case Study

Responsive Website Design Project for an Affordable Property Development Company.

Hunter Winterhalt
Sep 4, 2018 · 8 min read
Mayor of Vancouver speaking on Community Land Trust

Who They Are:

Community Land Trust is a non-profit real estate development group of societies that preserves affordable housing for generations to come. We buy, create and redevelop non-profit and co-op housing, ensuring it remains permanently affordable for current and future residents with low to moderate incomes.

A quick overview of Community Land Trust, their mission & values, and their projects.

Goal:

To design an attractive & fully responsive website that caters to multiple personas, and make it quick to navigate to the persona’s desired area of the site.


1. RESEARCH

Client Kickoff Meeting

We started off this project by meeting with the Stakeholders of Community Land Trust in order to determine the project scope & business goals. The Stakeholders needed a website built and designed from scratch. They stressed the importance of the different types of users that will be using the site, be it people looking for a home, future partners looking to hire CLT on a project that they bid on, or the media browsing their site.

Our meeting was wrapped up with a clear definition of the business goals for Community Land Trust, and what they were hoping to achieve with the site.

Business Goals:

  • To promote the Community Land Trust as a model for affordable housing

Domain Research

Once our stakeholder meeting was over, and our business goals were defined, we went straight into domain research. We did some digging on direct competitors to Community Land Trust, and also some big players in the for-profit property development market space.

We wanted to get a feel for competitors websites. We wanted to find some things that we could do better and leverage in comparison to our competitors. We looked for not only functionality and flow of our competitors websites, but also the feel of the interface delivered to the user.


Logo for Catalyst Community Development Society
  • Cluttered news section

Logo for Makola Development Services
  • Site is quite bland

  • Overly Visual

Surveys

We put out a survey to get some insight on what information potential members/tenants would like to see when looking for affordable housing. This included asking some questions that gave us insight on acceptance criteria & demographics.

Interviews

During the interview process, we had the opportunity to interview multiple high level individuals That could be considered future partners, or someone that have relevant experience in the type of role we are looking to target. This included facility managers for municipalities, general contractors, Regional Managers, and non-profit partners.

Affinity Diagram

Affinity Diagram

We took all of our findings from the surveys and interviews, and performed two different versions of an exercise called an Affinity Diagram.

An Affinity Diagram is a tool that gathers large amounts of language data (ideas, opinions, issues) and organizes them into groupings based on their natural relationships

From this exercise we were able to determine the key findings & commonalities for our specific users. This led us to a clear understanding of our users’ demographics, motivations, goals, and frustrations. And Ultimately, our official user personas.

Meet Our First User Persona: Jerry

Meet Our Second User Persona: Samantha


2. PLANNING

Use Cases

Because of the Affinity Diagram, we were able to determine the things that the website needed to do in order to solve our user’s frustrations

Card Sorting (Information Architecture)

We used an exercise called card sorting to organize the pages and content into the most intuitive possible way for users. And what better way to do this than to have users organize things themselves.

Users were given content and page titles, with no hierarchy whatsoever, and were tasked with grouping each item into categories that made sense to them. Once finding the commonalities between all of the card sorts, we got underway planning out a sitemap that would be very simple for our users.

Multiple users didn’t quite understand the difference between “Find a Home” and “Properties” so the properties page was renamed to “Portfolio” as to make a very clear distinction between the two, so that Jerry and Samantha didn’t end up in the wrong area of the site.

Sitemap

Userflow

Once we had our Sitemap planned out, we got to work on a user flow. We combined the Sitemap and the acceptance criteria from our user personas to create a user flow that was intuitive and fast when using the features and call to actions needed to accomplish our users end goals.


3. DESIGN & TESTING

Design Studio

With our planning out of the way, we moved onto the fun stuff. In collaboration with the design studio, we put our heads together an designed multiple versions of some of the key pages in order to come up with the best possible interface ideas, while utilizing the necessary features to get the job done. It was really productive to get multiple designers together to create the best product we possibly can. Once we had our agreed upon layouts, we started the wireframes.

Wireframes

We came up with some wireframes not only for our agreed upon screens from design studio, but also wire-framed almost every screen on the site.

Rough Wireframe Examples
Hi-Fi Paper Wireframes

Once we had all of the rough wireframes done, and the layouts for all of the pages designed, we rendered the rough wireframes into a higher quality paper wireframe for the paper prototype test.

Paper Prototype

Testing

When testing the paper prototype, users were given 3 tasks:

  • Provide us some information so that we can help you find a home

Iterations

Our paper prototype tested generally well. Only a couple changes needed to be implemented.

1. Users mentioned that they would like to see a validation response after giving us information so that they knew what would happen after they sent the email. Therefore, a thank you response was introduced at the end of the animated form.

2. Users preferred “current” as opposed to “in progress” in the tabs menu of the portfolio.

Mid Fidelity Prototype

Once we introduced the changes from the paper prototype testing, we got started with making the digital mid fidelity layouts in order to test a working prototype of our designs, and get more immersive feedback from testing. We created the responsive layouts, in order to test the desktop version and the mobile version of the website.

Testing

When testing our prototypes with the changes from the paper prototype testing sessions, we gave users the same tasks, however this time they were to perform with the desktop & mobile versions of the design. In the mobile version of the testing, users were able to test the prototype on an actual mobile device.

Iterations

Once again our design tested well, and only a couple iterations were needed to be implemented in order to deliver a more intuitive experience to the user.

- Change subheading to animated “Let Us Help” form in order to make it a little more clear that they CLT won’t actually be a liaison in getting the user into a home

- Add “Fraser Valley” to the “Metro Vancouver” search filter in the map function of the Find A Home Page

- Mobile layout was too squished and needed to be spaced out vertically

Hi-Fi Screens

Once our iterations were Implemented, and our final mid fidelity screens were complete, our UI team polished off the design by making it look truly great, and give the site a welcoming but professional look, and ensuring that the feel of the site was truly delightful for the user.

4. PROTOTYPE

We took the completed, high fidelity design screens and created a fully functional prototype for both the desktop & mobile versions of the site. The prototype is meant to follow the user flow of our personas all the way to their end goals.

Hunter Winterhalt

Written by

Entrepreneur | Designer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade