Fandango
Integrated App-Feature Concept
Overview
The Project
Fandango was looking to add information and functionality to their current app to provide users with alerts of an ideal moment in the movie to use the restroom. Successfully creating a new feature would mean Improving the movie experience for the user, subsequently making their app-use more rewarding. The new feature needed to be added seamlessly into the current app and blend into the existing Fandango brand..
The Problem
“Moviegoers need a way to access real-time updates about movie scenes because they don’t want to miss important scenes.”
Proposed Solution
“We believe that by creating a feature that allows users to keep up with the movie while they are not in the theater; be it they are late, leave early or need the restroom, we will achieve a seamless immersive experience for movie goers.”
Tools Used
Sketch/InVision, Axure
Duration
2 weeks
Role
Worked in a small group of 3 where I contributed to each step of the process. Research and Synthesis, sketching, paper prototyping, digital wire-framing, visual design and usability testing.
Process
User Research
A screener was drafted and sent out online to narrow the scope of the target user. Once the target user was identified, questions were written to discover insights on any potential pain points.
Analysis
Utilizing an affinity map I was able to discover trends among the interviews. There were a few standout groupings that expressed clear pain points. From here, I sketched to help visualize a way of solving the problem.
Design
The sketches I drafted were based off the current app interface to maintain cohesion. With a solid concept in place, I began sketching the user flow to validate the sketched design.
Digitizing
I took the original sketches and created wireframes and high-fidelity mock-ups of the Fandango landing page, and the new feature landing page. I had also drafted mock-ups of an error page and information page.
Testing
I moderated several usability tests on our paper prototypes and 6 usability tests on our digital prototype. I also created the script and tasks presented to the testers.
Delivery
I took part in the case study presentation and was the demonstrator of the finished design to the stakeholders and fellow designers.
RESEARCH
To begin our research we needed to have a screener survey to filter participants and focus on the intended target user. By asking the frequency of movie attendance, method of ticket purchasing and how far in advance tickets were purchased we were informed of whether or not they were the user we were designing for.
I set out to help craft interview questions, it was important that the questions be curated in a way that the user’s pain-points would be identifiable. The full objective of the questions were to understand the user’s experience of movie-ticket buying through an app as well as their movie-going experience as a whole. I performed 3 out of 7 interviews, collecting the answers and synthesizing the insights onto Post-its for the affinity map.
Working in parallel and accomplishing many parts at once keeps the process moving and well-informed. So, I took the opportunity to begin a competitive analysis during our research phase. I chose three competitive apps and made a Google Sheet with a list of 25 comparable topics. We noted that Fandango had established itself in a tight market by offering many great features, but only one app had a basic feature to aid in restroom breaks. It was up to us to help Fandango break into and improve on, that market.
AnALYSIS
Once the interviews were complete it was detrimental to compile the data and locate the pain-points. Our team decided to use an affinity map to flush out the mutual issues. I reserved a conference room for our team, where we immediately began placing the post-its. For about 20 minutes we worked individually to group the post-its, followed by a 30-minute team discussion and decision-making process to thoroughly vet the groups. Within an hour we had clearly identified 6 common topics with 2 pain points taking center stage. This allowed us to be able to identify a problem and solution statement.
With the Affinity Mapping complete we were able to note several "I" Statements. These included:
-
I use movie ticket apps
-
I don't want to miss the exciting parts
-
I like a cue to go to the restroom
-
I hate interruptions
-
Movies are a special event
-
I only use the features I like
-
I don't like to be late
-
I like to be able to pick my seat
Using these results as well as the competitive analysis we were able to inform our design decisions. We knew that we were designing for both Fandango and the target user and meeting the needs of both was key to our success.
During the design process I took the opportunity to draft up a Persona. Our persona was a depiction of what our ideal target user would be. It helped us fully craft our user and understand their motivations, behaviors, goals and frustrations so we had a clear understanding of who we were designing for.
Some of the notable statements in the persona that we continuously referred back to were:
-
Wanting to have an uninterrupted experience.
-
Wanting non-disruptive notifications.
-
Hates missing crucial parts of the plot.
DESIGN
As a team, a sketch and digital mock-up of an app map was devised. The app map helped us recognize any potential conflicts in our design and to confirm what placement of the new feature would look like within the current Fandango app.
The design phase was based on our app map and began with us individually sketching out simple concept ideas that we would combine together. I quickly drew several simple sketches to visualize options. My favorite sketch idea became the platform for the feature landing page.
I drew out two user flows for our feature. The first user flow demonstrated how a user would get from the main landing page to our new feature, turn on the notifications, and navigate to the readable scenes. The second user flow showed how a user would go from the landing page to the new feature and directly to the readable scene.
DIGITIZING
I designed an error page to let the user know that the scene they tried to view would be ready at the appropriate time but not before, as we didn’t want any spoilers. This specific screen although useful, was not included in our final deliverable Prototype. Based on usability tests, we as a team opted to exclude this as it didn't seem to be necessary for our demonstration, but decidedly would be included in a potential real-life build.
My first digital attempt of the Scene Keeper concept was fairly basic and a little unattractive. I kept with the theme and layout of the current Fandango app and imagined what our feature would look like. I used an arrow as the button, a simple outline of an off/on toggle switch and a very simple white background.
Another screen that I was in charge of creating was the Fandango Spotlight landing page which was the main landing page for the app. By using the current Fandango App as a starting point, I reimagined the page with the Scene Keeper tab in place of the current Gift Card tab. Aside from adding our feature concept I tried to stay true to the app and maintain their design and branding.
TESTING
The usability testing began with the paper prototype. I created a scenario and list of tasks to set the scene for a test subject. I then moderated the tests for each of the 5 participants. The takeaways of these tests were extremely helpful; such as the idea for on-boarding, the syntax on buttons, an error page and adding a final "got it” button at the end of the walkthrough so the user understood it was the end of the on-boarding. Usability testing was an important piece to our design process; it confirmed that we were on the right track, and guided us to important improvements along the way.
The participants during the usability test struggled with the movie poster image on the spotlight screen, left image, while it was noted on the error screen that it was very white and the orange text was easily readable. On the third screen, the Scene Keeper screen, Test subjects were confused by the arrow and felt like they had never come across a toggle switch that was a simple outline.
With these notations and others for the additional screens, my team and I set out to make the necessary adjustments.
Here we have the adjustments I made to my screens, per the results of the usability tests. On the left screen I changed the movie poster since the original was the same as the movie poster on the scene keeper page making the participants think they could click it and go to the scene keeper page. I also rounded the corners on the time boxes to fit with the rest of the Fandango theme.
In the middle Screen, the error page, I added an orange background to break up the blank white screen and added the Fandango ad banner to match the fandango app theme. On the right screen, the scene keeper screen, I changed the arrow to a box and made the toggle switch a gray so it was more obvious it was a switch.
DELIVERY
Our team worked to finalize our screens that we had crafted so that our final design would be ready for presentation. We each took responsibility for portions of the presentation. I would present the screener, user interviews, affinity mapping, data synthesis and problem/solution statements.
Since I had created the original test script and tasks for the usability tests as well as moderating them, the team decided I should deliver the demonstration portion of the presentation. Being able to showcase how the new feature worked and the way it was meant to be used, felt wonderful. I think that demonstrating and explaining the unique feature was helpful for audience comprehension.
My takeaways from this project varied from thoughts on the design, thoughts on working with a team and an overall appreciation for the process.
I believe that we delivered an easy to use feature that would help many Fandango users, but it is version 1 and there is room for improvement in version 2. I would consider the addition of a direct-to-scene button on the Spotlight landing page and maybe removing the “next scene” button so that the timer count-down simply auto-populates the scene when it is ready.
I learned that no design is perfect, and no design is truly a “final” design. I had a lot of fun on this project and look forward to what I can redesign for the next iteration.