PHILIP CHEUNG

Project Overview

Vancouver Startup Week 2019 Website

Vancouver Startup Week (VSW) is one of Vancouver's largest startup events of the year. With over 4000 attendees, 650 local partners, and over 480 events, VSW has an impressive reputation of bringing entrepreneurs, tech enthusiasts, designers, and the like to celebrate startups in Vancouver.

My Role

UI/UX 

Time

2 Months (Design)
3 Months (Development)

Platform

Web

Programs

Illustrator
Photoshop
Adobe Xd

Deliverables

Content Strategy, UI, UX, Front-end & Back-end Development

Team Members

Philip Cheung (UI/UX)
Mark Ponce (Brand Lead & UI)
Itzel Rodriguez (UX)
Ibrahim El Chamni (UX)
Sabrina Leonte (Marketing Director)
Paulina Pietrykiewicz (Technical Project Manager)
Tim Lam (Content Writer)
Vicky Anasassiou (Dev)
Byeong Kim (Dev)
Di Wu (Dev)
Omar Elgabry (Dev)
Maz Ahmadi (Technology Director)

The Challenge

The team was tasked of designing and developing the website of VSW for 2019. Our challenge were to communicate "what is VSW" to potential attendees and sponsors. Our biggest goal was to sell more tickets than VSW's event last year.

My Responsibilities

My responsibilities was to take the requirements (as outlined by my superiors) and translate them into mockups (low and hi fidelity), and provide UX feedback. Throughout the course of the project, I was mainly responsible for the UI of the website.

Approach

How We Did it

In the span of 5 months (2 months for design & 3 for development) we went through this process to complete the project: 

1) Project Requirements

2) UX Research & Content Strategy

3) Copywriting

4) Wireframes (Low & Hi)

5) Development

6) Post Development Changes

Design Process

Evidence Based Research

The design team conducted research based off of last year's attendees and sponsors. Here some of the important findings (The full list of findings is quite long):

1) Homepage is too short, could contain more information, people are used to scrolling down for long periods.

2) The number 3000+, 100+ are nice, caught attention, but more social proof would be better, such as big brand names, maybe testimonials.

3) There was no contact page. People kept looking for it.

With the research completed, our team conducted a meeting outlining how the content strategy for how the website will be done. From the meeting, the copy team & design team worked closely together to create wireframes (its hard to design without the real copy first).

Wireframes

Low Fidelity

With the content strategy completed, the design team jumped into low-fi wireframing. We iterated 3 times in this process. We received feedback from different teams in each iteration. Most of my contributions were in this phase of the project.

Hi Fi Wireframes

With the low-fi mockups approved by the project manager, the design team created the Hi Fi mockups. The copy team handed us the written content and everything was coming together. The most challenging part of this phase was short deadline in which this phase needed to be completed (2 weeks).

The brand style guide was completed a month before the VSW website project began. I followed the completed style guide in order to design the hi-fi mockups.

Development

When the Designers hands it Off to the Devs

We used Adobe Xd as our main tool for our devs to "inspect" the design. The design team passed the web design to the tech team for a technical review. Additionally, the design team handed off all necessary files for the tech team to build the site.

The Final Site

Below are images of the competed 2019 VSW website.

The completed homepage of VSW

Outcomes

Project Outcomes

The 2019 Website drew in X traffic, X ticket sales, etc. The event was more successful than previous years.

Personal Outcomes

My biggest learning outcome was the importance of looking for visual errors (mis-alignment, inconsistency in typography, etc). One must scan their designs multiple times before handing the design over to the developers.

Continue Exploring

UI/UX
Product Design

IoT Smart Controller

A case study of a IoT floor controller for a multi-floored building

VIEW PROJECT
Branding
WEb Design

Richmond Alternate Medical Clinic

Web design for a medical clinic with over 20 years in practice.

VIEW PROJECT
Branding
WEb Design

WIC Marketing

Brand identity and web design for one of Canada's largest seasonal distributors.

VIEW PROJECT