Bloom on Franklin Music & Art Festival

Project Type

Responsive Mobile First Web Design

Duration

4 months

Scope of Work

UX/UI Design, UX Research, Information Architecture

& Branding

Project Background

Bloom is a monthly music and arts event on historic Franklin Street in downtown Tampa, Florida. Their goal is to facilitate events that bring their community together with music, art and market vendors.

Their UX concerns involved scaling their online presence to facilitate the growth of their events. They predominantly interacted with their audience via Instagram, but wanted to better maximize the use of their website to build better brand recognition and meet business goals like greater attendance and ticket sales.

We were thrilled to help take their events to a whole new level and design useful features their audience would adore!

Empathize through Research

UX Research Goals

We wanted to know what information attendees value knowing before, during and after the festival in order to understand what we could offer on Bloom’s website to encourage greater attendance, participation and overall positive reception of Bloom on Franklin events.

Methods

Go in depth with the process...

We wanted to explore as much as we could in UX Research before starting the design process, take a look at the steps we made to best understand Bloom’s users and their needs below!

In order to know what our audience needed, we had to ask them about their experiences one on one.

We recruited from our peers who were known to attend music and art focused events.  These individuals would represent our brand’s ideal clients, while also offering a wide variety in age, gender, income, ethnicity and location!  We recruited a total of 8 interview participants.

This was our chance to speak directly with the demographic of our users to ask what they felt about their experiences at music and art festival events, what has gone well for them and why, and what could have improved any past experiences.

This was a wildly important step in gathering valuable data on what problems our users had and insights into what we could do to solve them as simply as possible.

More than that, it allowed us to see exactly what people valued from events like this, and helped us develop Bloom’s new brand values.

If you’d like to view the detailed interview script, please click here!

Key Takeaways

Information Giving

  • Many other local events like Bloom relied on social media to give up to date information to their audience/users
  • Competitors were offering information on details such as: schedules, interactive maps, artist and vendor biographies

Visual Design

  • Music and art events similar to Bloom on Franklin are often using visually striking and colorful fliers and graphics in their web and print presence

Communication

  • When competitors utilized methods besides social media to communicate information with their audiences – they prioritized email newsletters and mobile notifications, whether from a mobile application or via text messages

Sponsor Activation

  • Competitors were utilizing their sponsors on their web pages/apps to increase familiarity and generate good sponsor-audience relationships to increase overall revenue 

Full Analysis

Company

Unique Value Proposition 

Advantages

Disadvantages 

Bloom on Franklin

Monthly music and arts festival to celebrate, inspire and grow Tampa’s community and culture through art and entertainment along the historic Franklin Street.

The only monthly music and arts festival in the Downtown Tampa area.

Has a solid active attendee base, as well as integral partners in arts music and vending to participate every month.

Locally connected staff with access to city and business contacts in order to make festival work in the heart of downtown.

Being a monthly event makes planning and marketing runs short.

Small staff and budget restrictions constrain what is feasible in planning and distributing information monthly.

Lacks web presence or marketing campaign outside of the instagram platform. 

No data gathering from audience for marketing/alerts (email or phone number).

Dania After Dark

South Florida monthly local music and art crawl. Very similar to Bloom, in a different city.

Has ample information of each artist, food vendor and musician at each monthly event.

Has a pop up graphic ad on their homepage that lets users/audience know exactly of next event and main features

Really great web and graphic design to promote branding.

This company relies solely on facebook to communicate news to their audience outside of what is provided on their website.

They also have no way of collecting contact information from the audience – therefore no metrics or data or ownership of users contact info.

The information provided on their website is rather vague per event – probably due to many of the same constraints of Bloom.

Grandstand

A company that creates apps for Music Festivals’ audiences 

Offers informational features for festival apps like: vendors lists, artist bios/lists, schedules, interactive gps maps, etc 

Offers methods to increase revenue via sponsored vendors, branded scavenger hunts and advertising on the app

Opt in notifications and surveys about the event

You have to download an app to your phone.

App generation requires $$$ and time 

Some features will be more constrained on a web-based product vs. app (gps map, push notifications, etc)

Clearwater Arts Alliance Public Art Walk

An art walk website sponsored by the Clearwater Arts Alliance in Florida.

They’ve done a good job of laying out relevant info about their programming on their website.

They offer an interactive map (google maps) to their audience as well as scheduling and artist profiles.

They have a newsletter sign up option to keep in touch with their audience directly, not only through social media.

This event is built into the entire Clearwater downtown website, not its own website – so information can be hard to navigate through everything else.

