Duration
10 weeks, Sept - Dec 2019
My Role
UI/UX designer
The VERA Project - Branding and Mobile Redesign
The VERA Project is a Seattle based, non-profit organization aiming to better the community through arts. Whether that’s through arts education or putting on music shows, VERA believes art can bring together communities and empower young people. As a musician myself, I was drawn in to their focus on the arts, and I thought they were a perfect candidate for a website redesign.
My goal for this project was to improve the visual communication design of a non-profit organization in Seattle, The VERA Project. Over the next 10 weeks, I analyzed, iterated and reimagined what The VERA Project could look like. I learned about brand and marketing design, and at the end of my 10 weeks, I delivered a brand book for improved VERA Project customer experience.
Brand Analysis
Inconsistent branding was a recurrent theme throughout my analysis of The VERA Project.
The color schemes and overall vibe of the organization differed wildly depending on what platform you were on.
The logos used were similarly inconsistent. As far as I could tell, all three of the logos pictured above were being used regularly.
All together, these inconsistencies looked disjointed and unprofessional. It was time for a change.
Gathering More Info - User Research
After my brand analysis, I decided to look at the The VERA Project’s users. I talked with several people who had either gone to the VERA Project before or had volunteered with them in the past. These interviews were done informally and helped me get a better understanding of the type of people were involved with the VERA Project. My main findings were:
Music is a big focus:
Although the VERA Project does have other arts activities, most people I interviewed were introduced to VERA through a concert. The VERA Project hosts many local indie bands and has roots in the early Seattle grunge scene.
VERA is a place to have fun:
The VERA Project prides itself on being an inclusive, safe space to have fun. They have a strong community mindset where everyone of all ages is welcome.
How should the New VERA Project branding feel?
— My question moving forward…
The New VERA
After analyzing the brand and doing some user research, I felt the VERA Project that I had heard about did not align with their current brand. Everyone I interviewed talked about the positive, artsy and fun experiences they had at VERA. I wanted VERA’s new branding to reflect that. This led me to 3 main themes I wanted for the new VERA Project.
An artistic space that supports and celebrates artistic endeavors.
VERA project works towards being an inclusive, welcoming space for all who walk through their doors.
Staying true to the VERA Project’s roots.*
*The Modern Grunge may need a bit more explanation than the other two, and to do that, we need to go back to VERA’s history. The VERA project was created as a response to young people not being able to participate in popular music, especially grunge music. As a result, they adopted this grunge-y vibe that has continued to this day. During this re-design, I wanted to stay true to VERA’s roots but also add a sense of modernity to give it a more professional look.
VERA’s New Look
Keeping my 3 main themes in mind, I began defining VERA’s new visual elements such as typography, colors and logos.
Given the lack of inconsistency before, I wanted to keep typography simple by using a single font: Gotham. This sans-serif font has an angular yet clean nature that I feel embodies the ‘grunge-y yet modern’ design philosophy perfectly.
For colors, I wanted a bold, grunge feel but slightly more modern which led me to the main colors: black, white and red. At the same time, I wanted to acknowledge the all-ages nature of this organization, so I decided on blue and yellow secondary colors. Together, the red, yellow and blue represent the inclusive, all-ages nature of VERA.
I struggled with this logo. My goal was to make it more modern, but I didn’t want it to feel too modern. I also wanted to add an artistic flair to pay homage to VERA’s grunge feel.
My first iteration had a very modern feel, but it didn’t get very good feedback. It went too heavy on the modern feel and lacked the fun and artistic character that VERA is known for.
I went back to the drawing board and came up with many different logo ideas. I played around with some of these ideas in Adobe Illustrator, but it quickly became clear that the straight, computer lines caused some of the artistic charm to disappear. I decided that a hand-drawn logo was the way to go. Not only would it allow me to be more artistic, but it also felt more true to VERA’s artsy roots.
Deciding to hand draw my logo was the beginning of my descent into pure frustration. I have dozens of notebook pages that look like the one above. I tested out different types of markers, paper, even virtual brushes, but none of them looked right.
It was at this phase that I really recognized and understood how useful my peers were throughout the design process. I reached out to several designer friends and classmates to ask for feedback and additional help workshopping certain parts. It is because of their help that I was able to create a logo that I am so proud of. It took countless iterations, but eventually we got there.
Mobile Redesign
With the new VERA branding decided, next up was bringing everything together in a high-fidelity mobile prototype. I decided to focus on one user flow, learning about and attending a concert, one of the most popular things to do at the VERA project.
Initial analysis of the concerts flow on the VERA website showed that the flow was very confusing. Many of the same things were in multiple places which aids discoverability, but in this case, it added complexity to an already confusing user flow. This led me to make clarity my main goal in this redesign.
I went on to do some rough sketches of my new flow. Using these low-fidelity prototypes, I was able to get user testing done very early on in the design process. This allowed me to ensure that my high fidelity screens would have clear user flows. During my iterations, I was also able to test out new page structures and designs. All that was left was to add in the new branding.
Final Mobile Designs
The home page puts people, the heart of the VERA Project, front and center. VERA’s motto and mission is clearly put up front with additional actions presented in a grid layout to keep things organized.
Clicking the hamburger menu at the top right brings you to a clear, uncluttered navigation page. Menu items are easy to understand, and the little illustrations add a little bit of playfulness to this page.
The bright brand colors add pops of color creating a lively vibe, but straight edges and bold shapes bring it back to the modern grunge feel.
Brand Book - Bringing everything together
Every part of this project from the colors and logo to the mobile redesign was brought together in one final brand book. This brand book embodies the VERA Project, and clearly demonstrates best practices for VERA branding going forward.
What I learned…
As someone who is usually following a brand book rather than creating one, having the creative freedom to redesign a brand from scratch was a fun challenge. One challenge I did not anticipate was how difficult it would be to stay consistent with the brand I had designed. Because of my constant iterations, it was easy to lose track of what the latest branding decision would be. That said, without iteration, I would not have been able to get to the final product I have here especially on elements such as the logo design.
The time restraints of this project prevented me from doing multiple iterations of my mid to high fidelity mobile designs. Extra time would have allowed me to play around a bit more with my mobile design, and allow me to do more usability testing. Creating a brand book really challenged me as a designer, and given the time I had I’m really happy with my end result.