Universal Orlando Mobile Redesign

Universal Orlando Mobile Redesign

summary

I worked at Universal Orlando from January 2019 to August 2019. During my time there, I used the mobile app a couple of times every day. With that much continued use, I noticed two elements of the experience that I could improve:

The navigation menu
The maps

the current app

Second, there was no singular map to use for wayfinding. The map for rides, the map for shows, the map for food, and the many more sub-maps remained separate, and couldn’t be accessed from one another. There are some areas where these sub-maps overlap, but the overlaps are not consistent, and are limited to single park areas. This discovery led me to construct a user flow diagram for the app, so that I could better understand the architecture of the app, and why some of the sub-maps remained separate.

architecture

click here to open this diagram in a new window

the redesign

I began designing the new user flow by making the home page the map itself. This map, however, would allow users to access all of the functionality previously segmented into sub-maps. After moving all geographic-based information under this map, I set about reorganizing the rest of the menu.

Given the previous user flow, it seemed that buying items (tickets, food, etc.) was the other main functionality offered by the app. I kept the ‘Buy’ menu item, and added the appropriate sub menus under it. Next, I chose to add ‘My Favorites’ and ‘Park Information’ to the main menu, as they offer key affordances to frequent users and new users respectively.

I decided to leave ‘Halloween Horror Nights’ as a main (but seasonal) menu item. Having worked there, I knew that there are many guests who will only visit the park for Halloween Horror Nights, and do not need access to much of the other functionality of the app. Finally, I kept the ‘Help’ and ‘Privacy & Legal’ items, as those are important for receiving feedback from users, and giving them information in return.

the new app

testing

After designing a large number of the app’s screens, I printed them to scale, and tested the paper prototype with my colleagues. In semi-structured interviews, I had them perform a number activities, from finding out the wait time of their favorite ride, to buying tickets, to ordering food. I also had them ‘click’ around the app to see what visual results they would expect from their interactions.

I found three key takeaways from testing with the paper prototype. I learned that, given the structure of my current design, users…

Never used the search bar on the home page.
Had difficulty buying tickets.
Wanted estimated walk times to rides and restaurants.

updates from testing

Taking the feedback I received from the paper prototype into account, I made a few changes to the app. First, I removed the search bar from the home page, since the tested users did not use it. Second, I added a large call-to-action for buying tickets at the bottom of the home page, since tested users had experienced difficulty in navigating to purchase tickets previously. Lastly, I added estimated walk times to rides, restaurants, and other locations, since users expressed that they would want that knowledge. I then set about creating a style guide and designing the remaining screens of the app.

style guide

I began designing the hi-fidelity screen by creating a style guide (see right). In selecting the typeface, I thought that there was only one that truly made sense: Univers. I attempted to keep the sizing of headers and body copy similar to that of the current app.

When considering colors, I noticed that the visual aesthetic of the map was quite crowded. Noticing this, I decided to use ‘Universal Blue’ as the primary color for the app, with only simple black, white, and occasional gray to support. Only using one color was a challenge at first, but ended up helping me to visually organize information better. Lastly, I decided on glyph-style icons, as that is what the current app primarily uses.