augmented reality poster
Made for ISKCON of St.Louis’s annual Chariot Festival
a project is given
The students in the Graphic Design I class were asked to design an augmented reality poster for an event using the Unity Game Engine to accomplish the augmented reality component. The marketing director of ISKCON (International Society for Krishna Consciousness) had previously asked me to create a poster for the Chariot Festival, an annual festival in St.Louis Missouri that attracts more than 500 people to partake in events such as meditation, yoga, face painting, henna, music, dance, and philosophical talks. There is a free vegetarian feast at the end of the festival.
stakeholder interview
In order to understand what exactly ISKCON St. Louis wanted for their poster, I emailed and talked to me over phone. They preferred a picture-based realistic poster that was colorful and had the St. Louis arch prominently on the design. The Chariot Festival is an international festival and the stakeholders felt that they needed to distinguish St. Louis’s Chariot Festival visually. The arch is a common symbol for representing St. Louis, and therefore they asked me to include the St. Louis Arch on the design.
PERSONNAs
The personnas of the person who would come to the Festival were two: the already acquainted Indians who were familiar with the festival (as it had originated from India), and the new audience (from all nationalities) that were not.
Meredith
- Caucasian female
- 3rd year college student
- English major
- Interested in philosophy, religion, spirituality
- In a music band-plays flute
- Likes trying new things and learning about new cultures
- Likes tattoos, no makeup
- Strong feminist
- Likes going to different events, a social butterfly
Mr. trivedi
- Indian male
- Works in the IT industry
- 2 daughters
- Married, wife is a house wife
- 45, moderately religious
- Goes to Hindu temple occasionally
- Wants to instill cultural values in his children
- Wants to have fun with his family
INSPIRATION/ STYLE BOARDS
I took inspiration from movie, sport, and book promotional graphics as they were usually made by photo manipulation/editing. I also took inspiration from other Chariot Festival posters from around the world. I wanted to go with a colorful, whimsical, and playful style that would appeal to the children of Mr. Trivedi and the hip and playful style of Meredith.
initial sketches
I ideated several different layouts and compositions for the posters. Most included a chariot, as the festival is known for the large red chariot that goes along in the parade. Some of my ideas included putting an image collage in the shape of the chariot’s top, using the C of the chariot as a stylistic element, and dividing the pictures of activities in the festival into interesting grid structures. All of them had the St. Louis Arch. I decided to go with the thumbnail circled in red, as I felt the design was interesting and eye-catching. Although I made some other adjustments after I used that thumbnail, that thumbnail started my idea for what the poster would later be like.
detailed ideation
After having my concept in place, I experimented with combining the C with the images. I first started with the common vertical layout. Some problems I faced in design 1 was that there was low contrast, and although I wanted to make the C seem like it was part of the word Chariot, it was difficult to make it look so because of its large size and the collage of images within it. In the second iteration (2) I removed the colorful background for more contrast. I was not able to make the C part of chariot either. There was no space for it to make the word chariot. In the third iteration, I opted for another color scheme to explore color contrast and also decided to make the poster in landscape form to fit the word chariot in it. As you can see, it looked more like “hariot” than chariot. In addition, the high contrast color scheme made the festival look more like a pop music festival than a colorful Indian festival. In the fourth iteration, I moved the positioning, but the word C and hariot seemed like two different parts and not one word, although the color scheme and contrast seemed to work a lot better.
solving poster design problems
Many of my classmates agreed that the poster looked more like it was saying “hariot” rather than chariot, and the C didn’t seem like part of the title at all, but a random decorative element that the images went around. Through their suggestions, I moved the C more towards the left and the rest of the words more towards the right. I also edited the font of the words “hariot” to make it more alike to the font of C in the poster. In addition, I added the same texture and color to the “hariot” part of the poster as to the C. To make it more obvious that the word spelled chariot, I made the word festival’s font, color, and size different than the Chariot letters so that one could easily group the c and hariot as “chariot” (one word) and festival as a completely different word.
assembling AUGMENTED REALITY COMPONENTs
For the augmented reality component, I wanted people to be able to see more information about the program by using the Chariot Festival augmented reality app that I would make through Unity. Therefore, I designed an information sheet that would go along with it. I also wanted to put a fun and surprising element, which I did by making a 3D balloon through Blender (I later ended up using the royalty free 3D object provided by Turbosquid when some parts of the animation and balloon didn’t work out as planned). I also explored Unity’s particle effects by making confetti by following an online tutorial. To add to it all, I also made a subtle flag waving animation in After Effects and exported it with an alpha channel so that only the flag.
I created a 3D balloon object and animated it blowing in the wind using the free 3D animation software Blender
I animated the flag on top of the Chariot using After Effects. I used the alpha channel to preserve transparency in my animation.
On the right is the app’s icon on my phone’s home screen (bottom right). I used the prominent and unique structure of the C in the poster as my app’s icon. I used the same cloud texture for the background, and the orange watercolor texture for the C. All these similar elements made it easy for people to guess that that was the poster’s app.
The app icon for the poster
The schedule of events that would appear if one looked at the poster through the augmented reality app
assembling the app, solving technical problems
After working through various tutorials that included making and animating objects in Blender, working with Alpha channels in After Effects, and understanding the particle effect in Unity, I assembled the pieces together to make the app. I also linked a video that explained the festival in the app.
One problem I encountered when I exported the app to my phone included the video not playing after my first try of using the app. Through help from my Professor, I was able to fix that problem by putting the video on loop.
CRITIQUE AND REFLECTION
The class came together to critique the design and usage of the augmented reality component in our posters. Below is a video of a screen recording I did through my phone when I looked through the chariot festival app at the poster. Unity recognizes specific image targets. I used Unity to plant different forms of media around the image target. I put the flag in front of the chariot’s flag on the poster, and added the additional info about the festival on the bottom.
As always, I can improve the user experience of this augmented reality poster by making extra information available only when one taps on them. Having so much info pop up in various places can make the eye wander and not know where to look. Using progressive disclosure by showing only what is needed at that moment would improve the user experience of the augmented reality poster.
Above is a screen recording of what the poster looked like through the chariot festival augmented reality app.