Doesn’t give specific details about the art walk event’s activities happening on the day of the event – a very general event page.

We took the data from our competitive analysis and our user interviews and grouped them into an affinity map to gain key insights into some common user challenges and desires when it comes to attending a music and arts festival.

Key Insights
  • Many people were accustomed to using social media to find information on events like Bloom, so utilizing social media to hand in hand with the web page to deliver information would be important in the final adaptation of the design

  • When it came to what information people thought was useful to plan for the event or solve their worries they included things like: parking and transportation, artist/musician and vendor information, a schedule, map and live updates

  • From the interviews we gained important insights into our user’s values around events like Bloom, such as having a desire for their expectations to be managed well, and finding value in supporting their community and building relationships

If you’re interested in viewing the full affinity map, please click here!

We had to conduct an audit of Bloom’s existing website to get a sense of their current information architecture and what they were offering users.  We jotted notes down on what was good and what could be improved upon in our design. 

We knew the site navigation needed a complete reboot, so we set out to reorganize Bloom’s information architecture to better meet user and business goals.  

We conducted a card sort through Optimal Workshop of 60 on-brand topics that came up in our previous research to get a better idea of our user’s mental models when it came to organizing the information that would be found on Bloom’s website for ease of use and recall.

We came up with five main navigation menu options for the content content based on how users grouped key words.

Please click here to view the full card sorting results.

What we learned...

How people and companies were solving similar user problems

We gained some insights into how others were solving problems like information giving to their audience/users.

Users had expectations from organizers

Our users had specific needs when it came to what kind of information they needed from event organizers to ensure they could make the most of their experience

Users had preferences on what information was offered

People wanted to know information on scheduling, artist and musician information, parking and transportation info, and a map of the area

People still love using social media

Most users still naturally use social media to find information on events, integrating Bloom’s social networking presence with their website would be crucial long term.

Don't let the people down!

Managing expectations of an event is crucial! Live updates and accurate information is helpful in doing so. People are forgiving, but communication is necessary!

Community is Key

Users found building relationships, cultivating pride-of-place and strengthening their community important.

Define Needs & Personas

Clearly defining our users' needs

We needed to define our users’ needs based on our research insights, and pose them in such a way that we could begin ideating solutions for their pain points.

How might we help adventurous fun seekers discover different activities at an event?

How might we facilitate the desire of adventurous fun seekers to experience a versatile, diverse festival experience?

How might we help socialites who go out on the weekends to have all the information of an event readily available?

How might we help community driven people support local events and artists with their time and money?

How might we help create a sense of “pride of place” for people at local events?

Creating personas to design empathically

Our personas kept users in mind as we designed product solutions.  We found that they generated a lot of empathy from people outside our team, especially when presenting to stakeholders and potential sponsors.

From Ideas to Wireframes

Determining key product features

With all our research and personas in mind, we ideated on what features to focus on when it came to redesigning Bloom’s website.  We came up with many great ideas, but decided to focus on ones that would best meet our user’s needs, as well as achieve some key business goals.

  • A Schedule outlining all the activities during a night of Bloom on Franklin, and when and where they occur – perfect for our Adventure Seeker!
  • A Map of the locations along Franklin Street that have Bloom activities, as well as resources like bathrooms and parking – an evening Planner’s dream
  • An updated home page and navigation to make information finding and CTAs more prominent, including links to get involved for the Community Lovers
  • A way to collect user data in order to run email marketing and text message alerts to help meet business goals and facilitate direct communication between organizers and audience

Updating Bloom's IA with a new Sitemap

Bloom’s navigation and and over all information architecture needed a reboot to make the site useful for their audience.  I used the mental models uncovered in my card sorting research to integrate the information Bloom needed to have on their site in a way that would be easy for even casual users to find.

Mapping out the Users' Interactions with the site

We created user and task flows to see how users may interact with the new Schedule and Map features, specifically.  This informed our wireframes by helping us determine the hierarchy of the features on each page, as well as what and how many pages to design and where we could maximize company goals alongside user goals.

Keeping it Loose with Low Fidelity Wireframes

We did some quick sketches to see how our task flows might look, page by page.

Digitizing sketches into Mid Fidelity Wireframes

The mid-fi wireframes were extremely important in determining more precise placement elements on the pages.  They also underwent many revisions after meetings with team members and stakeholders in order to make sure we were ready to go from mid-fi to high-fi.  If you look closely, you’ll see many stylistic changes between the mid-fi wireframes and finished prototype!

