THE VERA PROJECT

The Vera Project is an organization which promotes collaborative youth engagement in music and art through music concerts and art exhibits. This is my redesign of their website to appeal to their target audience and encourage donations to their cause.

THE CHALLENGE

Current User Experience

The Vera Project has a lot of varied facilities to offer its audience. However, the current website does not display this information in an easily accessible manner for its users. Some of the usability issues that I noticed in the website are : 

  • Overwhelming content without proper categorization
  • Visual theme is extreme and not suitable for attracting people of all ages
  • Complex Information Architecture
  • Redundant information on multiple pages on the website
  • Low use of imagery for promoting their content
  • Inconsistency in the Logos used on their website vs. their social media platforms
  • Lacks responsiveness for different platforms
Current Design3

Based on the above observations I narrowed down my redesign goals to three focus areas: Usability, Visual Theme, and Business Goals.

Artboard

Goals for Redesign

PERSONAS

Understanding User Needs

Once the goals of the redesign were decided I decided to dig more into the target user groups. I went through their past events, blog posts and found out that The Vera Project caters to all ages with a focus on youth. On reading more information online,  I determined two sets of users and their primary use of the website. This helped me prioritize content that was important to these users and remove redundant information.

Personas4

RESEARCH

Identifying the Usability Issues

I used web data analysis and card sorting methods to uncover the major pain points of the website. The research helped me understand a user's mindset when browsing the website and what they hoped to achieve. 

OVERWHELMING CONTENT

The amount of content on the website is overwhelming right from the homepage. CTA links are peppered all over the webpage with no clear hierarchy between different elements to guide the users.

UNCLEAR NAVIGATION

The Information Architecture is complex with low hierarchy elements often appearing with the top hierarchy ones. Poor categorization of the website's content leads to confusion among the users.

WEAK BRANDING

At a first glance at the website it is difficult to surmise the different services The Vera Project offers. The users need to dig in to the website to get more information. 

The first step I took in the redesign was to clean up the Information Architecture. I simplified the IA and created an intuitive hierarchy for the different elements of the website. To do this, the high-level navigation categories were decreased from 12 to 8.

InfoArc2

DESIGN DECISIONS

Card View

Cards are a good way to organize content into small actionable elements for the user to process. I used cards to display the different shows and classes that Vera has coming up in a neat manner.

Card and List2

Consistent Navigation Bar

The Navigation was the first improvement I focused on since it is the backbone of the user experience for any website. I established a consistent navigation system that is available on all webpages. I differentiated important CTA such as Get Involved and Donate to draw the attention of the user.

Screenshot 2019-02-24 at 13.18.25

Search and Filters

The Shows Listing page is the most likely to be used on the website as it allows users to view the upcoming shows and book tickets. I added search functionality as Vera has a long listing of shows for the next couple of months. I also added quick filters such as Featured, Tickets Available.

Screenshot 2019-02-24 at 13.30.27

VISUAL DESIGN

Competitive Analysis

I looked at other similar organization websites to examine their visual design and how information is organized. Common themes were the use of cards to showcase information and strong usage of images.

Screenshot 2019-02-24 at 12.49.47
Screenshot 2019-02-24 at 12.49.13

Moodboard

Screenshot 2019-02-24 at 12.41.20

Style Guide

I retained the original color combination of the website (black and pink) and added white and grey for a more toned down and modern look. My goal was to make the website appealing to all age groups.

Style Guide

A challenging task was to preserve the current grunge/rock and roll identity of the organization while making it more appealing to different types of users. 

Initial Wireframes

I created some wireframes in Sketch to organize the content and structure the look of different webpages. After I was satisfied that I am moving in the right direction I switched to Adobe Illustrator to design high fidelity mockups. 

Artboard 4-20
Artboard 5-20

Final Mockups

I went through a lot of changes after creating my initial wireframes. I tried to stay consistent with my mood board in terms of color and shapes that I used in my design. Eventually, I came up with the following designs which represent the organization appropriately.

Final MockupsS

Reflection

One of the biggest challenges for me was to balance the stakeholder goals, target audience, and visual aesthetic and come up with a design that appeals to all. If I had more time I would work on making the site responsive for mobile as that is one of the areas the current website is lacking in.

LinkedIn3
Email3

© 2019 Neha Kaura