Valentine’s Day E-card

Category:

UI / UX

Type:

Interactive Website

Role:

UI / UX Designer, Developer

Date:

February 2017

Client:

BCIT

Technical Information:

Illustrator, HTML5, CSS3, JavaScript

Background:

An interactive and informative online card about The Valentine’s Day. It takes users on a journey to discover 10 facts about the Valentine’s day.

Concept

This Valentine E-card was created for the midterm project for Dynamic Content Design class. At that time, it was Valentine so, I decided to create a Valentine e-card. Also, I’ve realized that there are so much cultural difference between Canada and Japan’s Valentine. There are lot of  unique and interesting facts about Valentine in Japan that people may not know. Thus, I hope people can learn about the cultural differences through my e-card at the same time.

Process

Environment & Interaction Designing

First, I researched 10 interesting facts about the Valentine’s Day. 

Then I designed the environment and interaction stature for the card, as a guide for the designing and coding. 

The most difficult part was making every interactions relate to the facts, and contains various kind of interactive events, as well as making the user experience delight and memorable.

Assets Building

I created and modified the assets in order to fit in my project using Adobe Illustrator. Since the Valentine is one the most exciting day for Japanese students, I’ve decided to build a classroom scene to include the interesting customs and facts of Valentine’s Day in Japan.

Also, the interactive parts need to be replaced after a user clicks or drag, the assets which are not shown in the screen should be built in advance. 

Coding

In order to code the assets built using Adobe Illustrator, the first step was import them as SVG files. Then I coded the basic structures using HTML and CSS. After that, I used JavaScript to code the interactive parts, including mouseover (hover), click, drag, audio play, and other event listeners. 

Usability Testing

After the coding step, I asked some friends to play around with my webpage. I realized some of them just clicked at the screen randomly and jumped over some of the important facts. Therefore, I added the drop shadow effect to let users know there is something clickable, and added bubble dialog to guiding users conducting events in the right order, so that they won’t miss any facts.

LET'S TALK

Hong Yu | Copyright © 2019