CXCMYK short.png

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

Totem Affinity Map.jpg
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.

Totem Sketches.png

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:

Logo v1 - Speaker.png
Sound System

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

Logo v1 - Dreamcatcher.png
Dreamcatcher

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

Logo v1 - Tiki.png
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.

Totem Final Logo - full - white.png

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!

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.

Stylescape Final - Glowstick.png
Live Wire

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

Stylescape Final - Live Wire.png
Blacklight

Inspired by vibrant colors found under the nightclub blacklights.

Stylescape Final - Blacklight.png

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

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.

Wireframe Annotated.png
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.

New User Flow v1 - markup.png
 Home v1 - markup.png
Alerts page v1 - markup.png
Profile v1 - markup.png
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.

Totem Mock 1 - Home genres.png
Totem Mock 2 - events notifications.png
Totem Mock 2 - Account splash.png
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

“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.”

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!

Macbook Display 1.png
Mobile Marketing.png
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.

  • 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

© 2021 by Corey Lucik: Graphic Designer