PRELIMINARY STUDY
I conducted multiple interviews with the client and brief consultations with his colleagues and audience members.
This process guided me in task prioritization and shaping the website's essential features.
As a result, certain features gained top priority.
The website must:
WHAT IS UNUSUAL
Several factors set this project apart from an ordinary "musician's website" task:
David, the performing musician, can leverage a distinct personal brand.
David is an unconventional, avant-garde musician within a niche.
David, the educator, thrives on engaging with an eclectic mix of learners.
In my quest for beneficial structural patterns, I analyzed over 50 musician websites.
Main criterion: non-mainstream musicians or collectives with music education interests or experience.
I picked 8 websites that aligned with David's diverse interests and activities.
In contrast to most music websites, which often prioritize aesthetics over utility, the selected sites all feature a highly practical structure:
The site map was designed with these principles:
The initial site map overlooked the need for the contact form to be readily accessible throughout navigation.
After initial wireframing, the site map was revised, making the contact form a separate page accessible from any point.
The site map was transformed into wireframes, highlighting the main pages.
Addressing both content coherence and structural interactions was a formidable challenge.
I created 5 mood boards, each representing a facet of David's creativity. They featured real-world art pieces with unique acoustic qualities, reflecting his down-to-earth approach, acoustic experiments, and Deep Listening theories.
In accordance with his preferences and explanations, the main inspirations were:
Logo work started with letter experiments on David's alliterated name.
As per our mood board discussions, the logo was envisioned as a blend of urban style and deconstructionism. Spoiler alert: it didn't pan out.
Next, we tried integrating trombone into the logo.
The initial tries (check out the first row) had a vibrant New Orleans vibe, a far cry from Dove's aesthetic.
The attempt was unsuccessful because simplifying the visually complex trombone led to unintended comic effects.
Following discussions with David and his potential audience, I revisited the "name-logo" concept.
I sought simplicity that echoes David's creative brilliance, wit, and avant-garde passion, without overwhelming.
The finalist contained rotated “V” instead of “A”, with combined “d” and “D”:
full version:
reduced version:
The style tile was crafted, featuring David's preferred dark brown, green, yellow, and white as both primary and secondary colors.
To create webpage backgrounds, I experimented with canvas and painted wall textures, reminiscent of Rothko, Dove's favorite painter.
First, desktop hi-fi wireframes were created, keeping mobile lo-fi wireframes in mind.
Applying the discussed aspects of the style, we created the initial landing page.
The calendar section featured sleek, customizable info cards complete with external links to maps, calendars, and ticket sales.
In contrast to the initial layout, sections like Curriculum Vitae employ horizontal scrolling for space efficiency and interactivity.
The video section doubles as both an archive and a log of past shows.
The mobile version was easily achieved due to the straightforward grid, component system, and layout choices.
These wireframes demonstrate the effortless access to key website sections directly from the homepage.
In the mobile version, all sections are instantly accessible through the hamburger menu and its submenus.
Testers found the expressive backgrounds too contrasting, making it difficult to read the extensive text.
The new background approach adopted seamless blocks with blurred edges instead of solid, large images, creating a tiled design.
Testers were unclear whether the website's primary objective was to promote Dove's music or if there was an additional purpose.
A second call-to-action button was integrated onto the main screen, providing immediate, one-click access to contact David for bookings.
Testers expected to find a schedule or booking calendar under "workshops" and anticipated the workshops schedule under "calendar," not a concert schedule.
Enhancing the CTAs, the main sections of the website received more explicit names.
The music section contains no information about the albums and forces the user to go to a third-party page
New cards were created with detailed info for each album
Users expressed concern regarding massive, unscannable text blocks, particularly on the larger pages in the mobile version.
Extensive text was encased in square blocks with vertical scrolling.
When tapping on the mobile popup navigation elements, some of the users could not get to the desired page due to the small links
Sizable link blocks were introduced to the popup menu.
