Project 3

Project description

With approximately 9.000 participants, the Annual Party at Roskilde University is one of Denmarks largest one-day festivals!

During my studies in 2019, I became part of the volunteer committee responsible for organising the main event. One of my areas of responsibility as part of the PR management group was the festivals website. As the old site was running an outdated WordPress template, it was in dire need of a new look and feel, if it were to successfully cater to the expectations of it’s guests and allow them to find the information that they need from the landing page. As such, it became my responsibility to redesign and develop the new website of the Annual Party.

Methods

Sitemapping, Sketching, Wireframing, Prototyping, Front-end Development

Role

UX Designer, UI Designer, Front-end Developer

Year

2019

Duration

5 months

View website

Problem statement

The outdated WordPress template and the plugins the current website runs makes it difficult for attendants to find the information they seek, while also causing maintenance trouble for the organizers. Meanwhile, the current website does not reflect the strong visual and brand identity of the Annual Party properly.

Context

Background

Hyphothesis

A redesign that emphasises an information architecture aligning with festival attendants expectations, will make it easier to find the information they require. Redeveloping the website should furthermore allow easier content, visuals and brand updates for organizers.

The why

With the Annual Party updating content, images and visuals each year the outdated website has become more of an inconvenience than an effective tool for the organizers to maintain over the past couple of years. In addition this causes frustrations amongst not only the organizers, but also impacts the attendants user experience negatively, as finding the information they seek and performing the action they intend becomes a more tedious process.

Business Goals

This redesign will be the perfect way to give the website a new visual overhaul that manifests the visual & brand identity of the Annual Party at RUC, while solving some of the issues linked to the usability, findability and maintenence of the current website for both user groups.

Findability & usability

Increase navigation, information and feature finding

Visuals & brand identity

Give existing website a new look and feel

Content maintenence

Reduce maintenance and content update issues

Research

Understanding the problem

Understanding the website structure & its usability issues

The first step was to understand the existing websites information architecture and identify the websites usability issues. To do so I conducted an heuristic evaluation, and mapped out the existing structure of the website in order to understand what content was placed wrong or missing.

Competitor analysis

To understand common festival design practice for web and draw inspiration, I conducted a competitor analysis on both larger danish festivals such as Roskilde Festival and Smukfest, but also smaller university festivals like KU Festival.

user interviews

To follow up on my initial findings from the heuristic evaluation and mapping exercise, I interviewed 4 previous attendants at the Annual Party. I tried to understand the most prominent pain points attendants experience, when interacting with the existing website as well as their needs and behavior, when seeking information or certain features.

I found that the location of much of the information conveyed by the existing website was placed in pages and sections that did not correspond with users expectations and that some pages crashed when loading, leading to frustration amongst all users. Furthermore, I found that the majority of the interviewees aim to spend as little time as possible finding the necessary information, which to them is program information or practical information. Some attendants also mentioned that they only visit the website to purchase tickets for the festival.

Ideation

Concept

getting the information architecture right

Based on the insights from the heuristic evaluation, competitor analysis and user interviews, I formed the following sitemap of the new websites information architecture.

Finding the right focus

As the user interviews revealed, attendants expect to find information about the festival program, practical information and easily find the link for purchasing festival tickets in particular.

In my sketching I decided to prioritise these areas, while also aiming to evoke excitement about the festival through manifestation of the visual and brand identity of the Annual Party.

Design

Designing the new website

Visual identity and brand creation

As the festival changes it's central color theme each year, it was important that the neutral colors and illustrations, where compatible for these annual changes. For the year of this project, the main color scheme in rotation was petroleum blue and yellow.

A responsive web solution

As the majority of festival attendants access the website through desktop devices, I decided to begin the design phase with a desktop first approach that simultaneously embraces responsiveness for tablet and mobile. Below are selected page designs from the project.

Home page

Volunteer page

Bliv frivillig pop-up

Program page

Program pop-up

Development / Documentation

implementing the solution

Development

In the process of realising the implementation of the new design and to enhance my own capabilities as a front-end developer, I decided to develop the website from scratch myself through the use of my preexisting knowledge of HTML, CSS, JavaScript and PHP.

Global tokens and manually-automated for-loops for folders

While implementing the design, I tried to approach the development so that the internal management team would be able to update the sites content and assets without interacting with the main code base. I accomplished this by using global variables for all colours, allowing colour scheme adjustments on the entire website by updating the hex values in one place, auto-add and update year variables at the beginning of each calendar year, and implement naming conventions for foreach loops to select the correct image based on its manually created numerical name in a folder.

Language selection

Since the Annual Party caters to both danish and foreign attendees, it was a technical requirement for the website implementation to support both danish and english content. To accomplish this, I developed two separate files to hold content for each language. The two files each consist of arrays, which swap the String objects on all pages when the language button in the website header is clicked.

Documentation & hand-off

For the future the organizing team to be able to successfully update and maintain the new website, I wrote a comprehensible 19-page document. The document detailed how to update content, visuals and assets by making slight tweaks and changes to a limited amount of variables, or creating new folders and uploading files with the correct names to these in order for the website to automatically update content.

Outcome

Results

Deliverables

Redesigned and implemented website for the Annual Party at RUC with emphasis on user expected information and content architecture as well as visual and brand identity manifesting along with written guide for maintenance and updates.

Values

The redesigned website should provide value for both attendants and organizers, as it aims to eliminate some of the previous identified issues for both these user groups by improving on the design and information architecture, while manifesting the visual and brand identity of the Annual Party at RUC.

Retrospective / Key takeaways

What i learned

A little testing goes a long way

Over the projects duration, I had originally hoped to validate the implementation with attendants of the Annual Party. However, due to fact that the day of the event was coming up, I ran out of time for the release date of the website.

In hindsight, I would have loved to conduct usability testing with users from the intended audience, to see if the new design was successful in increasing findability and usability of the website for it's intended audience.

cms implementation for easier updates

After handing off the solution, I realized that my attempted approach to ease the process of annual updates and maintenance for the organizers was too difficult and time consuming due to their lack of code knowledge regardless of my written guide.

In retrospect it became apparent to me that implementing the new design for a CMS would have been a much more viable solution. However, at the time of this voluntary project, my lack of knowledge as a developer had prohibited me from achieving this in a manner, where the design could have been properly implemented.

Thanks for scrolling!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Get in touch

Let's work together

The main reason I love UX and design is because I get to meet so many amazing individuals. I love to work with people who are passionate about their ideas. Let's talk more about your next project.

Creating a new information architecture & manifesting visual and brand identity