YaoSkin web design

My Role

  • UX Research, UI Design

Tools

  • Adobe XD, Miro

Teams

  • 3 UI/UX Designers

Timeline

  • Mar – April 2019 (~4 weeks)

CHALLENGE

Website optimization for a festival organizer

Lilleskolerne is an association for Danish elementary schools. Each year, members take turns organizing Lilleskolefestivalen for their 8th grade pupils. They needed a website that communicates their values, as well as relevant information for the event.

The Solution

A redesign with easy-to-access information

Durable layout

  • Connected to a CMS, the client can focus on providing content without worrying about technicalities
  • Maintaining consistency for each year despite festival themes changing

Overview of activities

  • Focus on festival programme and activities with appeal to the user’s emotion
  • Strengthened social aspect through functional elements
  • Improved organization and labelling of content
  • Clear visual hierarchy and feedback

Clear structure & labelling

  • Complete informational content revealed or hidden in accordions to avoid overwhelming the user
  • Clear labels by using language that is easy to understand by the user

Desktop Research

Danes love being part of clubs

The desktop research we conducted was focused on the lifestyle of Danish people and their attitudes towards social events. We came across an interesting article by Telegraph that had the following statement:

“Danes love a club – an association or a society of some description where they can pursue a hobby.“

Their interests are also supported by the government, which offers many facilities, especially for people under 25 years old. This aspect encourages people to join clubs or associations from an early age and helps turn that into a habit. As a result, the average Dane is a member of 2,8 clubs.

User Interviews

Validating through quantitative research

We’ve conducted, recorded and transcribed three interviews to gain understanding about how 8th grade pupils experience social events and what their attitude and interests are.

Research question

  • What motivates the teenager to attend a social activity and how is their decision influenced?

Thematic Research question

  • What experiences does the user have regarding social events?
  • What is the user’s attitude towards social events?
  • What are the user’s motives for attending social events organized by schools

The main insight

Users participate in an event based on their interest

The biggest pattern we observed is that interviewees decide whether they participate in an event is based on their interest in the event and what they’re going to do and experience. Meeting new people or spending time with friends they already know can make the experience better, but it’s not the main reason for going to a social event.

“I would feel more comfortable to go if I know that there will be other people going with the same interest”

Interviewee 1, 2019

“Of course it helped if friends attended but it was never my main reason”

Interviewee 2, 2019

Content requirements

Embracing festival activities in a social setting

Since event activities have the biggest impact to gain interest for users, the website will focus on the festival programme and its activities.
The event is considered a last get-together before users leave for different high-schools, so content will appeal to the user’s emotion (pathos).

Features that display the total participants for events/workshops and allow users to share on social media fuel the social aspect.

Card sorting

Discovering the relationships between different content

After deciding what the website’s purpose would be and what we want content to convey, we conducted a content audit, as well as usability tests in the form of open card sorting to discover how users relate to different content.

We conducted 4 tests where we presented the test user with sticky notes with pieces of website content and asked them to group and label them in a way that makes sense to them.

With patterns discovered from the 4 tests, we defined the final categorisation.

Information architecture

Defining the backbone of the website

Keeping the categorisation of content in mind, the information architecture pattern is defined as following.

Sketches

Visualizing the website

After a long brainstorm session, we created a common sketch out of our 3 individual sketches.

We based our sketches on the idea that the website will be built with a headless CMS. This way the client can replace their content according to the yearly themes while the template remains the same each year.

The final product

The final pages

Conclusion + lessons learned

What I’d do differently next time

With this being the 2th semester project in our Multimedia Design studies and my 2nd time creating a UI design, I think we did a good job with our research process and bridging that with design. A few things that I learned.
  1. Keep iterating on user insight. It is refreshing to experience how users think differently about things that you think could be a good idea. Giving a page a label that at first sounds fun and suitable for the target audience, could be unclear and confusing to the user. This is why involving the users in the design process as much as possible is crucial — we can always learn from them.
  2. Using a design system. When we started building the website, the Adobe XD prototype is all we had. Breaking pages down into components would have resulted in a more streamlined workflow and we’d be able to achieve consistency and scalability.
  3. Optimized readability. Since the client would swap out pieces of content to fit their yearly festival theme, it’s especially important that elements stay visible when this happens. If they were to change the hero image for example, there’s a chance that the text colour might clash with the image. To improve readability and to make tasks easier for the client, complying with WCAG standards is of importance.

Thank you for reading!

🖼️ My Dribbble profile

UI Design

📃 My resume

2022