multimedia design portfolio 2016
Tam Hiu Yuen, Duey
2
Interactive 4
郊個野朋友 WildConnect
Peach Blossom Match
16
好廁 Hochi
22
HKAS Asthma Medication E-Learning Kit
26
Graphic
出奇天地 Tricky House
28
Wall Street English design works
32
100無？ 宣道會北角堂 2015青年科大專初青佈道會
36
Shape the Creatures - Hong Kong Wetland Animals
38
Almost Forgot
40
Animation
What is Dinosaur Egg?
wandering
41 42
3
郊個野朋友 WildConnect Website and mobile application
郊個野朋友
Background
WildConnect
Ecotourism is a new trend of tourism growing around the world, which highlights the attitude of being responsible to earth resources, like wild lives and natural sceneries. In Hong Kong, the community of ecotourism is not popular, according to working ecotour guide, several tour operators are merely making a sustainable business in the limited market. The community of ecotourism need expanding and to reach more people who had interest of joining local ecotour.
Screen on desktop internet browser App walkthrough video
https://youtu.be/RlktXOE2MeA
4
Screen on mobile phone
Project Objectives By connecting Hong Kongers with ‘wild friends’, WildConnect creates a sustainable network for sharing information of local ecotours. The connections helps promoting tours and recommending people to join and visit wild lives just like meeting friends in real life. The project has a goal of inspiring ecotourists to constantly care about natural environment and wild lives, love and conserve the beauty of nature.
Ecotourists
Ecotour Gides
Target Users WildConnect targeted on the ecotourism community of Hong Kong, with a goal promoting the learning attitude to ecotourists, who have interest in nature walk but less concerned about the knowledge behind. The mobile app is for ecotourists to build connection among the wildfriends and other users. The website running on desktop computers is for ecotour guides to manage their tours.
5
Research Development
Problem
Opportunities
Many ecotourists quickly forget their memories with the nature because of their busy lives in urban areas. Any tools to help making the tour experience more sustaining?
Hong Kongers loves checking-in Implementing wild lives in social media model.
Thriving Social Media
Soc
ial
User Journey
Ecotourists
水口 小白鷺
昂坪生態遊
Ecotourists learn from interpretation of the wild lives during an ecotour.
6
Tourists can take pictures and create selfies with the animals and plants they had met after finishing the ‘wild knowledge challenges’.
Tourists connected with the wildfriends will receive invitation to other ecotours they might be interested in.
Tourists can choose from the invitations or actively request if there is any ecotour visiting animals or plants they wanted to see.
Linking learning activity and connection bonding: taking the ‘wild knowledge challenge’ and checkingin with the wildfriends to expand connections.
Alternate promotion provided by the wildfriends, as rewarding tour guides for their work of operating ecotour and setting up ‘wild knowledge challenges’.
Ecotour Gides
昂坪生態遊
Ngong Pin g
Ecotour guides who have ideas to operate ecotours on their own are most welcomed.
Tour guides can create ecotours and publish on WildConnect for tourists to join. The platform serves as management centre of tours.
Tour guides are invited to set and design short quizzes for tourists, which will be served as opportunities for people to learn from wildlives.
The wildfriends who got the quizzes set up can help promoting the guide’s tours on the platform as rewarding the guides’ contribution.
7
UI Design - Mobile App
8
news feed
composing post
The information of suggested ecotour are enclosed in a green box which make it separated from other content on the page.
User can type in message of post, take the check-in picture and choose one of the ‘wild knowledge challenge‘ on the composing screen.
photo taking
9
UI Design - Mobile App
placing wildfriend The white bar at upper part indicates content inside are movable and draggable, like a tool box.
10
‘wild knowledge challenges’ The challenges float on top of the darkened ground page, indicating this part of task is a separate story from the main stem. Upon finishing the challenge, the floating panel dismisses.
side bar
wildfriend profile
tour profile
After opening the side bar, colour of changes as well to follow the side bar panel. The change of colour tells users they are in apart from the main screen of the application.
On the profile page of a wildfriend, there are two bubbles pointing at the ‘state of following’ and ‘Connections‘ icons. The left one says, ‘met in ecotour at Shui Hau‘, which reminds users how were they get connected with this wildfriend. The other bubble reminds users how many mutual connections do they and this wildfriend share.
There is an ‘+ add‘ button at the righten corner of the tour profile panel. It resembles the behaviour of making dogears when people find valuable content on books 11 and magazines.
UI Design - Website on Desktop Computer
dashboard
create tour The progress bar at the left hand side lets users know where they are on this website.
12
adding wildfriend to be introduced Tour guides can type in names of the wild life they wanted to include in the interpretation of tour.
The searching bar anticipates and shows species suggestion upon typing.
13
UI Design - Website on Desktop Computer
confirm ‘wild knowledge challenge‘
complete creation
Tour guide can modify the content of ‘wild knowledge challenges’ for each wildfriends, in order to match the guide’s content of interpretation.
After creating an ecotour, the wildfriends who had got their ‘wild knowledge challenge‘ settled by the tour guide, will automatically connect themselves with the user.
14
Notification of connection pops out at the ‘news feed‘ tab.
news feed Tour guide can receive activities done by those connected wildfriends. For example, little egret had published a post with recommendation of an ecotour going to Shui Hau and Ngong Ping.
15
Peach Blossom Match Advertising media on kiosk and mobile
Kiosk screens
Mobile screens
16
Client: Pacific Coffee Product to sell: Peach Blossom Series
This project is selling a message of ‘Peach Blossom Brings Closer Relationships’. The media has a goal of providing singles a chance to meet people who are possible to be their partners through playing the game.
17
UI Design - Kiosk
Openining Screen on Kiosk.
18
The player is instructed to draw a peach blossom with the virtual red rope.
The player is given a photo of peach blossom as reference to draw the flower.
The player uses his/her finger to draw the flower.
Nice peach blossom :) Now it is time to let the mobile app to do the matching, in order to discover the special one who drew the most similar flower with the current user.
The kiosk shows a QR code for player to download his/her drawing on mobile phone.
19
UI Design - Mobile The mobile app has to be connected with Facebook in order to make the matching concrete and reliable.
20
The blossom shows up immediately after downloading.
Here is the matching result based on similarity of the two users’ flowers they had drawn on the kisok.
The player can invite his/her counterpart to share the e-voucher for a coffee time.
According to the two users’ public profile and friend list on Facebook, mutial friends and common likes (if any) will be displayed here.
The design of e-voucher looks like a giftcard, which has two sides.
21
好廁 Hochi Mobile application
22
Group Work
Group Members Bernice Chan, Nora Tam, Queenie Tse, and me
This is an mobile application finding toilets both for immediate need and non-urgent use. The app shows users the toilet nearest to themselves and toilets occupied by the least number of people. In order to show number of people in a toilet, the app collects real data from each toilets to complete this function. For non urgent use, users can search for toilets by location and filters of toilet types and facilities. Users can retrive more information including facilities, address, location floor plan (if applicable) comments and ranking on profile pages of toilets.
My contribution on this project includes about one-fourth of the interface design, and equivalent load of coding work on Framer. Besides, I have made the logo of project, and a part of icons.
App Demo http://share.framerjs.com/2yuhzc5fjemi/
23
UI Design - My contribution
Result - Card Style 24
In card style, it shows less toilets but more infromation including the map and suggested path to follow.
The card and list style interfaces are for urgent and non-urgent use repectively.
Result - List Style
In list style, users can have a quick glance at 4 toilets, which is easier for users to compare.
Quick Filter can refresh the result at the current page with several restrictions.
The boxes provide affordance for checking, and there are two heading separating the categories of restriction.
Quick Filter 25
HKAS Asthma Medication E-Learning Kit My Contribution: Visual Identity and User Interface Design (Partial) Client: Hong Kong Asthma Society User: Asthma Patients, Caregivers and Public Audience
Group Work
Advisor:
Clive Ng
Creative Director:
Cat Leung, Gordon Ho, Prisca Lee
Art Director:
Cat Leung, Prisca Lee, Duey Tam
Director:
Cat Leung, Duey Tam
Illustrator:
Prisca Lee
Interface Designer:
Cat Leung, Duey Tam
Interaction Designer:
Gordon Ho
Photographer:
Stephanie Cheung
http://elearn.hkasthma.org.hk Website walkthrough video - Desktop version
26
https://youtu.be/rROmAOhr5Xw
Mobile version
https://youtu.be/IAq5yOe5JVA
This group project aims to provide asthma patients and their caregivers a learning platform of proper asthma inhaler usage. The e-learning kit consists of a website showing information of medical devices, instructive videos for learning usage of inhalers, and a game checking how much users have absorbed. Several deliverables including QR code stickers and DVDs are added for easier access to the main website.
elearn.hkasthma.org.hk
Receive leaflet from clinic
Learn from information of asthma medicines
Scan QR code to access website
Go to the HKAS center and receive stickers as gift Stick on the medicant
Watch the instruction videos
Print Certification
Q&A
Play the Q & A
User Journey Chart by Prisca
27
出奇天地 Tricky House Toy shop branding and business card design Client: KK
Tricky House is a toy store providing non-digital and puzzle plaything options and some handcraft products made by the shop founder. In the smartphone era, various simple and tricky toys might amaze poeple’s hands and brains. The logo design focuses on the joy and amusement plaything could deliver through physical contact - touching by hand. Curvy logotype with smiling faces foster the happiness people could find in Tricky House.
logo and logotype
28
apperance on social media
https://www.facebook.com/trickyhousehk/ https://www.instagram.com/trickyhouse/
shop banner
29
Business card design
30
31
Wall Street English design works Client: Wall Street English
Posters poster promoting different themed workshops and activities held by Wall Street English. These events are inviting students and their friends to learn English with fun.
BBQ on Cheung Chau Island movie night
32
coockie workshop
dance jam
jeopardy game show
33 karaoke night
e-Newsletter This newsletter is a routine publication for student and prospects who had subscribed it. It provide English readings with lively topics, and news of WSE centres.
34
Issue 63 All About Father’s Day
35
100無？ 宣道會北角堂 2015青年科大專初青佈道會
Graphic Design for an Evangelistic Meeting Client: Young Adult Ministry, North Point Alliance Church
Poster and Post Card A2, A3, A6 sizes
36
Programme Note A5 size
source of image: http://www.hothk.com/8126
Digital Banner and Avatar 5319 × 1969 px, 360 × 360 px
This project focuses on the doubt of ‘owning nothing’ after being a Christian among teens and young adults’ mind. The committee of this evangelistic meeting ask for a youngish design looks like magazine ‘100 Most’. The promotional material designs are coherent with the typographic treatment of the title, tagline and the flat type and graphics.
Print Particle of Souvenir 3.3 x 3.3 cm
37
Shape the Creatures
- Hong Kong Wetland Animals
Toy and Graphic Design User: children aged 4 or above Shape the Creatures is a modular set of 99 wooden blocks with different geometric shapes. It is themed as Hong Kong Wetland Animals, which players can arrange the blocks to form 8 commonly found animals in Hong Kong wetlands like fishes, insects, crabs, frogs, and birds. Toy demo https://youtu.be/llEcNfO92hM
38
This toy is targeted to be sold at souvenir shop in the Hong Kong Wetland Park. Greenish coloured playing blocks can bring children loads of fun, and help developing their cognitive knowledge of Hong Kong animals.
Guide of building animals are printed on illustration cards, children can choose either following the arrangement or not.
Stickers are for children’s fun!
39
Almost Forgot Postcard Design A6 size
Inspired by a busker performing Supper Moment’s “幸福之歌’”, I used illustration to capture the scene at Central Pier and designed this postcard. I made one key lyric into a quote with expressive style of writing, which carries the message of not to forget the most honest desire inside our mind.
Local busker, Kimby Chan
40
https://www.instagram.com/kimbychan/
Supper Moment - 幸 福 之 歌
https://www.youtube.com/watch?v=7TefwmjpAqo
What is Dinosaur Egg? Motion Graphic Animation
A short animation introducing pluot with its interesting name ‘dinosaur egg’.
https://www.youtube.com/watch?v=qQAVanm-HWA
41
wandering
42
Find out more on Instragram:
https://www.instagram.com/dueyt_gen/
43
wandering
44
May, 2016