WEAREBANDZ — Connecting artists with venues
Let’s start this one with an anecdote!
Earlier this year, I went to Ireland to celebrate New Year’s Eve with friends. We stayed in Galway and Dublin. Whether in a small town like Galway or the city capital, live music was everywhere, at every hour of the day and of the night. There was not a single bar without musicians playing live, singing, enjoying, offering a show to the patrons. Not only bars and restaurants were full of music, the streets too! The cities were like a live radio that nobody ever turns off. And I remember the first thing I said to my friends:
“How come we don’t have that in Paris?”
Setting the stage
As you know, the world is full of artists wanting to share their passion, and yet in some big cities live music is not that common still, especially in smaller venues such as bars or restaurants.
The idea
A few years ago, Nathanael Dahan had the idea to bring musicians and venues closer together. He thus assumed that the problem lied in the fact that, while, on one hand, we were not lacking artists nor venues, they, on the other hand, were probably lacking simple ways to get in touch.
The problem
No, musicians did not wait for any tool to go out and play their music — but the truth is when talking to them, they are always looking for more opportunities to play, meet new artists, discover new places, share their passion! And without connexions, it can come as quite tricky.
The opportunity
Being a musician himself, Nathanael knew the struggle and saw in it an opportunity to improve the live music organization experience.
But how?
Launching a two-sided online platform for both artists and venues to find each other, get in touch, plan events from open mics to concerts — all in all — Rock the stage!
And that’s how WEAREBANDZ was born.
My role
Nathanael had already worked on the project to define major elements and pages. But, recently he felt the need to have a fresh designer look at the existing content in terms of both UX and UI before the platform goes to development. After initial discussions, we were both eager to work together on this project, me as a Freelance Product Designer and him as the Project Manager and Founder of WEAREBANDZ.
Roadmap
After a remote kick-off meeting with the team, we agreed on the project scope and decided to dedicate 10 days to the project to cover all the mission’s objectives:
- Review all the existing pages from a UX/UI point of view and identify areas for improvement.
- Point out all missing pages.
- Define administration rules for several scenarios.
- Redesign and clean everything as hi-fi wireframes and eventually a realistic mobile prototype ready + responsive desktop frames.
Let’s get to work!
Toby can’t live without Asis
Please forgive my designer jargon, in other words:
You cannot define a to-be state (what is going to be) without first analyzing the as-is state (what exists now)
So, before anything, the priority was to understand what had been done so far, what was up for changes, and what was not. This implied dedicating specific time to:
- Review all the desktop wireframes and understand their flow.
- Read the requirements documentation.
- Get acquainted with the brand identity documentation.
You’re the real MVP
Sport is not the only field in which MVPs are sought:
In Product Design, MVP also stands for Minimum Viable Product. Otherwise known as the minimum features needed for your product to live on the market. It can be one main feature, it can be several little ones: as long as it’s stripped of any additional stuff that would only provide low value and postpone the product’s first delivery.
The WEAREBANDZ’s team already worked on a feature prioritization for their MVP and it helped me a great deal. Yet, to make sure we had the same vision of the scope I decided to synthesize it all in 3 blocs:
- MVP, what needed to be done for this sprint
- TBD, literally what was to be determined
- Out of Scope, I think this one speaks for itself.
But first, usability
Since a UX review was needed, I took a step back into the Design process to black and white wireframes to focus only on usability — away from any graphical distraction.
For the first version, the idea was to come up with a light version of the final product in mid-fi covering only the core tasks to be accomplished on the website, namely:
From the artist point of view
- Search for events
- Apply to an event looking for artists to complete their line-up or book an available venue to play a gig
- Check your agenda and follow-up on your confirmed, pending and canceled events
- Contact the venue via a messaging system to manage your requests
From the venue point of view
- Create a new event
- Search for available artists
- Send an invitation to artists matching with your criteria
- Manage the received request
Testing as the golden rule
Both prototypes of the V1 were prepared for the purpose of the testing sessions starting from day 4 of the project. The client had recruited 6 users, both musicians and event organizers, to test out the product’s usability remotely.
During those two half-days of testing, we gathered a lot of precious insights from the users. This was the big Research highlight that helped us point out major needs and expectations from both artists and venues. Some of which were already planned for the MVP, some others that were missing, and turned out to be important.
How do we transform testing data into actions?
Testing led the client and me with a LOT on our hand for the V2, so we both agreed on the need for a major mid-term checkpoint.
I considered it a perfect time to turn it into a prioritization workshop using the MoSCoW method.
If you’re not familiar with this feature prioritization technique, there are plenty of articles on the topic that sum it up very well, such as this one.
The idea was to list out all the insights and pending questions on digital post-its and to review them one-by-one and place them on the matrix as shown below. This is the before-after result:
Even if it seems a lot of post-its ended up in Must Have, it’s important to bear in mind that most of the post-its were part of the MVP and remained essential to the project.
All in all, this 3-hours workshop was highly beneficial for us to prioritize and agree on the remaining workload.
Eat, sleep, iterate, repeat
The road to the V2 wasn’t the shortest but it was worth the trip.
This new version allowed us not only to add pages and implement pending features but also to solve usability issues. Here are examples of the iterations made on the Search and the Agenda:
Only when usability is fixed, can the UI step on stage
WEAREBANDZ already had defined a brand identity with the help of an agency and it implied the logo and its declinations:
After discussion and UI proposals to the client, we agreed on something elegant, sober, minimalist, and clean. All of which adjectives are key to the brand image Nathanael wants to give his product. This was conveyed in the UI as follows:
The primary colors are composed of a contrasting duo with a dark blue replacing the original pitch black for a more modern look. It’s used everywhere on text, navigation, buttons, and icons.
The secondary colors come from the logo and have mostly an indicative and informative role on the interface.
The sans-serif typeface Assistant came as very convenient for our design choices. The sans-serif basic look of it matched with the classic and sober style all the while helping the readability and still conveying minimalism and warmth with its rounded edges. Plus, the variety of fonts available helped to play around weights and create structure.
The idea behind this dark blue & white sober duo was to leave enough place for the user’s content to live freely. This can remind you of famous social media such as Facebook, Instagram, or Pinterest, where the interface itself is quite color-less but becomes alive and vivid as soon as users take on.
Design for responsive, you shall
The project was thought mobile-first based on an iPhone 8 to match the most popular device size currently used worldwide.
Building the website responsive was a priority as the target users are often quite busy and on-the-go, thus using their mobile quite often.
Final result
Getting ready for development
To ensure a smooth handoff with the developers that are going to bring this project to life, we agreed on several deliverables on my part:
- A clean and complete Figma file with all the frames, Design System components, comments, and prototype links to understand both the flows and interactions.
- A handoff documentation file with main links and explanations.
- A Drive folder with assets and project documentation.
- Video prototypes of the final version for a realistic preview of the expected result
Next steps
My mission ending only means that we’re coming closer to the design being developed and becoming live soon, I hope!
With more time, the next steps I would suggest would be to:
- Conduct more usability tests on the V2 parts that were not tested at first and on the one on which iterations have been made
- Run more desirability tests of the UI to see if it matches the brand from the users’ perspective.
- Spend more time on micro-interactions for specific moments in the flow.
Biggest challenges and key learnings from it
Planning and workload
We underestimated the time needed to cover the project scope and its related workload, which led to busy days and a lot of stress to meet deadlines. Eventually, we had to agree on 4 additional days to finalize it all.
Lowering ambitions and knowing when to stop
The client was very happy to see his project coming to live and I was very happy to participate in it. He is passionate about his project and I am passionate about design. What’s wrong would you ask?
The problem with passion is, sometimes you don’t know when to draw the line.
On one hand, taking things out of the scope was frustrating for him because he felt that doing less would consequently lower the platform’s quality. On the other hand, I had some issues knowing when or where to stop because I always wanted to go the extra mile even if it meant giving up time to get creatively inspired or just personal time.
Trusting the process
All this Design Thinking process was new to the client, and it was my responsibility to guide him through it and make him trust it by proving its value. For example, at first, you can wonder why there’s a need to spend so much time on a mid-fi version, which means, postponing the graphical elements to the end of the project.
Learnings and solutions
- Communication: I was very lucky to work with a client truly available and committed to the project. By communicating and being very transparent of the states of things, he was able to see what was taking longer than planned and what had been underestimated.
- Prioritize: as designers, we should prove the value of iteration but also of doing less. Wanting to do too much at once can be counterproductive for the final result. Baby steps guys, remember, less is more.
- Rephrase everything: Even if things seem clear, it does not mean they are. Take time at the beginning of the project to state the obvious and agree upon the scope to avoid misunderstandings and frustration.
- Workshop and retrospective: use the tools learned in the Agile methodology to embark on your client and make the project go forward.
- Be flexible on your roadmap: I had to take more time than planned on the mid-fi but was so happy I did in the end as it resulted in having a well-structured hi-fi.
Final thoughts
I was so happy to take on this design journey with Nathanael and his WEAREBANDZ team! I gained a lot of project management and design experience during this project, all the while dealing with all of it remotely!
A big thank you to Nathanael for trusting me with his project and I can’t wait to see the platform online in the coming months and spread the word!
If the project interests you and you want to know more about it, feel free to contact Nathanael via email.
