CINEFILE VIDEO WEB DESIGN
UX/UI RESEARCH & DESIGN
Project Details
Time Frame
-
Two Weeks
Project Tools
-
Sketch
-
InVision
-
Whiteboard
-
Photoshop
-
Miro
Deliverables
-
Prototype
-
Product Click Through
-
Interaction Flow
-
Presentation & Pitch
-
Hi Fidelity Visual Design
Project Overview
THE COMPANY
Cinefile Video, a video rental store, was founded in 1999. In 2013, when the shop was on the brink of closure, Sebastian Mathews, owner of Touch Vinyl record shop in West LA, purchased Cinefile. Sebastian Mathews hopes to keep a part of the community as both and archival resource and a tower of strength for American culture.
THE CHALLENGE
Our objective was to create a seamless and easy checkout for the membership process on the Cinefile Video website. Through many different methods of research and user testings we found more and more challenges on the Cinefile website.
THE GOALS
The goal of this project was to redesign the interactive experience of choosing a membership as well as the checkout flow on the Cinefile website.
Research
Surveys
Interviews
“First I look into time, like how long it takes to get to the location, then I go into price. If I’m gonna get there an hour earlier then I’ll pay more. Time is the biggest concern.
Research
COMPETITIVE ANALYSIS
My Competitive Analysis was a tad difficult since I haven’t been to a video rental store since 1997!
Comparing other membership checkout processes helped me gain insight into how Cinefile’s membership checkout works and in what ways or method we can make it more user friendly.
INTERVIEWS
For my interviews, I gave my users the task of purchasing a monthly membership on Cinefile Video. Going through this process, I was astonished by how many pain points my interviewees went through that were not visible in my competitive analysis.
"I don't want to join because I don't want to put in my Driver's License. I don't know where this information is going. I never put my Driver's License on anything. That's a shame I really wanted to see what movies they had.
SURVEYS
I conducted a survey to better understand my demographic. The major finding was that some people would rent from a video store if they couldn’t find a certain film they were looking for.
JOURNEY MAP
Going through the website myself and with my interviewees showed me the process and different methods to acquire a membership account. It also illustrated their struggles and areas I could improve.
Synthesis
AFFINITY MAPPING
Drawing the information from my affinity map, I concluded that my users were most turned off by the need to enter their the driver’s license number on the checkout page.
Takeaways: The majority of our potential users were interested in our unique offer of having rare films on hand. They were excited to visit the rental store but were disappointed by web design, checkout flow and the lack of organization on the library page.
USER PERSONA
Meet Vincent, a 29 year old film student living in
Los Angeles who is major film buff. His main goal is to find a local video rental store that stocks hard to find films he needs to watch for school. Vincent’s pain point is that a driver’s license is required for his local video store. Vincent doesn’t have a driver’s license, since he usually bikes and takes the metro.
Avid movie watchers and film students need a place to find rental films which are not available online. Our users are overwhelmed and upset by the membership process. How might we simplify the website and membership application to make this process seamless?
PROBLEM STATEMENT
Ideation
FEATURE PRIORITIZATION
After speaking with an employee from Cinefile Video, I realized the driver’s license requirement could not be eliminated. Cinefile informed me that they needed a way to collect collateral in case a customer decides to keep a movie. Like myself, you may ask, what about the credit card they have on file? The employee disclosed that anyone could cancel their credit card but not their address. Therefore, Cinefile needed some form of collateral other than a driver’s license.
USER CHECKOUT FLOW
Having my interviewees go through the task of acquiring a monthly membership and seeing where in the checkout process they were confused or upset, shaped the design of my checkout flow. The main concerns were the amount of information on the membership page and the driver’s license requirement.
Original Checkout Flow
Proposed Checkout Flow
CARD SORTING
Determining solutions for all navigations was a big task. The potential users were bombarded with the amount of information on the membership page. They were also confused by the hierarchy of the words on each page as well as the primary navigation.
SITE MAP
As you can see the original site map had too many options in the primary navigation and complicated wording that made the users confused and disappointed.
Original Site Map
Using the information from my card sorting and interviews, I created a site map that is simplified and easy to use.
Proposed Site Map
Design
WIREFRAMES
My initial sketches were done with two goals in mind: keep the information simple and find a different form of collateral. Gathering information from my research helped me create my initial sketches and my mid fidelity prototype.
USABILITY TESTING
Testing users after creating each design helped me better understand to include in my final prototype. The users enjoyed the simplified modal and payment process compared to the current process. The users also encouraged me to have the global and primary navigation available during the checkout process, which Cinefile Video currently lacks. The users also appreciated the refundable deposit I proposed as a different form of collateral.
AGILE APPROACH
After every design sprint, I tested several different potential users. Taking their insights, pain points and needs into consideration I implemented it into our design and started the process again. Together with Cinefile, we will continue to do these sprints with our design in the future.
FINAL PROTOTYPE
Next Steps
EXPLORING MORE
The UX team will meet with the client to determine if the refundable deposit is the correct direction.. Once that is settled then the UX team, developers and client will have an ongoing process of creating this redesigned website.
FUTURE TESTING
The UX team will continue to use an agile approach to this proposed website.
As a team, we will have an ongoing process of testing and creating this redesigned website.
