Partnerships for Lawrence is an organization in Lawrence, Indiana that is a champion for the arts in my growing city. They have 2 paid staff members (one of those is part-time) and rely on their website to keep the community informed about upcoming events, to recruit volunteers, and to raise money. The design of the website was dated, and the structure of key landing pages was disorganized. They needed to have a clean, modern, organized look that would better highlight their organization’s goals.
The website needed attention on a few levels:
- Content Cleanup
- Visual Redesign
Over the past few years, the PFL board had worked to better define their mission, and better define their audiences. Using the proto-personas developed by the PFL board, I worked with Executive Director Judy Byron and board member Haide Vitali to reorganize the site with a card-sorting session. Since the home page is the main gateway into this site, we reworked the home page to provide better funnels for visitors to easier find information. We also used the opportunity to use the homepage redesign as a way to better present all of the things that make PFL vital for the community.
The site is hosted on Wild Apricot, a service aimed specifically at non-profits. All editing of Wild Apricot pages is done through an online WYSIWYG editor, which unfortunately introduces a lot of unnecessary markup. While we worked out the visual design, I went through the site and cleaned up all of the markup, establishing standards for headings and common page objects (full- and partial-width-images, callouts). This ensured that the site would be more accessible, increased page speed and SEO, and prepared us for a smoother transition when the new theme was applied.
Wild Apricot has a set of themes that a user can apply. We chose one that roughly fit our goals, and I went about the business of cleaning it up and tweaking it to something that more closely fit our needs. The default for user-generated page objects was to wrap everything in nested divs, 12 deep. I removed those, making for cleaner, easier-to-style markup (and less DOM for the browser to render).
Working with a wonderful visual designer who has developed PFL’s branding over the years, I worked out a fuller color palette and consistent visual identity for the website.
The theme we chose as our base is responsive, but there were some issues (especially with the menu). I tweaked the code as much as possible within the framework, and tested it on various iPhones and Android phones and tablets that I had at my disposal, and IE 9 and above (via virtual machines). I also asked a few volunteers to check it out on iPads.
I reworked the home page to have 4 buckets for promotions, which could be switched out at any time, as well as standard CTAs for fundraising and volunteering (2 areas in which PFL needed help). You can see the visual differences in the image above. On the left, you’ll see that actual content for the page was pushed far down the page, with odd gaps in screen real estate. I tried to maximize the space, while also leaving enough white space for the page to feel welcoming, not overwhelming.
We ended up with a design that has much more white space and consistent hierarchy of visual elements, which made it much easier for users to discover the services that PFL provides.
On this project, I performed the roles of IA, IXD, visual designer, and front-end coder (HTML, CSS, and JS). I did quite a bit of rewriting on some Wild Apricot template objects, cleaning up a lot of extraneous HTML.