OHMF 2023

Project Brief

Oak Harbor Music Festival Redesign was the second project of Web Page Design. It consisted of breaking down the Oak Harbor Music Festival website, recollecting information from the staff at charge, target market, and rebranding elements and developing a fully coded two-page website.

Even so, I decided to take this project even further by designing a fully flexed prototype based on my Home and Subpage comps. This prototype takes users through three more pages and includes a mobile view for responsive purposes.

Client

Cynthia Mason - President of Marketing at OHMF

Timeframe

February 28, 2023 - April 24, 2023 (8 weeks)

Tools

- Adobe Illustrator
- Figma
- Google Docs VS Code

Phases

Phase 1 - Initial Project Planning
Phase 2 - Home Page Comps
Phase 3 - Revisions + Secondary Page Comps
Phase 4 - Full Design
Phase 5 - Pseudocode
Phase 6 - Home Page Coding
Phase 7 - Fully Developed Code
(Both Home & Subpage)

Problem

Oak Harbor Music Festival’s website lacks some organization and emotion. Some of the content, such as huge vertical banners and sponsors take way too much space on the screen making it overwhelming for users to look at.

On the other hand, a lot of the textual content is minuscule to the point where it is barely even readable. There is hardly any harmony between pieces of content as it seems everything is pushing each other away.
The Memory Maker app should have accommodations such as daily reminders, picture albums, constant GPS tracking, and challenges that help users refresh their mind.

Goal

The main design goal for our client is to represent a clean, yet emotion-filled, and welcoming website that grabs the attention of its users and keeps them hooked. 
In order to express the OHMF aesthetic it is important to come up with a more contrasting palette. Additionally, I was to reorganize each page by using a well structured grid. And finally, in order for users to have a complete experience, I opted by creating speedy Tickets and Checkout pages

Background

Oak Harbor Music Festival (OHMF) is a non-profit 3-day-long annual event hosted at Oak Harbor, Washington with the purpose of providing revenue that supports Whidbey Island businesses while upholding a safe, joyful space for locals and the neighboring islands to enjoy. In comparison to other competitors, Oak Harbor Music Festival stands out for bringing smaller, local bands to come and play their music.

Target Market

Teenagers (13 - 17)
Young Adults (18 - 25)

Demographics

The data displayed in this section was taken from various sources online. Some of these including Statista, TSE Entertainment, and Worldmetrics. Each piece of information belongs to its own survey and/or statistic and was solely used for reference.

Personas

As expected, the two personas for this project were young individuals. Vincent Myers, a college freshman searching for a night out experience and Sophia Cunnings, a recent graduate who just needs to decompress. Both pretty much on the same level, yet different reasonings.

Color Palette

Once the brand vibe was clear, I began the redesigning process by choosing a vibrant, yet educational color palette that could be easily identified by children and associated with learning. For this reason, my primary color options were blue (which can be associated wih calmness), a bright green (which resembles kindness and represents the nature), and yellow (of course, happiness but also focus).

Typography

Buttons and Icons

Oak Harbor Music Festival typefaces used.

Oak Harbor Music Festival website branding elements.

Logo

For the most part, the original Oak Harbor Music Festival logo has been the same each year, with the only thing that has changed is the number of the year and its color. As you can observe, the classic logo is composed of a guitar silhouette holding the festival’s name.

As part of the rebranding, I decided to take a more minimalistic approach by forming the shape of the guitar out of the initials that spell out its name (OHMF). On top of that, since most of the site would be a darker blue, I contrasted this by choosing the bright orange color that was shown above. Additionally, I opted for presenting it horizontally rather than diagonally.

Case 1

Purchase tickets for yourself and a partner for two separate days as closest as possible to the stage.

Outcome

Tester went directly to the tickets page, chose two tickets for September 2 and September 3. He then clicked on area 1A on the floor and completed the checkout process.

Case 2

Go over the 2022 Scholarship Recipients and then contact the OHMF staff.

Outcome

User looked around the home page for a short time before realizing the tab was found on the nav bar. Then he went to the scholarships page and dropped down the 2022 section. Afterwards he went to the contact section, filled in the forms and clicked “send”.

Feedback

Responsiveness- According to professors, it was very decent seeing a webpage prototype that also displays a mobile view of itself. However it was noted that I should try also including a tablet view version.

Gradient - The gradient on the background gained mixed opinions as some said it was fitting for the evening sundown look while other said it was distracting or hard to read on.

Horizontal Scrolling - There are some areas which make use of horizontal scrolling as an interaction to view more artists or images. It was mentioned by testers that these should be removed as they do not work and scrolling only occurs to dragging the section from side to side.

Results

I believe OHMF redesign has been one of my most full-fleshed Figma prototypes. Of course there are some design decisions which I have thought about changing up but overall I feel like this one offers the best navigation interactivity so far.

I will take into account everything that was provided as feedback from my peers, professors and testers to update this prototype. I will also apply this knowledge to future projects.

Service Hours