Cheryl Wang | Harkins redesign project

Harkins Redesign

AZ COVID-19 Graph

Restaurant Point-of-Sale

Harkins Redesign

Phx Sky Harbor Redesign

Introduction

2015

Overview

This was a prototyping project I completed for a Human Factors class in the Spring of 2015. It was a personal project to expand our skills with Axure RP Pro 7.0. Ultimately, this took about 10 hours to complete.

The idea for this project came from my love of movies and local businesses. On Valentine’s Day, my boyfriend and I tried to plan an impromptu movie night. We found that Harkins Theatres’s website was really hard to navigate on my phone.

Process

Issues

Recently, Harkins changed their website and a lot of the addressed usability issues have been resolved.

On a 1920x1080 monitor, the content on the original website didn't scale/adapt (and still doesn't in its present design). You can see that the font was tiny and in order to access front page content, you had to scroll through the red Flash menu with only one release displaying at a time.

If you moused over certain parts of the navigation, a list would pop down, but moving the mouse over the list would cause it to disappear. Another issue with the navigation was with redundant links.

I wanted the re-design to clean up the front page. Mostly, I wanted to get rid of the Flash player, present information more clearly, and fix the usability problems presented in the navigation.

Harkins actual Screenshot

Harkins actual Screenshot 3

Harkins actual Screenshot

1/2

Design Thought Process

The Axure prototype: http://1li54k.axshare.com/home.html

Color

The colors I used were based on the Harkins brand. For the most part, much of the prototype is a “shade” of black (or arguably some shade of grey), but I took some ideas from google design in brainstorming a color scheme.

Red was kept to a minimum so it would not overpower the layout. I wanted to go with a lighter color overall, but looking at their competitor (AMC Theatres), it was difficult for me to think of using white.

Navigation

Starting from the top of the prototype, the navigation was shortened into bigger, more generalized categories and the search bar was separated into two text fields for less confusion. Scrolling down also locked the bar at the top of the browser to eliminate the need to go back up.

Ultimately, the most challenging part in this project was getting the navigation to work how I wanted.

Placement

I placed the ads below the navigation because I felt like that would give more room at the bottom for the movie poster previews. On the previews, I tried to simplify it as much as possible. The roll-over function is not perfect nor aesthetically pleasing, but the idea was to save space and have simple information about the movie display on the home page.

Trailer and showtime buttons were added to each “Now Showing” movie poster for ease of access. Selecting a poster on the top row would lead to a more detailed movie page.