CAN’T KNOCK THE HUSTLE

Brand Identity + Website Design for a Grassroots Artist Platform

INTRODUCTION

Can’t Knock the Hustle, or CKTH for short, is an emerging art and lifestyle brand looking to create a platform for emerging artists of all media to present their work, collections of content, and merchandise for sale. The platform is aiming to be a place where featured artists can get the VIP treatment; they can upload galleries of their work in any format, supplement those galleries with a dedicated podcast episode, add a custom playlist, integrate a booking service for upcoming shows and events, and even have a built-in online store to sell their wares.

Kicking off such a comprehensive artists’ platform is no small feat. I joined the founder and project manager for 6 weeks as the sole founding designer to help them bring their branding concept to fruition, create a basic launchpad design system born of that branding, and design all of the pages of their website with notes for developers so that V1 could launch after my work with them concluded.

Such a large concept with such wide-reaching goals needed a really focused approach for me to begin my work, so we began with nailing down the product’s mission statement and launch goals. From there I designed the company’s branding, created personas, established information architecture, built out lo-fi wireframes, tested for accessibility, and finally put together the high-fidelity final prototype.

NARROWING BRAND AND GOALS

Interpreting the Design Brief

To help me understand the company’s mission and design brief, the founder sent me a ‘Design Brief’ document that outlined many of the company’s goals, preexisting trial branded elements, and suggested competitors.

While that brief is confidential, I can share that it was very wide-reaching and vague in terms of defining the company’s brand and actual tangible goals for its product. The audience ranged from artists to sportsmen to curators to lifestyle enthusiasts and the goals of the company were each lofty individually. While I really enjoyed these larger goals, I needed to focus in on exactly what CKTH should do for its users. After guiding that conversation with the founder and project manager, we narrowed it down to an essential core goal for V1 of their website;

CKTH was aiming to be a platform for artists. While that art might include sports, apparel, music, visual art, or anything in between, the platform itself was meant to showcase this art and be a vessel for featured contributors. With that newly declared goal in mind, I began to sift through their existing branded elements.

While CKTH’s founder had big plans to make the platform an all-in-one resource for art and lifestyle, I helped him focus on the webpage’s main goal; being a platform for artists.

Bits of the Brand

The few branded elements that the founder had kicked off with were challenging to interpret or try to kick off directly with, but they really helped me gain insight into what CKTH should do for its users. The existing ‘branding’ included a large range of colors that hadn’t really been assigned individual purposes/functions/indications, and the typography was quite understated and lacked any real system of scale, using the sans serif font Helvetica.

I began to piece together the real conflict of interests between the website’s goal that we had just established and the previous attempts at creating branding. A platform for artists that tried too hard to assert its own brand would inevitably end up in conflict with the artists work. I realized that, in order to CKTH to meet its goal of being a platform, it was going to have to take a backseat to the featured artists it hosted.

I made note of my guiding principle to be ‘content-first,’ that is to lead all my design work conscious of the fact that I was designing the frame to the more important artwork, not the main attraction. This kind of ‘backseat branding’ was a big departure from projects in the past where bold, recognizable branding was heavily emphasized as a top priority.

The founder and project manager had some hesitation when I presented this concept to them, but ultimately understood the logic behind my choice and came on board with my ‘content-first’ design vision. With that consensus made, I was able to launch into audience research.

USER RESEARCH AND PERSONAS

Understanding the market

I kicked off my research phase by doing in-depth analyses of the sites CKTH had identified as their primary competitors or peers in the only artist-hosting space, as well as some others that I discovered during my internet digging. I came away with several key guiding principles in how these sites could best serve their users while still achieving their end business goals.

One of the biggest takeaways was affirmation that content-first design would be a successful strategy in this space. Key sites in the same realm of user markets like HighSnobriety and SSense led with very much the same concept and, as such, had risen in prominence and also favor amongst the actual hosted/featured artists themselves.

Those featured artists were also important to identify in the dynamics of who the site needed to serve and whose needs it needed to consider and prioritize. Of course, the company’s founder wanted to push business incentives and conversion opportunities above all. Artists being featured wanted to showcase their art but also their merchandise and links to their own points-of-sale (like event reservations). The end user overall, though, wanted to explore the site like a curator and a museum guest. They wanted to lead with their own interests, feel capable of finding artists by their own volition, and build a unique experience for themselves.

INFORMATION ARCHITECTURE

Streamlining the sitemap

CKTH’s exiting site was a but of a jumbled mess. It had been built with a basic sitebuilder and grown as the company’s intended hosting functionalities had, but without a guiding sense of organization. This mean that there were 8 tabs in the main navigation, several of which fell under the same main category, and yet somehow all pages were not properly organized or accessible.

