PHILIP CHEUNG

Project Overview

WIC Marketing

The Mission

As an established company with humble beginnings, WIC Marketing was ready to expand. With the expansion, WIC needed a fresh branding identity and a strong web presence. Timothy Pua, the managing partner at WIC, contacted me with the assignment to help his company reach new heights.

My Role(s)

Brand Strategist
Graphic Designer
Web Developer | UI/UX

Time

4 Months

Programs

Illustrator
Photoshop
Adobe Xd
InDesign
Webflow

Services

Website
Logo Design
Brand Identity

The Outcome

I designed the WIC Marketing visual identity from the ground up, capturing the humble beginnings of the history with a fresh corporate logo and brand style guidelines. I then built a high-performing website that helps educate leads and convert clients.

The Impact

Since the website launch, WIC Marketing's SEO has risen up significantly ranking at the top of Google for various key search terms. Conversions for form requests has risen up over 200% since the launch in July 2019.

Approach

How I Did it

It took me 4 months to complete the project:

1) Project Requirements

2) Branding and positioning strategy

2) UX Research & Content Strategy

3) Copywriting

4) Wireframes (Low & Hi)

5) Development

Branding

I designed the brand based off two factors:

1) The information I've learned about the company in a kickoff meeting.

2) Competitive research (there were no major competitors in the market WIC operated in so I looked at companies with similar operations).

Branding Decisions

  • Blue was used as a color of trust
  • Orange was later added to show ambition & energy
  • It needed to have a professional appeal
  • The logo resembled the "seasonal" aspect of the company
  • Univers Std is the primary typeface as it is a respected type with a long history (WIC has a 30+ year old history)

Positioning Strategy

I positioned WIC to lean on the conservative side. WIC's customer base largely consists of older big box brands & older systems. However, the products WIC market are more playful and modern.

The approved WIC Brand Stylescape

UX Research

Product Requirements

I really wanted to convey the story behind WIC's roots and story. The message/voice of the website had to "sing" for all users who are to access the site. At the same time, the website had to build trust, reliability, and honesty (the principles of WIC) for the users. There was the basic general web requirements that needed to be met as well. The site after all, had to be bilingual and display the various products WIC markets.

Website Requirements list

Use Cases/Task Flows

I designed various task flows and use case scenarios for the site before designing my wireframes.

Various user task flows

Wireframes

I went through 2 iterations of wireframes. Each version was reviewed by the stakeholders.

  • The user flow had to be intuitive and easy to navigate
  • Storytelling of the company history was a requirement
  • Users had to easily remember where components and elements on the site were located
  • The wireframes were tested with 4 user testers.
  • the products page had to had a pleasurable viewing experience

The approved wireframes

I went through 2 iterations of wireframes. Each version was reviewed by the stakeholders.

  • The user flow had to be intuitive and easy to navigate
  • Storytelling of the company history was a requirement
  • Users had to easily remember where components and elements on the site were located
  • The wireframes were tested with 4 user testers.
  • the products page had to had a pleasurable viewing experience

The approved high fidelity wireframes

Development

The longest part of the process. It took me 2.5 months to develop the site and squash a colony of bugs.

  • The story section was changed due to technical restraints
  • Changes in the loading animations for the headers went from "Block Reveal" to ease in left/right. The latter suited headers with long lines of text.
  • Firefox and Microsoft Edge behaved differently from Chrome. I had to clearly define VH and VW for page sections and images.
  • Various elements (button, picture positioning, section colors, etc) were changed for a better visual contrast.

The inside scoop of the Webflow designer I've used to build the site for WIC

Outcomes

Project Outcomes

WIC's president and partners were happy with the overall digital product and brand. I've built trust working with them over the duration of the project and underwent extensive communication to get things right. We now have a continuing business relationship and I currently assist with various website and branding updates.

Personal Outcomes

Overall, my client was happy with the finished brand/website. The most challenging part of the project was in the development phase. As a product designer, we don't code too much (we have other priorities). Solving HTML / CSS problems was harder than I thought (even with Webflow, a website builder). I had to learn proper class structure naming and correctly use absolute positioning to get things right.

#1

Top ranked in Google search

2200+

Site hits

200%

Increase in form conversion rates

70+

Cups of coffee consumed

Continue Exploring

UI/UX
Product Design

Interviewr

A template based interviewing web application for creating, conducting, and managing hiring interviews.

View Project
UI/UX
Web Design

Vancouver Startup Week

A team effort web redesign for the 2019 VSW website.

VIEW PROJECT