In order to practice my web design skills, I decided to come up with a redesign concept for an organization which I have a personal connection to. My selected organization, Literacy Network, is a non-profit which I interned for in college that works to improve literacy in the adult population of Dane County, Wisconsin. In approaching this task, I truly wanted to carry the design process out from start to finish, so I began with initial goal setting and brand discovery and eventually worked my way through site-mapping, wireframing, and designing.
Below you will find some screenshots of their website at the time in which I conducted this project. They actually have redesigned their site in the months since I began this project, so I guess you will have to decide for yourself if you like my take better!
Strategic Objectives
I absolutely loved my time working with this non-profit, but as you can probably see, their website had a lot of room for improvement. There were several key issues that I wanted to address with my approach to the redesign, all drawing upon one key principle: any organization should feel very lucky to have someone visit their website, and they should do everything in their power to create a web experience that funnels the user towards their organizational goals. In the case of Literacy Network, these organizational goals are gaining monetary donations, recruiting volunteers, and registering adult learners for programming.
1. Begin using the full page
The first thing I noticed about this site was that the content only took up a small portion of the screen. In fact, not a single page on the site had content that took up more than half the screen on a typical monitor. Look at all that empty space on the right-hand side of the screen! This vastness is a missed opportunity to display information that could capture the attention of potential donors, volunteers, or learners.
2. Ensure the site is responsive
I also noticed that the content always stayed the same size, even when the screen margins were stretched to be larger or smaller. I knew that the new design should be able to scale to fit the screen margins of each device accessing the site.
3. Ensure the site is mobile friendly
I found that many details of the site were fine for web users, but barely usable or not usable at all for those accessing the site on mobile devices (i.e. header buttons and links too small for a user’s thumb to easily click). Given that roughly 50% of web traffic to sites in 2017 took place on mobile devices, I knew that the new site had to be fully functional in both web and mobile form.
4. Add more relevant calls to action
It can’t be escaped that one of the main reasons for having a website is to reach your own organizational goals. Literacy Network, which has goals of gaining donations, volunteers, and new learners, could have done a better job of this with their site. Strategically, I think they were smart to put a “donate now” button in bright red, set apart from the other menu items. The way in which this text stood out surely led to more clicks and, therefore, to more donations. I decided that this type of call to action could be placed on more areas of the site, however.
5. Combine and condense pages
Another thing that really bothered me about this site was how many pages there were. In most cases, the content on these pages was important and useful, but so broken up that the user would be left clicking sporadically around the site just to learn basic facts about the organization. For example, in the “about us” tab, there were separate pages for “who we are,” “what we do,” “our learners,” “hours and location,” “employment opportunities,” and “annual report.” I knew that a lot of this information could be condensed into one visually interesting page (that could link to other more specific pages of course). This would make the web experience more streamlined for users and, therefore, more successful for the organization.
Brand Discovery
My first step was to conduct in-depth brand discovery research. Now, I wanted this step in the process to be thorough, so I spent a fair amount of time researching and brainstorming about Literacy Network’s brand and needs for the site. Shoutout to a graduate school instructor I had, Michael Flint, for providing the brand discovery worksheet used in this planning process. The full brand discovery worksheet for Literacy Network can be found here.
Site Mapping
The next step was to create a site map. Many skip over this step or don’t take it very seriously, but this may be the most vital step of the entire design process. If you don’t properly plan an effective way to organize the content the client currently has to offer, you will spend hours down the road trying to remedy preventable issues (and potentially designing something that doesn’t truly serve the needs of the client or their site visitors). I spent a lot of time thinking about principles of usability during this process (i.e. does the current information architecture make sense? How can I rearrange this to make this site easier to understand for first time site visitors?). Here is the final product.
Wireframing
Next, I began wireframing. My wire framing process closely followed the sitemap I had created so that I wouldn’t miss anything important. My wireframes went through several rounds of edits after receiving feedback from trusted fellow-designers, and I was finally ready to begin designing! Check out the wireframes for desktop and mobile here.
Designing for Web and Mobile
Finally, it was time to begin my favorite part of the process: designing! Using photoshop, I designed 9 of the most important pages of the site for both web and mobile.
The homepage and the header were intentionally designed to funnel each core audience (donors, volunteers, learners) towards the areas of the site they’d be interested in, including the biggest funnel which is the donate button on the header. I put a lot of thought into the donate page in particular because I knew nailing this would be crucial for the success of the site as well as for the organization as a whole. Every element was added with the goal in mind of successfully funneling site visitors to a conversion. Examples of these elements include the beautiful, high-res images, the infographic with concrete reasons to donate, the “proof” in the form of a testimonial, and the number ticker sharing numeric successes.
I chose circles as a main design element in my site redesign, subtly drawing from the logo. You’ll see that circles appear on all pages of the site, something that I hoped would make the site more visually interesting, while also helping to create more visual consistency.
In choosing the color scheme, I integrated the bright green and blue found in the logo for some of the important “Call to Action” buttons, while also pulling in the more serious navy blue so that the site didn’t feel too “childlike.” This worry about the site becoming too infantilizing was actually a consistent challenge for me as I designed. I took much care to ensure that every education-based design element that I integrated were still muted enough to be appropriate for adults.
Other education-based design elements include the paper backgrounds that grace some row backgrounds (as well as the whiteboard on the homepage) and the handwritten fonts that compose the important headlines. In the realm of typography, I wanted to utilize fun fonts that called to mind “school” without treading into the dreaded comic-sans territory.
Check out the full design in pdf form by clicking on the button below, otherwise feel free to just view the preview web versions at the bottom of this page. Finally, please contact me if you’re interested in having me design a website for you!
See full design for Web and Mobile
