IPAD WEB APP CASE STUDY
Star Wars 'Galactic Starcruiser'
Guest Itinerary Application
OVERVIEW
Walt Disney Imagineers needed help creating an out-of-this-world application that would assist Crew Members and guests at the new Star Wars resort: the Galactic Starcruiser.
Walt Disney World is building a brand new Star-Wars themed resort at Hollywood Studios called the Galactic Starcruiser. This all-immersive adventure will put you directly into the movie where you can participate in interactive missions and meet various characters. Because of the complexity of dozens of pre-scheduled events, Disney employees (also known here as Crew Members) need the ability to help guests manage the events, change affiliation preferences, and perform other various actions. I partnered with Walt Disney Imagineers to create a brand new application that would seamlessly incorporate into the Galactic Starcruiser and help Crew Members assist guests to ensure they are having an epic experience.
ROLE & DETAILS
Lead Product Designer
Cross-Functional Team Collaboration, Wireframing, Design Exploration, Custom Star Wars UI, Documentation
Team
1 Product Designer, 2 Product Owners,
1 Project Manager, 1 Engineer
Timeline
December 2019 – April 2020
Tools
Axure, Sketch, InVision
THE CHALLENGE
How might we design an application whose user stories, requirements, and designs were constantly evolving with the ever-changing development of a brand-new, world-class Disney resort?"
The challenge was clear: within a few months, I needed to create, design and deliver an application which had less-than-concrete user stories as well as create a design system that would fit in with a very unique Star Wars brand environment when the resort hadn’t even been built yet! Due to the ever-changing nature of the project, I knew it would be imperative to communicate with the cross-functional teams and align ourselves on all of the project goals, regardless of how often they were changing. The team I partnered with at Walt Disney Imagineering didn’t have a set process in place to tackle this project, so I knew I needed to educate the team on the benefits of an agile, sprint-based workflow so we could quickly iterate and start building this application.
WIREFRAMES
After reading through the rough requirements and user stories, I created wireframes to align the cross-functional teams.
Quickly making low-fidelity wireframes was important to get the ball rolling. These wireframes were less about where different elements would live and more about what should be included; they assisted in aligning the product owners, project manager, engineering team and myself. By keeping these wireframes low-fidelity – no color, images, and including lots of questions – distractions were mitigated and as a team, we were able to focus on the process of starting to finalize all of the details.
DESIGN EXPLORATION
Iteration was important when creating a new UI design system.
I was tasked with creating an entirely unique design system and I wanted to scrutinize every component and pattern I created. How should I group and separate different travel party information? When navigating between itinerary days, would a drop down or text link perform better? Using a "preference slider" was a futuristic idea, but how would the user know that there were only three options, and not a hundred? I dissected every detail in each component I used, and I leveraged my internal UX design team for feedback. Once I addressed that feedback and narrowed down my options, I presented them to the product team for review. Not only was it important for this application to look the part, it had to work well too.
DESIGN SYSTEM
I set out to create a design system that would live up to the iconic Star Wars brand and blend in with a resort that wasn't even built yet.
By studying different concept imagery created for the Galactic Starcruiser resort, I was able to create a design system that felt futuristic, modern, and one that blended in with its surroundings. It was required that this application be designed in a "dark mode" because everything in outer space is, well, dark. The primary orange color was chosen because it's the ship's main focal color and thus, would feel right at home. It was a win-win with the color I chose next, as a bright blue is widely understood as a link color and also complimentary with vibrant orange. The futuristic typography was pulled directly from the ship itself, and custom iconography was created to be both legible as well as have the iconic Star Wars feel. Finally, different levels of opacity were used to create a layering effect, and various glyphs were also used to complete the look.
USER FLOW 1
Rescheduling an event by expanding an event card.
The most exciting design challenge of this application was figuring out the balance of providing the Crew Member with enough functionality to perform their role without spoiling any of the magic for the guest – after all, this ipad web application will be utilized at the Galactic Starcruiser resort where both Crew Members and guests will be watching with a keen eye for the details. If a guest insists their event be rescheduled, the Crew Member will happily do so, but if the guest only wants more information about the event, then we only want to show them that information. Rescheduling events is not something the resort wanted to do often, but they wanted the guests to have the ability to do so if absolutely necessary. This is why I designed a stepped-approach and layered different, hidden information.
Upon looking at a guest’s itinerary, with one click, the Crew Member can view an event description in addition to a few other actions. If that’s all the guest wants, great! – they have no idea that the ability to reschedule exists. But if they insist that the event be rescheduled, the Crew Member can tap the expand icon at the bottom of the card to reveal the rescheduling feature. Presented with a toggle to change days and some best available times, I designed this layer to be a quick stop for the Crew member to easily reschedule the event. If however none of these times work, the Crew Member can further expand to reveal even more options.
USER FLOW 2
Locating a character’s item and allow a guest to scan it using their own device.
The entire two-night stay at the Galactic Starcruiser will immerse the guests into a story that they can participate in from check-in to check-out. One of the more exciting interactions they’ll get to do is meet and mingle with various characters from the Star Wars world. At the end of each interaction, the Star Wars character will wirelessly push an item to the guest’s personal phone; this item will be used to further the storyline of their adventure. As with all technology, we had to design a fall-back in case the system fails and the guest doesn’t receive their item.
When the Crew Member has a guest come up to them and ask for help with an item, the Crew Member will respond with an in-story response like, “Who did you discuss that item with?” Remember, we don’t want to take the guest out of the Star Wars movie they’re living in. On the iPad, once the Crew Member locates the character, they can expand their card to reveal a description, some additional actions, and finally that character’s items. Tapping on the “Scan” text link will launch a QR code that the guest can directly scan with their personal phone.
THE SOLUTION
An application designed for an adventure in another galaxy.
Launching in the Spring of 2021 with the opening of the Galactic Starcruiser resort at Disney’s Hollywood Studios, this application will help Halcyon Crew Members ensure their guests have an out-of-this-world experience. By partnering with Walt Disney Imagineers and designing for two personas, 15 screens, and 20+ user flows, I was able to create a Star Wars themed application that would both benefit guests and Crew Members on their adventures in a galaxy far, far away.
WHAT I LEARNED
Constant communication and an agile framework are a match made among the stars.
I learned how important it was to create a structured process that worked for the entire cross-functional team. Setting timelines, goals, and measures of success were imperative to keeping everyone accountable and on track. Because requirements and designs were changing daily, I learned that constant communication, daily scrum meetings, and transparency were vital in keeping the ball rolling. Most importantly, I learned how exciting product design could be when it feels like the sky's the limit.