Studio One Theaters
Studio One Theaters
Redesigning and rebranding a responsive website for a local movie theater based in Portland, Oregon
My Role:
End-to-End UX / UI Designer
Tools Used:
Figma, Maze
Timeline:
4 weeks ( 20 hours / week)
What I did:
Competitive Analysis, User Research, Logo / Brand Design, Wireframing, Prototyping, Usability Testing
Background
Studio One Theaters is a local, independent movie theater based in Portland, Oregon. It is a unique first of its kind multiplex theater, restaurant and live entertainment venue. It has 7 penthouse theaters featuring luxurious custom designed furnishings and decorations. Guests enjoy excellent customer service that includes in-theater dining.
Challenge
Studio One Theaters' website is outdated and needs a bit of a refresh. After a year of being unable to provide their service to guests because of Covid-19, Studio One Theaters feels the need to stand out from competition.
Our Problem
How might we rebrand and redesign the website of Studio One Theaters to look modern and updated?
Design Process
Research Goals
- To understand the current value and appeal of movie theaters
- To understand what moviegoers enjoy about the movie theater experience and how we can use that knowledge to improve the current website of Studio One Theaters
I developed a Research Plan to guide my entire process
Methodologies
- Site Analysis
- Direct and Indirect Competitive Research
- User Interviews
- Survey
First Look at Studio One Theaters
Site Analysis
The first thing I did for this project is do a design audit and analyze the current design of the website.
Scoping out Competition
Competitive Analysis
I compiled a list of competitors' websites to find consistent industry themes. I wanted to capture strengths and weaknesses of competitors to see what I need to incorporate and avoid when redesigning the website.
Survey & Interviews
After understanding competitors in the industry, I looked into the habits and motivations of moviegoers to empathize and understand their wants and needs.
Quantitative Insights
Qualitative Insights
- Survey participants and interviewees enjoy both the immersive movie theater experience and the social aspect that comes with it.
- Participants like theaters where they are able to order food and alcoholic drinks from their seats.
- Participants see a value in being able to pick and book your seats in advance.
- Participants feel nostalgic when thinking about movie theaters.
More Research Findings can be found here
Defining the User
User Persona and Empathy Map
Joseph, a married man based in Atlanta, Georgia worked in the film industry for a decade and is a big fan of movies. He mentioned how his wife loves to purchase their tickets online because of the ability to book seats in advance.
One thing he said that he would love to experience is being able to order meals and drinks from the comfort of his own seat in the theater.
See Empathy Map
Common Goals
One important aspect that makes a product successful is the ability to see and understand the needs of different stakeholders and be able to formulate design decisions that can accommodate all needs.
Key Common Goals:
- user-friendly website for purchasing tickets and reserving seats
- fun and safe movie theater experience
Project Roadmap
Based on goals defined, I created a list of features and identified which ones to prioritize and implement.
I prioritized the features by:
- Must Have
- Nice to Have
- Surprising and Delightful
- Can Come later
Site Map
After knowing what the necessary features are, I created a sitemap. The structure of the website is influenced by user and business goals.
Task Flow
The main tasks that I want my users to be able to do with my prototype later on are: successfully purchase a ticket, book a seat and pre-order food. So I created a task flow for the check out process to see how it would work in detail, and to inform which screens I would design for.
See Task Flow in detail
Wireframe Sketches
Taking what I’ve learned throughout my process to this point, I started to make decisions on how the content on Studio One's Theater website would be organized based on the project goals.
Low-Fidelity Wireframes
After completing wireframe sketches by hand and getting feedback from my mentor and other designers, I digitized them on Figma. I created tablet and mobile versions to make sure that the design is responsive and effective across the different device screens that users would be accessing the website on. This is very helpful as users typically browse movies on their computers and mobile phones.
Design
With a deeper understanding of what the digital and physical spaces of Studio One Theaters look like, I decided to only create minor changes on its current branding. Since the establishment already follows a certain look, I wanted to refrain from major changes since physical changes to the theaters are not feasible. I want to ensure that branding remains consistent in both the digital and physical spaces and users are able to transition seamlessly from one space to the other.
Logo Design
Upon observing the website and the physical movie theater, I realized that the website logo is used in the storefront of the building.
In order to have an effective branding that requires no physical changes to the theater, I decided that I wanted to use a typeface that is almost identical to the current logo of the website. I used the font "Berkshire Swash" to achieve this goal.
UI Kit
The color palette not only remains consistent with the current physical phase, but it is also driven by moviegoer's expectations of theaters.
In my initial user research, I learned that users love to go to the movie theaters to feel immersed. I am using a dark background for this website so users feel immersed from the beginning of their movie theater experience which starts on the website.
Applying Design into Screens
High Fidelity Wireframes
After establishing the logo design and UI Kit, I incorporated the color palette and UI elements to the wireframes below.
Does it Actually Work?
Prototyping & User Testing
With my high-fidelity wireframes completed, I created a prototype to create a realistic experience for users to test. I also conducted usability testing with 13 users to see how users interact with my design and identify where improvements to the design can be made.
Understanding What Works and What Doesn't
Affinity Map
After conducting usability testing, I gathered all user insights and created an affinity map below.
Detailed reserch report from Maze can be found here
Design Changes
Learnings & Challenges
The importance of checking your work
When conducting usability testing, I made a mistake of not providing detailed directions to complete a task. This resulted to users giving up or getting lost in the prototype. I learned that unmoderated usability testing requires a lot of thought since designers are not physically present to interrupt a session if something in the design does not work properly. Designers should be very careful of creating unmoderated usability tests since any mistakes by the designer can lead to inaccurate findings.
In the future, I will make sure to have other team members go through my usability testing first before sending it users. Getting feedback from the team is very important as they can provide useful insight.
Next Steps
Since I was not able to work directly with the client due to time constraints, I plan to bring and present the screen designs that I have worked on to them. I want to know what their inputs so I can make design adjustments that would help benefit their business.
