Marketview Heights Association

Front-end development, wireframes, UI Design

Project Overview

Marketview Heights Association (MHA) is a not-for-profit housing organization focused on providing affordable housing to new low to moderate income home buyers in the Rochester region. I worked within a team in overhauling their website by contributing to branding, wireframing, and front-end development.

Understand

As a team we met with the owner of Marketview Heights Association to discuss the main demographic and direction of the website. We identified 3 key areas to focus on for the project:
Generate a new brand guideline and give the whole website a fun yet professional feel while being responsive across different devices.
Allow the owner to make changes to the content of the website without the need of web development knowledge.
Allow visitors of the site to access to forms, properties, and events associated with the organization.

Personas

In order to better understand the demographic of users utilizing Marketview Heights Association, we developed personas to guide us in creating the new website.

Design

During this phase, we mapped out the information architecture of the website which helped us figure out which pages we should design for. I worked with the owner of MHA to figure out logos, colors, and fonts that would best represent what they wanted for Marketview Heights Association.

Fonts

Keeping in mind with the "professional, yet fun" vibes, I played around with different font pairings. I chose Abril Fatface as the main header typeface and Montserrat for the main body.

Abril Fatface is a fun typeface, but its serif qualities help to give a more professional tone. Pair it with Montserrat, an easy typeface to read, we keep inline with MHA's requests of both professionalism and fun.

Font pairing we settled on for the website. Abril Fatface for the headers, Montserrat for the body.

Logos

Some logos we created for MHA. We settled on the pink flower with the green house in the middle.

The Marketview Heights Association is located in Rochester, NY, also known as "The Flower City" or "The Flour City." We wanted to incorporate the flower symbol into the logo, and utilized a house to better represent the services MHA provides.

These are some logos we created with the use of Canva and Adobe Illustrator. Keep in mind, this is the first time we developed a logo and have little experience in logo/graphic design, so we tried our best :)

Color Palette

MHA wanted to encapsulate a fun, yet professional feel for the website. One color they specifically requested was a "green money color." I played around with different shades of green and found secondary colors to go along with the green. We ended up agreeing on the last color palette shown on the right.

Color palettes developed for the new MHA site. The starred palette is what we decided to utilize.

Wireframes

While working on the branding for MHA, we also worked on developing both mobile and desktop wireframes for the website redesign. As a team, we worked on multiple iterations of potential layouts and discussed with MHA the requirements needed for the website and what layouts they preferred.

Solution

My main contribution was on the front end of the website through CSS to style the website. I also worked on the HTML and Javascript for the FAQ section. I continued to support my teammates by fixing and updating the CSS on other pages when needed. We presented the finished site to our client and provided on-boarding and documentation for how to utilize the CMS editing service.

Redesigned Marketview Heights Association website
Original Marketview Heights Association Website

New Styling & Implementing CMS

After the new brand guidelines, logo, and wireframes created, we put it all together and developed the new Marketview Heights Association website from scratch!

We initially utilized GitHub to collaborate on the HTML/CSS structure. After we got the basics down, we had to migrate it over to GetSimpleCMS, a free content management system (CMS). This allows the owner of MHA to go into the CMS and update any images or content without the need to know any code!

After the migration, we hosted it on our school's server and implemented PHP and JavaScript for the rest of the website.

Online Resource Access

MHA wanted to allow potential clients to access any paperwork resources on the website. Traditionally, MHA would either have to mail the paperwork or request clients to come to their office for pickup.

We designed the website to include access to a PDF of any needed paperwork directly from the website with just a click of a button!

Accessing paperwork on the new MHA site
View the website here!

Reflection

This was my first experience working with a client to develop a website. It was great working with a team who had specific skillsets to create a website from the ground up! This project allowed me to apply my knowledge of web development on a bigger scale. I'm very thankful for my teammates who worked long hours aside each other to provide a website the client was happy with.

If we could improve the website, we would have liked to implement a database for properties within the MHA system, as well as develop a login system. We also would have liked to host the website, though, it was beyond the scope of this project.

Regardless, I am very proud to work alongside an organization that empowers the marginalized community in Rochester to gain affordable housing. I hope to see the website up and running soon!