Beyond Walls – Website Redesign

WORDPRESS WEBSITE : UX / UI / VISUAL DESIGN ~ BEYONDWALLSMN.ORG

THE GOAL:
To improve the overall appearance of the site, better present their text-heavy content, and keep up with monthly, weekly and sometimes daily changes.

THE CHALLENGE:
Working within the confines of the WordPress customized theme. With limited options, and a tighter than tight budget, finding ways to improve the site without spending increases proved to be the greatest difficulty. This became my opportunity to improve my CSS skills and learn more about using WordPress.

THE RESULT:
Iterative incremental changes to information architecture and content structure, menus and page layouts. Eventually, I adopted a single-page format, which was applied to each major section of the site, and assumed the role of webmaster and general IT admin, helping them establish and coordinate their internet-based technology usage. I’ve maintained the Beyond Walls website since 2016.


GETTING THE LAY OF THE LAND:

Whenever I take over maintaining a site, or redesign an existing site, the first thing I do is map out what is there. In the case of a WordPress website it involves understanding how the particular theme functions – what processes inside the theme control which function, yields the results I’m looking for, and at what cost – or how big a compromise?  How is the content currently assembled, and how will I reassemble it to make better sense, be more intuitive and less of an impediment to the user?

Next I form an understanding of how the theme itself works. What options are handled where?, and what degree of flexibility is there? It’s always a question of how much control of the design do I have, or not have. I never seem to have the amount of control I want, so arriving at a reasonable compromise can be a creative exercise in it’s own right.

Then I go to work reorganizing information and establishing the site map. In this case I folded the flow map into it.

When the site map and information architecture are set, I began wire framing to establish hierarchies of page layouts and level/sub-level design details. Low-fidelity mockups and wireframes were built with InDesign. Because most of the heavy lifting would be done inside WordPress, I didn’t make high fidelity wireframes or prototypes.

 

This is the site as it was when I assumed responsibility for it.

 

The first iteration of changes reflecting a dramatic reduction in the home page footprint. I reworked the footers to reduce their size and integrated the information to a more prominent position or into existing content structures. The menus were reworked as part of the new information architecture. By moving navigation from the page to the menus a less cluttered look began to take form. New home page slider images were crafted to advance a new message flow as well.  

Images were added on major section pages to give an indication of the sub-page content and a cleaner pull-down menu model was integrated. The sidebar was repurposed to display feature call to action items, a more prominent donation request and a full site page map listing.

 

 

In the current iteration the single page format has replaced section and subsection pages, the homepage has been augmented with info-snippits and informational graphics which are updated and/or rotated occasionally. Updates to the theme have added more responsive flexibility, and the sidebar has been abandoned. I continue to maintain this website, although the client has taken on some of the minor update duties.

Visit the site