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.
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 :
Based on the above observations I narrowed down my redesign goals to three focus areas: Usability, Visual Theme, and Business Goals.
Goals for Redesign
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.