Posted on by Emma Cheuk

Portfolio of work [News Media Lab]

Relavant 2019 works:

(click to see the whole process documentation)

Research papers on Digital World & User experience:

–

ADM Unity- UI/UX case study of a school community app

This is a redesigning story of our faculty app, the Art Design & Media(ADM) Unity. Building an app that promotes a stronger sense of community amongst the students, improve the efficiency of students’ work schedule and create functions to cater to student’s daily needs.

Challenges

  • The interface should be clear and simplistic while fitting lots of features
  •  Users should be motivated to use the app every day
  • Users should be able to find the needed school related information easily
  • The current ADM is a very simple app of limited features and information. It is not content-wise and useful for ADM students. There is no incentive for them to download. Therefore, our team basically start from scratch.

User Needs

  • Easy access to administrative information, matriculation, and updates on course content information
  • Updates of Student Council events. Opportunities for students to have fun and integrate into ADM easier
  • Reminder of events or workshops regarding your course
  • Shared forum for student life advice, bonding between different year
  • Function that helps students to better time management and facilitate group work
  • Works as a one-stop portal. Easy to use and links to student lives

Planning

We decided to focus working on 3 categories for constructing the app: Personalised Timetable, Forum and Academic information.

Personalised Timetable: To allow ADM students to better manage their registered modules and personal events (group meetings, projects, etc…) Enable them to better work out timings for meet-ups and discussions through a shared calendar. Have a private and shared calendar so that very personal events can be kept to oneself.

Forum: Provide opportunity for students to integrate into the faculty by creating a sense of belonging to the ADM Family. As a platform for solving questions and seeking help and allows students to share their work easily. Possible features: forum in different categories; option to create their own group; Pin, share and comment function under post. Pin the post/comment to bookmark useful content.

Academic information: To make finding information for school academics or events a lot more efficient. Ensure convenience and user friendliness of actions to take after viewing content. Possible features: Add events or assignment deadlines to timetable; In built OSS

Principles for leading our design

1.Simplicity: Simplicity allows the audience to focus on the essential message of the design and increases efficiency on message delivery. The minimalistic approach designs support faster loading time and are more compatible to mobile devices.

2.Findable: Findable academic information gives ease to students. 80% of ADM students experienced frustration when trying to find information in the official university website, especially freshies.

3.Desirable: 99% of the ADM survey respondents said they had never heard of or downloaded the current ADM app.

Execution: Wireframes

Forum: I worked specially on Forum for constructing wireframe.

Hypothesis: Now we don’t really have the chance to share our ideas, process or work frequently, Community in this app is a forum for students to ask questions or share their ideas and possibly increase the interaction of students. Students can explain their ideas by posting and comment below posts.

Reflection

I learnt a lot from the process of constructing a wireframe. This is the first time for me designing interface for an app. Interface design seems to be easy as designers are working with shapes and layout. Yet, in fact it is not. There’s a lot things to consider in order to construct a good layout for fitting all the information and functions while considering how to keep a great user experience.

Feedback for wireframes

We presented our ideas to ADM peers and interface design classmates and received some feedback.

  • 3 different styles and categories: Styles are not consistent and linked
  • Community: too many boxes for categorising, the pin function is nice
  • Personalised Timetable: Style can be simplified, less lines and words
  • Academic Information: Can include more features for home page

Iteration & Refinement- Final

Aim: To provide an application for ADM students that has useful content to enhance efficiency within student life in school.

Improvement made: Combined the 3 prototypes made in Assignment 2; Focused on academic matters, personalised timetable, and student forum; Personalised it to the student; Created stronger visual branding with colors, fonts and elements

Final

Link to interact with our final interface design:

ADM Unity Adobe XD prototype 

Takeaways

This project is a learning journey of designing user interface. We kept a consistent style by meeting and doing work together. I realised the importance of collaboration and discussion. Although most of the design project is individual, it is inevitable to work in group to make something big. As a visual communication and interactive media student, I deeply feel that the UI/UX is the key of the future design industry. I applied to the interface design course in university in order to further explore it and hopefully pursuing a career in UI/UX in the future.

Special thanks to our teammates, Sylvia Low and Amanda Lee for collaborating such a wonderful interface design for our faculty app!

–

Before Dawn- Interactive media

Before Dawn is a 2D platform game developed by our group with Godot engine. In this project, I have took part in sound effects, coding (dialogue system, randomise objects’ position) and art.

Create an interactive media in the title of Portrait. We have to depict a character through the project. After experiencing students’ works, users should be able to guess the identity of the character. We are able to choose any form of interactive media. This is a 3-months collaborative project. Our team chose to create an interactive game.

Takeaways

Collaboration with others and creating such an interesting interactive game is a wonder experience. This game developing process is tough for all of us, we have to self-taught ourselves how to use the Godot Engine as well as how to code (Godot language), with the fact that most of us learn from scratch. We had been ambitious and tried to put in as many features we could. I appreciated the outcome and our improvement.

Final

–

The Kissing Machine: Freebie– interactive device

The Freebie is a provocative object that aims to bring the awareness of free stuff. Everyone loves free stuff however without people realising, free stuff is not technically free because people somehow have to pay for a price to receive them. As the word “free” is the best way to capture people’s attention, we decide to use it in our product.

“Nothing in life is free”, but “kiss is”

This product gives away free unlimited kisses but the people who are receiving these kisses have to pay by embarrassing themselves in public, sharing their kiss experience with others.

Self-reflection

We struggled a lot of deciding the background concept of this product. In the beginning, I came up with this idea under the dark object criteria as I thought someone lost his/ her partner may miss the good night kiss. This kiss is the symbol of love, having someone to care for you at the end of the day. As the love ones left, this habit is also lost. This idea was further enhanced by a Wechat sticker I used all the time. The idea is to design product cater for a single user. As the user came closer to the object, the lips will protrude out.

Throughout the project, I learnt how to create and adapt a coding, no just copy and paste from the resources found online. In the 2nd testing session, the motor didn’t push the lips much forward, so the user experience was not satisfied. I have to change the scale of the motor movement and the distance triggered. In cooperate with Processing, I learnt from experience of how to make sound effects when the motor pushes out the lips. As ultra-sonic sensor is not sensitive to clothes or face, we have to come out with an alternative: the sandwich board to make the motor move while the board approach to the sensor. I understand how the ultra-sonic sensor works while improving the prototype. Also, it’s fun to search for sources creating the lips. We aim to create a soft texture reassembling the real lips. At first, we tried cotton, lip mask and foam. The texture are all not satisfying. The silicon makeup puff has that soft and smooth texture but initially we wanted to cut it to the shape of the lips. However, the silicon puff deformed after it was cut. Finally we cut out a plastic sheet and placed it on the puff. To make it more realistic, I coloured the lips with real red lipstick. As people were concerned about the hygiene, this is solved through placing a plastic layer on top of the lips(1st layer: plastic sheet, 2nd layer: plastic sheet lips with lipstick, 3rd layer: silicone puff). I am very satisfied with this final result with the lips. All in all, I enjoy this project a lot.

The Freebie Video

Images of our product on site

Instructions for user:

    1. Wear the sandwich board
    2. Sit on the chair
    3. Move your body close to the lips
    4. Repeat (up to you)
    5. Enjoy your kisses!

Observational documentation for user tests

  

Thank you for reading 🙂

Link to see my other works

Leave a Reply