Southface

Designed by Yiwen Zhao & Ramisa Murshed

at Bits of Good

About Southface

Southface is an atlanta-based nonprofit that promotes sustainable homes and communities through education, advocacy, and technical assistance. They have reached out to Bits of Good to seek support for developing a digital library to better organize their sustainable construction standards.

We are building a digital library to serve as a centralized, editable, & searchable repository for technical building standards. There is also an embedded project plan builder allowing users to easily consolidate & distribute technical information to their team.

Project Scope

Understanding Southface’s Needs

At first, we were given a sheet of description that outlines what Southface is looking for as well as their problem statement. Southface/Earthcraft currently has a giant PDF document that contains all construction standards to build all sorts of buildings. It is hard for users to access and understand. The PDF also contains information that is completely out of scope for some users to understand. The users are project managers who are generally technical advisors or architects and construction workers who are building on job site. Southface wants the standards to be made into cards and organized in categories and tags that allow the users to easily search and lookup.

Southface User Interview: Understanding current workflow

We met and interviewed our point of contact at Southface for the first time to get a better idea on the current workflow of the project creation process. We also wanted to make sure that we’re not making any assumptions from the project descriptions that we received.

Steps required to publish a project plan & tasks analysis

It takes a lot of effort to filter through the massive PDF of standards. It also poses a long learning curve for new Earthcraft members who want to participate in building sustainable houses.
Pictures can become inconsistent. There is no control over the quality of pictures being added to the project plan. Pictures can also sometimes be an inaccurate demonstration of what is supposed to be done for a specific standard.
Commenting can become repetitive. The same picture for the same standard should have the same associated comment.
The format of the project plan can become inconsistent. In addition, taking the time to format the document is simply extra efforts.
The construction team either prints out the project plan or view it on their digital devices (iPad). There is currently no universal way of accommodating the different use of mediums for construction workers reading the project plan on the job site.

Initial Design for Digital Library

This is our initial design for the standard view of the card. It has the title of the standard and a brief description or comment associate with the standard that works as an explanation. Each standard is also linked with multiple tags that helps users to filter and search for the standard they want without remembering the exact title of the standard. The add button adds the standard to the project plan.

This is our initial design for how the cards would be grouped together. All card would be grouped into categories. This is also the default view when users visit the site.

After clicking on one of the categories, all cards/standards within that categories would show up. This is where users can perform all above mentioned card features such as adding cards to the project plan, etc.

Feedback + Design Critique

During our second meeting with Southface, we presented our initial design and interviewed users for feedback. Southface liked our design as it aligns with their vision for the digital library. However, there are still some features they would like to change and add:

Need to present the categories within the three main categories (multifamily, single family, commercial).
Need to have a rating system for Southface to understand the quality of the pictures.
There should be no descriptions of the standard. The digital library needs to be image driven for legal issues.

For the next iteration of design, we have came up with two different card views and two sets of user interactions for users to add comments and add standards to the project plan.

Concept 1

Concept 2

By Ramisa

By Yiwen

The vertical card design allows the users to do everything in one place. They can view the pictures of the standard by clicking on the arrow key, add/view comments that they have made, and rate the standard out of five stars.

The horizontal card design allows the users to click on the card to open up a modal view for reading more detailed information such as viewing all pictures and the full comments.

Usability Testing

We presented our concepts to Southface, and they liked the design of a horizontal card. They also enjoyed the interaction of clicking on the card to see more options for concept 2. However, there are more insights that we got while talking to Southface and conducting usability testing with an architect who is a project manager:

The rating system is too hard to differentiate if a picture is good or bad quality.
Users may want to add multiple comments on one card.

To address the first problem, we have decided to change the star rating to a simple thumbs up and thumbs down. The reason is because all Southface care to see is if the picture is good quality or bad quality, and that is determined by if the users think the picture is a valid resource for the standard. The star rating was also confusing due to the rating was applied to the entire standard, not for the individual image.

Project Plan Builder

In addition to the digital library, the project plan builder is also a big aspect of what our client want out of the platform. The purpose of a project plan builder is to introduce an efficient way that grabs the information readily available at the digital library and compose them in a plan for distribution on job site. At this stage of the process, we felt that we have developed enough of digital library to have an understanding of how the plan builder should complement the library itself. However, we still have many questions that we wanted to clarify. Thus, we continue to develop our concept for the project plan builder in the user interview. Below are the key questions that we got clarifications for:

Default view of the Project Plan Builder. This is where the cards live after users click on the add button in the digital library. They can download, print to pdf, and save the plan in the cloud.

Edit view of the Project Plan Builder. Users can delete entire standard from the project plan by clicking on the cancel button on the top right of the card.

Once users have saved the project plan, they live in the saved project plan page. Users can view all of their saved plans by scrolling down the page.

To delete certain images from the project plan, users can click on the card and click on the cancel button at the top right of the image.

Is there a specific order each card in the project plan needs to be in?

Alphabetical order via the card name will be fine

What actions should the user be able to take to share/distribute the project plan?

Download or print to pdf.

Should project plans have names that are stored in the project plan builder?

Yes

Is the project plan builder meant to be the main part of the platform, or is it secondary to the card library?

Secondary to Card Library

Should users be able to create multiple project plans at a time?

No

Should previous project plans be saved/stored in the builder for users to reference in future project plans?

Yes

Are there any “preset” project plans that would be good to include, or should users be adding standards themselves?

No

Initial Design of Project Plan Builder

Further Usability Testing on Digital Library

To put an emphasis on an image driven digital library, we have decided to add the ability of viewing the image in their full resolution with the correct aspect ratio. The users can click on the image in the modal view to see the image in its full size.

We have discovered an interesting issue with the users wanting to constantly check the standards they have added to the project plan. With the current design, users would have to click onto the Project Plan Builder tab, look at the standards they have added, click back to the Digital Library, then click through all the categories to add standards again. We developed a shopping cart concept that allows the users to get a preview of what is currently in the project plan without leaving the entire Digital Library. We have also added confirmation that indicates the user have successfully added the standard to the project plan.

We got some additional clarification from our client Southface for the comments feature. In addition to the user comments, they would also like to have a general comments made by Southface themselves.

Image View Development

We have also discovered that the thumbs up and thumbs down icon suggests an unclear purpose of its use. One question that got asked a lot was “Why am I liking this photo?“ The thumb up and down icons are strongly associated with like and dislike in social media. A clearer indication is needed to gather information on if the picture is good or bad quality.

Moving towards High Fidelity

At the end, we needed to fit the design to the branding guide of Earthcraft. We drew design inspirations from the current Earthcraft website and followed their branding guide for our high fidelity prototypes.