Sitemap

Planning an event? Find the right place at Bookavenue — a Native app.

8 min readMay 2, 2019

--

An app which makes your life easier. That’s all you need to know. Oh yeah… it makes it easier by finding the right venue for your type of event.

Photo by Alasdair Elmes — unsplash.com

Are you the type of person which everyone refers to when organizing events, especially birthday parties? Yeah, me too.

Not-so-convincing-evidence-that-I-organized-all-these-gatherings photo.

I have been doing that for a very long time and time after time I was out of ideas and only the last minute panic attack would inspire me to go through Google to find the right place; or Airbnb trying to find a nice villa on the suburbs or on the beach, away from the city. Or maybe try to book that restaurant whose price seemed a bit too much after I called their manager to book it.

This is how Bookavenue was born. As part of the Ironhack’s UX/UI Design Bootcamp in Barcelona, we were told to find a problem and solve it by building a Native App both for Android and iOS. Time to deliver? One week.

I started planning stuff to get an idea of the things I had to do and stick to my own deadlines in order to avoid any uncomfortable situations. My agenda looked like this:

  • Send out a Survey
  • Dig deeper by making some Interviews
  • Make an Affinity Diagram to find some patterns
  • Create an Empathy Map in order to create a better Persona
  • Start the Ideation
  • Crazy 8's
  • Make a paper prototype on index cards and test and iterate
  • Create the Wireframes in Sketch in order to have a Mid-Fidelity prototype and test and iterate.
  • When I’d be happy with a result (which rarely happens) decide for a color palette for this app
  • Make a High-Fidelity Prototype for Android (because I am an Android user so I wanted to cut down some slack to myself by designing on a platform that I am very familiar with) and also design two main screens for iOS.
  • Create the Prototype in Invision
  • Describe the next steps for this app

Discovery

Survey

Being already in the vortex of this problem, I already knew what I wanted to find out through it; something to back my decision up for going for this problem and maybe a little bit more interesting fact to give me a direction of where to focus on my upcoming interviews.
Some interesting data that came out of it are as follow:
Okay, you can skip the images below, they are there just for proof that this is real data. Here is what came out:

  • 84.6% of the people did organize 1 event for the past 6 months.
  • 65.4% of people do online research for these places. ( multiple choice question in case you’re wondering why the sum of their percentage is not 100%)
  • 38.5% of people do book in person, 76.9% book through a phone call and 19.2% book through emails. (multiple choice question)
Data from the survey

Interviews

What came next were the interviews. I wanted to learn more about how people are booking places for events, what is their process, where do they find their next place, what they go for first, etc. So, I interviewed 6 people in total, all from different backgrounds and people who organized events such as their own marriage (make sure to book in advance whoever is getting married soon and double check your reservation;), their company workshops, family events, company outings. Here are two quotes I found really interesting from my interview:

“I have mixed feeling about the pricing they are offering me. I wish I could compare to something else.” — R.

“This one here is a thread of emails which lasts about two months from the beginning till the place was confirmed booked.” — E.

Affinity Diagram

So I did the survey, I did the interview but how do I give life to all this data?
Affinity Diagrams help with that. I put all my data on post-it notes. After that, I was grouping every data from both surveys and interviews which seemed related. This helps with seeing what is really happening, picking up similar patterns that people are doing. And here is a picture of my Affinity Diagram at 12:30 am at Ironhack’s campus in Barcelona.

Affinity Diagram ( The disorder of this one is on purpose, so I and only I can unlock the power of my Affinity Diagrams.)

Usually, after you do the Affinity Diagram and you know what’s going on and found a few interesting patterns, you should build your Problem Statement.

This is a tricky one. Make sure you have understood everything because this is what you are going to solve.
To make things a bit easier for me I did also like a road map of what was going on with my Affinity Diagram to correlate them and find where was the pain point, where were they all being connected.

Mindmap (quality of pictures are gonna get worse, bear with me)

