WORK

OPEN MIC APP

VISUAL DESIGN, UX/UI

Development sprint & rapid prototyping of an open mic finder

Check it out

THE CLIENT

SHANE MANIER-GUERILLA POETS, LLC

The Problem

Charlotte, North Carolina is a great city for creatives involved in writing and art. The only problem with Charlotte is that it’s creative communities-the spoken word, poetry community specifically-aren’t good at getting the word out about their events.

In Charlotte many organizations and creatives aren’t great at getting the word out about open mic events & performance opportunities.

Newcomers have expressed problems in locating local mics around them when in Charlotte.

Not much info is around for them to easily locate events.

The Business Requirements

I was asked by Guerilla Poets and the Charlotte Poetry association to figure out an app that allows users to find a open mic in their area and to receive relevant info for that event.

THE PROCESS

To be able to find the right solution I needed to think about the problem in the right way. I used my knowledge of the double diamond design process to get me started. This method encourages me to define the problem and create solutions based on research and constant iteration instead of feelings and a vacuum. It also offers me the ability to redefine the problem if I get stuck or find a solution that doesn’t work.

THE RESEARCH

After the first initial interview with the client and the insight and research I was provided I came up with a proto persona.

Think of this as a basic idea of who you think the designs ideal user may be. What they may want and how they may experience the world or product.

It’s a good starting point but is biased and has no quantitative evidence or research to really back it up.

Being part of that community though, allowed me a healthy starting point to focus my research though.

And focus on it I did. The first goal was to research and collect data to back up my initial hunch. To do that I needed to interview my client once more and conduct user information through surveys.

I was even lucky enough to be put in contact with a few other stakeholders within the community through the client so I could also glean some information from them as well.

What information I found from the information gathering was enlightening. I had a hunch that I needed to make an app in the mobile only space.

The nature of the app would be something of a directory, gps and light networking/community exploration experience.

With the data showing the predominance of mobile/smart-phone usage of an astounding 100% of my 25 users preferring mobile phones for networking & community exploration, I knew I was onto something about the app being a mobile only experience.



The information also helped to back up and further define some of the research given to me by the client and stakeholders.

A majority of the open mic community in Charlotte is African American but what are the other demographics or psychographics for the ideal user I’m designing for? I would find out that over 67% of survey respondents were female and over 100% of them had some college education.

Diving deeper into the survey responses also notified me that the age range of the app skewed towards the mid 20s-40s age range with the youngest respondent being a 24 year old college student.

With my information set it was time to set up the ideal users and build a profile or persona around them.

I’m looking for an African American in their 30s, who may or may not be a poet themselves, with a creative streak and a craving for expression, connection and networking.

THE PERSONAS

WIth this in mind I was able to refine the proto persona into a working persona or profile.

Meet Vivian…

..and Katrina.

Two personas that I think best represent the target user based on my research.

In building them I also implemented basic archetypes to my quantitative and qualitative research. Vivian and persons like this master persona firmly fit in the artistic archetype. They are predetermined with expressing themselves and being an active part of a creative community.

Katrina on the other hand was a good example of the explorer archetype. An individual craving experiences and constantly on the lookout for new and exciting events or people. With the personas fleshed out I needed to dive deeper into the behaviors of these users.

To do that I created empathy maps for both to help explain what their world may be like while using the app and what their behavior may be.

For example, Katrina is always looking for a new experience, but she is so reliant on social media that she may never look for an alternative, get frustrated in finding an event and give up.

I need to identify the pain points these users may have and be able to confidently address them as I develop a solution.

I know for a fact that I need to focus on providing an easy directory for both users.

I also need to develop a solution that allows an easy way to locate what may be going on during the week and a way to reach out to VIPs like event organizers or venues as well. All while making this easy to navigate, familiar and still keeping the essence of the experience of finding open mic events online and in real life.

Now that I have ideas that I’m ready to take to the next stage I need to take a second and look at what is out in the wild right now. I wanted to see what I could use to help inform my design and also see what else I may be able to implement from competitors.

THE COMPETITION

One such Competitor was the Open Mic US app. The app was impressive in that it offered a lot of venue information for users. Its UI and branding definitely needed some work though. Day events could be communicated better than a slash on the corner of the event. Also, what if someone is looking for an event and not a venue?

It’s also worth mentioning that the app didn’t function properly as well. Often the page would break while navigating and I would be unable to traverse the page or move to the next page without restarting the app. That’s a huge opportunity and advantage for my solution. At least it works.

One thing that I am jealous of is the ratings system. For the sake of solving the problems with a minimum viable product or bare bones version for launch, I don’t want to even begin to tackle a ratings system. For now that’s an advantage that Open Mic US has that I can’t compete with. But I may look into it later.

The next app was mic maps. A great app with a cool interactive map feature that would allow you to locate open mics in your immediate area. It even had a calendar to view events on other days of the week.

