City of Stars

A companion AR mobile app for the soon to be installed "Pittsburgh Walk of Fame", which will bring bronze star-plaques to life on a handheld device.

DURATION

Fall 2018 (4 months)

 

TYPE

Team project

Academic project

TEAM MEMBERS

Mohan Bai

Naomi Burgess

Fangda Luo

Vasant Menon

Yifi Zahao

ROLE

UI/UX Design

Interaction Design

UI Animation

Usablity Testing & Interview

 

METHOD & TOOL

Sketch

Principle

Adobe XD

Adobe Creative Suite

Client & Vision

The clients of our projects are Nancy Polinsky Johnson and C Prentiss Orr. Nancy is the editor of the SHADY AVE magazine,  and she is also the initiator of the Pittsburgh Walk of Fame. Prentiss is president of the Explorrditions LLC. They both wanted to collaborate with ETC to create a supplemental AR app.

Their visions are:

"Imagine, as you continue to walk, more names appear, embedded in the sidewalk in brass, highlights of their extraordinary lives on display for all to see—and to hear, using augmented reality."

"Imagine, one by one, Pittsburghers who helped shape—or continue to shape—our nation’s heritage, honored on an ever-expanding digital streetscape, a tourist attraction that is also an educational tool and source of pride for locals."

Challenge

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

Distinguish from the text-based Wikipedia knowledge
Since users can already access to tons of honorees' information on Google and Wikipedia in terms of profile, history, achievement, and work. Thus, one the biggest challenge is how to distinguish from the text-based knowledge online, but bring users a fun and engaging way to acquaint with the celebrity at the same time and let the app works as a prompt and educational tool to arose people interest to know more.

 

All age groups friendly
It should be fun and engaging for people of all ages while being informative about the city’s rich history. And 
have to consider the scenarios when people open this app while visiting, they might want to share the exciting moment with their companions in a comfortable way (Not using AR all the time).

 

Design for tourists and local Pittsburghers as well

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

 

Not a liability visiting experience

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.

Design Pillars

We settled down our design Pillars with Fun, Simplicity and Encouraging exploration. As we targeted the audience of average or lower interest to the celebrities instead of the scholars who prefer serious materials, making it more fulfilled with pleasant elements can help us to attract the casual tourists and provide them with an enjoyable trip on PWF. In addition, keeping the simplicity of our design which can have more people to use the app without difficulties is also very important. And for the ultimate purpose of the project, we want to encourage people’s further exploration and discovery of the notable, arousing people’s interests in knowing more about the Eminent People in Pittsburgh.

Fun

Simplicity

Discovery

02/  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.

Demo

Highlights

Scan "the Star"

The app allows the users to place the device camera to the star, and adjust the distance to let the honoree's name fit in the frame, then the Vuforio will recognize the letter and trigger the animation which gives the users visual feedback that they have unlocked the star successfully and brought the star plaque to life 

Celebrity Landing Page

After scanning the star plaque, users will be accessed to the celebrity landing page. By swiping the bar, a story of the honoree unfold. A dial at the page bottom could help users navigate through 3 part: Discovery, Pittsburgh Connections, and Media Gallery

Pittsburgh Connection

As the honorees are either "Pittsburgh Born" or "Pittsburgh Bred", the Pittsburgh Connection Page utilize the timeline illustrates how these "Pittsburghers" related to this steel city and where these events happened.

Discovery

The discovery page is likened to the honoree's shoe box which users are able to interact with the items and explore the fun facts that the items represent

Media Gallery

Media Gallery provides users with video clips, audio, and images, these media incorporate their achievements, glorious moments and their great works.

03/  Process Documentation

Research

The first batch of star-plaques that will be put on the Pittsburgh Walk of Fame includes 20+ honorees. Because of the time constraints, we picked 3 representative Pittsburgh influencers (Andy Warhol, Rachel Carson, and Roberto Clemente) to start off the initial research, since they represent different gender, races, and diverse occupation. 

Andy Warhol
Rachel Carson
Roberto Clemente

As the app is pretty much content-based, we conducted research by exploring the honorees' museums and also learned from their great works, such as a Rachel Carsons's book "Silent Spring", Andy Warhol's exhibition and Roberto Clemente Museum. These background research provided us with a lot of inspiration and drew lessons from the museums that how they convey the honorees' glamorous moment and achievements in terms of timeline and different media.

"Silent Spring"
"Silver Cloud" from Andy Warhol Museum
Roberto Clemente Museum

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. Additionally, we made a composition box, outlining the resources we should take inspiration from, what kind of product we wanted to create, and what needs we were solving for our target audience. 

1. 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.

2. Tourists, especially 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.

3. 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.

Conceptlization

The second stage is the ideation. During the initial ideation,  we sketched out 2 ideas on the paper and 1 digital Lo-Fi wireframe, including how a digital honoree will pop-up and how guest interact with them to discover their stories.

Ideas

The User scans the star, and a paper-doll-like figure, created out of original photos of the individual, will pop out. And then:

Option 1: a timeline based circle will appear around the figure

