Boosting the reliability for a
non-profit organization
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.
PROJECT DETAILS
Graduate coursework project (1 week)
MY ROLE
As a solo project, I exercised my skills in UX Design and Visual Design
Understanding phase
THE CHALLENGE
Overwhelming content
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 :
  1. Overwhelming content without proper categorization
  2. Visual theme is extreme and not suitable for attracting people of all ages
  3. Complex information architecture
  4. Redundant information on multiple pages on the website
  5. Low use of imagery for promoting their content
  6. Inconsistency in the logos used on their website vs. social media
  7. Lacks responsiveness for different platforms


Current design


Based on the above observations I narrowed down my redesign goals to three focus areas: Usability, Visual Theme, and Business Goals.
Design goals
TARGET AUDIENCE
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.
Personas
HEURISTIC EVALUATION
Identifying the Usability Issues
  1. 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.
  2. 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.
  3. 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.
Information Architecture
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 view
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.
Nav bar
SEARCH AND FILTER
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" and "tickets available".
Shows
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.
Competitive Analysis
MOODBOARD
Moodboard
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
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.
Wireframes
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 mockup
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.