WEBSITE SECTION - CLUB BANTU.png
WEBSITE SECTION - CLUB BANTU LOGO.png

 CLUB

 BANTU

WEBSITE PROJECT

ROLE : 

UI / UX Designer

METHOD & PRACTICE : 

Survey, Research, Prototyping

TOOL : 

Adobe XD

OVERVIEW:

Club Bantu is an African brand bridging together different cultures through music. I was given full control of the project and created their website from inception to final design utilizing UI and UX design principles and research.

WEBSITE SECTION - CLUB BANTU mockup.png

THE PROBLEM:

At first, Club Bantu was a landing page redirecting its clientele to a third party website to purchase tickets. As the brand is rapidly growing, there was a need for one single platform where its audience could access all the necessary information whenever they need it. They should be able to book future events, see pictures from past events, listen to our podcast without having to go through a third party platform, or open an additional app or website.

 

My task was to create a vibrant yet simple design showcasing the club atmosphere while allowing easy interaction.

THE CONCEPT:

Since Club Bantu already has a fan base, I chose to utilize their past pictures as key visuals, to create a natural feel and connection with its audience. For the main interaction, I narrow it down to a single page website for better navigation and accessibility. Last but not least, the primary color is slightly dark to keep the consistency with the nightlife style.

THE PROCESS:

I started off by researching similar brands and websites within the nightlife niche, then I notated what I would do differently. Next, I started creating 5 wireframes ideas showing the different possibilities I had in mind, then I chose different pieces out of the 5 drafts to put together what I believed were most important for the user’s experience.

Once I was done with the final wireframe idea, I proceeded with the HiFi wireframe, keeping my designs simple and consistent. I used shapes and colors to help focusing on accessibility and usability.

Bantu Wireframe.png
Bantu High Wireframe.png
arrow.png

INTERFACE - XD

For my final step, I started the prototype using Adobe XD where I used icons, colors, text, and images to implify the UI while giving the stakeholder a great idea of the website and its functionality.

Bantu High Wireframe.png
CLUB BANTU - XD.png
arrow.png

FINAL PRODUCT

By the end of the project, following feedbacks and minor updates, I had designed a one-page website allowing users to:

  • learn about Club Bantu

  • see upcoming events and purchase tickets

  • access their album 

  • subscribe for newsletters and contact Club Bantu’s team

  • And finally, access their social media.

WEBSITE SECTION - CLUB BANTU concept.png