Vasant Menon
Vasant Menon
Creations and Solutions

Augmented Reality + Celebrities

1.jpg
 
JgIP8Ur - Imgur.gif
 

We are creating a mobile Augmented Reality app to accompany the under development Pittsburgh Walk of Fame 

The goal is to create an accomplice app that enhances the experience of a visitor to the walk of fame in downtown Pittsburgh when opened for public. The user friendly and social mobile application will help engage the audience in fun and interactive AR experiences while also showing them the often untold stories of Pittsburgh heroes and their contributions.

My role in this project was as a product, UX and game designer. I worked in a team of five members in this project and I led weekly design sprints, conduct user research and testing and create digital prototypes. I worked with two other designers, a producer and one engineer.

 

The Challenge:

Create an interactive experience around a busy street attraction in downtown Pittsburgh, which educates and entertains without impeding…

The organisation Pittsburgh Walk of Fame are in the process of creating a set of stars engraved on the sidewalk, much like the Hollywood Walk of Fame in Los Angeles. They wanted to create an experience keeping the following things in mind:

  1.  Should target tourists visiting the city but also should cater to local Pittsburghers who have lived around the city.

  2.  Since it is a busy sidewalk in central district where the stars will be installed, the experience should be aware of traffic on road and the sidewalk, as users should not be a liability to themselves or others while going through the experience we create.

  3.  It should be fun and engaging for people of all ages, while being informative about the city’s rich history.

Hollywood Walk of Fame

Hollywood Walk of Fame

Our clients imagined an AR experience on a handheld device, but had no idea how the overall experience would work.

 

Our Solution

We made an interactive mobile app (Android and iOS), which uses AR and Vuforia technology to scan the stars of celebrities a bring them to life on our app. We made the experience for three celebrities and made the product modular so that it is easy to add more profiles once the Walk of Fame is built.

How it works

 

Discovery

We started with a lot of research work on similar applications and our go-to theme of our project: AR Technology. There were a few mobile AR projects worked on previously at the ETC. We wanted to learn how successful (or not) they were and due to what reasons.

We also looked at a bunch of AR apps that are location-based. Our favorite one was the Pittsburgh Zoo companion app that was developed by Schell Games. We each downloaded the app on our phones and visited the Pittsburgh Zoo, just to walk through the experience of a naive user using the app through the zoo exhibits.

Capture.PNG

You can view and download the Pittsburgh Zoo App here. The app uses bluetooth hotspots to detect when you’re near a particular animal cage and unlocks features in the app which are related to that particular animal. These features included mini-games, selfie and photo filters (as shown below).

We managed to speak to one of the designers of the app, Sabrina Culyba from Schell Games. She mentioned that due to the large area of the zoo, Bluetooth coverage disconnection was a major issue which hindered with guest experience, so that had become a design constraint. Another interesting fact that we learned was the higher rate of drop-off from the app as the guests/family moves through the tour. Sabrina guessed that as children get tired towards the end, hesitant parents are no more interested in amusing the child through the app.

Figo is an explorer!

Figo is an explorer!

 

Conceptualization

ADDRESSING RESEARCH INSIGHTS

We grouped as a team and brainstormed on what we already had. We wanted to draw conclusions for our research takeaways and begin prototyping soon, in terms of content, art style and features. One thing that we came to an early conclusion was the iteration was the way to go.

Image-from-iOS.jpg

Key Takeaways:

INSIGHT: Physical constraints (weather, public decorum, accessibility, etc ) hinder location based experiences

SMART AND COMPACT
Using our AR as a feature instead of being the bulk of the experience, and keeping our app easy to use with one hand and content readable in under 30 seconds, optimizes it for best external use.

INSIGHT: Tourists, specially new generations always like to take a memento of the place they visit

FUN FEATURES
Creating an option to take a selfie or a group photo with their favorite stars, or have their own names attached to a star on the walk of fame would increase tourist flow and also increase the walk’s social traction.

