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.
City of Stars is a CMU ETC semester-long project that aims to utilize augmented reality in creating a companion app that enhances the experience of visitors to the "Walk of Fame" in downtown Pittsburgh when opened for public. This user-friendly and social mobile app 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 the lead UX designer. I mainly focus on leading weekly design sprints, creating UI components, intuitive interactions, and UI animation. Also, I performed usability testing and interviewed with 20+ participants for iterations.
02/ Design Context
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."
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
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). It should be fun and engaging for people of all ages while being informative about the city’s rich history.
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.
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.
03/ Final 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.
04/ Process Documentation
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.
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.
"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
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.
Highlighting the districts and streets where their favorite personalities were born, lived, schooled, etc using a map of Pittsburgh helps engage with local audiences.
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.
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
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.
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
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
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.
Identify the 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.
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.
Making the 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.
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.
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.