the Vera Project

 
Get-Involved-desktop.png

UX OVERHAUL FOR THE VERA PROJECT

I worked with a volunteer consultancy, Seattle User Experience, to overhaul the UX of the Vera Project’s website, which was last 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. 

I participated in all phases of UX Design for this project but my focus in this sample will be UI Design. A longer project summary is available here.


Information Architecture

Below is a snapshot of the Information Architecture re-organization our group completed using Optimal Workshop. We sought to provide a better User Experience by consolidating the pages of the site into more concise categories of content and reducing the total number of pages. I worked on the “Get Involved” section of the site.

Screen Shot 2018-02-11 at 8.07.27 PM.png
Screen Shot 2019-03-28 at 5.39.44 PM.png

SIte styles

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 the Hilt (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. I worked to add those additional components to the Stylesheet.

Card structure

We broke out into small groups to work on different sections of the site. We aligned information in a card structure to make the site feel organized and easy to navigate. The cards easily stacked and re-sized to ensure the site was responsive.

Screen Shot 2019-03-28 at 11.30.43 PM.png

DESIGN

Applying the styles we established as a group, I designed the “Get Involved” Top Level Page and the Volunteer subpage. I decided to add icons to each section of the Volunteer subpage to break up the overwhelming chunks of text on that page.

Get-Involved-DESKTOP.png
Get-Involved-MOBILE.png
Get-Involved-Volunteer-mobile-screens.png