I ran a card sort exercise with the names of the site’s numerous pages and functions to see what a user getting fresh eyes on the data would think about organizing them, and I got pretty consistent results. Testers found almost all of the sites functions to fall under one of three categories; explorable content, ecommerce or shopping, and personal account information and functions. Using these findings as a guide and supplementing them with the founder’s explicit asks around featured products and media, I created the sitemap below:

Consolidating a user flow

Next on the to-do list was to compile a user flow that I could adequately prototype to show the future devs and stakeholders how a user might navigate through CKTH’s site.

Based on my findings around the sitemap and which pages needed to lead users from point-to-point, I laid out a common use case for one of my personas and mapped that flow through the pages as established above, including closing circuits on related pages and boolean possibilities where multiple options might be present. That resulted in the plain language and subsequent user flow map below:

BRANDING AND DESIGN SYSTEM

Simplifying and templatizing

Before I started laying out low-fidelity frames, I wanted to take our progress on company branding and apply it to a set of core components that I knew I’d need as different pages came together. There were some essential branding takeaways that I wanted to have top of mind in this process:

To ensure artists’ content was truly the primary focus, keeping most elements in black and white. This not only helped them to feel more like accompanying placards in a museum, but also ensured proper contrast and accessibility.
To double down on accessible elements, use the founder’s choice of one of his previously selected brand colors to serve as an emphasis and duplicity color. This way, highlighting and underlining could be done in one color to bring a more streamlined and consistent feel without overwhelming the hosted artwork. The founder chose sea foam blue as the one accompanying brand color to black and white elements.
Design like a museum curator, not a flashy ecommerce company. The founder really emphasized this point and how important it was that artists felt their work was in a supportive and respectful environment, not being hocked for views and conversions. I took inspiration from museum placards (as mentioned above) for things like modals and buttons, and looked at several museum websites to understand their treatment of artist profiles. I used those findings to inform how I then created branding for the site.

From there it was time to apply those branding concepts to actual interactive elements. I began with buttons, input fields, a basic icon set, dropdowns, and nav elements. You can see those collected first components below:

Thinking at page scale

These initial branded elements allowed me to think on how the actual framing of pages would need to be designed. I knew from my card sorting exercise that we’d have the 3 main categories serving as primary navigation elements, and also how the secondary pages would sort beneath them. I applied this to the top navigation, adding in the cart function when the shop was active, and came up with the result below.

I also chatted with the project manager about linked content in the footer of the website, including the company’s privacy policy and other legal necessities. Once I had a comprehensive list from him, I added those links into the footer and rounded out that design as well.

With these page framing elements finished, I felt ready to move ahead with laying out the low-fidelity version of the site so that I could present it to the founder and manager and get their feedback.

LOW FIDELITY WIREFRAMES

Laying out pages

Next came the task of laying out pages in their entirety so I’d have a jumping off point for the later final versions. I applied the typography decisions and few component inklings I’d had from my first round of design system work to give me a better sense of what the final product would look like.

These wireframes looks quite bare, and they are! Using the content-first strategy to design the site meant that this initial lo-fi stage gave me better insight into the site’s branding in complete isolation, but with the knowledge that it would later surround and frame the actual work of featured artists.

Signed-in user profile page

Letting content lead the way

At this stage, I wanted to check in with the founder and project manager with regards to what they thought of the more minimal branding projected onto the wireframes looked like. I understood that they would not be able to see the full picture without content populating the many gray squares across the site, but I wanted to make sure that they understood the function of the branding I had developed by seeing its separate identity first.

During that meeting, they expressed some concerns to me regarding the strength of the branding and whether it could stand on its own. They really enjoyed the bracketed-heading style as well as the minimal, single-color-accented elements that matched their provided logo, but (as I predicted) were concerned it wouldn’t hold up when the content was dropped in.

I took the time in that meeting to reassure them about the concept of the site as a frame for the featured artwork that would come to inhabit it, and reiterated how it matched the core functional goal of the project to be a platform rather than its own branded visual priority. This took some convincing, because all business sense would point to the company’s own branding as top priority. But after further discussion, they were eager to see what the final version would look like.

FINAL WIREFRAMES

The final culmination

When I finally popped sample content into the wireframes I had created and connected a robust prototype for the founder to test out, I think he finally understood my vision fully. He was very happy to see the content being featured so prominently, and to see how artists could link together all of their content into one virtual gallery. Though he may have had the intent at the start of the project to create these co-existing media and shopping experiences, I don’t think he was sold on the approach I had proposed until I sent this below version over: