Web & App Redesign.

Overview

Client

Term project for class: GBDA 228 – Digital Imaging of Online Applications.

Role

UX/UI Designer.

Duration

3 months (January 16 - April 3, 2018).

Team

Mimi Wang (UX/UI Designer), Jeffrey Li (UX/UI Designer), Derek Lin (UX/UI Designer).

Objective

Choose a website of a small business or organization in the Kitchener/Waterloo area that we feel has a poorly designed or outdated website. Through 3 phases, design and develop a new website that you feel would help improve their business. ​

***Important notice: Princess Cinemas was not a part of this project. This was solely a project for school. Princess Cinemas had no involvement in the project nor its outcome.

Outcome

While this was just a school project, I'm really proud of what the team came up with and the mobile app I designed to go alongside the website. I had a lot of fun working on this project, mostly because the designs were movie-theatre themed and heavily dependent on visuals and artwork as opposed to text.

The Process.

1/4

Phase 1 (Team):
Strategic Analysis & Sitemap.

Phase 1 of this project involved research in four main areas:

  1. Business Summary
  2. Website Critique
  3. Website Analysis
  4. Site Map

As a team of 4, the research was divided up evenly. I was in charge of the Website Critique:​

"Analyze and critique the design, content and usability of the existing website (e.g., why do you think it is poorly designed? Is the content included useful and informative? Does the website meet the business's needs?)."

You can read my whole website critique here. ​

TL;DR

While the content on the website is useful and informative, there lacked a clear visual hierarchy, and there seemed to be more emphasis on text than on imagery. For a movie theatre – a business that is based on visual – we felt the site could be more compelling if the artwork and movie posters were at the forefront.

The state of the website at the time felt very outdated, with poor use of space, colours, text and typography.

Screen shot from February 5, 2018.
2/4

Phase 2 (Individual):
Wireframes & UI Mockups.

For Phase 2, each of us were to:

  1. Create low-fidelity wireframes of how we felt the website should be updated, and annotate each wireframe image to explain the interactions on each screen
  2. Create two hi-fidelity mockups, one of the landing page and one sub-page
  3. Write a design rationale explaining why we think our design is an improvement from the existing website in terms of design, content and usability
Tool: Sketch

To view my wireframes and mockups designed in Sketch, along with my design rationale, click here.

Shareback & Decision

​Once finished, we were to share our wireframes, mockups and rationale with our group members and decide which designs we would like to follow in Phase 3. ​

Our team decided to follow the direction my wireframes and mockups were heading in, while making a few changes and incorporating some of the ideas that they had. For example, my original mockup for the "Movie" page was missing a great opportunity to have artwork from the movie displayed at the top of the page, which I later added, as seen below.

Rationale

These new designs made sure to put movie artwork at the forefront, creating a clearer visual hierarchy. The pages were a lot less cluttered with text, and users eyes were now guided naturally throughout the pages. The dark theme also provided more of a "Movie Theatre" feel, with the subtle gold highlights providing a "premium" feel.

​The sitemap was also cleaned up. For example, the "Info" page – on the original site, all of the information was sorted on separate pages, resulting in the user doing a lot of clicking and waiting for pages to load. I felt all of the information could be put on one page, resulting in fewer clicks and less time waiting (as seen in my wireframes).​

3/4

Phase 3 (Team):
Website Development.

Tool: HTML & CSS | Atom

In this Phase, we were to bring all of our research and designs together and develop the website from scratch using HTML & CSS. Since this was a team component, we each divided the pages up evenly. You can download our code GitHub. I coded the "Info" page, and you can see a screenshot here.​

4/4

App Design (Individual)

Taking our group's research about the business, we needed to create a mobile app concept that helps to facilitate or grow the business in its current state. The app must have a specific purpose and address a business need that could not be effectively accomplished through our website redesign.

My Problem Statement

Even though we streamlined the website for Princess Cinemas in our term project, there was still something missing – a way for loyal customers to remain engaged with the company and earn rewards for their loyalty.

Princess Cinemas has a loyal customer base of educated viewers who return on a regular basis to enjoy the unique selection of events and films that are not offered many other places. However, beyond offering a membership card that merely saves the customer $4 per film ticket, Princess Cinemas does not offer any other loyalty program for these valued, loyal customers.

Not only that, but Princess Cinemas has been able to garner a strong consumer base of educated film enthusiasts, and I feel that should be something to acknowledge and celebrate. Through our research during phase 1 of the term project, we discovered that the customers of Princess Cinemas generally have a higher level of knowledge about the film industry and the art itself. I feel like Princess Cinemas could use this level of interest and knowledge to their advantage, and offer something to their customers that no other independent cinemas are offering.

Moreover, while Princess Cinemas does offer the ability to purchase tickets through their website, they do so in a very complicated way – you have to open multiple windows and go through PayPal. Not only should there be an easier way to purchase tickets, but loyal customers should be rewarded in ways beyond saving a few dollars each time.

Prototype

Tools: Sketch & InVision

Designed in Sketch and built in InVision, I made a clickable prototype to help solve the issues outlined above.

Design Rationale

You can view my full Design Rationale here.​

TL;DR

Essentially, I kept the designs very similar to our website design. I provided a way for users to buy tickets in just a few clicks, and I created a loyalty system with points and levels as a way to keep customers engaged, and reward them for their knowledge and purchases. Users can earn points with each ticket they purchase, and by playing the trivia offered in the app.

After earning a certain amount of points, the user reaches another level. Earning points and levelling up gives users benefits and discounts that aren't offered to non-members. By tapping on the profile icon, users can hit “Rewards”. This is where users can redeem their points to purchase rewards

View my other work