the Vera Project

I worked with newly-formed consultancy, Seattle User Experience (S:UX), to overhaul the UX of the Vera Project’s website, which had last been updated in the early 2000s. This was the first project that our 20-plus person team of volunteer designers, developers, and content strategists took on. In many ways, this initial project was a test if the experiment worked: if we could - as a group of volunteers - actually find enough shared free time to meet, collaborate, interview, and design a new site for the Vera. 

VeraPage-Issues.png

PROCESS

Before breaking off into teams to address phases of the UX design process, we began with a roundtable interview of key stakeholders at the Vera - some permanent staff, and some of the volunteers that keep the organization running.  Key problem areas of the site were identified as follows:

I. WALLS OF TEXT

Vera stakeholders told us they wanted to add more images/graphics to break up mass amounts of text on the site.
See screenshot.

II. NAVIGATION COMPLEXITY

Overall, stakeholders wanted the content on the site to be organized in a way that felt more intuitive to the user. They expressed concern that users on the site wouldn’t figure out where they were in the architecture, or wouldn’t discover everything the Vera had to offer because of confusing design.
See screenshot.

III. BURIED CONTENT

Our redesign pushed most recent blog entries to the front of the home page, so that Vera staff can update readily.

IV. POOR ILLUSTRATION OF ALL VERA OFFERS

The stakeholders wanted the Vera site to paint a better picture of what the different branches of Vera offered to the general public, both as a resource for learning (Screenprinting and Audio) and as a community organization.

V. NOT MOBILE-FRIENDLY

The Vera website was not mobile-friendly and 50% of users access the site on their phones. It was requested that our redesign make the site more mobile-friendly.


User Research

We broke up our User Research phase into two phases: 5 User Interviews and from there, 5 Usability Studies and a Pilot Usability Study. Key findings from both phases, as well as snapshots of the tasks we included are below. 

I. User Interviews

We worked with our contacts at the Vera Project to find users in key segments who could provide insight into the process. We spoke to donors, audiophiles, screenprinting enthusiasts, and show goers/volunteers to capture insight from key user segments. 

II. Usability Studies

After User Interviews, we created a Usability Study Test Kit to see what User Experiences were like for a number of test users. To determine our approach to designing the Usability Study, we referenced standard approaches depicted on Usability.gov and developed by Jakob Nielsen

To get participants, we recruited friends and coworkers across age ranges and with a different range of interests - some who knew about the Vera Project before our survey, and others who didn't. To view the tasks we included in the full Usability Study kit, click here. 

Key insights:

  • Users expressed that the Vera could more effectively convey what it’s “for” and all that it offers

  • Classes could be broken down into condensed “chunks” so that it was easier to understand what they are all about

  • Volunteer Committees could be more easily distinguished on the website

  • Too many words: Users felt the Vera offering was bogged down by the sheer amount of words that were used all over the site to explain different components.

III. Affinity Diagraming

To recap the information we collected in our User Research phase, we worked together to organize the feedback we got and brainstorm ideas for problems identified by participants.

We ran through a few different exercises to organize the information:

  • We grouped the feedback by sentiment - simply breaking it out into "good vs. bad"

  • We grouped the feedback into groupings depending on what type of content it pertained to


Information Architecture

In parallel to Usability Study work, a portion of our group did an in-depth analysis of the Information Architecture of the Vera site. This phase of the process was key to achieving the stakeholders' goal of consolidating the pages of the site into more concise categories of content, to reduce the total number of pages. 

Method: our team used Card Sorting Software from Optimal Workshop to streamline the content into fewer pages and to create new sub-groupings for categories of information, and made the following recommendations based on the exercises we went through. 

Information Architecture Recommendations:

  • Reduce the number of top-level navigation headers to 8

  • Reduce sub navigation options

  • Omit several pages from redesign

  • Consolidate donation pages

Below, see the Information Architecture we settled on:

Screen Shot 2018-02-11 at 8.07.27 PM.png

BRAINSTORMING

With our Information Architecture in place and User Research concluded, we started began initial brainstorming sessions for the design phase. 

Method: we used a “Crazy Eights” exercise to brainstorm ideas for site features, page structure, navigation, etc. This exercise facilitated a free-flowing brainstorming session which generated tons of ideas on how to develop a site that would address the problems identified during our User Research phase. 

CrazyEights.png

A separate group of our team met to identify core pillars we wanted to employ throughout the design process.  These pillars guided our Lo-Fi/Hi-Fi Design Phases. 

VeraProject_DesignPrinciples_20171031_v0_rm.png

DEsign

Lo-Fi Wire Frames

Finally, Lo-Fi design. As someone with a background in traditional design, I felt a real sense of relief at reaching the tail-end of the design phase of our process. I was heavily involved in both the Lo-Fi and Hi-Fi design phases and created the wire frames below in Adobe Illustrator.

Knowing the site would be build with WordPress (the Vera Team's preference), we built out several page templates so that our Lo-Fi Team could hand off the designs to for the Hi-Fi Team to implement. We used a card structure to organize content and ensure that our designs were responsive and compatible with a WordPress theme. 

Hi-Fi Design

The biggest challenge of the Hi-Fi Design process was organizing our ten-person group and finding a way for each of us to contribute. One of our team members recommended we use a tool called Figma, which allowed all of us to work on each page of the site with visibility to where other members of the group were taking their designs. 

In terms of visual look/feel, our designs were informed by pre-existing Brand Guidelines provided to the Vera Project by a local agency. The guidelines gave us great material to draw from, but didn't include certain elements of brand architecture (a typeface) and primarily offered direction pertaining to print design. In light of this, we worked with the established brand colors, but recommended some of our own expansions - an additional brand color, and fonts for the Vera's web presence. I worked to add those additional components to the Stylesheet.

We broke out into small groups to work on different sections of the site. Every piece of the process was collaborative, with each of us bouncing ideas off one another and filtering through ideas through Google Group chats and in-person meetings.  I designed the "Get Involved" main page (below center) and the sub-page (below left) and collaborated with a few other members of our design team to make sure each page worked together. 

See individual page detail, below:

Screenprint (Desktop).png
Screenprint (mobile).png
 
Mobile-hifi.png
Content Page - Volunteer (2).png

Conclusion

Those of us at S:UX are excited to support the Vera developers in their implementation our design. In the process of supporting a great community organization, we learned a ton about how to efficiently organize ourselves to get work done (small agile groups work best). The project helped pave the way for future work that we can't wait to tackle.