Background Initial Requirement Evaluation Research Reframing Design Requirement Developing the Solution Design Decision

VIVA Website Redesign

Website Redesign for an Art Organization

Duration: 2 weeks

Role: UX Designer

Team: Individual Passion Project

Result: Website Prototype


I redesigned the website for Viva la Vida, an art education organization collecting and showcasing art works of common folks. The website is under development.

Original vs. Redesigned Site

Initial Requirement

This is a passion project I worked on as a volunteer UX designer for VIVA. VIVA collects drawings created by common folks in street experiments. The initial requirement was to showcase the artworks and have more people know our work.

Evaluation Research

50% of visitors left the website within 10 secs

I first looked at Google Analytics to understand the current performance of the website. Surprisingly, more than 50% of visitors left the website within 10 secs. Most people only visited the homepage - other pages such as the gallery page had few visitors.

Use guerrilla evaluation methods to understand the problem

However, multiple reasons might account for this. Therefore, to understand why people are not paying enough attention to the website, I conducted guerrilla research including heuristic analysis and usability testing. I chose guerrilla research methods because they can give us rich data within a short period.

Key insights:

  1. Brand mission and value is not conveyed clearly to users.
  2. Some pages contain too much text, some include phrases that are not familiar to people outside the organization.
  3. The website contains inconsistent buttons, colors and fonts. Key call-to-actions and information are lost in the inconsistencies.

Reframing Design Requirement

Together with two PMs, we redefined the redesign goal

  1. Provoke narrative empathy to better express the value of VIVA
  2. Redesign the first impression to encourage engagement
  3. Better convey to users the tasks they can complete using the website

Developing the Solution

Use parrallel prototyping to quickly sketch my ideas out

To quickly communicate my design ideas with the team, I sketched three parallel versions of homepage design for both desktop and mobile.

After discussions with PMs, we decided to combine the ideas of "tell a story" and "newsroom". This way, we can provide both an engaging experience and leave an impressive brand image for our readers.

Lo-fi prototype and testing shows that I am on the right track

I quickly created a b&w digital mockup and presented it to 3 users. The usability testing focused on first impression and brand value.

The results were mostly positive, I received feedback such as "this website is somewhat like Behance, for people to get inspired".

However, I still face the problem of how to balance simplicity and engagement. Users think that the website might be a little too clean and that key information might be missing from it!

Design Decisions

Make organization mission stands out

In my evaluation of the former website, I fount that users were not willing to read long paragraphs of descriptions of what the organization does. I decided to make the mission statement more concise and place it in more prominent places.

Provoke narrative empathy to better convey our value

In my research, I found that users are not interested in the homepage as it is not engaging enough. I decided to use questions to provoke interests in users. The questions are answered by the selected drawings.

Make call-to-actions more prominent

Users are confused over what tasks they can complete using the site. I decided to prioritize the tasks and make the two main tasks (view the gallery and join the team) more prominent.