Olivia Korosak

Overview

Year
2023
Role
UI design
Web development
View Olivia Korosak

Who is Olivia Korosak?

Olivia Korosak is an award-winning Canadian composer for film, orchestras and ensembles as well as a sound designer for theatre. Trained in piano and voice from age four, she graduated with highest honours from McMaster University in Music and Classical Voice. She is a member of the Screen Composers Guild of Canada and the Association of Canadian Women Composers.

Black and white close-up of an open book of sheet music on a music stand.
Portrait of composer Olivia Korosak against a dark background.
Composer Olivia Korosak and background sheet music.

The Project

Redesign and develop Olivia's portfolio site to better showcase her work and migrate it from WordPress to a static site built with Contentful on Cloudflare Workers.

The Brief

Context

Olivia's site was coming up for renewal at a higher cost and its custom WordPress theme had become limiting. Compositions were tracks grouped by a category standing in for its project, all on a single archive page. This made it hard to add detail to a project and as the page grew, so did its load time. Credits, performances and scoring were later added as separate pages, disconnected from the rest of her work. Having designed and built the original site myself, it was also a chance to revisit my own work and improve on it as a designer and developer.

Top of the old desktop work page. Hero titled 'Compositions' and header links for 'About', 'Compositions', 'Credits', 'Film Scoring' and 'Contact'. Below, a short intro and two columns of project headings: 'Beatboxing Flute', 'Chamber Works' and 'Isle of You', each followed by a list of tracks with a thumbnail, play button, title and duration.
Bottom half of the old desktop work page. Two columns of projects and tracks continue with headings: 'Organ', 'Orchestra Works', 'Piano', 're:mind' and 'The Lonely Girl's Guide to Valentine's Day'. Many tracks repeat the same thumbnail.
Pre-migration desktop work page, a single page displaying projects and tracks.

Goals

  • Organize work more clearly for prospective clients and content editors
  • Reduce hosting cost and move to faster, more flexible hosting
  • Improve page load time on homepage and work pages (~2-4 seconds)

The Process

Visual Redesign

The redesign started with rethinking the information architecture of the work content type, bringing everything together under work as one place to explore and to point prospective clients to.

  • Flexible projects: projects can be a composition, credit, score or any other project type, with or without tracks.
  • Flexible tracks: tracks are now their own content type, assignable to a specific project and/or genre.
  • Better wayfinding: breadcrumbs throughout make it easier to navigate and explore related work.
Desktop work page with links for 'About', 'Work' and 'Contact'. Under 'Projects', a row of four project cards with thumbnails and titles, then an 'Explore all projects' button. Under 'Tracks', a table of tracks with play buttons and columns for title, project, genre and duration.
Desktop projects page with 'Work / Projects' breadcrumbs, a title and short intro, then a grid of cards, each with a thumbnail, project title and a type label such as 'Score' or 'Composition'.
Desktop tracks page with 'Work / Tracks' breadcrumbs, a table of ten tracks with play buttons and columns for title, project, genre and duration and page numbers below.
Desktop project page for 'Isle of You', with breadcrumbs, a pink cover image beside the title and a 'Score' label on a dark red gradient. Below, 'About the Project' and 'My Role' sections, then a list of the project's tracks.
Desktop track page for 'Opening', with breadcrumbs and a large play button beside the title. Below, track details listing the project: 'Isle of You', and duration, then a table of more tracks from the same project and an 'All Tracks' link.
Post-migration desktop work, project and track archive and entry pages.

Headless Static Site

Rather than iterate on the existing WordPress theme, the redesign was an opportunity to start fresh. With rising hosting costs and the ongoing admin maintenance that comes with any monolithic CMS, a managed headless CMS and static host, both with generous free tiers, made the most sense.

  • Static site generation: Formation Static generates every page ahead of time and Formation provides lightweight front-end web components and styles.
  • Headless CMS: Contentful manages all content with no self-hosted admin to maintain, serving assets from its CDN with dynamic image resizing.
  • Edge hosting: Cloudflare Workers serve the site from the edge for fast load times with serverless flexibility only where needed.

The Outcome

A month after launch, Cloudflare Web Analytics showed page load times of around 500ms across pages, down from 2–4 seconds pre-migration, with most visits in the green for Largest Contentful Paint.

Desktop homepage. A photo of Olivia beside her name and 'Canadian Composer' on a dark purple gradient. Below, a 'Featured Work' section with the 'Liminal Girl' project and a list of tracks, two press quotes under 'Nice things people are saying' and a 'Let's work together' section with a 'Get in touch' button.
Mobile project page for 'Liminal Girl', with a menu button, breadcrumbs, the title and a 'Score' label above the film poster of a young woman in a dark hood.
Mobile track list with the playing track, 'Staring Sloane', expanded to show its full title and duration, other tracks are collapsed below. A white audio player is fixed to the bottom of the screen with previous, pause and next buttons and a progress bar.
Desktop track page for 'Opening Opening' with a large play button, title and table of more tracks. The playing track is highlighted with a pause button. A white audio player fixed to the bottom shows previous, pause and next buttons, the track title and a progress bar.
Desktop homepage, mobile project page and mobile and desktop track pages with audio player.

The site is now faster and easier to maintain. New work is simpler to add and for visitors and clients to explore. At launch, from Olivia:

"Ahhh it looks amazing! I just googled myself! I cannot thank you enough, I absolutely love it!"

View Olivia Korosak

Explore more work

All work items