We Act

Discover & Define

Since this project was a UI focused project, I wasn’t going to conduct any user research, however I still carried out a UI audit of the existing site, and a comparative analysis of similar charity sites to help guide my design choices. Some things I had to consider when making the redesign were:

• What is the charity’s current brand identity and how could that be changed?

• What differentiates WE ACT from other environmental charities?

• What specific weaknesses of the current website need to be addressed?

UI Audit

As my final deliverable was to be a responsive app, I conducted a UI audit of both the desktop and mobile versions of the website. This would allow me to see what worked for each view port and carry those ideas forward when moving into the develop phase of the project.

Comparative Analysis

WWF

Develop

From the comparative analysis the insights I gained were:

• The focus for the competitors were on a global scale, unlike WE ACT whose focus is at the community level.

• The tone of voice used is very commanding, using lots of imperative verbs. In addition to this, there is a real sense of urgency through the language used in the headlines.

• The websites make use of bold fonts to emphasise their tone of voice as commanding.

• Green was often used as the primary colour throughout the sites with warm colours used to highlight elements such as call-to-action buttons and article headlines.

Creative Brief

With the comparative analysis complete, I could then start building a more focused brief for WE ACT’s website. As my research had been limited to looking at the client’s and competitors’ websites, and not with any users, some of these points were made using my own assumptions.

Because the project was focused on the UI of the website, it was really important to establish what kind of personality I wanted to give the website with my design. In order to do this I carried out several brand personality exercises.  

Building on the Brand’s Tone from the creative brief, I put together brand personality scales. I then chose 3 keywords that were the most important to the identity of WE ACT. From the comparative analysis, I identified the branding gaps. These would be the aspects that I would emphasise on the website.

Finally, I made lists of adjectives that describe how the website should “sound”, “look” and “act”. These words would influence the tone of voice as well as the colours chosen for the site.

Mood Board

With a clearer idea of what I wanted the charity’s brand tone to be, I created a mood board to visualise that tone. Since WE ACT is an environmental charity, the primary focus of the images I used were of nature. I also wanted to put an emphasis on “community”, “collaboration” and “diversity” so I also included images of people planting trees together.

Style Guide

Taking the colours directly from the mood board, I then developed my style guide. Similar to the competitors, I used shades of green for the primary colour, with warm colours being used for contrast points.

• Carousel images too large to see the entire image in one go

• Navigation and logo overlap with each other

• Layout of supplemental navigation
  difficult to read

• Lots of text, and even images contain mostly text

• Way too many things to scroll through

• Many of the links are repeated and/or are already in the global navigation

• Lots of issues with images overlapping with text, or text overlapping with text

• Images on the articles don’t really help show the content

• Lots of the content doesn’t fit on the page at one time.

As for the text styles, I decided to go with a bold, sans serif font as I felt it would have a stronger impact on people when they access the site. Linking back to the “Loud” “Bold” and “Optimistic” adjectives from my brand personality, I found that Josefin Sans encapsulated all of those traits, and so utilised it for the main headings on the site. Montserrat had a similar effect, and so that was what I selected for the body

Wireframes

To start the Develop phase, I broke down the existing website and recreated it as a mid-fidelity wireframe. I then used it as a base, and made my iterations on it. Since I was designing a responsive site, I started by developing the mobile version first. That way I could  focus on the essential content that needed to be on the site. 

Mobile

With the original website, all of the articles on the homepage are shown at the same time. With my design, I only displayed the most recent articles with the option to see more. This also would give easier access to the content at the bottom of the page since users wouldn’t have to scroll through all the articles. I also changed how the carousel was displayed so that the whole image could be seen.

Answering the Brief

With my prototype I was able to:

• Streamline the homepage by condensing the content on the homepage

• Emphasise the elements that would encourage people to get involved (i.e. Donate CTA, membership details, newsletter subscription

• Establish a brand identity through the style guide

If I were to continue with this project, these are the next steps I would take to improve: 

• I  would continue to iterate on the mid-fidelity wireframes, trying new layouts and developing the navigation.

• Further refine components for the page such as the carousel, and prototyping of the interactions.

• Facilitate a card sorting exercise to improve the primary navigation.

• Iterate on the style guide, testing other colours and fonts.

Sketch out ideas before going straight into wireframing. Sketches are a quick way to develop ideas before committing to a design. During this project, I skipped the sketching stage and went straight into designing the wireframes. Because of this I ended up stuck with one layout for the redesign, which hindered my ability to develop more ideas.

Work on the big picture before focusing on the finer details. During the development of my hi-fi wireframes, I spent a lot of time working on the prototyping of components. This took time away from working on the layout across all of the viewports, and in the end I felt that the websites were inconsistent with their quality. Had I worked on the broader website, then I would have been able to produce something that I was more satisfied with, and the more minute details could have been a next step.