Dröm
Role: UI/UX, Motion, Visual, Concept
Award: 2019 Adobe Design Achievement Award - Top Talent
Award: 2019 Adobe Design Achievement Award - Top Talent
Award: 2019 Adobe Design Achievement Award - Top Talent
About
Dröm was a year-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.
01- Prompt
How can we spark interest in music in children to inspire the musicians of tomorrow?
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- 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.
04- Prototype
05- Mockups
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
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
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
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
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- 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.
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.
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.
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.
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.
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!
10- 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.