‘Bleek World’
A responsive website for a local interdisciplinary artist.
Research, User Testing, Prototyping, UX & UI Design, Branding, Logo Design
Role:
Figma, Figjam
Time:
12 Weeks, 2023
Tools:
01.1: The Problem
01.2: The Research
01.3: The Discovery
02.1: The Vision
02.2: The Features
02.3: The Ideation
03.1: The Solution
03.2: The Iteration
03.3: The Future
01.Discover
There are over a million musical artists who are carving out their respective lanes in the music industry. Due to the market’s competitive nature, it is imperative that artists have a distinct image they present to current and future fans across all forms of contact.
Selim Bleek, an interdisciplinary artist, has a distinct musical style and an impressive network of artists. However, the artist realized their online presence was weak that has affected the growth of his fanbase.
01.1: The Problem
The artist and myself set two research goals:
Gain insight into how people discover new musical artists online.
Learn about what compels a person to follow a musical artist online.
01.2: The Research
-
I conducted a competitor analysis to find artists whose fans would overlap with Selim Bleek’s fans.
Chosen artists match the following criteria: fall under the indie category, appear to have control over their image/sound, and have small-medium fanbase.
-
I conducted six phone interviews over the course of a week to learn about what makes a musician attract and retain fans. Three of the interviewees were independent musicians themselves who all provided insight in building their personal brand. The other three interviewees were music fans whose taste favored local/indie musicians and they offered a fan perspective. Overall, both parties believed a musician needs to have authenticity and consistency to build a fan base.
01.3: The Discovery
After affinity mapping, I synthesized the responses to reveal a key takeaway.
Interviewees would love guidance to find reputable articles, and consequently authors, that pertain to their research subjects.
-
To enable a better experiences for fans, a customer journey map was created to understand how they would experience the brand.
02.Define
Project goals were defined to help conceptualize the features needed for the website to ensure that the users’ needs will be met throughout the brainstorming process. Moreover, it helps me realize realistic business goals and technical constraints.
I was able to extrapolate a concept for the website from my research and further discussion with the artist allowed me to define the product’s goals:
Increase streaming numbers on Soundcloud and Spotify.
Increase following count across social media accounts.
Provide an avenue for artists to reach out about collaborations.
02.1: The Vision
02.2: The Features
A simple method for the organization of the site was implemented. All the tasks a user can complete on the site has their own page that can be accessed through the homepage menu. In other words, there is no nesting of categories that users have to shift through since all options are displayed.
-
With the assistance of user interviews and research into similar application, key features were developed to be implemented in the product. I went on the create a site map and user flow to visualize how future users would navigate the publication.
-
As seen in the image, task flows are designed to be completed in a few steps. Perfect for users who will primarily use mobile devices.
02.3: The Ideation
As I reviewed the interviews and the customer journey map, the average Bleek World user will be mostly concerned about accessing music and learning about the artist. With the intention to make sure features are accessible multiple viewports, a tablet and desktop layouts were created.
-
(L to R): Low-fidelity wireframe sketches for the “Homepage” and the “Article’s Information” screen.
-
(L to R): Mid-fidelity wireframes for the “Homepage” and an “Article’s Information” screen.
03.Design
The client imagines Bleek World as a place where the abnormalities of the human condition is revered. Overall, the design evokes familiarity, playfulness, and even a slight discomfort from users!
#A5BF41
#5B3587
#8A2F7F
Color palette
Splash screens
Utilizing the branded UI library I was able to evolve the mid-fidelity wireframes into the first version of the high-fidelity wireframes to then be converted into a clickable prototype.
03.1: The Solution
-
-
Three users between the ages of 25-55 were selected to participate in the testing to validate the site’s usability. They were tasked to access five key screens: the About, the Contact, the Music, the Portfolio, and the Calendar pages. On average, all tasks were completed around five minutes. A commonality seen across the testers was all three believed the social media buttons to be working links to the artist’s social media accounts.
Revisions were made during the design process and after testing. A major issue testers and myself ran into while clicking through the prototype was the hover effect on the navigation menu distorting the page entirely. When the cursor hovered over a navigation button it would enlarge. Some of the buttons enlarged to the point where elements above and below them shifted too much. Fortunately, it was an easy fix by adjusting the spacing between the buttons.
03.2: The Iterations
03.3: The Future
What I want to do in the future:
Launch a landing page for the artist to gain fans email in exchange for a digital asset, a zine.
Optimize the site for mobile.
