Westcoast Natural Web Redesign

Westcoast Natural web redesign home page Westcoast Natural web redesign home page Westcoast Natural web redesign shop page Westcoast Natural web redesign product page Westcoast Natural web redesign about page

Click here to view desktop InVision Prototype and mobile prototype.

The website is live now https://westcoastnaturals.com.

Overview

This project is for one of our client Westcoast Natural when I worked as the designer in Cucumber Marketing. I worked along with our team, and I am mainly charged at the design part include wireframe and mockup design. The goal of this project is to redesign their old website while providing an e-commerce platform for them to sell their products.

Content strategy and SEO

So after our project director got the project brief done with the client. We will start work on content strategy and SEO. I did some research about the natural product market and how they sell their products currently.

Research note
Research note/simple sitemap for Westcoast Natural

At this stage, we figured about the sitemap and content/SEO for each page. We created google sheet that helps us to organize this information. In this google sheet. we had the following information about each page. The target audience, the content, the purpose, the function, and the outcome. Unfortunately, I don’t have this google sheet anymore, so I can’t show you here.

Wireframe

After the content strategy is done, I will work on the wireframe. I went through couple iterations. I started from something really simple, then based on my project director’s feedback, each version I would go for more in detail. Eventually, this wireframe would have every piece of content and the final layout. By doing so, the client would know exactly what they would get for the final design.

WN-Wireframe-v1

WN-Wireframe-v2
WN-Wireframe-v3

Design

From the wireframe, I design two versions of the homepage. So the client can pick one version as the direction of style for the rest of the pages.

The first version I chose their purple as the primary color of the site. Then I also added some waves to the design as a presentation of the Westcoast.

The second version I switched the layout a bit and brought more elements from the logo to the site. My project director likes to call this “wild card”. It’s a bit more dramatic.

The client would then review each design. The client liked certain elements from each design. They liked the purple color, but they wanted it to be less boring. They didn’t like the wave and they wanted the page to be shorter. So based on the feedback, I designed the final version and created the prototype for the client and the developer to build the site.

Click here to view desktop InVision Prototype and mobile prototype.