The mobile home page and schedule were revised to include fill text instead of stroke text for better readability for our users. 

The map wireframes underwent massive revisions when it came to designing the final prototype.  We opted for a map key button overlaying the map instead of a pop out bar for the sake of space.  The map key dialogue also got a complete overhaul to streamline its use, and finally.

Prototype with a Brand Identity

Displaying Bloom's Values with their branding

I knew I needed to redesign Bloom’s logo and visuals, but before that, I wanted to work with their team in coming up with five key brand values.

Redesigning the Logo

Bloom originally had a very ornate word mark utilizing a styled text, one which I enjoyed enough to use in their icon logo!  Research proved that a sans serif font for their logo was easier to read and remember.  I made use of the trail and marker theme from the old logo, and gave them a marker icon that was unique to their brand.

Designing the UI elements

After coming up with a color scheme similar to what Bloom employed before, I set to it designing the pieces of Bloom’s new UI system.

Building Components to make a design system

I wanted to take the time to create a design system with relevant components before building the prototype to save me time in the future.

Bringing it together with a shiny new prototype!

The new homepage makes use of CTAs for the Schedule, Map, RSVP, Getting Involved and Staying Connected.  This helps our users find everything they’re looking for at the very start of the experience.

The schedule design is separated by time and zones so that users view proximate activities at this linear street-based festival.  Colorful tags quickly transfer information at a glance. CTAs to purchase tickets, view map and access details make it easy for users to engage with events that peak their interest.

The map was the most challenging and iterated design.  We settled on a map key button that opens an overlay explaining the map.  When users click on an icon, they are given more information about a location.  CTAs to get directions from users’ local map app make their appearance in dialogues.

Test, Iterate, Repeat

Usability Testing

We wanted to see how our new features performed, so we set about conducting usability tests.  Our tasks were:

Task 1: Find out what time the East Forest concert starts and ends, and read details about it

Task 2: Use the map to locate where there’s free Parking near Yellow Brick Row

We utilized an unmoderated first-click chalk mark test with Optimal Workshop with extensive post-task questions to gain insights from our users.  We recruited some participants from our interviews, and others who had no idea about what the project was.  All our testers could be defined as Bloom’s ideal audience.

See the results of the test here!

What we learned from our usability tests...

The Schedule was working!

Test subjects were able to successfully finish the task related to the schedule 5/6 times.  The schedule and event details modal were meeting our users’ needs well.

Homepage CTAs were useful

Many people utilized the Schedule and Map CTAs to navigate.

Menu options were intuitive

Menu options like “Experience” and “Getting Around” were intuitive enough for users to find the information nested inside them.

The Map Key is integral to the success of the map

The map key cleared up all the initial confusion about the map and its icons, leading to a 100% success rate of the map based task.

Some map icons needed to be updated

Upon first viewing the map, most users failed to find the free parking icon versus the paid parking icon.

Key info on the homepage needed to be more clear

Users were missing the date of the event on the homepage, likely due to the stylized stroke text.  Some users also recommended adding an overall event time frame to the home page.

Prioritizing iterations on our design

We removed the stroke text and made the event date more bold, while also including a written out date instead of numerical date.  We also included a time frame so users had all the most important information at very first glance. 

This will make the site more usable for all users, both planners and casual glancers!

We added a price to the ticket CTA on the event details modal to save our users a click in figuring out how much a ticket costs.  We felt like this would help in instilling trust with our users.

We updated the paid parking icon to feature a money sign, and added a search bar to the map so users could find things without having to click around if they had something specific in mind to look for.  We knew this might be helpful for more casual users like our persona, Dylan.

Final Thoughts

We had a blast on this super fun project, and are happy to help Bloom grow in the future with further designs.

It was a huge learning experience, being able to design from the ground up for such an innovative and cutting edge brand.  We learned so much about the design process from start to finish during the course of the four months spent on this project, as well as what it meant to work with a team and collaborate.  We were so happy that Bloom trusted our eye and design thinking to bring them a product that would scale with them over time.  

The only thing we would change if we could would be to organize our deliverables a little better in order to find more ease in putting together this case study!  Oh, and we’d also love to conduct future usability testing in person rather than unmoderated so we can see the delight on our users’ faced when interacting with this product!

We’re excited to be working with developers to bring this design to life in the beginning of 2023.

 

"Hannah's work went far above expectations in UX development for Bloom; we structured all of our operations around her findings, changing the way people use technology to support the experience at our live events..”
Tony Krol
Bloom initiatives CEO