Apparently, the problem to be solved is TIME. And it is divided into three stages:

  1. Discovery — going through multiple google searches and reading, spending at least
  2. Asking for Additional Information + Book — like the case of the email I mentioned on the interviews. Sometimes it can go up to 2 months going back and forth for that extra information.
  3. Comparison — how many times did you go by the first place you called in? You need to compare always because we sometimes get that feeling that things look very expensive. Or maybe we’re not sure what we are going for so we feel the need to compare it.

Problem Statement

Event organizers need a way to search and book for places for the events they’re going to organize so they can reduce a significant amount of time.

Last time I worked for an individual project I was not satisfied with every step that I took for the process, so I swore to myself that I will go to that extra mile and understand and design for my audience as best as I can. The key to do that is by starting with a good User Persona. In order for me to do that, I built an Empathy Map (I’m not gonna upload a photo of the Empathy Map because it’s really bad). Long story short, My Persona looked like this.

User Persona

Happy Path and Features

Jumping into the sketching and making Crazy 8’s sometimes can get a bit tricky if you don’t have a clear idea of what your features are gonna look like and what is your “Happy Path”.

The “Happy Path” is a user or customer journey that, at each step, makes the person feel happier.

In the context of software or information modeling, a “Happy Path” is a default scenario featuring no exceptional or error conditions.

Ideation

Doing the Features and the “Happy Path” helped me a lot by facilitating my Ideation process because sometimes I kinda get a blocker from not knowing when to start. With the “Happy Path” in mind, I started doing Crazy 8’s for each screen.

After some sessions, I was satisfied with and proceeded with what I thought was best. And so my Paper Prototype was ready for me to go out there and testing.

And this how my prototype looked

Prototype v1.0

Testing

Changes happened throughout the testing and jumping from Low-Fidelity to High Fidelity.
Some of the most important ones happened on the first screen and are highlighted on with red.

Changes for the Explore Page, which is how you start finding for venues.
  • Most of my users expected it to be like a booking form. They did not feel the need to select the category and taking the biggest amount of the screen.
  • “Where is the Search button?!”. I forgot the CTA button. Missing the main CTA on the first homepage. What an amateur, right?!
  • One other thing is that they expected the Capacity to enter a fixed amount of people participating in the event, not group into buckets. What I had was grouped options, like for example “Up to 10 People”, “ Up to 30” etc.
  • And except the date to fill in, they felt the need to also enter the hour when booking.
  • As testing went on here I found out that they expected to fill in the number of people before entering the date and time details.
  • I also found out that they wanted to be possible to enter both date and time with one tap.
  • Some other changes that happened. I removed Payments for the moment as people were uncomfortable to pay big amounts of money 2–3 months in advance. So after evaluating the situation, Bookavenue was able to function properly even without the payment included but just the “Request to Book” option.

It was time to jump into giving it an identity. I explored 11 color palettes, with the aim of making it event related and colors that aim for both males and females.

Color palettes I tried.

So I decided to use only one primary color and after some research, the Purple is a color which is preferred by both genders. My primary color Indigo.

And here is how my prototype looked. To check the InVision prototype click here.

Final Prototype

I also did two main screens for the iOS version so here is a sneak peek.

iOS version

And it’s a wrap. This is all regarding this project.

Things I would do if I had more time are these

  • Full iOS version for Becky.
  • Add Advanced Search + Advanced Filters + more research on how to tailor the filters.
  • Include Payment + more research on how this process can be dealt with.
  • Variations for the UI of Details of the Venues

Takeaways

Some things that I learned throughout this project are:

  • It is actually possible to be working under pressure and have fun along the way. I really enjoyed this one and had a really good time doing it.
  • I would like next time to experiment more with the UI. It is really hard sometimes to get out of the conventions and I feel that on this project I did not go out as much as I would have liked to.
  • Use more techniques, like the MoSCoW analysis to define properly the MVP, like for example, I could have not wasted time on including the Payment as part of the booking.

Please feel free to leave your thoughts and comments. As UX Designers, we just love the feedback, even if it’s not positive (at least this is what we say).

--

--

Elton Behari
Elton Behari

Written by Elton Behari

Energetic, humble & result-driven UX & Digital Product Designer at @Marine Data Cloud

No responses yet