Construction Junction – Website Redesign

foo1

 

Web / Adobe Photoshop & Adobe Illustrator / 2015 / Individual

About

For this project, we aimed to take on the role of a freelance designer for a local non-profit organization. The re-designed website was organized to enhance the audience’s understanding of the organization while also fixing any issues with the current webpage. The overall goal was to create a main page and sub-page to highlight an interactive experience for the company’s clients. For this project, I chose Construction Junction, a non-profit based in Pittsburgh involved in retail for building material reuse.

Objectives

Screen Shot 2015-05-06 at 2.25.32 AM

One of the main goals of this assignment was to address and improve the pain points with the current website. Some of the main issues the company had with their site was the lackluster style, organization, weak call to action, and lack of hierarchy.

Since the organization deals with material reuse, it’s kind of hard to distinguish this on first glance. So, the primary goal became developing a new, yet simple aesthetic, that offered new and returning users a basic interface that gave a good preview for the company’s purpose that could be later redirected to main content.

Initial Wireframe

wireframe-01 wireframe-04wireframe-03Since the main goal of the company was to show off to newcomers what the purpose of the non-profit is, I decided to adopt a preview style for my bread crumbs of the website. So, I designed the wireframe with a parallax website idea in the back of my head.

It seems a little counter-intuitive to have this organization for a company involved with distribution and retail, but it looked like Construction Junction wanted to have greater focus on attracting attention from newcomers than organizing the retail and products. It therefore made sense to use the single scroll website because it traditionally is used to give browsers a good preview of a site and purpose.

Early Draft

main_1

This early iteration is a slightly modified version of the outline presented in the wireframe. The reduced header is still present, which is different from the current webpage, allowing for a better call to action. This also allowed the main page to create easy access to different parts of the company (like projects, shopping, and news) so new users could learn about Construction Junction effortlessly.

One thing I realized and fixed in later iterations was the lack of mission statement. Coming to this website for the first time, the user experience needs to tell much along with the call to action, which is something basic, but vital, that I missed.

Revision

about

For this iteration, I added the mission statement to the main page and also worked on the “About Us” page. (I didn’t include a screenshot of the mission statement on the main page because it’s essentially the same as the final version).

For the about page, I aimed to create a minimal layout that gave a strong focus and preview to the goals of Construction Junction. I used the typical “Reuse, Reduce, Recycle” 3 Rs to illustrate this idea. In each category, I used Illustrator to create a simple vector drawing followed by a small block of text. Since I focused on making a preview parallax, I also added the “Read More” buttons which would redirect to more information if users were interested.

Final Product

Rohan_ConstructionJunction-1

This is the final product — the single scroll parallax / idea. Again, I intended to create this website more as a preview that was directed towards newcomers. There’s the basic functionality with a simple yet obvious call to action, a fragment which gives information about the company, and recent arrivals so users have easy access to new materials. This also allows them to see what types of projects the company can help an individual or group start.

Rohan_ConstructionJunction-3

This is a basic interaction on the home / main page. Hovering over the Buy or Sell button creates a white background so the choice is clearer and goes along with the mission statement and title color scheme.

Rohan_ConstructionJunction-6

The interaction for the recent arrivals page is shown above. Without any mouse movement, every image has a black color overlay with the title, location, and a price tab. Placing the moues over any item gets rid of this information so there’s a better preview for each material.

Rohan_ConstructionJunction-7

One main issue I noticed with my iteration was the lack of consistency of the logo. I rendered the Construction Junction logo in Illustrator so it would follow the navigation bar as a user scrolled down.

Another main interaction was actually clicking on a product present on this page. This creates a dialog that previews more information about the item and gives an option to see more details.

Overall, this project was very different from the previous, but also super fun. It was nice to have the chance to improve something while adding my own original interactions.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s