PROJECT BACKGROUND

The purpose of the project is to redesign a simple webpage. This process conists of identifying the flaws (userability, learnability, memorability) of the currently existing webpage, creating low-fidelity and high-fidelty prototypes for various screen websites, and then building a working & reponsive website.

I chose New Peking's Chinese Restaurant as the interface for redesigning. The un-usability of the website hinders the business from attracting customers and generating additional revenue through online ordering. Because of the pandemic, online ordering has now become vital to a restaurant’s sources of revenue so that’s why there are flaws within the website that I want to improve for the restaurant to reach customers more effectively.

CHOSEN WEBSITE

Click on any of the screen sizes to open current website in new tab!
original website but on a phone screeen

Small Screen

original website but on a tablet screen

Medium Screen

original website but on a computer screen

Large Screen

USERABILITY PROBLEMS

Below, I first identified particular problems with the original page and categorize it into different sections.

a picture that lists all of the userability problems of the original website

I further identified problems with the orginal page by using a web accesssibility evaluation tool.

a picture that lists all of the problems found using the Web Accessibility evaluation tool

LOW-FIDELITY PROTOTYPES

After identifying the problems from the original website, I created low-fidelity wireframes for each of the screen sizes that is generally supported (desktop, tablet, mobile respectively). On each of the prototypes, I annotated how I will redesign the original webpage in different screen resolutions, with keeping in mind the existing problems found in New Providence Chinese Restaurant webpage. These wireframes were created through the Balsamiq WireFrames application.

a low-fidelty prototype on a computer screen a low fidelty prototype on a tablet screenn a low fidelty prototype on a phone screen

NOTE: The design choices integrated into the redesigned webpage is made with justifiable intention. Originally, the website did not have a our story section and the colors are different from what I chose for the redesigned webpage. I decide to implement these changes (about us section and different color palettes) because the our story section introduces the company itself to website visitors (the company is basically marketing itself to potential consumers in 1-3 sentences). In addition, the low contrast of the colors will make it difficult for people with low vision and colorblind people to distinguish the colors. As the New Peking's Chinese Restaurant should be accessible to everyone, that's why there is such a shift from the original color palette to the revised color palette of the website.

VISUAL DESIGN STYLE GUIDE

Before redesigning the orignal website, I built a style guide that displays the colors, typography, and interactive components of the webpage. The guide helps to ensure that the styles and interactive elements is consistent throughout the site in order for the user to have a coherent experience navigating the interface. However, there are some interactive elements that wasn't used for the redesigned website (i.e carousel).

a style guide that is used to create the redesigned webpage

HIGH-FIDELITY PROTOTYPES

After deciding on the interactive components and styles, I expanded on the low-fidelty wireframes by using Figma to create high-fidelity prototypes for the three different types of screen resolutions (mobile, tablet, computer). These prototypes contain HTML/CSS annotations of key layout choices for others to be able to easily reproduce the redeisgned website. From top to bottom, the order of the high-fidelty prototype annotations goes from computer, tablet, to phone interface.

a high-fidelity prototype on a computer screen a high-fidelity prototype on a tablet screen a high-fidelity prototype on a phone screen

As you can probably infer, I will be designing the New Peking's Chinese Restaurant by using Bootstrap framework. This is because Bootstrap has built in components that enables reponsive-friendly websites and applications.