Case Study: Responsive Web Design + Client

This case study was the most successful project in dealing with a client. There was a wonderful group dynamic between my team and the web developers, as well as with the client.

Project 4: Catalyst Community Developments

Goal
Creating a responsive web design for the client (Catalyst Community Developments) that shares their story as well as showcase who they really are.

Tools
Slack
Google Drive
Invision
Sketch

Catalyst Community Developments
Catalyst Community Developments exists to leverage real estate assets for social change. The do not only build buildings but also assist and own their own properties with partners. Catalyst wants to make sure that everyone knows that they are NOT FOR PROFIT.

Catalyst has created an innovative model or real estate development that offers fair and reasonable returns to its investors, social and financial benefits to its project partners, and affordable rental housing for households with low income. The model leverages the high value of BC real assets to obtain community.

They wish to develop and implement strategies to build the Catalyst Community Developments Society (Catalyst) brand and reputation that tells the Catalyst story. To also build awareness with potential non-profit partners, government partners and equity investors to work with Catalyst.

Link: http://catalystcommdev.org/

(Full Home Page)

Brief
As of March 2017, the Catalyst website does not reflect all of who Catalyst really are. This is where we come in and try to solve that disconnect.

Paired up with the capable User Experience (UX) team, Wendy and Maria, we were briefed on how Catalyst’s personality and where its roots came from. We went through the Catalyst website and we had our own take on what the website lacks. First impressions was not too bad, but how Catalyst was presented was really vague.

Client Interview

We met with Maura Chestnutt, Office Manager of Catalyst. Me and my team got to know how Catalyst works. Not only was it an organization in helping low income earners to have housing but they also create an opportunity for investors to give back at the same time.

She shared about the charisma the leader, Robert Brown, makes on people around him. She explained that when Robert would talk about what Catalyst is everyone would be more willing to join in. The good cause was translated through him as a speaker and everyone understands Catalyst.

Beginnings
Robert has been a developer for about 20 years, owns Pacific Sands and Ocean Village in Tofino. He was approached by Vancity (Enterprises) to develop Dockside Green, Victoria.

There was an opening for someone to address affordable housing. So, Robert developed the concept of working with not for profit that own land, like churches with lots of land, parking lots, and diminishing congregation. In that situation, the not for profit organization only have the choice of selling to a market developer and getting money, which for some does not address the mission of the church.

“So Catalyst partners on an equal basis that the church provides the land, in terms of it’s equity, and Catalyst brings the cash and market experience as a partner. Then the church can continue with its mission of serving its community.
We’re working on a project on 41st and Cambie with the Oakridge Lutheran Church. That will have a sanctuary on the second floor with community service base, and it will have some affordable housing above that which will be owned jointly by the church and Catalyst. Then there will be a retail area on the ground floor.”

Making Strong Ties
Dating Stage
Maura also explained that the business model of Catalyst is unique, where their “dating phase” stage between them and their partners are not to be taken lightly. This is Catalyst’s feasibility stage where an assessment of the practicality of a proposed project. A contract if formed playing out the different scenarios what that could look like in the future.

This is when Catalyst makes sure that everyone who is willing to partake on the venture is truly in it for the long haul. The best part is some of Catalyst’s projects are owned and operated by them.

So basically, they are in it for the long haul already, they just want to know the partners are also aligned with the same goal before pushing through the development of the buildings themselves.

Pre-Development Phase
Once Catalyst knows you all in, then they hire contractors and such. At this stage there’s no building to invest in yet, so this is where Catalyst wants to focus on.

“the major goal is not to increase the partners wanting to do development but attracting social equity investors”

Conclusion
I was particularly enlightened on how Catalyst also take on the role as a consultant. They love to educate their clients on how to go about the real estate business ventures. Some of their clients are church organizations wanting to maximize their real estate assets.

“No cash, no experience…it’s scary. Because the congregation is thinking about taking their own real estate development project and is daunting. So it’s an opportunity to do some good in the community and it’s not social housing but affordable housing too.”

20 Second Gut Test
After the extensive interview, I conducted the 20 Second Gut Test with Maura. This is a test with random pictures on a slide that would be shown on a 20 second interval. These pictures would be rated from the least to the most favoured based on the client’s gut, hence the name.

Before leaving Maura suggested that the test should also be given to ​Leslie Boldt to hone in on the design of the website. So we sent her a link to the power point and the answer sheet as well to get her feedback on the test.

