BLCK Case Study | Design Studio

BLCK

Who is BLCK?

Have you ever wanted to make passive income with real estate but lacked the tools or knowledge to feel confident about getting started? BLCK bypasses the noise to find, bid, and lease your fully furnished property to start hosting within days.

Role

Skills

Team

Timeline

Problem

The problem was the lack of resources and education available for those who have no experience in the home rental field, particularly in managing properties. Seeing that there was no easy one-stop shop that would educate and assist you in your journey created the perfect opportunity to tap into a much-needed market.

1. Creating a dark mode brand that also feels friendly and energetic.

2. Creating contrast to the client's previous branding that was provided.

3. Create a flow that didn’t involve the website hosting financial information.

4. Including educational content without overwhelming the reader.

Challenges

Step one was to layout the goals that BLCK had for their MVP.

We created 3 pages to tackle each goal for BLCK.

Education: BLCK not only provides online courses to help educate you through the process but also through its own library that holds downloadable content.

Relatability: This is through the tone of the brand. You see most of the brand's tone on its Blog page where it can provide content that is relatable and relevant to the users.

Decision Making: Providing the users with a calculator that helps show the breakdown in cost and profit that they could potentially make with each listing.

Each layout is simple and easy to navigate through so that the users don't feel overwhelmed while learning how to make a profitable income working with BLCK.

Website WireFrames

The user takes a journey that starts with learning about BLCK and the different ways they can work with or even use the BLCK website. After gaining more knowledge about the company and website they can then explore all that BLCK has to offer. Using the navigation bar at the top they can choose where their next journey begins.

One of the main goals was education and this is consistent throughout the website. The resource tab was created to hold all educational tabs to free up the navigation bar while keeping the screen clean and simple to navigate through.

Adding a lot of images/ graphics keeps the information easy to digest and the reader engaged.

Clear CTAs on each page help to direct the user as to what they are doing on each page.

UI & Branding

BLCK provided its own branding for this project and after reviewing their branding I noticed some things that could be added to help convey their brands tone more effectivly.

Logos

Even though we didn't do much rebranding while creating BLCKs website I did decide to add more elements to their branding like line art to help bring out the brand's personality. Adding a lighter blue (Sky Blue) to their branding and playing with the contrasting blue tones helped to create a masculine feel while providing the much-needed contrast in colors to their previous branding.

Graphics

Line Art was used to help make the brand feel friendly and inviting, compared to the standard corporate feeling that the blue color tones usually give off.

UI Kit

The UI kit provides a clear guide on how to use each button and the interactions that each button has when clicked. Creating this guide helps me to make sure there was a clear separation for each action while also providing contrast in each action.

First Landing Page

Final Landing Page

Behind the design

Landing Page

In the beginning, the client wanted a video to play on the landing page but the video was not ready to be put on the website in time, so we pivoted to adding additional listing information on the landing page. This allowed us to add a video section on the about page of the website that could be uploaded at a later date.

Behind the design

How BLCK Works

Because the client wanted to add a lot of information on the process BLCK will take you through I decided to break that information down into sections that corresponded with line art images to help separate the text and make it easy to digest..

Each page was created with one task in mind for the user to follow. The about page was created to inform the viewer, providing them with more information about the team and how they can connect and work together with the BLCK. A contact page was created to help build better connections. Users can contact BLCK or even request BLCK to work in their area. Helping BLCK to build relationships all over the world and not in just one location.

Map was kept simple to make it easy to find information and filter fast and effectively.

-Using the purple color to determine what is clicked and how to apply filters.

-Giving each filter a button makes it simple to find and walk them through the page in a guided flow.

-Creating rows and columns on the page make it easy for the user to work their way through each station to get the final result they were looking for.

-Data Calculator page breaks down the information into sections to make it simple to find and fill in text boxes.

With such copy heavey pages keeping the information short and sweet made the page impactful and simple.

-Adding a small amount of lineart/ doodles helps to tie in the brands personally throughout the website.

This flow was created to help show the process the user would take to gather more information about a listing while providing BLCK with additional details about their users.

-The line going down the page indicated that the profit calculator will travel down the page alongside the properties information.