But alas, just like the last app, it didn’t want to function properly. On multiple attempts, I wasn’t able to move past the sign in screen. When I did I was a little disappointed with the lack of information provided. Who’s the organizer? Are there auditions? Is this a paid gig?  I knew I could offer a more comprehensive app even if I wouldn’t be able to match the interactive map. I also liked the calendar option and felt I could use that in my solution.

Lastly, I found A Live Show.

Described as an Open Mic experience, the app offered a great up-to-date information structure and social network feature that allowed you to click on a performer or event and scroll all the relevant info for that performer or show. You could even contact them about an upcoming show.

Too bad in the current version it only allowed for comedy improv and didn’t have any info beyond the day you open it. It was a little misleading as poetry/spoken word and music were listed as well.

I really liked the wealth of information from open mic us, the map/calendar combination of mic maps and the scrollability of A Live Show. I would add these features to my design arsenal and began to look for aspirational reference.

THE INFLUENCES

I wanted to design a solution that was simple and would feel instantly recognizable to the user.

Since so many users indicated that they used their phones for networking, specifically facebook and instagram I felt that they were a great place to start.

I took a close look at facebook marketplace and how the search feature was used to locate sellers around the area and look at the action as a whole.

I especially liked the search radius option and found it extremely easy to find sellers close to me. It was also very easy to find directions or contact a seller. I knew I needed to add this to the app.

Craigslist may be an oddball choice to add. But I would argue it’s perfect for my solution. Why you ask?

Love it or hate it, craigslist has a directory system that has stayed somewhat the same because it is great at being a directory of huge amounts of information for an area. It presents large amounts of data in a most;y easy to follow flow.

The bulletin style of events and calendar system that craisglist uses would help in organizing events and information for the users in my app. I also loved that the app had a calendar feature similar to what I found in mic maps.

To replicate the scrollability of A Live Show, and many apps in general nowadays, I also looked at Youtube and Instagram.

I was mainly interested in how they display images and information because I believe that users would immediately resonate with a familiar information delivery.

I also wanted to find a way to allow for organizers to post flyers, video or promotional content for their events that felt natural and wasn’t limited to a small image on the side of the event. Something more familiar with how events are advertised out in the world.

Speaking of advertising out in the real world, Let’s briefly discuss an open mic staple..

Flyers…

Going back to the user survey, client and stakeholder interviews. Not to mention my own experience in going to open mics. The way many people found out about open mics besides word of mouth or facebook have been flyers that they see for events.

Whether it's at a coffee shop, concert hall, or a random light post in a downtown metro area, flyers are still a lofi staple in advertising an event.

This was said to me during a stakeholder interview in response to what the person's favorite app was to locate open mics.

In looking at the aspirational reference I had amassed, it was certainly apparent that I needed to include an image area similar to instagram or youtube to allow for flyer art to be shown and to lead into events advertising themselves to users as they scrolled events.

Now that I have a skeleton of the solution. It was time to start working on the solution itself.

The ITERATIVE  JOURNEY

Now comes the part of the process where I take my information and data and start using them to create informed ideas, designs and solutions to the problem. Think of it this way, I discovered and defined the problem with my interviews and research. Now comes the point where I need to define possible solutions for the problem.

The above image is a path that I like to take in order to develop that solution. I may not always work in that exact order but I want to be within the lines of that course of action.

With personas developed its time to start building a narrative with user stories.

Developing a story allows me to think about how the site could function and give me an idea on how to look into the possible behavior of a user when navigating the app.

I prioritized this interaction with Vivian searching for an open mic to participate in after work. Much the same as many of the users would do.

I also thought about the audience-member/fan user that Katrina represents and how she may experience the app while looking up an event.

At the moment it’s more important to look at the minimum interaction of the product. How this interaction could solve the problem of allowing the user to search for an event close to them and find relevant information on said event.

With the narrative in place I was able to move into a user flow of Vivians interaction with the app.

This is the point in the process where I try to solidly focus on how the user interaction of the app or product should be. From this point I can really start to think about the architecture of the app, how pages are made and how they may interact.

So I can create a basic map of what the architecture of the  MVP (minimum viable product) would look like.

From there I start sketching out possible solutions. I like to take all the notes I made from my research and start sketching solutions with pen and paper.  One method I especially like are crazy eight’s where you take about a minute a sketch and start sketching out possible solutions or screens to your user flows.

For this series I was mainly interested in nailing down how the event page interaction would look and flow. I also experimented with some solutions on how the search function would look like or work. This of course being influenced by the functionality of the search radius functionality of facebook marketplace mentioned earlier.

Once I had a ton of sketches I combined all of them into one clearly defined, large-scale image that I could turn into a digital wireframe. Think of it like industrial design/architecture. I took the master sketch in the goal of turning it into a solid blueprint (wireframe) to be later built into the final product (Prototype and development). I repeated this process for the other interactions as well.

Then I created a storyboard to ensure how my interaction may flow and be used based on how I created my information architecture and sketches. Once I was satisfied with the direction it was time to start building the foundations of the app prototype.