Surprisingly, both Maura and Leslie’s Gut Test were similar. They were aligned in what they see the website should be.

(Best Picks of 20 Gut Test Results)

Problems
As stated on our first impression of the Catalyst website, we thought the copy (words used) were a bit vague on what they did. Within the website, there was too much vision-mission statements around and not enough actual words to describe what Catalyst does properly as an organization. The labels also were confusing specially when we wanted to navigate around the Catalyst site.

(What We Do Page)

Scope And Limitations
My team also talked about the scope and limitations of the Catalyst project. We confirmed with Catalyst that this would be a 3 week project and that not everything on their wish list would be taken cared of.

In turn, they also stated the “must haves” they wanted by the end of the 3 week project. Catalyst also stated that the logo can’t be changed as well as the colours since that was set on stone.

(What Do We Really Need?)

With this in mind, we went on to the next stage which was to create questions for the possible users of the Catalyst website. The target audience of the Catalyst website were for investors who want to give back and to those organizations who want to partner with Catalyst to develop their projects. Then there’s last audience, are people who want to know more about Catalyst as a group.

RESEARCH

User Interview
We finally focused on user interviews. We had a hard time researching who we could interview as a user in such a short notice. It was hard to look for social equity investors to talk to but luckily Maria had already experience in the real estate world.

So she took the lead in contacting and guiding the interview questions. I also gave my questions to verify if what Catalyst wanted aligned with what their users wanted to feel.

Design Inception Sheet
While Maria and Wendy interviewed the Catalyst users, I immediately created the Design Inception Sheet. This is where I had to figure out “WHY” Catalyst wants from their website. Based from the initial meeting and the with our Catalyst Client, Maura and Leslie, they explicitly stated that the website should be friendly and open just like how their leader, Robert is.

Why
The middle “WHY” is basically the driving force that propels the reason of the what Catalyst wants to show. Based on the interview with Catalyst, their main “why” is “TRUSTWORTHY”. This is the whole reason why they wanted to create a website in the first place. For the audience to be enticed to read through the massive information Catalyst has for them.

The audience need to feel that the website is first and foremost, trustworthy. If the Catalyst website does not feel trustworthy, then why would anyone stay. I called the art direction “THE FREEDOM OF TRUST”. To attain this feeling in the website the mood must be set.

Mood
1. Responsible and Safe
Because Catalyst is not for profit, this should express that they are a safe bet when it comes not being a money hungry developer. With that, being responsible of other people’s investments are not a worry because Catalyst also invest in their own developments.

2. Respectable, Reliable and Established
Catalyst have people who have been in the real estate industry for 20+ years, and some with more. With this knowledge and experience, it’s safe to say that the people running the operation are reliable and established. Based on the people who personally and professionally know the Catalyst leaders, they can also be deemed as established with their peers.

3. Strong but not pushy
This statement is for how Catalyst peruses their clients. They feel strongly on what values they hold on to. These values are presented to the client in a way where Catalyst lets the clients choose if they feel that Catalyst is the best developers to handle their land.

4. Straight to the point and dependable
For Catalyst, they would not want to give you the run around since time is gold. They layout the plans and let the clients know that if the client were to choose them then Catalyst will be there until the very end of the project. Catalyst will even put their money where their mouth is, so to speak, and venture on the client’s project if they wanted to. Of course, this means that there’s a “Dating Phase” where Catalyst implements to understand if in the long run the relationship will work between the client, developers, and investors.

5. Balanced with information and visual appeal
Knowing that Catalyst will have to explain their “formula” of how they would work, they are thinking of having info graphics to also share their story. This is probably the hardest part to do because too much information will overwhelm the clients and too much visual appeal will be messy for the eyes.

6. Loyal, Faithful, and Caring
This is the part where the “love” of the community comes in. Catalyst not only wants to develop elegant buildings but also developing a community. There is a heart at the center of Catalyst.

7. Selfless and Inviting
Lastly, the mood that should be the forefront should be selfless and inviting. The Catalyst website should be selfless in sharing their information to the point where the audience or potential partners can just ask for more information if they wanted to. In this, Catalyst wanted to have more calls coming in and having a person to person chat with the clients. The website should also have the mood of being inviting, as stated before, who will want to listen to you if one is snobby? Specially if Catalyst is not for profit.

