A case of Nonprofit Website RealignmentReading With Pictures

Carlo Bessozi | Ben Domhoff | Brian Fu

We would like to thank our fellow classmates for their suggestions, Professor Miller for his guidance, and Reading With Pictures for the opportunity to work with them.

Foreword

Initial ThoughtsWhen we started working on the Reading With Pictures website, our goal was to help them increase user engagement and improve the adoption of a teaching objective comic book directory. We originally wanted to start designing the directory with low-fidelity prototyping and quick iterations of formative usability testing.

We ended up going in a different direction.

Structural IssuesThe site had multiple foundational issues that needed to be addressed before starting. These issues included communicating clearly what the organization does as well as an unclear visual hierarchy. We chose to start the project with an expert review aimed at assessing fundamental issues regarding:

• Layout• Value proposition• Interaction patterns

Expert ReviewWe conducted three expert reviews with these stakeholder goals in mind:

• Clarify the organization’s values.• Increase number of users volunteering, donating

and engaging with the organization.• Promote the new comic book directory. • Simplify user interaction with the site.

Summarized FindingsAfter we finished the expert reviews, we had more than 35 potential improvements between the three. We then reviewed these 35 improvements and were able to trim them down to 4 high priority findings and 8 medium priority findings.

High Priority Finding Example

Medium Priority Finding Example

Wireframe CreationWe then started to create wireframes based on these 12 findings. We began the process by first creating templates for these pages:

• A right sidebar template for the blog section of the site.

• A single-column template for home and landing pages.

• A two-column layout for the directory.

Wireframe TemplatesSince we did a majority of this project remotely, we created wireframe templates to ensure consistency during creation.

Right Sidebar Layout

Single-Column Layout

Two-Column Layout

Wireframes - DetailedOnce we agreed on the underlying structure of the website we made a list of pages to wireframe:

• Home Page (Presentation Example)• Blog Home• Single Post Page• Directory Home Page• Single Directory Entry

Home Page - ModulesAs from our expert review we resized the logo.

As the current page lacked a clear value proposition, we carved space for a picture and a tagline.

Donation button as highly salient element of the page.

Bottom area with secondary actions and content feeds.

1

2

3

4

1

2

3

{4

The next step was to add a data layer to the existing wireframe to represent links, length of text, visual saliency and positioning on the page.

Wireframes - Data Layer

Home Page - Data LayerWe temporarily used the existing informaton architecture.

We opted for large secondary action buttons with lower visual weight.

Events are one of the main forms of engagement for the orginizaton so we gave it a larger module.

We included a Twitter feed since this is the form of social media they use most often.

1

2

3

4

1

{243

FeedbackA common response that we received from feedback was the need for better advertising of the textbook that the association published independently. To address this issue we created a new module that allowed users to easily download the free content.

Simple Visual FrameworkThe last layer of the wireframe has been introducing a simple visual framework to be leveraged by the organization in the development of the website.

The framework accounted for visual saliency and existing colour palette of the organization

Home Page - MockupExample of picture/tagline to communicate the organizations mission.

The the free comic textbook module. Below is an alternate version with their Twitter feed.

1

2

1

2

Before and AfterThe new design is intended to achieve the

following:

• Increase value proposition above the fold.• Make navigation incentives cleared.• Create a clear hierarchy between discrete pieces

of content.• Clear call to action of links to resources.

Before: After:

ConclusionsWe think that our work produced a solid alternative to the current website.

The expert review was an incredibly useful method since it immediately highlighted major issues within their current site.

The redesign along with the creaton of a more fine tuned information achitecture will help to further improve the chances of the site being a useful tool for RWP achieve their orginizaton’s goals.

Because of budget constraints it is unlikey that this project will be implemented in the near future. Therefore, this the project has a high potential to be a legacy project.