"XOXO is an experimental festival celebrating independent artists and creators working on the internet. Each year, XOXO brings together writers, designers, filmmakers, musicians, game developers, coders, cartoonists, and more to share their stories and struggles of living and working online.More than anything, XOXO focuses on the emotional experience of making things online, with difficult subjects including financial insecurity, anxiety, depression, mental health, impostor syndrome, burnout, racism, sexism, and online harassment."
‍Read more about XOXO Festival  →

XOXO Festival didn't have a dedicated website that stored all the information holistically. Instead, year-by-year, they would build separate websites to host necessary information (past and future festivals).

So when the Andy's (the founder and stakeholder) wanted to explain what XOXO Festival was, they would have to link people a Wikipedia page which is not ideal. They asked Friends of the Web to create a website that stores all the information of past videos, blogs, guides, etc.

Notes after we talked to the Andy's (stakeholders and founders): 

1. The main page should explain what XOXO Festival is (above page fold) and should look visually appealing

2. Since their blogs don't have accompanying images, utilize type layout and typography to make it feel designed.

3. Guide page is text-dense and wanted to emphasize that it should look different from the blog visually. He wanted this guide section to feel like a "informational section" rather than "help center". It should be clear, easily legible, and be well organized so that people can find necessary information

4. An archive page that has all the videos from past speakers, event, etc. Wanted this page to be heavily design-focused since it was going to serve as a "hype-man" for both attendees and non-attendees.

5. Schedules page that shows what events are happening on the day of the event. Should feel organized, easy to navigate, and mobile-friendly since it's going to be heavily referenced during the event

Above the page fold, we have:

1. An intro video
2. A brief sentence about XOXO Festival
3. Commonly sought out Navigation links (Guide, Blog, Videos)

The guide page is heavily reliant on type hierarchy – utilizing bold serifs to distinguish between header and body copy. Additionally, the fixed navigation on the side allows for users to jump from one info to another.

The most recent blog post will always be on the top with different design treatment. We decided to call more attention to the most recent post because there is a huge following for XOXO Festival updates from attendees and non-attendees. XOXO doesn't use images for blog posts so we had to heavily rely on typographic layout.

The wavy lines is implemented all throughout the site. In the schedules page, we utilized this line to distinguish between days. Users can tap and toggle and hide each day. On the day of the event, it will automatically toggle the past days and only show schedule details on the current and upcoming days (users can tap on the toggled day to reveal schedule information).

A collection of past videos of speakers, event, etc.
XOXO hires different illustrators each year that are stylistically contrasting from one another. We utilized this individualistic illustration to visually distinguish each year.