Option 2 & 3: Using folder-tab-like buttons / keyword-based nodes to divide information into categories

Wireframes

We were able to clarify some of the expectations concerning the flow of the Pittsburgh Walk of Fame experience as a whole. We came to the conclusion that despite the specifics of the app we eventually decide to create, said app would need to be fairly modular so that it is easy to create celebrity profiles associated with each star on the future walk.

Since then, we have decided to make a series of wireframes and lo-fi prototype in order to identify suitable design options. We split up work among the design team so that we could each come up with ideas for interfaces and then put them together to figure out the positives and negatives of each approach.

Approach 1

  • The app selects a piece of celebrities' fun fact to show users every time they visit the app on the home page.

  • A list of celebrity represents how many star plaques the users have scanned and unlocked the celebrity

  • Providing more details of the honoree in terms of their images and the history timeline

Approach 2

  • The app starts as the user opens a storybook

  • Users learn the knowledge of the celebrity through a trivia game

  • Users could get a stamp after passing a trivia game

Approach 3

  • After scanning the star plaque, the celebrity pop-up as unfolding a 3D-story book

  • Users could take a selfie with the honoree

  • By swiping the cards at the bottom of the app, users could look into the selected fun facts of the celebrity

  • Tap the "learn more" button to get more information if interested.

User Flow

Since each of the approaches has its strengths and weakness, we wanted to combine them by selecting the juiciness features. Besides, our challenge is how to distinguish from the text-based knowledge online, convey the celebrities' history timeline directly didn't seem a good idea. However, the selfie-taking feature is a delightful moment that users can hardly access online. To follow the guideline of providing knowledge in a fun way, we finally settled down the app user flow and 4 interactive features: take a selfie with the honoree, discover page, Pittsburgh connections, and Media Gallery.

Hi-Fi Prototype

Modular Design

Modular Design was one of our principal requirements of our clients so that the project can continue beyond the semester and it's easy to be developed in the future. Hence, we planned for it well in advance and created the  ‘ celebrity landing page’ and the 3 submodules that anyone can get into and use/reuse to create new celebrity lists. Also, it's easy for users to understand the interactions, instead of struggling with new things.  In this way, we applied the same user flow on the experience of Rachel Carson and Roberto Clemente.

Props

Once we pretty much finished all the screens, we crafted 3 cardboard "bronze" star plaques. Since the app utilizes the AR technology, the props not only assisted the developer to test the AR scanning feature but also allowed the guests have a complete user experience of using this app and simulate the entire visiting process.

Also, to clarify the detecting feasibility, the props we used just to test the characters recognition. Because the Vuforio system can detect different honorees' name and trigger the animation landing to relevant celebrity. Moreover, we tested the app on an actual bronze plaque to make sure it will work for the future bronze installations

Usability Testing

​We then tested our design with users by observing how they navigate through all the screens, and whether they have troubles with the interactions. And we found that we still had some usability issues to fix.

 

Guests still couldn’t figure out that they needed to tap on highlighted neighborhoods in the Pittsburgh Connection to view how those neighborhoods related to each of our app’s honorees, and the icon we used for the button that returns guests to the star-scanning page wasn’t quite intuitive. What’s more, we found that we needed to rework some of our Discovery page content for Roberto Clemente, as the page’s written material wasn’t doing a good job of representing aspects of Clemente’s life that were core ethos (such as his humanitarian work).

 

Finally, we realized that we still needed to make the plaque-scanning portion of our experience feel a bit more magical, as well as give guests more feedback letting them know when they’ve successfully scanned a plaque.

Iteration

Based on the test findings, we were able to fix all of these issues.

We added an animation to interactable Pittsburgh Connection neighborhoods, and we changed up the “scan star” button icon to a star inside a pair of brackets (which guests found to be far more intuitive). What’s more, we’ve added titles for each honoree in our app (so guests can, at a glance, get an idea for what the person they’re discovering did), and we’ve changed the “take selfie” button icon to that of a camera with a figure behind it (to distinguish that button from the “scan plaque” button). Also, added more VFX and SFX to our transition animation that triggers once a star plaque is scanned.

Final User Interface

04/  Takeaways

Clear and constant communication is extremely important when working with developers. When I design, I needed to know if certain things are possible to build on their side. Being able to do so saves time and effort for both of us. The greatest challenge I faced came from not being able to get in a room and discuss my design approaches with the developers as I created a feature that was not feasible on the back-end. Eventually, we were able to come up with a revised design that was successfully implemented but it took several additional meetings for the design team to revise the design. 

Interaction design is a crucial part of the entire design work and it’s also a challenge for us, because different people may have different cognition and reaction when they’re dealing with the same UI element, and we need to find a proper way to let users as much as possible to understand what we convey and use the app smoothly. We iterated our interactions by playtesting. Each time we observed the users’ behavior and asked them their opinion when necessary, and finally, we came up with the version we have right now. By assisting with arrows, dots, and icons, users could understand the interactions when they explore the individual for the first time, the little learning cost then enable better efficiency of exploring the next individual.