Major Project I / Final Compilation & Reflection
Daphne Lai Yu Cheng / 0366380
PRJ 64904 / Major Project / Bachelor of Design (Honours) in Creative Media / Taylors' University
INSTRUCTIONS
Final Compilation
Proposal
Brainstorming 1:
On the first week, we had to decide whether to work on the project individually or in a group. I grouped up with Chang Wing, and since this was our final year project, we spent a lot of time discussing and brainstorming ideas until we found a concept that we both agreed on and were excited to develop together.
The ideas we had in mind:
- Productivity application
- Scheduling/Calendar application
- Dream logging and creative works application
Figure 1.1 Brief sketch of our idea
Figure 1.2 Figjam Board to brainstorm. Link.
Brainstorming 2:
However, our brainstorming did not really lead anywhere. We consulted with Mr. Kannan for more feedback and he told us that there are a lot of things to consider. We think that our idea is not progressing any better and decided to come up with another idea.
I thought of an idea where I want to create a connection between NFC intergrated devices and an application. I proposed my idea to my group mate to get her opinions and she thought that it is an interesting idea.
We consulted with Mr. Kannan on our new idea, he said that it's interesting but still a lot of things to consider like how will the NFC work and what is the USP (Unique Selling Point) so we abandoned the previous idea and brainstormed in a new Figjam in case of messing things up.
Figure 1.3 New Figjam Board to brainstorm. Link.
Mr. Kannan also advised us to consult with Mr. Razif to also get his feedback and opinions on our idea. Mr. Razif told us more about how the user flow should be, what are the expectations and recommended us on what software to use to execute the project.
Wireframe sketches:
Moving on, I did the wireframe sketches for the application.
Figure 1.4 Wireframe sketches
We initially planned on creating an application only but we thought that having a website makes the user flow better so I refined the sketches and drew the website wireframes too.
Figure 1.5 Wireframe sketches
Figure 1.6 Wireframe sketches
We consulted with Mr. Razif on the wireframe sketches and needed more improvements on them. Below are the improved website and web application wireframe sketches:
Figure 1.7 Website wireframe sketches
Figure 1.8 Web application wireframe sketches
Task Delegation:
We prepared the proposal slides according to the expectations for the first presentation.
Me and Wing are in charge of user interview, 5 people each. After that, Wing was in charge of all the user research.
Figure 1.9 Wing's Task. Link.
I was in charge of creating the user flow, site map and drawing the hi-fi wireframes of the web application and website.
Figure 1.10 My Task. Link.
Proposal Presentation:
On week 9, we presented our proposal to Mr. Kannan:Mr. Kannan's feedback:
- Concept is interesting.
- Artstyle for both website and web application looks a little playful, need to align more with the target user groups.
- Consider backend things like NFC's expiry? Where to store user data and security.
Design Proposition & Project Execution
NFC Product Design:
For the NFC products, I sketched some of the product designs that we are planning to 3D model and print it out in the following Major Project II.
Figure 1.12 Product design sketches
We showed Mr. Kannan the sketches and plans on the products. He said to use Tripo3D to model at least 1 of the products out to show it during the final presentation so we could get an idea of what we are planning to do.
Wing was in charge of importing the sketch into Tripo3D and convert the image into a 3D model.
*The product designs will be modelled by me in Major Project II.*
Figure 1.13 Tripo3D model
Website & Web Application Prototypes (Figma):
After the model, I started on the Figma prototype for the website and web application. I created a design system first as it will be used (after refinement) in the actual built website and web application.
Figure 1.14 Design System
I followed the design system to create both the website and web application. Other than creating the components, I also used Figma's motion tool to animate some of them to showcase the microinteractions and animations.
Figure 1.15 Website Figma Prototype
Figure 1.16 Web application Figma Prototype
Below are the final outcome of the Figma prototypes:
Website
Figure 1.17 Website Figma Prototype
Web Application
Figure 1.18 Web application Figma Prototype
Website Prototypes (Google Antigravity):
When I was working on the prototypes in Figma, Wing built the main flow of the website, which is the the sender's customisation phase to sending the message using Google Antigravity recommended by Mr. Razif.
Figure 1.19 Website Prototype (Google Antigravity)
Figure 1.20 Website Prototype (Google Antigravity) Customisation Page
After creating the message, the sender will then click on the 'Upload' button and be directed to the message preview and settings where they can view how the message will look like in the receiver's POV.
If the sender is satisfied, they can either choose to enable the toggle button to schedule message or send it instantly.
Next is to generate the NFC link and upload the message.
Figure 1.21 Website Prototype (Google Antigravity) Preview Message
When a message is successfully sent, there will be a pop up section to let the sender know the status of their messages.
Figure 1.22 Website Prototype (Google Antigravity) Message Sent Pop Up
Final Presentation:
On week 15, we presented our slides to Mr. Kannan which includes our current designs, improvements we did and our Major Project II plan.
Mr. Kannan's feedback:
- Great improvement compared to Week 9 proposal.
- Continue refining the UX and adding more features.
- Looking forward to seeing the 3D products and expecting a series of fully completed 3D product for the final submission.
- Explore more possibilities with AI, such as allowing senders to enter prompts to generate personalised AI videos from their uploaded images (e.g. birthday wishes or other meaningful contexts).
- Not worrying much about the UI design.
- Adobe Substance 3D Modeler is not bad for 3D modelling.
Lastly, we submitted the required documents, our presentation slides, the assets we created during the design proposition phase and document the feedback we received for this final presentation in the project management document.
SUBMISSION
Figure 2.1 Project Management Document
Proposal Slides:
Final Presentation Slides:
Project Management Document: Click here!
Design Proposition Google Drive: Click here!
Project Execution Google Drive: Click here!
This module was by far the most stressful but also the most valuable module I have taken so far. Through this project, I was able to come up with something that felt unique and meaningful. It also made me consider many aspects of design that I had never really thought about before as a design student.
I learnt a lot throughout the process of developing our project with my groupmate. It was definitely stressful for both of us because there were more hidden problems and challenges we discovered the more we developed our project. There were many discussions, decisions, and problems to solve along the way. I am grateful for Mr. Kannan and Mr. Razif's guidance because we were able to brainstorm more effectively, think critically about our ideas and explore better solutions while planning the direction for Major Project II.
The biggest lesson I took away from this module was the importance of UX design. A user flow that sounds good in theory does not always work well in practice. Throughout the project, we constantly had to put ourselves in the users' shoes, rethink our decisions and refine the experience to make it more intuitive and meaningful.
Looking ahead, I hope our project becomes a success in Major Project II. I am excited to finally bring our concept to life by developing the web app, website and physical products, and to see the idea become something that people can actually experience.
Comments
Post a Comment