homepage goodwill orig@2x.png
 

Redesigning a Website

For my Intro to Web Design, I was given a task to redesign a website. I chose to redesign Goodwill’s website and give it more credibility as a store and a donation center.

Objective: Redesign a website of your choice

Tools: XD, Illustrator

Role: Web Designer

Duration: 3 weeks

 

PRototype Walk THrough


Process

Background Research

There were many problems with Goodwill’s original website. The amount of information was good, however it was hard to look for things, and the sections were very crowded. There was an outdated design aesthetic, and the sense of hierarchy was crowded from the multiple boxes side by side. I sought to improve Goodwill’s website by making it look more professional and giving it a cohesive brand identity.

Pros of Original Website

  • Alot of good content

  • Can see everything at once

  • UI design patterns present

Cons of Original Website:

  • Too much information crowded together

  • Blog video on the front page unrelated to Goodwill’s mission

  • Map takes too much space

  • Too many colors - no sense of color scheme

  • Brand Identity missing


Competitive Analysis

I looked at two websites in the non profit sphere like Goodwill, I thought was well designed. The first one, Red Cross, had simple aesthetics, two colors, and everything was really clear. Their way of solving the map problem was a button that says “Find a Drive.”

The second one, SF Marin Bank had expression in their site with the typography and the icons. They did a good job of highlighting information with their bright color palette and made their website look cohesive and visual.

I was inspired by the clarity and expressiveness of both websites and I redesigned Goodwill’s website with those principles in mind.


Design

Sketches

These are various layout brainstorming sketches of the website. I experimented with how the grids should be - more asymmetrical or symmetrical, and brainstormed what sort of icons would go on the website.


Redesigned Website

For my final website, I made it look more professional with flat icons, and updated the typography so it will be easier to read. The photos relate to the headings and I made it playful by choosing a bright color scheme.

website images wireframe.png
 

Homepage

goodwill2.png

For the homepage, I chose a standard scrolling grid structure that was simple to look at, as Goodwill’s original website had too many links and it was hard to follow anything. I chose a bold color scheme and photography to give Goodwill a more modern and professional look, and had sections ordered from “about” to “donate” to follow a cohesive story of Goodwill’s brand. The blue is slightly less dark than the original color to create a more friendly vibe.

Donate Page

postcard back copy 6@2x.png

For the Donation page, I chose to put a statistic about how many people obtained jobs in the header, to draw viewers to think about donating. The icons are meant to show an at-a-glance view of why donating is beneficial to them. The grids are structured in a checkered pattern to give an organized view of Goodwill.

Partner Page

postcard back copy 7@2x.png

The layout for Partner page is the same as the Donate page for continuity and organization. Since this is geared towards businesses, I chose pictures of friendly business people to market towards the audience. Logos are lined up on the bottom to give credibility to Goodwill as a great partner for businesses.

For my final website, I made it look more professional with flat icons, and updated the typography so it will be easier to read. The photos relate to the headings and I made it playful by choosing a bright color scheme.

 

Brainstorming Icons

These are some different style icons I made for Goodwill. The first one is a playful use of the Goodwill mascot’s face to convey retro fashion and playfulness in the website. The professional pack, which is the one I chose to work with, is simple and conveys easy-to-read professional icons for the new rebranding.