Art on Blast responsive website

Project type

UX Design / UI Design / User Research/ Usability testing

My Role

Sole UX/UI Designer

Tools

Figma, Sketch, Paper & Pencil

Duration

2 Months

Overview

As part of a rigorous hands-on design course that covers the design process from end-to-end, I was tasked with completing a second project in which I could choose to design a responsive website for the first project which was a mobile first application. I chose to create Art on Blast website, an easy to use responsive website that connects users to professional musicians, allowing users to make secure bookings with musicians

Watch a demo of the Final product

Design Process

Empathize

I started the empathize phase of my process by conducting market research and interviews to better understand who the potential market could be as well as better understand the solution that needed to be created.

Interview

I conducted remote research interviews to gain a well-rounded understanding of my users’ needs, goals and pain points. I asked questions focused on users’ experiences with finding and booking reliable musicians. I then analyzed my users’ answers by sorting them into an affinity map to gain in-depth insight

Personas

Using my findings from the user research and interviews, I created user personas to represent users with different needs, paint points and backgrounds.

User Journeys & Flows

In addition to the personas I also created user journeys and user flows for the website's main functions. I wanted to understand how ART ON BLAST users would complete a function and what they would need to accomplish it.

Define

My findings revealed that there was one well-known, direct competitor to my app, the only difference being that the competitor only offers a responsive website. This means the potential for Art on blast respnsive website is huge. I decided to seize the opportunity of creating an app users’ didn’t know they need.

Problem & Solution statement

My findings also assisted me in drafting my problem statement and creating possible solutions to the user needs.

User needs

The user research helped me revise my possible solutions and user stories. Moving forward, I started designing the website, with the following functions.

Ideate

I started the ideate phase of my process by conducting market research and competitive audit to better understand who my competitors were and what they did well or lacked.

Site Maps

Then created a site map to organize the structure of my website and have a visual depiction of the screens and how they relate to each other.

Sitemap-Musician booking website (5).png

Sketch

Prototype

Next I started sketching low-fidelity wireframes with pen and paper.

I moved on to Figma for my mid- and high-fidelity wireframes. Throughout the different fidelity stages, continuous iterations were made to improve the website’s functionality and UX.

Iterations

As a first step in the iteration phase, I used Figma to create a clickable prototype.

Test

Usability testing

I prepared for usability testing by creating a test plan and test script to ensure an easy and smooth testing experience for my participants.

I conducted moderated remote usability tests and was able to gain valuable insights. Using my findings from the tests, I noted the findings into a spreadsheet then created a affinity map to analyze the results and map out insights and prioritize the errors that occurred during testing.

Final mockup

AOB Final UI DESIGN- Select date Page.png

AOB Final UI DESIGN- Checkout 1 Page.png

AOB Final UI DESIGN- Checkout 3 Page.png

Style Guide

I used real and vibrant images to engage users and get them excited to use the Art on Blast App. I wanted the images to be inviting and inclusive in representation to give users an idea of possible musicians that are attainable on the app for different users. The images and features also showcased a wide variety of information for each musician at different price points to ensure that the app was appealing to different users’ needs and budgets.

Colour

The apps main colour is purple. The choice in purple came from my goal to make the experience of finding and booking a musician edgy, lively and enjoyable. I decided to do my research on the color purple and discovered that the color purple is a color that represents meanings of wealth, extravagance, wisdom, dignity, grandeur, devotion, peace, pride, mystery, independence, and magic. I also discovered that the color purple is a royal colour representing luxury, nobility and creativity. This closely correlates with the main purpose of the Art on Blast app; users using the Art on Blast App is in search for creativity in their efforts to find help for an event, project or lessons of their own.

Typography

For the typography I made use of Horizon for the Logo, to give the website a professional and an inviting appeal to it. For all other text I made use of Roboto, a neo-grotesque sans-serif typeface font, to ensure legibility and a clean and simple interface.

Buttons & Icon

I made use of simple and universal icons, ensuring that the icons were visible and clear was my main aim. For the most part making sure that the colors and size were appropriate for the UI of the website.

Reflections

Initially I thought that the process of creating a responsive website for the mobile first application would be fairly easy, but this was not the case as I started to design. Challenges came from adjusting my designs for different devices and not just for mobile. I found this at times difficult during wireframing because I had to break away from the fact that I am no longer designing for a mobile device, I had to therefore consider that the device had more space and what would that look like in adjusting it for a website.

For the testing phase, I do wish to continue to test the website but with different participants. I do think because I used the same participants that I used for the mobile-first application version, and observing how they navigated their way through the website, went smoothly but could it be due to the fact that they were somewhat familiar with the functions and features that they experienced on the app. With more testing I am going to make use of participants that are not in the music industry and who have never tested the app or website, just to get more insight.

Through the project I have valued the feedback from participants who have expressed how much they would use such a solution, as most participants were actual musicians or musicians in training as well as individuals who have needed help from musicians for their events but have experienced challenges with this process. With their feedback this solution definitely has good opportunity to be further developed of which I have been in the process of doing so as it would also be a goo solution to introduce even for myself as I director constantly seeking professional talents for the stage.