Totem is a platform that helps users find electronic dance music events and festivals in their area. Users can track genres and promoters to get personalized recommendations based on their preferences.
There’s no shortage of concerts, festivals, and events these days, but over-saturation can make it difficult to find what they’re looking for. With the music scene in general, there are countless genres and everyone’s tastes are different. The objective of this project was to create a platform to help people find customized event recommendations based on their preferences. There are several apps that assist with tracking concerts, but none specifically for the electronic dance music scene, which is why I decided to create Totem.
In order to create a successful brand or product, you first need to understand the needs and wants of the end-users. Personas help keep the potential customer in mind every step of the design process. For this project, two personas were created.
During the day, Amy is a project manager at a small tech startup. When she is not working, she loves to explore the city, attend local events, and maintain a healthy lifestyle.
Have fun and stay healthy
Lack of time to search for events
Nate writes for a local magazine. The city scene is his passion. He loves writing about the community, music, ongoing events, and his health.
Staying current with the local scene
Too much happening at once
Prior to starting the visual exploration I researched seven direct and indirect competitors and compared my findings using affinity mapping. The goal was to identify common trends in style and tone, as well as identifying areas of opportunity where Totem could potentially stand out in a saturated market.
Companies Evaluated: Songkick, Eventbrite, Eventzilla, Meetup, Group Spaces, Do312 & Built in Chicago
Plenty of white space
Clean & Modern
Sans Serif fonts, variable weights
Visual Hierarchy is primarily driven by type size
Limited image & illustration usage
Rectangular, colored CTAs with white text
Thin line illustrated icons
Limited color palettes, with minimal usage
Scrolling cards & carousels
By evaluating these competitors, I created a list of goals to achieve when designing the Totem brand and application.
Use bright colors to highlight, broaden the palette in a purposeful way
Strike a balance between type & imagery while maintaining good white space
Limit typography to no more than 2 font styles
App should be a fun experience to emulate the vibe of the content while remaining familiar
Keep consistent design styles across similar pages & functions
Introduce textures and show depth to keep designs from looking flat
Logo Concepts & Ideation
The first step in designing any good logo is to explore a variety of directions through sketches. I started with a list of keywords and concepts that relate to the EDM scene as a jumping-off point and then narrowed them down to three divergent concepts.
Once I decided on the three concepts, I started to recreate them digitally, further ideating and testing typefaces. The three chosen concepts for Totem are as follows:
Minimalist speaker design to represent the massive monitors used at concerts and events.
A common festival totem theme, using the common “pin” symbol for marking a location on maps.
Another type of Totem and mask worn at music festivals, and a common festival or concert theme.
Final Logo Design
Ultimately the Tiki Mask concept was selected for the final design. I chose this concept as it works well as a full logo or just the logo mark, and provided more flexibility than the other options. I continued to develop and refine the look of the mask until it represented multiple ideas, just like a festival totem.
By using the letter T as a foundation, triangles are used to represent the eyes and ornamentation of a tiki mask. The overall shape resembles a festival totem, with a long thin body and large top. The arrows represent maps and way-finding on the surface, but also resemble mountains, a torch, or even flowers. All these concepts relate to the unique shapes of totems fans create and bring to their favorite music festivals!
After the logo was finalized, I began to explore three directions to determine the visual style of Totem through moodboards and stylescapes. Almost any nightclub, concert, or music festival relies on state of the art lighting and sound systems and larger than life decorations, so I wanted to emulate that immersive feeling of dancing under a rainbow of neon colors to your favorite artists.
Click through the gallery to see my initial moodboards.
Inspired by countless glowsticks and laser beams that are essential elements to the concert experience.
Inspired by late nights in the city hopping from club to club.
Inspired by vibrant colors found under the nightclub blacklights.
I selected Blacklight as the final direction. However, I did incorporate some elements from the other styles in the final product such as the dramatic greyscale photography and the angular overlays. Red and royal blue were some of the most commonly used colors by competitors, so I wanted to create something more vibrant to match the EDM theme by using pink and blue.
Wireframes were provided for this project, and conducted a thorough evaluation to understand and visualize an ideal user flow for new and existing users. Calling out questions and concerns in the wireframes helped me to think critically about basic functionality and inspire ideas for improvements.
Mobile Prototype: Draft
Now comes the fun part! With the wireframes evaluated, and styles selected, I began building out the screens for the Totem app. The goal of the first round of screens was to make sure all relevant screens have were assembled before moving to further iteration.
Mobile Prototype: Final
After many tweaks and changes, screens were finalized before building a functional prototype. I was able to successfully achieve all of the goals established from the competitive analysis to create a unique and vibrant product that truly captures the EDM event experience. Click here to view the functional prototype.
To validate my high fidelity prototype, I conducted user interviews and testing of the prototype. I generated a list of testing goals to make sure all relevant features were tested, as well as collecting feedback on the visual style and user flows. Participants were selected that closely related to the user personas, from different backgrounds that were EDM enthusiasts.
Overall, the Totem prototype was very appealing to the testers, and all expressed their interest in this product. They also remarked that Totem was a significantly more engaging experience than the existing platforms they're currently.
The testers reacted positively to the visual aesthetic of the brand and application, especially the colored photo overlays
Users agreed the style was on point to match the content and EDM theming
The prototype was described as being both approachable and professional
Users completed all tasks with no difficulty, all rating the experience very easy to use
All users had only minor improvement suggestions for the functionality, but nothing that hindered their user experience or the basic functionality
“It’s certainly streamlined, I like that there is a consistent list of events that I can search for them. I also appreciate an alert section, and you know, being able to edit my settings to better cater to a situation.”
“I think it’s way more stylized and way more fun. It fits the EDM theme way better than competitors. A lot of the apps and services I use are not just EDM, they’re kind of all around, like Ticketmaster.”
The final piece of the project was to design a responsive marketing website that would serve as a way to promote the Totem app by highlighting its features and benefits. The geometric landscape patterns used in the mobile app were expanded up for the website to create a more engaging background that guides the user’s eyes through the page. An additional stylized typeface was introduced for a more playful and eye-catching headline to further entice new users to download the app and start searching for events!
Brand Style Guide
A style guide was created to be a resource for all appropriate usage of colors, logo treatments, UI elements, and more!
The initial designs and prototype for Totem were well received and the users all expressed their interest in using this platform to find events, much to my delight. But as with any project, there’s always room for growth and development. If I were to develop this application further, I have some ideas on how to expand and improve the Totem experience.
Further develop the home page to encourage users to seek out trending events they might be interested in
Create a social component so users can search and add friends, and track their event plans and share events or even purchase tickets together
Add an ability to track specific artists
Integrate music services like Spotify & Apple music so users can scan their library to further develop their personalized recommendations
Add a filter option to the events feed and search module
Create microinteractions for a more engaging experience
Further differentiate the look of the events feed and the saved events section
Increase the visibility of modules in a selected state
Add progress indicators to the new user setup flow