Elysium
New Media Design Capstone team project
Drawing UI
Visualizer
Project Summary
All New Media Design Capstone teams were given the prompt "Do good" to spark ideas. My team set out with the goal to encourage people to have fun, enjoy an immersive experience, and perhaps learn something about our chosen topic, the Amazon Rainforest, along the way.
​
Elysium was a collaborative team project with the aim for an interactive exhibition on April 25th at Imagine RIT. Do to the cancellation of the event caused by the Covid-19 pandemic, our progress moved online and became a computer application.
​
In this case study, I'll focus on heavily on the steps and iterations that I created and worked heavily on, but I want to recognize and thank my amazing team for the work they did as well, and the amazing ideas that came to fruition because of them.
Final Project Links
We created a website in order to display our final work and process.
View it here: https://designed.cad.rit.edu/nmcapstone/project/elysium-2
​
To jump straight to the visualizer
Click here: https://elysiumcapstone.github.io/Visualizer/
​
To play with our Creature Creation app
Click here: https://elysiumcapstone.github.io/DrawingApp/html/index.html
Creature Creation
Drawing App
Drawing UI
Are you done?
Stencil Menu
Name Your Character Screen
The final designs of the drawing app, as seen above, were a collaboration between myself and three other people. The designs went through a lot of iterations before reaching this point. My partner, Cassy Smithies, and I, worked heavily on the UI and did most of the iterations up to this point.
Our Goal
Our goal for the drawing app was to create an experience that was immersive and exciting for a younger demographic but appeal to adults as well.
​
The idea behind it was to encourage people to be creative and imagine what kinds of creatures might live in the Amazon.
Sketches
- Early UI Ideas
- Stencil Sketches
As we began to explore the drawing app and what we wanted to do, I created a few initial sketches of what I imagined the UI would look like, and what kind of options the user would be able to choose from.
​
We knew that we wanted users to be able to choose a stencil if they weren't feeling artistically inclined. I began sketching a few stencil animals that people would be able to choose from.
Early Wireframes
- Edits in:
- Drawing space
- Color palate location
- Stencil drawer
- Eraser versus Undo
- Colors began to be explored
- Lots of early dev collaboration
In the early stages of the drawing UI we had to ask ourselves what would be the most intuitive for users, as well as what sort of options would be the most doable for the developers to execute. Above are just a few of the iterations we went through, with some being as minor as a single button change.
Early Comps
- Experiment with color and brand
- Still minor edits to buttons
- Exploration with Stencil
In this stage we began to work towards a cohesive color scheme that matched the other elements of the project that were being produced at the same time. We also continued to consider button placement and what would look the cleanest and be the most cohesive for a user.
Midway Comps
- Same conceptual UI, visual change
- Attempt to push the boundaries of the UI
- Desire to make it more fun
At this point, we we're encouraged to take our designs and think outside of the box. Our previous iterations were intuitive and clean, but they weren't fun or exciting to use. We wanted to connect them better with the leafy green forest scenery of the visualizer component and emphasize the rainforest theme.
Collaborative Comps
- Collaborative effort to consolidate our brand
- Vote to choose which were working
- Attempt to inspire each other
These comps show off our attempt to shift and consolidate our team's brand and create a cohesive visual environment between the visualizer, the Creature Creation, and our marketing. The two on the bottom middle and right were my visual design explorations.
Final Comps
- Final collaboration
- Push toward combination of elements
At this stage, we did a final vote for which directions were the most effective. The second and third options were explorations I created using gradients to give more dimension and life to the leaves of the foliage.
Visual direction
Together my partner and I kept an inspiration board for woodsy and illustrative styles. This would allow us to follow a similar direction as the visualizer team and achieve an understanding of depth for the background of the finished creature screen.
Early Completion Screen
- Two style explorations
- UI Consideration
We started out by attempting to create a stage where the finished creature could live. We came up with a couple directions to explore and created early stage mock ups of the scenes.
Completion Screen Explorations
- Additional Foliage
- Exploration of Gradients
- Pushing the layers and depth
Moving forward we brought in more elements to flesh out the scene, pushed the depth more, and added gradients to help consolidate the branding.
Check out the working final product here!
https://elysiumcapstone.github.io/DrawingApp/html/index.html
Amazon Rainforest Visualizer
Immersive Experience
Statistic Editor
Statistic Editor 2
Visualizer with Data
Results screen
This portion of the project is thanks to our wonderful 3D designers. They did a great job with the scenes and I sincerely wish we had been able to view it on our immersive floor to ceiling curved projection screen.
​
Our Goal
We wanted to create an immersive realistic rainforest scene for viewers to experience. In front of them would be a tablet to edit a series of sliders that control very real environment altering elements that were decided upon after extensive research on the Amazon rainforest. Depending on what variables were effected the scene would change to reflect the damage that was being done to the rainforest.
Due to the pivot caused by the Covid-19 pandemic, the visualizer has been shrunk down and altered for web consumption.
Check out the working final product here!
Odds and Ends
Merch, stickers,
and other cool stuff
Imagine RIT is a huge event with thousands of attendees, and therefore a massive audience our projects had to reach.
​
On the left you can see my design for a sticker that we would hand out with other free merch at the event.
​
On the right you can see our poster that would've hung all over campus to advertise our project.
Competition Submission
At the completion of our project we submitted our project to a UCDA competition.
Go Fund Me
Since our dreams of a decorated room and multiple projection screens couldn't be fulfilled, we refused to let that money go to waste. We focused the rest of our unused funds on donating to charities that help preserve the rainforest and its unique wildlife.
Up Next
