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.
