Marketview Heights Association

Web Development

Team: Cong Wang, Juliann Thang, Kemar James, Nash Lyke

Disciplines: Web Design, Branding, Front-end Development

Timeline: ~4 months

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.

Branding

During the design phase, 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. The client wanted something "fun, yet professional" and requested to have green incorporated into the colors.

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!