Class Buzz App

The Challenge

Since a large percentage of Zumba® instructors work for themselves, they must do their own marketing. Before this project, instructors relied on a marketing toolkit that catered mostly to print and was only accessible through the Zumba site. There was a lot of ambiguity around the legalities of using the Zumba logo and other branded assets. The challenge was to make an app that allowed Zumba instructors to easily promote themselves on social media with approved brand assets from their mobile devices.

Initial Research

To kick things off, we had a discovery meeting during which we explored the challenge, discussed the data we'd need, idenitifed personas and a potential feature set as shown here.

Our discovery meeting concluded with a research plan outlined below:

• Analyze ZIN (Zumba Instructor Network) Surveys
• Analyze BI reports (class management on mobile vs. desktop and any other trends provided
• Conduct in-person sessions (source participants who advertise their classes in the Zumba Instructor Network (ZIN) from the existing testing database) - field visits if necessary
• Conduct User Interviews
• Conduct Observation Sessions

Once the research concluded, we collected and presented our findings which included the benefits deemed valuable by ZIN members. We also explored the existing process of promoting classes online, filter use, branding, and communication with students.

Next, we went through examples from apps that have already implemented each feature well (Canva, Instagram, Whatsapp, etc.). There's no reason to reinvent the wheel.

Design Sprint

Once the initial research was complete, we conducted a 2-day design sprint. The schedule was as follows:

Below you'll find (from left to right) some of the steps that we took to develop our final feature set before wireframing could begin. Goals & KPIs, Affinity Mapping w/ voting, MoSCoW Board, Sketching Exercise

Wireframing

After the design sprint produced a feature set with some rough sketches of the main screens, I began the wireframing process. There were three sets of wireframes developed in total. Our wireframes were tested with Zumba instructors via in-person testing or online sessions after each iteration. The feedback from each version informed the next version's changes.

Next, we'll go through wireframe iterations from the content builder section of the application. Here, the instructor can customize one of our templates or create a post from scratch. I've included wireframes of the content builder from versions 1,2 & 3 below.

Builder Wireframes v1
Wireframes V1 had a very simplistic UI and gave the user three buttons to press below the canvas.

Builder Wireframes v2
One thing we found troubling users was having to click the background to change it. No one thought they could do that. Therefore, in version 2, we auto-opened the background selector drawer and placed background, text and stickers as tabs on the right rail. Then each tab on the right side would act as a workspace and all the screen controls were specific to that workspace.

Builder Wireframes v3
Version 3 brought an enhanced text experience through adding colors to text and backgrounds of text elements. We also added simpler controls over stickers.

User Flows

Development of the user flows began before the wireframes and continued to evolve as the wireframes did. Below you will find the final iteration of our user flows that map all design screens to their place in the user flow with a numbering system. The designs had corresponding numbers - this made development handoff a bit smoother.

Designs

After completing a full set of users tests on the final version of our wireframes and we agreed they were good to move forward, we moved to the design phase.

Designs v1 (Builder)

The first styling we used for the app was a dark theme, which we later found out didn't resonate as well with users becuase many social media apps have a light theme.

Additionally, since the right navigation didn't test as well as we'd have liked, we moved these controls below the canvas and moved undo/redo/delete to a narrow right bar.

Designs v2 (Full App)

After testing the first prototype based on our v1 designs, users were still unsure where to begin after they selected their post template. It was out of this feedback that we created v2 of our designs and what would become the final version of the app. Below you'll see that we made the following changes:

• Moved from a dark palette (which our previous ZIN app used) to a light palette that falls more in line with other social apps.
• Removed the right bar to better use the horizontal screen real estate.
• Better utilized a top nav system to create a stepped design flow. The user will now select a template, change the background, then add stickers/text, then share. This 1,2,3 flow proved much more useful and easy to understand in testing.

Here's a full set of designs from the final version of ClassBuzz that's available in the Apple App and Google Play Stores.

Login and onboarding

Template Selection

Background Selection

Text & Stickers

Share Your Post

Quicktips & Settings

App Store Assets

Once we recieved the final brand direction from our marketing team, I used their assets to put together the following app store promo screens for Apple & Google Play stores.

Final Thoughts

ClassBuzz is currently on the App Store and Google Play Store. Since its launch, ClassBuzz has been used by thousands of Zumba instructors to elevate their social media presence using our professionally designed templates based on class specialty. Ongoing updates by our marketing team keep the content fresh.