Composer Hsin-Lei Chen Portfolio

Project Brief

I had the chance to make a portfolio website for Hsin-Lei — a talented classical/experimental composer.

To fully understand Hsin-Lei's music before determining the art direction, we discussed her pieces, and I presented my design blueprints with her feedback. Her style is heavily influenced by the classical European masters. Growing up and rooted in Chinese culture, most of her songs also relate to traditional Chinese literature and philosophies, lending her work a unique Asian flavor. Those conversations inspired me to create a multimedia website, which represents the essential spirits of her work, incorporating a calm color palette and stylish photography.

Project Analysis

I wanted Hsin-Lei's portfolio to archive her musical background and career history in a press kit. The steps to creating a portfolio involve documenting her career path, arranging her work based on that path, and choosing a proper presentation form. Here are some ideas I used to expose her talents through making this portfolio both a unique spot on the Internet as well as shareable.

Photography: Her portfolio should feature an artistic portrait representing the image she wants to convey. Since Hsin-Lei works as an independent composer, I proposed a close shot to fill the frame as much as possible. Hsin-Lei is a visual person: Through her studies and travels, she captures inspiration with her camera. Many of her musical pieces finish with references to those images and abstract sketches.
Biography: Hsin-Lei only had a press blog when I started working with her. As content strategy and for SEO purposes, we created a biography and artist statement outlining her styles and accomplishments, which will help visitors unveil properties of her music.
Playlist : We curated a selection of her work. It needed a responsive design, so the site would function just as well and appear just as attractive even when the list grew long. The order of songs should be adjustable so Hsin-Lei can always display her best work on the top.
Awards: I put page space to use to display her awards through featured articles. If she releases an album, they’d include good reviews and quotes.
Content Management: The building of this portfolio is a continuous commitment and evolves along with her career. Its content should be manageable via a CMS.

Ideation

I drew inspiration from her music before starting my design. Visually, the site needed to be unique to reflect Hsin-Lei’s offbeat style. Functionally, I wanted the site to archive her music rather than distract the visitor with promotions. I blended the classical tone with a touch of interactive animation — a piano-style button and soft light cast upon the keyboard to reinforce the composer’s spirituality.

Wireframe & Interaction

Interface Design

Design images of the homepage, playlist pages.

User Testing Iterations

After the first design, I led individual tests with eight users. Here is a pre-recorded sample clip. Most users liked the visual style and found the navigation generally easy to follow. Because of the flat and intuitive striation, almost every user can click through the site smoothly.

There were three possible improvements that will enhance the overall user experience:

Users would like more information about the artist on the landing page.
Google Analytics reported that only 7.7% users (based on a 78-user sample) clicked the contact page, and no one used the contact form. This may be because they could find social media icons and personal contact on the same page.
There was a high bounce rate between song tracks' transition. I hypothesize that enhancing the loading effect to better engage users would lower this.

What I've Learned

A good design for a musical portfolio does more than play some lovely tunes. It expresses the deepest feelings and emotions of the composer. Following this direction, a multimedia experience can resonate with the audience. Besides, social sharing was one of the big consideration for this project.

Another interesting thing I observed was that all the three male testers clicked on the album first, while female users tended to click through the menu tabs or main navigation. Male testers performed better at using different control mechanisms to navigate through the site, like mouse-scrolling or click-and-drag, whereas female testers usually relied on mouse-click.

Grace Experience Product & Marketing UX Design

Web Application