Bloom on Franklin Music & Art Festival
Responsive Mobile First Web Design
Scope of Work
UX/UI Design, UX Research, Information Architecture
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.
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!
Unique Value Proposition
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.
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.
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 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.
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
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.
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.
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.