[vc_row][vc_column][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


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

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]



Used for remote communication and file sharing with Design Team and Web Developers.


Used for turning mid fidelity wireframes to high fidelity mock ups.


Used for file sharing with Client and hand off folder for Web Developers.


Used for high fidelity prototypes with hotspots.

[/vc_column_text][vc_empty_space height=”60″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

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/

[/vc_column_text][vc_empty_space height=”50″][vc_single_image image=”176″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp”][vc_single_image image=”177″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp”][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_empty_space height=”50″][ult_buttons btn_title=”Let’s Talk” btn_link=”url:http%3A%2F%2Fembernavarro.com%2Fcontact_me%2F|||” btn_align=”ubtn-center” btn_title_color=”#ff3a3a” btn_bg_color=”” btn_bg_color_hover=”#ff3a3a” btn_title_color_hover=”#ffffff” icon_size=”32″ btn_icon_pos=”ubtn-sep-icon-at-left” btn_border_style=”solid” btn_color_border=”#ff3a3a” btn_color_border_hover=”#ff413a” btn_border_size=”1″ btn_radius=”0″ btn_font_family=”font_family:Roboto|font_call:Roboto” btn_font_size=”desktop:15px;” btn_line_height=”desktop:15px;”][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


We met with 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.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”3/4″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][vc_single_image image=”210″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner][vc_column_inner][vc_column_text css_animation=”fadeInUp”]

“We’re working on a project on 41st and Cambie with the Oakridge Lutheran Church. That will have a sanctuary on the 2nd 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.”

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Dating Stage

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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

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

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner][vc_column_inner width=”1/4″][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

“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.”

[/vc_column_text][vc_empty_space height=”30″][/vc_column_inner][vc_column_inner width=”1/4″][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]


After the extensive interview, I conducted the 20 Second Gut Test with the Office Manager. 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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Before leaving she suggested that the test should also be given to another person who is handling Catalyst’s 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 Gut Test were similar. They were aligned in what they see the website should be.

[/vc_column_text][vc_empty_space height=”30″][vc_single_image image=”181″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495757042390{padding: 20px !important;}”][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_empty_space height=”30″][vc_single_image image=”182″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495757151636{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”183″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495757249567{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

With this in mind, we went on to the next stage which was to create questions for the possible users of the Catalyst website.

[/vc_column_text][vc_empty_space height=”25″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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 on the initial meeting and the with our Catalyst Client, they explicitly stated that the website should be friendly and open just like how their leader, Robert is.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”fadeInUp”]


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.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]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.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”185″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496088031217{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]Based on the people who personally and professionally know the Catalyst leaders, they can also be deemed as established with their peers.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]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.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]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.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]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.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]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.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]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.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Visual Language

1. 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.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]2. 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”.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]3. 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.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]4. 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.[/vc_column_text][vc_empty_space height=”30″][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”2/3″][vc_single_image image=”186″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496088659665{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


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

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_single_image image=”187″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496089280220{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


The second mood board is the second option of having the Catalyst colours. As you can see having the brown more prominent, made it be more adventurous and down to earth.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”3/4″][vc_single_image image=”188″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496089611206{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/4″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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”.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


These mood boards were presented to the clients. 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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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

[/vc_column_text][vc_single_image image=”191″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496090010729{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”190″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496090026256{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”192″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496090035764{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


These icons and fonts were the ones that best represented the mood boards.[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/4″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”3/4″][vc_single_image image=”193″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1500532073083{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”2/3″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”194″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102402994{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”195″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102610070{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”196″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102599989{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Futura Medium

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

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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”.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”197″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102705574{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”198″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102692418{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Josefin Sans

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

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”199″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102803293{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”200″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102813563{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

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

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”201″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102979495{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

Heavy Icons are all black, and the feeling of heaviness because the black is all filled in.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”202″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103431445{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”10″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

Colourful Icons are the ones with multiple colours, mostly toned down to light colours.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”203″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103463917{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_single_image image=”204″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103534645{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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 the clients and user wanted out of the website.

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


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

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][vc_single_image image=”206″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103826326{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/4″][vc_column_text css_animation=”fadeInUp”]

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

[/vc_column_text][/vc_column_inner][vc_column_inner width=”3/4″][vc_single_image image=”205″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103847638{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]Website Prototype using InVision click here.[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/3″][vc_column_text css_animation=”fadeInUp”]

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

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

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.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”213″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496170239554{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][ult_buttons btn_title=”Let’s Talk” btn_link=”url:http%3A%2F%2Fembernavarro.com%2Fcontact_me%2F|||” btn_align=”ubtn-center” btn_title_color=”#ff3a3a” btn_bg_color=”” btn_bg_color_hover=”#ff3a3a” btn_title_color_hover=”#ffffff” icon_size=”32″ btn_icon_pos=”ubtn-sep-icon-at-left” btn_border_style=”solid” btn_color_border=”#ff3a3a” btn_color_border_hover=”#ff413a” btn_border_size=”1″ btn_radius=”0″ btn_font_family=”font_family:Roboto|font_call:Roboto” btn_font_size=”desktop:15px;” btn_line_height=”desktop:15px;”][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


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!

Ember N. | UI Designer

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][ultimate_spacer height=”30″][/vc_column][/vc_row]