Website Re-Design / Development

Objective

China Yan's website needed to be rejuvenated with new branding and overall design layout. Starting fresh, this website's re-design goal was to create a more user-friendly and intuitive experience.

China Yan is a Chinese restauraunt that offers fast, cheap, and delicious Chinese dishes. They have no distinct brand identity and an outdated website.

The original website was not offering customers the best experience as many of the links were broken or under construction and the menu was hard to read and difficult to navigate.

China Yan also needed an updated and consitent brand identity that would help them stand out and be memorable for customers.

Solution

Create brand visual identity and incorporate identity in a user-friendly and intuitive site.

Process

The process began with research and inspirational moodbaords to help generate ideas for the new brand identity. The goal was to create a brand that was loyal to the roots of the business, but fresh and updated.

A lot of the initial research was based around finding traditional Chinese art pieces and incorporating their color palettes and energy. Looking at websites for competing Chinese restauraunts was another step in the research phase. Finding what works well and what doesn't work was a key factor in deciding design decisions.

This information was used to create a creative brief as an overview of the brand, their audience, and my objective for this re-design.

Multiple iterations of wireframes were made to help narrow down the desired outcome of the wesbite.

Using the wireframes, prototypes were created to see the design decisions and layouts together.

With a brand identity, palette, and layout plan comlpeted, the next step was creating graphics and assets to be used in the final live site.

After a thorough plan was created, the website was coded using HTML & CSS.

Tools

Visual Studio Code | Adobe XD | Adobe InDesign | Adobe Illustrator | Adobe Photoshop

China Yan final website mockup
Final Website Re-Design

The final output of the website re-design and development is in the form of a live site. The site can be visited here.

Tools: Visual Studio Code | Adobe Illustrator | Adobe Photoshop

Moodboard for China Yan website re-design
Research & Moodboard

This moodboard contains sources of inspiration used to create design decisions for branding and aesthetic.

Tools: Adobe InDesign

Creative Brief for China Yan website re-design
Creative Brief

In this creative brief, the website re-design and project's scope was broken down.

Tools: Adobe InDesign

Interactive Website Prototype (Try Me!)

Tools: Adobe XD | Adobe Photoshop

China Yan noodle background image
Background Illustration

This graphic was hand-drawn in Adobe Illustrator and used as the background for the live site.

Tools: Adobe Illustrator

China Yan low-fidelity wireframes
Low-Fidelity Wireframes

Several iterations of each website page was drawn to visualize layout.