Visual Language
Color
These colors have to have the feeling of popping but not chaotic. This is because we want to entice the eye of the audience but not too much since we don’t want to be messy. I wanted also bright and light colors since I wanted to show that Catalyst is not burdensome as people think developers usually are.

Space
Open, like an open concept room feeling, but not to the point of feeling that one is unhinged and that there are no boundaries to be had. Just like a room it has to be clean and not a lot of clutter, as well as bright to enhance the feeling of being “free”.

Shape
As for the shape, the mood should be sharp, since I want to express that Catalyst is always straight to the point. But also not harsh because Catalyst wants to just be sturdy by their values and standards are in dealing honestly with clients and partners.

Movement
I chose the movements to be soft, where the eye can follow naturally and not erratically moving too fast. But also not too soft where it feels flimsy and not reliable to be sturdy in the long run. Also the mood should be light, since the Catalyst website should be inviting in the first place.

Affinity Diagram

The team also did an affinity diagram where a set of keywords from the user interview written on post-its and are placed up on a board. The keywords then were rearrange and group them together and form a category in order to label them as how the team sees fit.

(Affinity Diagram of User Interviews)

Maria, Wendy, and me categorized the colours that the users kept on saying to represent trust, and majority said green and blue. We also found that the users wanted a font that was readable.

The “mood” was addressed. The users wanted the website should be straightforward and should state the intentions instead of having very indirect by using lots of mission and vision statements.

Users’s words to depict preconceived notions of what real estate developers are in general were deceitful, self-centred, scheming, arrogant, and such. These words are exactly what the website should not feel like.

With all of the information I continued in creating my moodboard.

Mood Boards

After my team mates, Wendy and Maria, finished with the interviews, I read the transcripts to check if the research corroborated with the Design Inception Sheet and with what the Catalyst also thought the users wanted.

I then created a mood board that would compile all the creative research, user interview, and client interview together. I had 1 week before

Freedom of Trust
The first mood board is my creative treatment of what the mood should be like as to what Catalyst has expressed and in a way the Catalyst users will understand.

(Mood Board 1: Freedom of Trust)

I added the colour blue since it represents peace, relax, and charisma. Keys, open doors and open fields and sky give the feeling of being free even if one is doing arduous tasks like helping people who don’t know about real estate build and operate affordable housing.

The growth of the seedlings makes you feel that something small will grow to become something bigger. This is to connect back to what Catalyst wants to promote in the real estate development community — their business model and how to give back to the community.

Lastly, the feeling of flight when you see the birds flying on the famous V formation. I loved how it makes it feel like Catalyst’s president — Robert — is in the forefront of the pact and gives lift to others before him. Catalyst already has a good leader and good functional formation. But based on the inevitable future outcome of having Robert to retire, someone has to be in the front. This is where I wanted to share the driving idea that the website should be the front of the pact being like Robert and not just a place of information.

Adventure Venture
The second mood board is the second option of having the Catalyst colours.

(Mood Board 2: Adventure Venture)

Having the brown more prominent, I chose the mood of being adventurous.

The notion of engaging on an adventure that one has not yet ventured on is daunting, like non profit organizations taking on their own real estate development. Then having a guide to take you through that with that knowledge they have gives of the trust element that Catalyst has with their partners.

Working together and having that common goal is an age old tradition, like the idea of the wheel, that can’t be reinvented. This idea will propel people to move forward and have a successful relationship which Catalyst also aims in doing their “dating phase”.

Client Feedback
These mood boards were presented to the clients, Maura and Leslie. They both agreed that mood board 1, Freedom of Trust is what Robert was all about. Mood board 2, Adventure Venture has the story that they would like to tell, but did not love the colour brown at all.

So with that I showed them the Style Tile that accompanied these 2 mood boards.

(Style Tiles)

Style Tile

These icons and fonts were the ones that best represented the mood boards.

(Final Colour Pallet)

Colour 
The colour should only have a bit of Light Brown that can be played around with in the website.

Green should be not dull green but also a bright green, so it does not feel like dead grass too much. We want healthy grass.

An addition to their original colour pallet is the blue. This blue has to be bright and popping for give the feeling to inviting and less burdensome, so I chose Baby Blue.

The clients agreed that the blue should be added as well.

And lastly, Dark Grey, for the colour that needs to be dark but not as harsh as black is on screen.

