Duey Tam 2014-2015 Design Works DEC 2015 PolyU HDMDT 2015 Year2
HKSW a website enrolling Hong Kong social workers
desktop version
mobile version
http://hksw.businesscatalyst.com/
http://hksw.businesscatalyst.com/phone/index.html
Hong Kong Social Worker Wannabe a tablet app showing interactive video promoting hong kong social workers https://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 Kit
Group Work
an interactive learning website for designed for asthma patients and their caregivers, Hong Kong Asthma Society as client. learn.hkasthma.org.hk/
Statement of individual work I 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 Contribution My 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.
My design of mobile version I 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.
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.
My design of mobile version II
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
華康儷中宋 小塚歌德體Regular
Identity of the elearning website
transparent white round base was added to prevent mixing the HKAS logo with the background photo