RIF Website Redesign

A6-final-print

 

Web / Adobe Photoshop & Illustrator / 2015 / Individual

About

For this assignment, we were asked to redesign the website of a local nonprofit organization. Many smaller nonprofits don’t have enough time and money devoted to their web presence. Unfortunately, a web site is often the best way for a nonprofit to further their cause. We could choose among four local nonprofits, and were assigned to redesign their websites to solve a few major pain points. I chose Reading is Fundamental – Pittsburgh, or RIF.

Objectives

Current main page.

Current main page.

The client’s main issue with the current site was the relatively weak call to action. The call to action in this case was volunteering. RIF Pittsburgh also wanted to highlight some of their programs and urge visitors to learn more about them.

With these goals in mind, I started to look at what aspects could be improved. I felt that the original site was trying too much to be ‘friendly,’ indicated by a gratuitous use of bright colors in the header. Additionally, the navigation felt cluttered, and the ‘Volunteer’ button was not well distinguished from other elements.

Wireframe

First wireframe.

First wireframe.

I decided to go ahead with a reduced header, and a large banner picture for the main page. I would highlight the mission statement more clearly, and organize an events and news section below. Events and news could be useful to a potential volunteer, as they can see what neighborhoods RIF Pittsburgh operates in, or which events are near them. For the footer, I went with the basics—contact, sponsors, media, and newsletter.

Early Iteration

Early version of main page.

Early version of main page.

I chose orange to be the highlight color because it is bright and lively, emphasizing that Reading is Fun. I wanted to limit the colors to mainly orange, however, to avoid cluttering the website. Most other main elements are shades of grey, or white. I wasn’t quite happy with how the events section turned out, so I would eventually redesign much of the page.

The banner photo is this stock image, and the logo is the parent organization’s logo.

Volunteer Page

I also decided to redesign the volunteer page as the second page.

Original volunteer page.

Original volunteer page.

The original page seemed too cluttered. They were trying to communicate too much information in too little space, and the resulting page isn’t as inviting to volunteers as it should be. The sign up button is also hard to distinguish from regular navigation elements.

Early volunteer page.

Early volunteer page.

My initial idea was to replace the text with a graphic that shows extra information when the user hovers over each figure. I also wanted to include a map of the locations to make identifying each school easier. Finally, I made the volunteer frame the most striking element.

Second iteration of volunteer page.

Second iteration of volunteer page.

I wasn’t quite happy with how the first volunteer page turned out. I didn’t think it was visually striking enough. I decided to redesign the layout into a more scroll-based page. I replaced the opening frame with a large banner picture and a quote about literacy. I used headers to separate each section, and split up my initial graphic (which I outlined based on this picture from iconfinder).

I used the icons to highlight the goals of the program, and give potential volunteers some information of what the position entails. I included a similar version of the map, with a little bit of styling.

Final Versions (with interaction)

Final version of volunteer page.

Final version of volunteer page.

For interaction, I have menu elements drop down on mouse hover. A color change to orange indicates selected items. Additionally, if users click on a map flag, it opens with extra information about the volunteer position, and its schedule.

Finally, I added a simplified footer, now in grey. It includes the logo, contact, a sitemap, and an outline of the RIF programs.

Final version of main page.

Final version of main page.

Next, I updated the main page to match the aesthetic of the iterated volunteer page. I simplified the banner to just contain some text and two large buttons. When the user hovers over the banner, the picture blurs, which makes clicking the buttons more inviting.

I follow up the banner with a quick statistic about the status of book availability. Below, I entirely replaced the events and news section. Instead, I highlight RIF’s four main initiatives. Each one is illustrated by a graphic, along with explanation text and a quick statistic about each initiative’s impact. On hover, each section’s bounding box darkens to indicate where the reader should be focused on. Finally, for the volunteer program, I include another button that leads to my second page.

The truck graphic is from here, the book icon is from here, and the people line drawings are rehashes of earlier iterations.

Conclusion

Overall, I think I adhered to the design goals I set for myself. I made the call to action more clear, and dramatically reduced clutter. I stuck to my color choice and highlighted the organization’s programs on the main page. I think the combination of clean graphics and short quotes makes the call to volunteer stronger.

Web redesign was an interesting experience because we have to consider the users need much more than a print work. Additionally, because there are so many elements, it’s harder to keep things consistent and clean. I look forward to further experimentation in web design in the future.

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 )

Connecting to %s

%d bloggers like this: