Duey Tam 2014-2015 Design Works DEC 2015PolyU HDMDT 2015 Year2

HKSWa website enrolling Hong Kong social workers

desktop versionhttp://hksw.businesscatalyst.com/

mobile versionhttp://hksw.businesscatalyst.com/phone/index.html

Hong Kong Social Worker Wannabea tablet app showing interactive video promoting hong kong social workershttps://interlude.fm/v/M4W3xV

My role in this project is mainly designing the interfaces shows up before the video starts in the interactive app.

HKAS Asthma Medication E-Learning Kitan interactive learning website for designed for asthma patients and their caregivers,

Hong Kong Asthma Society as client.learn.hkasthma.org.hk/

Group Work

Statement of individual workI am the vice leader and secretary of the team, my work is mainly to analyse tasks to do and distribute to different team mate.

Aside of management, I supervised the content on the video and website to make sure all wording are appropriate and accurately providing information about asthma medication. I also participated in wireframe and interface design, particularly the mobile version.

Usually the team leader and I approach our clients for query and making decisions and appointments. Sometimes my teammates helps to be the secretary if I am speaking and not free to jot not at the same time.

My ContributionMy contribution in the deliverables is mainly the content of the website. All the text introducing asthma medicines are compromised by the client and I with reference to some decent booklet regarding asthma medication.

Some teammate and I compromised 5 to 6 steps to appear on the video playing screen on the e-learning site, and prepared a series of questions and answer for user to check if they thoroughly understand the usage of asthma inhalers.

I have worked on the wireframe and interface design for the mobile version with another teammate, and combine our ideas with the desktop version interfaces to produce the final website. Additionally I have developed an identity for our e-learning site.

This is a drop down button on the medicine introduction page, which hides the text inside, in order to showcase all the medication tools in one screen, though this design is not used at last.

This is the screen letting user to choose which situation they want to browse. The orange border around the buttons are active state upon pressing. This design require user to press on “go to video” button after choosing, and this is banned at last since user have to click for many times and increases the time seeking for the videos.

Flag is visual attraction to indicate the quiz section.

My design of mobile version I

My design of mobile version II

This design tries to imply a theme of grass to carry out a fresh feeling, while the photo are cc0 resources, and there are many restriction like the angle and lighting to really match with the interface.

Introducing hamburger menu button. The design was finally modified into dropdown navigation but not a side bar.

Inheriting image slideshow from the desktop interface design.

Round corner style and shadows on buttons

Mobile version design after combining styles

Identity of the e-learning website

華康儷中宋

小塚歌德體Regular

transparent white round base was added to prevent mixing the HKAS logo with the background photo