Tickets, Please! Website Case Study
By Garrett Rankin
The product:
Tickets, Please! Is a movie-ticketing website which has a focus on community but also finding a movie and/or locations to find the theater chain you want experience it at.
Project overview
Project duration:
I’ve worked on this project for a week and a half, and the project has come along smoothly while growing in my skills and learning how to do my best on creating a website.
The problem:
There wasn’t a movie website that had a local, community element to it with choices about which theater you want to go to that is close to the user, no matter the brand.
Project overview
The goal:
The goal for this project was to meet the need of users who are looking for a localized, community-based movie-ticketing website that helps people connect while seeing a movie at a theater brand of their choice.
My role:
UX Researcher, UX Designer, UX Writer
Project overview
Responsibilities:
User research, low-fidelity/high-fidelity wireframing, low/high-fidelity mockups, lo-fi/hi-fi prototyping, accessible design, revisions with all users in mind, etc.
Understanding
the user
User research: summary
My user research consisted of a competitive audit and logical recall based on my personal experience with multiple ticketing apps, which include Regal and Fandango, among others. I assumed that I would not have to make too many changes to my version of a movie website, but then I remembered that a website called Rotten Tomatoes has a feature I wanted to include in my website: community. I decided to include a community component into my website to help it stand out but also to connect people to other theater brands while connecting them together through the site, and their favorite movies.
User research: pain points
Lack of Community
No local websites
I’ve heard and noticed there are not a lot of local movie websites localized to a specific area, so I wanted to make that a reality to help the user.
Accessible Website
I want to make a fully accessible website all users, regardless of disability, to use and enjoy the site.
1
2
3
Most movie ticketing websites don’t have a community component besides Rotten Tomatoes, so I wanted to do something similar and different with this.
Persona:
Tony
Problem statement:
[Tony] is a [community service coordinator/movie fan/website maker]
who needs [to make a movie website]
because [his community wants one to connect online locally and see movies at a close theater].
Tony
Age:
Education:
Hometown:
Family:
Occupation:
22
Boston College
Boston
Myers
Community Service Coordinator/Movie Fan and Website Creation
“I want to be there for my community now that I’m an adult, since my community has always been there for me.”
Goals
Frustrations
Tony is a young North-easterner who grew up in a tight-knit community where he always felt he belonged, and when he didn’t he went to the movies as an escape. He loves his community so much that he is now a community service coordinator and website creator, and he wants to find a way to incorporate his love of movies with his love of community.
User journey map
Image of user journey map
Persona: Tony
Goal: Make a movie
website for his community
ACTION | Ask community what they want in a movie website | Start creating website | Continue Creating Website | Proofread website | Publish website |
TASK LIST | Tasks A.Brainstorm ideas for the website B. Interview friends, family, co-workers, etc. C. Merge ideas and interviews together | Tasks A. Write base code B. Add background color C. Make different pages for site | Tasks A. Add new fonts B. Add pictures C.Add Button functionality | Tasks A. Look over every page and link B. Look over every button and function C.Make sure site works properly | Tasks A. Final proofread B. Send link to friends, family, or colleagues C. Publish website |
FEELING ADJECTIVE | Curious, inquisitive. | Nervious, excited. | Nervous, focused. | Confident, engaged. | Happy, hopeful. |
IMPROVEMENT OPPORTUNITIES | Listen and don’t engage in confirmation/recency bias. | Don’t rush it, take your time to do it right. | Don’t be too nervous, just focus on the task at hand. | Don’t skim or skip sections, take your time throughout this process. | Don’t worry, be happy! |
I created this user journey to identify users’ pain points and locate areas to improve on.
Starting
the design
Sitemap
I I wanted to keep in mind the problem statement, user persona, user journey, and all of the previous steps to influence the sitemap to be a full overview and representation of the website moving forward.
Paper wireframes
II wanted the early design of the website to have a firm foundation of what the site will look like and how it will look, feel, and function so that the users’ pain points can be addressed right away and keep on building from here.
Paper wireframe
screen size variation(s)
The resized format of the paper wireframes to fit into the mobile framework I wanted to keep the look, feel, and functionality of the website the same, just completely adapted to mobile devices.
Digital wireframes
[I wanted to make a design that was familiar yet fresh, simple yet detailed, and engaging and colorful. I wanted people to enjoy the design and to feel connected to people who enjoy movies like they do.
Digital wireframe
screen size variation(s)
[I wanted to make the digital wireframes with the same attributes as I mentioned above, just in a mobile format and in a more accessible format, since more people use mobile than laptop or tablet.
Low-fidelity prototype
For these images of the low-fidelity prototype, the layout is simple yet each link is made clear so the user can get and understand the site without having to overthink or worry about navigation or flowing from one screen to the next.
Usability study: parameters
Study type:
Unmoderated usability study
Location:
United States, remote
Participants:
N/A
Length:
20-30 minutes
Usability study: findings
Insert a one to two sentence introduction to the findings shared below.
Insert usability �study finding 1.
Finding
Finding
Finding
Insert usability �study finding 2.
Insert usability �study finding 3.
1
2
3
Refining
the design
Mockups
I wanted to make sure the Tickets, Please! Website was implemented with what I could and have learned from my last project, since there wasn’t enough time for a usability study for this project. I looked at my previous project for inspiration and I made sure to include accessible links, color, heightened font, a relevant picture, and material icons that are universally recognized and understood.
Mockup 1 before
Mockup 1 after
Before usability study
After usability study
Mockups
I learned from the previous project that color, icons, font, and location of the links to the other pages makes all the difference with a app to become user-friendly, and the same goes for a website, after having learned from Codecraft Works, Launch IT and Coursera (and fellow peers).
Mockup 2 before
Before usability study
After usability study
Mockups: Original screen size
Main mockup screen for display
Main mockup screen for display
Main mockup screen for display
Main mockup screen for display
Mockups: Screen size variations
High-fidelity�prototype
The website prototype pages are listed in order from left to right, and featuring four mobile versions of four of the pages. All of the icons and words are linked to their accompanying pages.
Accessibility considerations
I made sure the font and color was easy on the eyes and that users with low-vision could see it without having any trouble.
I considered the use of the design and layout to be screen reader-friendly, so I made sure the website is with screen reader capability and a hierarchical layout that the screen reader can read aloud to deaf users.
I wanted the app to be usable by all, so I planned to make the website fully accessible to people with and without disabilities, so that everyone can enjoy my website named Tickets, Please!
1
2
3
Going forward
Takeaways
Impact:
I”I really think this looks good, I don’t know what else i can say.”-Grant, my brother
What I learned:
I learned that websites and apps have a lot in common, from the same processes of design to the ways they are created. But I’ve learned that websites and apps both have a responsibility to users to be fully accessible and usable to all who want to experience the developers’ product.
Next steps
I want to make sure the website can be adapted to deaf-blind users with a transcript for braille users.
I want to see more people’s reactions to my website and I hope they like it and want to use it eventually.
I hope this website makes a positive, good impact and that people enjoy it.
1
2
3
Let’s connect!
Insert a few sentences summarizing the next steps you would take with this project and why. Feel free to organize next steps in a bullet point list.
Thank you for reading and going through my case study!
Sincerely,
Garrett Rankin
You can email me at:
Or you can reach me on LInkedIn at:
https://www.linkedin.com/in/garrett-rankin-3a512241/