TOTEM

Project Overview

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.

Challenge

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. 

User Personas

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.

Amy

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.

Motivation:
Have fun and stay healthy

​

Frustration:
Lack of time to search for events

Nate

Nate writes for a local magazine. The city scene is his passion. He loves writing about the community, music, ongoing events, and his health.

Motivation:

Staying current with the local scene

​

Frustration:

Too much happening at once

Competitive Analysis

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

Key Takeaways

• Plenty of white space

• Clean & Modern

• Sans Serif fonts, variable weights

• Bold Headlines

• 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

Design Goals

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.

Sound System

Minimalist speaker design to represent the massive monitors used at concerts and events.

Dreamcatcher

A common festival totem theme, using the common “pin” symbol for marking a location on maps.

Tiki Mask

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.

Style Development

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.

Glowstick

Inspired by countless glowsticks and laser beams that are essential elements to the concert experience.

Live Wire

Inspired by late nights in the city hopping from club to club.

Blacklight

Inspired by vibrant colors found under the nightclub blacklights.

Wireframes

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.

User Testing

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.

key takeaways

• 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

Marketing Website

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!

Totem 2.0

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.