Persona

Based on the user group interviewed, two persona were created to represent common needs of the user that can help in creating as base to built the website.

User story

Building user story from the Emma's persona point of view helped to inspire and inform design decisions.

As an Entrepreneur and busy mom, I want to search for a movie with exact seat, date, time and reviews so that we can enjoy family movie comfortably together.

User Journey Map

I created a user journey map of Emma’s experience using the site to help identify possible pain points and improvement opportunities.

Competitive audit

One way to come up with my ideas for design solutions was to compare the website I am going to design with existing websites from similar organisations by conducting a competitive analysis to deliver effective and unique designs that offer a new solution to user problems!
‍
First, an online search for theatre website competitors was completed. Then, the competitors name and type of competitor were added to the Google sheet. For my audit, I decided on a total of three competitors: two indirect competitors and one direct competitor.

How Might We (HMW) and Crazy Eights

With the user's pain points and problem statement, I started the How Might We exercise to begin thinking of ideas to solve Emma’s issues.

• How might we make the movie tickets booking website experience fun, easy to use, and engaging?
• How might we design something that helps Emma book movie tickets on her choice of date, time and seats?
• How might we bring movies to Emma or highlight a perfect choice for her to easily access and book?

After this, I completed the Crazy Eights exercise with Emma's issues with How Might We questions in mind.

Using the Crazy 8's exercise, I came up with different designs that I could pull ideas from.

Information architecture (IA)

When planning the designs for a responsive website in its early stages, it’s important to create a clear organisational path. That's where I created a sitemaps to make my design decision easier.

Nevertheless, difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

Paper wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.

The home screen paper wireframe variations to the right focus on optimising the browsing experience for users.

Screen size variations (Paper sketch)

Because Movlex’ customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

Digital wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritising useful button locations and visual element placement on the home page was a key part of my strategy.

Screen size variations (Digital wireframes)

Since users browse from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.

Low-fidelity prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of booking ticket, seat selection adding an item to the cart and checking out. At this point, I had received feedback on my designs from users survey about things like placement of buttons and page organisation. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

Usability study

After conducting survey, I had an opportunity to review, analyse, and synthesise the data from my study and apply it to make changes to my design and improve the user experience.

Refinements

Based on the insights from the usability study, I made changes to improve the site’s navigation flow. One of the changes I made was adding the “Stars rating” left by users. This allowed users to select movies based on the ratings and reviews.

In addition, to make the checkout flow even easier for users, I added a cart notification to allow users check what they have added to their cart and also dot notification icon to indicate the items in the cart.

Screen size variations

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users browse from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.

High-fidelity prototype

My high-fidelity prototype followed the same user flow as the low-fidelity prototype, and included the design changes made after the usability study, as well as several changes suggested by surveyed participants.

Takeaways

Impact: Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
‍
What I learned: I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.