Dröm

Dröm

Client: Senior Capstone Project

Role: UI/UX, Motion, Visual, Concept

Duration: Spring 2019

Award: 2019 Adobe Design Achievement Award - Top Talent

Award: 2019 Adobe Design Achievement Award - Top Talent

Award: 2019 Adobe Design Achievement Award - Top Talent

Artboard 6qasd

About

Dröm was a semester-long senior capstone project. Together we were five designers and two developers. We all grew up with music in our lives and were disappointed to see a decline in music education in schools. We decided to make a rhythm game to engage kids in a new way of making music.

I had the pleasure of working with Grant Adams, Matt Lombardo, John Martel, Cathryne Szczepanik, Ben Thorn, and Maria White. Dröm debuted at Imagine RIT on April 27, 2019.

My Role

Throughout the course of this project, some of my responsibilities included creating the main visuals along with animating the gameplay. I also created assets for our social media accounts. You can find us @drom.rit on Instagram or @nmtpDrom on Facebook.

 01

 01

Prompt

How can we spark interest in music in children to inspire the musicians of tomorrow?

 02

 02

Concept

Drom is a collaborative musical experience that seeks to instill a sense of rhythm in players. These players will be interacting with instruments that you could find in your home or even make yourself.

03

03

Game Interface

We spent a lot of time on this, taking inspiration from other rhythm-based games and applications. We played around with scrolling based UIs, reminiscent of Guitar Hero or Rock Band. Ultimately we decided we wanted a completely different interface than what has been done before to stand out from the crowd.

Game Interface Sketches

04

04

Prototype

Prototype

05

05

Mockups

Drom_Homepage
How to Play
Screen Shot 2019-03-21 at 12.39.00 AM
Artboard 1 copy 3
Artboard 16 copy

Landing Page

Landing Page

This is the first page you see when opening the game. There is music playing in the background and the particles you see are constantly moving as well.

How to Play

How to Play

If you hit the game drum twice that will bring you to the 'How to Play' page. Here you are instructed to hit the drum when the moving ring hits the colored stationary ring. The team cannot start playing the game until everyone completes the task.

Game 

Game 

This is the game screen. Here you will be working with your teammates and using the instructions you learned earlier to hit as many moving rings as possible before the song ends.

Final Results 

Final Results 

Once the song ends the game portion is over and the final results screen will appear where you can see how well you did as an individual player and a combined team.

Leaderboard

Leaderboard

Before the game is started your team is asked to come up with a name that gets inputted into our system. After the game, you can see where your team ranked among the other teams. 

The Leaderboard you see here was the final leaderboard at our exhibit at Imagine RIT.

06

06

Logo

We wanted the logo to appeal to a younger generation while still matching the dream-like theme of the game. We sketched a few designs and narrowed it down to these two, one blocky and one that resembled brush strokes.

Drom Logo 1 Sketch
Drom Logo 2 Sketch

Once we had the general design decided, we had to figure out the colors, stroke and fill. We all sat together and discussed the pro and cons of each variation, and finally decided on a no fill text with colored strokes.

Drom Logo Sketch x4 XLl

This is the finalized logo we used for the project. The 3D shapes and no fill made it unrealistic in the right way, as this is not something you would see in the real world, but something you might see in a dream.

dromlogofinal

07

07

Style Guide

Now that the overall experience was laid out we needed to nail down some of the finer details. We made a style guide with soft pastel colors and colored stroke elements similar to the logo.

The cartoon red panda in the style guide was a mascot that we had planned on adding to the application to bring a fun character and face to the application. Ultimately the red panda was dropped from the final project as it didn’t match the rest of the application’s look and feel.

Style Guide

08

08

Ad Campaign

As a part of preparing for Imagine RIT, we needed to run an ad campaign to attract people to our exhibit. There are hundreds of booths every year and we had to stand out from the rest. Our posters featured pieces of our UI, and were all pieces of a collection. Some were hung up individually and some were hung up together as a full set.

One collection was the title separated into individual letters,  and the other was of the game rings. They must have been successful, as people had taken down some of the full collections posters within one day of putting them up.

POSTERS1
POSTERS2

09

09

Team Shirts

While there was no dress code for being an exhibitor at Imagine RIT, the Dröm team decided to create team t-shirts so that attendees knew who to approach if they had any questions or concerns regarding our exhibit. Some team members came together and took advantage of the screen printing studio on campus and created the shirts!

IMG_7160 2
IMG_7162 2

10

10

Imagine Exhibit

Imagine Exhibit

The exhibit at Imagine RIT was a huge success with over 450 visitors and a constant line of people waiting for their turn to play. We had one of the largest exhibit rooms and it was constantly full. After Imagine RIT, we put together this narrated video explaining the application in-depth to send out to design competitions.

an application for the design Agency Instrument that innovates their performance review process.

an application for the design Agency Instrument that innovates their performance review process.

an application for the design Agency Instrument that innovates their performance review process.

an application for the design Agency Instrument that innovates their performance review process.

a growing collection of motion pieces.

a growing collection of motion pieces.

a growing collection of motion pieces.

 an application that answers your most common recycling questions and educates you on how to recycle.

a growing collection of motion pieces.

a growing collection of motion pieces.