DurationJuly - October 2023

RoleSolo student project

ToolAdobe XD

- Project Overview -

The Challenge

As part of my Google UX Design Certificate program, I decided to take on a second challenge to design a ticket ordering flow for a hypothetical movie theater, ShowStop. This challenge was to really try a new software, Adobe XD and to design for responsiveness across different device screens, especially between web and mobile.

The Solution

Showstop is a responsive website that allows movie goers to order movie tickets and concessions in advance without having to wait to order in the cinema's ticket booth itself. Users can easily order tickets to their favorite movies whether it's on their desktop, laptop, tablet, or their mobile phones.

Desktop Design

The desktop design of course takes advantage of all the screen real estate from a laptop or PC desktop. All the content is much more expanded with minimal scrolling and a better viewing experience.

Mobile Design

Of course, since this is a responsive website, the desktop design will have to be optimized to fit seamlessly on a mobile device. All the contents are the same from the desktop design just positioned and sized differently.

- My UX Design Process -

- Emphasize With Users -

Before I really get to start ideating and designing, I had to emphasize and understand who I will be designing for. In this phase of the design process, I researched about my users, created an empathy map, user persona, user story, and a user journey to really gain an understanding of what my users are like when going to the movies and to design for their needs.

User Research

For my user research, I conducted interviews on three participants. My primary research goal is to understand what the current experience is like when participants are ordering tickets to the movies, as well as really paying attention to any pain points they are addressing.I scripted the interview questions to not be misleading and really allowing the participants to elaborate on their answers, not just a simple yes or no. My target audience consists of:

Age 16-70
People who goes to the movies at least once a month

Empathy Map

After my interviews and writing down notes from what the participants had said, I made an empathy map of what the participants had said, thinks, does, and feels. This is for me to really get to understand and empathize with my users in order to design a product suitable for their needs.

User Persona

With the help of my empathy map and user research (interviews), I designed a user persona to represent my target audience that I am designing for. It is also a way for me to reference back whenever I question to myself "who I am really designing for."

User Story

I wrote a one sentence story based off my user persona that summarizes who my users are, what they want to do, and why they want to do it. Essentially capturing the needs of my users.

User Journey

The last step of the emphasize phase accumulates all I learned about my users and with the help of my empathy map, user persona, and story, I was able to create a user journey to really understand what my users are feeling/ experiencing when they are on the journey to purchase ticket and go watch a movie. By writing down improvement opportunities derived from my user's pain points, it will allow me to set the path for the ideation phase.

- Define The Problem -

Problem Statement

Before jumping into ideation, I wrote a problem statement that would help me understand my users' goals and constraints they are having in reaching that goal. By creating a problem statement, I can reflect back on it throughout the entire design process, making sure that I have solved the problem for my users through design.

Hypothesis Statement

A hypothesis statement is simply an educated guess of what I think the solution to the problem statement might be and how it would help them solve their pain points. In this case, to design a responsive movie ticket ordering website.

- Ideate Solutions -

Crazy Eights Sketches

I started the ideate phase with crazy eights sketches, I sketched out eight ideas for the layout of my responsive website. A lot of my design inspiration comes from popular movie ticket ordering websites like AMC, Regal, and Atom. Below are the crazy eight sketches for desktop and mobile devices respectively.

Goal Statement

Goal statements are simply the solution to the problem statements back in the define process. Unlike the hypothesis statement, which is just an educated guess of what the solution can be, the goal statement goes into more detail of what the responsive website really does. The app I will be designing must reflect upon the goal statement.

User Flow

I designed the most common path my user would take: ordering a movie ticket to go see the movies. I would use this diagram later to design my wireframes and prototype.

Sitemap

The last part of my ideation phase would be to make a sitemap for my responsive website design. This sitemap lays out the entire information architecture of the app and what sections are related to or fall under a parent section. It is also a helpful tool for developers to understand how the app's information is laid out when coding the website.

- Prototype -

Wireframe

With the help of my sketches, goal statement, user journey, user flows and sitemap, I designed some digital wireframes of ShowStop's responsive website. Since this is about responsiveness, I would need to design for a desktop web browser and scale it down so that the website would also fit nicely within a mobile phone screen.Below are the low fidelity wireframe designs for a desktop and a phone screen.

Desktop Wireframes

Mobile Wireframes

Low-Fidelity Prototype

I then connected all the wireframes together to make an interactive prototype.The link to the low-fidelity desktop prototype of Showstop can be accessed here.The link to the mobile version can be accessed here.

- Testing -

After designing my low- fidelity prototype, the final phase of my design process is to conduct a usability testing with my participants to test the basic flow of the app and how it can be improved based on the users' experience. My usability testing steps is as follows.

Create a testing research plan
Conduct the test on several users
Gather all the data and organize them with affinity mapping
Come up with insights based on themes from affinity mapping to inspire iteration

Usability Testing Research Plan

Before I began conducting my usability test on my low- fidelity prototype, I had to write up a research plan. The usability research plan can be access here.

Affinity Map

From the data I gathered by conducting usability testing, I came up with an affinity map in which all of my data from users are organized and placed into themes (problems) and coming up with insights (solutions) from those themes.

- Iteration -

After conducting the testing and affinity mapping/ analyzing data, I did a major redesign to turn my low fidelity into high fidelity mockups and prototype of both the desktop view and mobile phone view. The following are the main page designs that my users will go through when following the user flow and how I designed them to be responsive.

Home Page

Showtime Selection

Ticket Selection

Seat Selection

Concessions

Checkout

- Final Design Prototypes -

Desktop Version

Mobile Version

Feel free to play around with the high- fidelity prototype/ desktop final design here! And...the mobile final design here!

- Closing -

Project Successes

I sent out both of my final design prototypes to some of my friends, colleagues, classmates, and the Facebook UX design community for evaluation. Overall, the feedback is very positive and a lot of users liked the aesthetic that the responsive website design is going for. Learning a new design software, Adobe XD was very fun and figuring out how to make a website design responsive without neglecting the experience was challenging and fun as well.

What I Learned

For this project, I learned a lot about designing for different screen sizes (responsiveness) and learning how to use Adobe XD and being familiar with their interface (very similar to Figma). At first, I thought that designing a website to be responsive would be as simple as scaling everything down. But, that would be too hard for the users to read and they not only have to scroll, but to pinch and zoom all the time with their mobile devices (which needs two hands= bad UX). So, I have to figure out a solution that wouldn't require users to always be pinching and zooming in all the time. Designing for responsiveness is really about deciding how the website layout will be changed as the screen size changes so that it doesn't affect readability and the overall experience users would get if they were on a desktop. Typically a website on a mobile device only have one column of content, but for desktop there could be multiple columns due to the horizontal screen size.

Next Steps

Although this project was about responsive website design, I didn't really get the chance to use the "responsive resize" feature in Adobe XD and ended up designing two separate prototypes (web and mobile). So, if I were to design another responsive website next time, I would use that feature instead of making another prototype just for mobile. I do really enjoy designing websites because of the screen real estate compared to mobile apps. If I were to reduce the size horizontally of the website prototype, I should be able to see the layout change responsively.

- Visuals -

Design System

Simple and modern are the two words that I like to describe all my designs. In my design system for ShowStop I tried to keep everything consistent, making sure nothing feels out of place. I also tried playing around with gradient buttons which adds a nice touch to the already attractive primary button!

Moodboard

There is just something magical about purple that makes it so pleasant to look at and this moodboard really reflects that. It invisions what the cinema will be experienced like in person with neon purple lighting, dark purple recliners, walls, and the floor. Black and purple just goes to well together, especially in a movie theater.