‘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.

    This is an image.

  • 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.

    This is users’ interviews synopsis.

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.

    This is an image of the personas.

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.

    This is an image of the site map.

  • 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.

    This is an image of the task flows.

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.

    This is an image of low-fidelity sketches.

  • (L to R): Mid-fidelity wireframes for the “Homepage” and an “Article’s Information” screen.

    This is an image of the mid-fidelity wireframing desktop.

    This is an image of the mid-fidelity wireframing ipad.

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

  • An image of the UI.

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

  • Image of high-fidelity wireframes for laptop and tablet.

  • 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.

The Other Work.