With a paper prototype!!

The prototype

The most lofi way of creating wireframes and a crude way to create the interaction of the app.

At this point of the process I invited the client and stakeholders to have fun and play around with the designs. They all gave me the okay and with their blessing I moved into the wireframing and prototyping part of the process.

THE WIREFRames

Once I created a lo fidelity set of wireframes I was able to see the basics realized in the developing prototype. The interaction starts with the user choosing what events they would like to see. From there they can adjust their search radius to determine what events are within their radius. From there they can scroll to find events in that range during the week or use the calendar to pinpoint them to the day they are looking for open mics on.

From there they are supplied with an easy system to be able to contact the organzier, venue, add the event to their calendar of choice and/or find directions tho their destination.

Even more importantly, they are able to scroll and get as much information about the event as possible including if it’s a paid opportunity for performers all the way down to the cost of an event and even to who will be hosting. Are signups required for the event? Well that’s displayed on here too. It’s literally a one stop shop of information for open mics.

But how will users respond to it? That’s the real test of my proposed solution. It would be time to find out.

the testing phase

At the usability test and user interview phase I tested and interviewed five users. I also presented the prototype to 3 stakeholders as well and circled back with the client on the current build.

They had a few simple tasks to perform(Featured). They would have to accomplish these tasks while using the rough prototype I just built.

I also included a rough scenario for them to consider while using the app to get them in line with the mindset that Vivian may be in when she uses the app.

Due to the current pandemic, all interviews had to be conducted online using zoom and an app from crazyegg called useberry. It allows me to set up tasks for users and record their responses in real time as they navigate the prototype. The combination between recorded video and recorded interaction was crucial in reading if my prototype was successful.

The feedback

The results came flooding in and they were overwhelmingly positive. Task completion came in at over 100% with users taking less than a minute (57 seconds) on average to be able to flow through tasks. There were barely any misclicks and the overall flow was navigated successfully.

But that also isn’t where the good news stopped.

Part of the testing I used, implemented a heat map which tracked what users were interacting with while using the test.

I was most concerned about how the users would interact with the filter and search radius interactions. If they were confusing or didn’t function properly, the whole experience could sink immediately.

The results of the heatmap showed that users were following the interaction as intended with little confusion. So far so good.

General feedback was great.

Comments from the interviews indicated that the app was easy to use and offered a healthy amount of information about events that make it easy to understand and easy to find information.

That’s not to say that there still weren’t some issues with the app though.

3 out of 5 users were confused about the radial filter buttons.

It looked like filter interaction needed some work to make it more clear what was being selected.

A question like this was asked by 2 of the users and it took me by surprise.

In charlotte there are some bars and clubs that have selective dress code options. For instance, you cannot wear a white tall t-shirt and blue jeans at some clubs.

This is a real issue and something I didn’t think about at all. Nor did it come up during research. Nevertheless, this is a valid issue that needs to be addressed and added in.

I also didn’t think to add a mask requirement. Which was a huge oversight seeing as we are still in a pandemic at the time I am writing this.

An astounding 4 out of 5 users reminded me of this glaring omission as well. Going forward, I have to add this option in as well.

And I still wasn’t out of the woods yet.

My client and stakeholders immediately pointed out that they don’t like the wording of the performer paid gig field.

Another revision will certainly have to address all the issues including this field change.

THE REITeration

I quickly moved to address the issue and reiterate the prototype.

I adjusted the interaction with the filter radials making them easier to read and understand.

I also added the dress code, mask requirement and added the paid gig option to the app.

I also removed the performer paid gig field.

the solution

From there I was satisfied and ready to present to the client one final time to get approval. Upon review the client was absolutely pleased.

This is the type of feedback that’s always nice to hear. The client also asked a great question as well.

What’s next?

The next steps

My top priority now is to do a sprint on how organizers can post and advertise their event on the site. I also want to prioritize and expand the filter system functionality. Not to mention revisti the idea of the ratings system feature that I came across when researching the Open Mic US app.

Most importantly I need to think of more ways to get the Charlotte community involved in the advertising and promotion of the app. This app, like social media sites, lives and dies by it’s users. If no one is using it, the solution won’t be successful.

I believe I will rely more on the Client and stakeholders to help recruit more community members to help with further design features. Getting them involved with the building and development could help build a further connection and investment in the apps success.

the lesson

This was an enlightening development sprint. I learned the importance of research and data collection in the design process.

I was also shown the importance of communication and utilizing a network. My constant contact with the client and stakeholders allowed me access to resources that helped tremendously in further developing solutions.

Even more importantly, I learned the importance of lofi design practices. In this time where a large portion of design is done entirely on a computer with apps that can accomplish almost every task imaginable, it’s somewhat comforting to realize that sometimes the best method is still pen, paper, data and your creativity.

WANT HELP ON YOUR NEXT PROJECT??