Typography
The fonts chosen were Iowan Black, Quattrocento Sans, Futura Medium, and Josefin Sans.

(Iowan Black Font)

Iowan Black
This font was chosen to make sure that the client sees that the serif are not advisable to have. Even if they look well established, it does not help Catalyst show that they are welcoming and inviting. The clients agreed that no serifs will be used at all in their website due to reason that it also made it feel “old and tiered”. Everything else would be acceptable.

(Quattrocento Sans)
(alphabet and number sample)

Quattrocento Sans 
A sans serif font (2011, Impallari) which was chosen because of the little wave that’s on the upper case “Q”. Note that the lower case “a” is almost like a serif. The letter forms are also wide and open, x-height is good for body text in small sizes. Tiny details are ideal for display use as well.

Because Quattrocento Sans is legible it’s warm, not intrusive, classic, and elegant. The creator also called it “a sober type face”. Basically, it’s study but not bulky and at the same time it has an elegant feel to it.

( Futura Medium Font)
(alphabet and number sample)

Futura Medium 
Chosen because it has some similarities with Quattrocento Sans, it’s clean and geometric appearance.

Notice the uniqueness of how the “M” is, it reaches to the bottom of the base. Distinct to Futura font. The upper case “N, V, and W” also follows the sharpness of the “M”, this can also be found on the lower cases of “v and w”.

Another slight difference is that Futura Medium has a lower x-height than Quattrocento Sans, for better body text. Note that the lower case “a” is also rounded and the upper case “Q” is sharper unlike Quattrocento Sans.

(Josefin Sans Font)
(alphabet and number sample)

Josefin Sans 
This font also has some similarities in geometric appearance shared with Quattrocento Sans and Futura Medium.

Shares the sharpness of Futura Medium on the upper case “N, V, and W” and the lower case “v and w”. Also has similar rounded lower case “a”. Note the uniqueness of the lower case “e” and the upper case “Q and Z” are different from Futura Medium and Quattrocento Sans.

Basically, Josefin Sans are like a merge of both fonts, but still has its own unique take on some letters.

Iconography
There were 3 types of icons presented to the clients: light, heavy, and colourful.

(Light Icons)

Based on the line stroke of the icons, these were categorized as Light Icons. They could be added with different colours depending on the information.

(Heavy Icons)

Heavy Icons are all black, and the feeling of heaviness because the black is all filled in. Most likely the ideal usage of these are to be small and can’t be used larger than the ideal button size. Colours would only be black with the negative space of white.

(Colourful Icons)

Colourful Icons are the ones with multiple colours, mostly toned down to light colours. These icons can me enlarged without having to worry about the heaviness of colours. The colours can also be changed depending on the information that comes with the icon.

The clients both agreed that they would prefer the possibility of Light Icons because they do not want too much colour nor the heavy icon versions.

(Final Style Tile)

Client Feedback
The clients were very open to the Final Style Tile and in revamping their Catalyst website. We all knew that the team was aligned with what Maura, Leslie and user wanted out of the website.

Prototype

Based on the user interviews, 20 Second Gut Test, and client interviews, I went ahead and started to create a prototype.

Paper to High Fidelity
While waiting for my team to do their user testings I converted the low fidelity paper prototypes of my UX team mates to high fidelity.

(High Fidelity Desktop and Mobile Sample Mockup Screens)

Using the Sketch program, I started to work all the implementation of the creative research on to the Catalyst website and mobile.

Below is the working link of the Website Prototype using InVision:

Over All Process

The picture on the right is an over view of the whole process of how I came to revamp the Catalyst website.

(Ember’s Work Flow Process)

I have learned that each client has their own work flow and in respect to that I have proudly worked cohesively with both my team and my clients. Both sides willing to implement the website we all came to agree upon.

Conclusion
This project has taught me that there are hundred of ways to create a website that will stun and capture the eyes of the audience. But there is only one specific way at a specific time of a business that they would want to only target certain people. This was the obstacle that I had to face as a designer. With the help of my team and client, I honed and designed a design for the Catalyst client suited for their immediate need.

Note
Thank you to my clients, peers and mentors for helping me in this journey of self-discovery and how to challenge myself to create responsive web and mobile design with a concrete research and strong rational on my designs to back it up. If you have any comments and questions, please feel free to contact me.

Thank you for reading!

Sincerely,
Ember N. | UI Designer
ember.navarro@gmail.com