HOKUNEIA WEBSITE
Website design and implementation for HOKUNEIA, a creative arts collective of musicians and artists, showcasing its members, mission statement, and music releases. The website launched in February 2021, alongside the official launch of the collective.
PROJECT ROLE
Product design, graphic design, and site implementation
TIMEFRAME
December 2020 - February 2021
WHAT IS HOKUNEIA?
HOKUNEIA is a creative arts collective formed in 2020, with the goal of fostering growth among like-minded individuals in the creative arts. HOKUNEIA is my own personal passion project that I conceptualized to form an inclusive and supportive community to grow alongside in my journey through music and music production. Since it’s launch in February 2021, HOKUNEIA has hosted a number of charity events, featured over 30 artists, reached hundreds of followers, collaborated with many, other well-established community organizations, and raised over $2000 in donations to philantrophic efforts.
GOALS
To accompany its launch, HOKUNEIA needed a website built so that there is a centralized location for the public to learn about our newly formed organization. Without this, it would be very unlikely that would we able to fully convey this information and garner interest in our organization with social media posts alone. Thus, the HOKUNEIA website was built with the following goals in mind:
To fully convey to the public who we are, what we stand for, and our mission as a creative arts organization.
To spotlight our member artists and create an avenue to drive traffic to their social medias and works on SoundCloud.
To provide a method of communication to us for those who wish to contact us for inquiries and opportunities.
MY PROJECT ROLE
HOKUNEIA, at the beginning stages of forming, consisted of mostly music-focused members and lacked graphic artists and UI/UX designers. As a result, I stepped up to take on the role as the group’s designer for the website and social media posts.
I was the sole product designer, graphic designer, and developer for this project.
Although I was the main person responsibile for this project, I am grateful for this opportunity for giving me tremendous growth. My key achievements in this project are listed below:
- First fully completed project from end to end. I was involved and was the main driver of the project, from conception to implementation & launch.
- Increased proficiency in design tools. This project provided challenges that gave me the opportunity to improve my capabilities in Figma, Photoshop, Illustrator, and Webflow.
- Experience and gained knowledge in web design and implementation. Working and launching this website gave me a glimpse of what it’s like working the next step beyond design. I gained valuable experience with HTML/CSS and website builder apps, specifically Webflow.
COMPETITIVE ANALYSIS
To better understand how I should approach the website design, I turned towards the websites of our other creative collectives and of record labels to perform a “competitive analysis.” Specifically, I examined the websites of LGCY Media, Pastel Collective, and Trigger Collective, who happen to be well-established and our peer orangizations in the music community. I also looked to Atlantic Record’s website as a “competitor” in my analysis to get a good grasp of what the design in a professional company looked like.
%201-min.png){kind=logo}
The following are my key takeaways from this competitive analysis:
- Most of the sites achieved the goals that we wanted to achieve with our site but some did this more efficiently than others.
- Only one of the sites told me about their organization on their landing page, Otherwise, these descriptions were more difficult to find.
- Only one site (Atlantic Records) focused on driving traffic to their featured artitsts and releases.
PERSONAS
To guide my designing and also to address some of the difficulties that I experienced while doing my competitive analysis, I developed the following two persona of users that will visit the HOKUNEIA site.
After reviewing my research and the personas that I have created, I defined the following requirements that I set myself to fulfill in order to help the both the users and HOKUNEIA meet their goals using the Website:
- Users (Website Visitors) must be able to find things they are looking for easily and efficiently. To achieve this, I needed to be able to lay out information and links clearly so that they are easy to find.
- Information presented must be concise and displayed in an organized manner. As there is a large amount of information intended to be displayed by this website, I wanted to make sure that users are not subjected to excess cognitive load at any time.
- Users should also be given the opportunity to view more detail of a section if they wish. There should be a pages/sections dedicated to certain aspects of the organization. (ie. Artists, About, etc.)
SKETCHES
To begin with my design of the framework of the Website, I created the following sketches, depicting some of user flows and my ideas of how to fulfill the requirements I defined earlier. For this sketching session, I wanted to focus mostly on ways information could be presented in a clear and organized manner.
WIREFRAMES
Using Figma and referencing my sketches, I went ahead to design a set of low-fidelity wireframes, allowing me to assess the effectiveness of my proposed ideas of information arrangement and archetecture before moving on to working on more visual/aesthetic elements.
BRANDING AND UI DESIGN
The HOKUNEIA team wanted their branding to be represented by a pastel-colored, “dream-like, watercolored painting” aesthetic. Thus, I styled the website’s aesthetics to reflect the afformentioned preferrence and the current logo’s colors.
BRAND COLORS
LOGOS
TYPOGRAPHY
IMAGERY/INSPIRATION
After some user-testing and a high-fidelity, full-colored prototype design on Figma, I built the HOKUNEIA website based on the design using Webflow. The final website features a design that helps visitors efficiently get the information about HOKUNEIA and its artists they need, while being staying true to its intended branding aesthetics.
The website was published on February 19th, 2021. Since its initial publishing, HOKUNEIA’s website have been able to fulfill the goals of the organization and reached the following outcomes:
- Our HOKUNEIA artists have reported an up-to 7% increase on plays on SoundCloud coming from the HOKUNEIA website, according to SoundCloud statisics that track incoming web traffic.
- External organizations and other creative artists have reached out to us via our website’s Contact page, for collaborations inquiries and how they could get more inolved with HOKUNEIA.
- While surveying a number of site visitors, the website’s aesthetics were praised and described to be “dream-like” and vibrant, which signified that it aligned to the intended visual branding of HOKUNEIA.
As HOKUNEIA’s main Graphic Designer, I will be continuing to manage and update the website every month to include new information about upcoming artists and releases. I also intend to keep surveying visitors to make the experience more effective and creative.
GENESIS
Graphic design and video production for a large-scale, livestream charity music festival, featuring 23 acts and 5 creative organizations.
AFTERSET
Graphic design and video for a livestream charity music festival in collaboration with a leadership conference hosted by UVSA.
HOKUNEIA TEAM SPOTLIGHTS
Graphic design of spotlights images featuring members of a creative collective’s roster, posted on their social media platforms.