INSIGHT: Natives of the city of Pittsburgh best identify and relate to Burroughs or localities of the city that they’re familiar with.

PITTSBURGH CONNECTIONS
Highlighting the districts and streets where their favorite personalities were born, lived, schooled, etc using a map of Pittsburgh helps engage with local audiences.

INSIGHT: Walk of Fame may have up to 20 stars, and then expand yearly from there on.


MODULAR DESIGN AND TECHNOLOGY
We decide to keep the design in a modular sort of way using ‘templates’, which can be customized for each celebrity.

 

Implementation

DESIGNING AND ITERATIONS

Based on the above assumptions and lots of meetings, we came up with the following user flow of a mobile application.

Initial User Flow (Above) and detailed iterations (below)

Initial User Flow (Above) and detailed iterations (below)

Paper Prototyping

prototype.png

Lo-fi Prototypes

We used Sketch and Adobe XD to help deploy prototypes for easy testing.

User Testing

A lot of the initial stages of our project was spent in Qualitative research, as we used semi-structured interviews to gauge what a user would likely do or spend time on when using the app in a real setting. We also used other methods to find what kind of content piqued interests of different groups. These methods include AB Testing, Card Sorting and Surveys. Towards the end of the project it was more of live Usability Tests to help with the polish of the app and the user interface.

 

Final Screens

Final Screens for Andy Warhol (above) , Rachel Carson and Roberto Clemente (below)

Final Screens for Andy Warhol (above) , Rachel Carson and Roberto Clemente (below)



 
Group.png

We were tasked by our client Alice to create a desktop tool over a semester that teaches middle school kids the basics of Game Design and Programming.

app_mockup.png
 
aa.gif
 

Create your own Adventure Game in under half an hour!

Alice’s Adventure is an ETC project for Alice, to design an adventure game creation tool that can be used to teach introductory game design concepts, with the head fake of learning computer science and programming concepts. The project works towards creating a platform different from animation-centric Alice, and draws parallels from successful adventure games to enable users to create new experiences.

My role in this project was as a designer and producer. I took the lead on user research and testing and also worked on flow and user-stories, among other tasks. I worked with two back-end engineers, a front-end engineer and a UI/UX Designer.

The Challenge:

Help teenagers learn the art of game design and programming by helping them easily create adventure games.

Our client  Alice wanted us to create a standalone desktop application (like Alice 3 ) but to tone down the intensity and feature-rich, sandboxy style that Alice is known for. The main intention was to :

  1.  Help teenagers learn what an adventure game is and how its mechanics work.
  2.  Put together these mechanics to create a game  in a short time without feeling overwhelmed
  3.  Translate these mechanics to some coding concepts as a soft introduction to programming.

This would strictly be a desktop application which can be easily downloaded and used on public computers in schools and libraries, among others.

Alice_poster_draft6.png
 

Exploratory Research

How do you tell a story through a game? What are the mechanics in an adventure game? How do you make such a game?

 

Inspiration. Experience. Needs

Inspiration. Experience. Needs

We tried an approach to making interactions using block codes (like used in Scratch), since we found that adventure games are limited to certain mechanics like using an object on another, or combining one item with another, etc. We made a list of such possible interaction and created a mockup, analyzing a very popular adventure game, Machinarium.

 

User Testing

We got our drafts in front of our target audience, teenagers. We wanted to see if we were going in the right direction with our style of putting together interactions and communicating the mechanics of an adventure game. I put together surveys and exit-interviews and we had a sample size close to 50 students between the ages of 10 and 18, with varying programming experience. I used a 7-point scale to (1=nothing, 7=everything) as it provided me greater accuracy than a 5-point scale, because in smaller scales people tend to go towards the middle scale which affects accuracy.

We drew two big conclusions from all the feedback we received from both students and teachers 

  1. Block Coding is too difficult/overwhelming for students, especially those without any technical background
  2. Students are not familiar with adventure games and it's mechanics.

We decided to change our design and approach to a more procedure-oriented and guided experience.

