McDonald's StarWars LTO
Web App
McDonald's StarWars LTO
With the release of StarWars - The Rise of Skywalker. McDonald's developed a limited-time offer Dark Side Saga character set with the purchase of a happy meal.
Role:
Wireframes
Interaction Design
McDonald's Star Wars LTO
This limited-time offer was only available in select states throughout the United States with a purchase of a Happy Meal. My task was to design a location finder so people could know where the closest participating McDonald's was in their area. This was built as a web app and needed to be mobile responsive to allow access to different customers.
Sketches
I started the design process with low-fidelity wireframes. This is the way I iterate through many design options quickly. Given the limited actions, a user could take. I was able to sketch some ideas for the flow and basic layout pretty quickly. Taking a mobile-first approach I sketched out ideas for a mobile view that could translate well when a user was using a desktop.
Given that not every state was participating in the LTO. I played close attention to how the map and search bar were being displayed. I wanted to keep them side by side so users were aware that the promotion was limited to select states. Both the map image and the search bar would be very important to the overall design.
Wireframes
After a round of feedback on my sketches, I then proceeded to create higher fidelity wireframes. While in the sketch phase I made sure to account for user errors and choose to keep them in line. So the user would stay on the page until a valid zip code was entered.
I was also able to determine the flow and what would be displayed once a valid zip code was entered. The user would be taken to a map view with the ability to search locations via the map or a list. A back button was also added so the user could go back to the previous screen if needed.
I had a couple of options for how a user could browse locations. One included a segment control that gave the user the option to switch back and forth from a list to a map view. I would have liked to test both options. But given the time constraints, it was not possible. It was decided we move forward with displaying everything on one page. Due to the fact, not every state was participating it would lead to fewer search results.
UI Design
After feedback, the wireframes were sent off to the visual design team to implement the UI and illustration work. There were not a lot of changes once it got to this stage. We did however had to make some tweaks to the layout because of the additional legal copy that needed to be added last minute.
I knew in the sketching phase that I wanted the locator to be a familiar experience to the users. Similar to what other map services offer but tailored for McDonald's limited time offer.
Retrospective
I think this project went well and we were able to get this released in the span of a month. If there were more participating locations I would more than likely had to make different design decisions. Also, I certainly would have pushed more to do usability testing. But given McDonald's experience with projects like these. We were fairly confident that users would find the experience familiar to what they already use now. But without testing we couldn't be a 100% sure.