Community Land Trust — A UX Case Study
Responsive Website Design Project for an Affordable Property Development Company.

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.
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
- To build partnerships for future Community Land Trust projects
- To capture information and emails of potential members/tenants.
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.

- Cluttered news section
- Not too clear that you can find a home through their site
- Portfolio Requires a lot of scrolling

- Site is quite bland
- Very unclear that tenants can find a home on their site
- Easy to lose users with navigation
- Not a very visual portfolio
- Body text is hard to read

- Overly Visual
- Overwhelming Content
- Very Expensive Feel
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
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


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.




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
- Find the budget on a specific portfolio piece
- Read a press release about the Community Land Trust
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.