We made a paper prototype of a design which used simpler interaction boxes instead of complex code blocks, and we did internal user testing on it. 

 

User Story and Wireframes

More Guidance. Less Complexity

We mapped out personas for potential users of our tool, taking into consideration the following points:

  •  Are they using the tool at home or in school?
  • Are they first time users or returning users?
  • Are they assisted by teachers or independent?
  • Do they have prior experience with programming and game design?
  • Are they familiar with adventure games?

Based on information from prior research we had a good idea of what problems needed to be solved and if the designs that we prototyped satisfies specific needs.

 

Product Launch

After 3 months of development we finally got a build ready for beta. We spent the last month refining our product and tutorial based on playtests at the Entertainment Technology Center and various schools in Pittsburgh. You can read more about it in our weekly dev-blog.

Alice's Adventure is now in Beta. Download for free here.

Alice’s Adventure Trailer

Visit and Play selected games made on Alice's Adventure by peers and students at aliceadventure.online

 
 
cropped-AliceHompage-1-1.png

Responsive Web Design

The Objective of this month long project was to create value for in the electronic waste recycling process by identifying problems and solving them by designing web pages for both desktop and mobile screens.

 

Created as part of the Interaction Design Studio course, the techniques used were guerrilla research, story-boarding, personas, wire-framing and visual interface design. The tools used were Figma, Invision, Sketch, Illustrator and Photoshop.

Take a look at the process book on the right.

Capture.PNG

Data Driven Display

A project done over almost a month in a group of 3, the objective was to create a dynamic display for a fictional transit hub in San Juan Islands, Washington.

Designed as part of the Interaction Design Studio course, the techniques used were user journey, sketching, personas, wire-framing and animation using interaction design principles. The tools used were After Effects, Figma, Premiere, Sketch, Illustrator and Photoshop.

Take a look at the process book on the right.

 
Capture.PNG

About

 
 

It all started when…

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Sed a ligula quis sapien lacinia egestas. Vivamus sit amet semper lacus, in mollis libero. Nullam sit amet nisi condimentum erat iaculis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Aliquam bibendum, turpis eu mattis iaculis, ex lorem mollis sem, ut sollicitudin risus orci quis tellus. Mauris id fermentum nulla. Nullam sit amet nisi condimentum erat iaculis auctor. Suspendisse nec congue purus. Mauris egestas at nibh nec finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

 
 
SCS-Dragon.jpg
 

The following projects were created for Visual Story course at the Entertainment Technology Center. I performed various roles and duties in each assignment and learnt about the film production process while doing so.

 
 

MUSIC VIDEO ASSIGNMENT

The Gambler is a project created by Team on Fire for the Music Video assignment in Visual Story Class.  I worked on acting, storyboard and camera for the video.

 

VISUAL STORY 360 VIDEO ASSIGNMENT

Saying Goodbye is a short movie in 360 video format made by Team on Fire for the Visual Story Class’ assignment. It was created keeping the Pixar Story Structure in mind, but also without dialogues and narrations. I did writing and cinematography for this project.

 

RETROFIT ASSIGNMENT

First assignment done for Visual Story class, called the Retrofit Assignment. We redid a scene from the movie Scott Pilgrim vs the World. I did Cinematography and Editing for this project.

 

RAPID MOVIE PRODUCTION

Rapid Production Assignment for Visual Story class. I did acting and camera work for this project.

 
FilmProduction.png

About

 
 

For my undergraduate project, my team tried to solve the problem of rehabilitation from muscle fatigue and other neurological problems which are quite expensive in the long run. We created a product that uses electrical muscle stimulation to replicate an action; in the process eliminating the need for a nurse or physiotherapist.

I worked on programming and hardware design of the instrument. The project had a significant research phase, which I was also leading.

This was a PoC of the first phase of our project, where we demonstrate the detection of EMG signals from a reference hand.

 
 

Links to Research Papers:

DigitalXplore

KSCST