Collaborative Design Practice - Task 3

14/05/2024 - 18/06/2024
Week 6 - Week 9
Tan Pei Yun / 0345386
Collaborative Design /Bachelor of Design in Creative Media


Instructions

Timeline



Process

Week 6 - 28/05/2023

Week 6 - Preparation and Documenting

This week, we have primarily focused on preparing for the submission and presentation. Jia Hui has been instrumental in helping us compile and organize the content for our project documentation, ensuring it is comprehensive and cohesive.

In addition to preparing the content, we have been rehearsing as a team to stay within the 15-minute time limit. With the extensive content to cover for the application parts, we aim to ensure that each segment of our presentation flows smoothly and effectively.


Week 6 - Meeting Night to start our high-fidelity


This week, we had to rush and push ourselves to start the refinement and therefore we able to move on to the high-fidelity stage. As usual, we began by choosing a page and then started "colouring" it in dark mode. I have no experience with dark mode design, which took quite a bit of time to mix and match the colours. I was worried about the colour palette because it's challenging to blend all the colors together, but we found that selecting just a few colour worked well. I love Jacqueline's idea where she observed that Apple applications use minimal colours and maintain at least one vibrant colour in their dark mode settings. Carmen also pointed out that some apps with dark mode avoid using pure black as their background, which I found interesting.

Week 7 - 04/06/2023

Task List To-Do for Carmeme , me , Jaki

We were curious about how other designers split tasks, but Jacq helped us plan our work. I took on the role of icon manager and worked on Onboarding, Login, Signup, QuantoMall, Gamification, and QuantoPay for both homeowners and contractors


Onboarding - Log In

User Login - First Draft 

Referral Code - First Draft 

This is the first draft of the login and referral page. Initially, the style wasn't great, but Jacq helped refine it, making the app look aesthetic. I really appreciate her ability to tweak things in a short period. I've admired her creative skills since the previous semester, I cant live without Jacq honestly T.T I really like how the way she can tweak it in a short periord of time , I think i been saying quite alot from previous semester until today that I admired of her pannai creative brains <3 


User Sign Up - Second Draft 

Referral Code - Second Draft 

Referral Code - Final  (Contractor)
Referral Code - Final  (Homewoner)



After refining, the application interface looks fresh and modern, which I really like. Initially, we used large text, but now we've adjusted it to a smaller size that fits well with the 3D icons. We also reintroduced our 3D mascot, which adds a unique touch. Additionally, I've been focusing more on the QuantoMall section this week. The mascot helps differentiate between the contractor and homeowner interfaces, enhancing the user experience for both groups

QuantoMall
First draft of QuantoMall - Homeowner side

QuantoMall has a lot to cover, including the flow from category selection to filters, color options, contractor profiles, and the payment process. Initially, I expected the team to help me to find some products, as Ms. Lilian mentioned avoiding big brands like IKEA. This involved a thorough search to ensure we featured products that align with QuantoMall's brand identity, It was slightly hard to avoid not to use other brand product as a prototype, what we suggest that is to use 3D product and refine in photoshop to make slightly realistic looking

Sketchfab for searching products

Photoshop products

Therefore, we decided to create 3D product models. Currently, I am working on this by taking screenshots of products from Sketchfab and then moving them into Photoshop to add effects, making them look like professional studio photos. 

Adjust Lighting in Nomad 

Nomad for making the chair turnable

Error #1 - Metalic chair effect

Final Chair , adjusted lighting
 
In QuantoMall, we included features like 360-degree views for the products. Since Figma only supports GIFs, we had to create these ourselves. I downloaded the 3D models, imported them into Nomad, and screen-recorded them to make them turnable. The 3D models had some issues with lighting, which took about an hour to fix. What seemed like a simple task ended up taking quite a while to complete.

QuantoMall - Homeowner 

QuantoMall - Contractor 


In QuantoMall, the homeowner side focuses on home improvement products, while the contractor side offers building materials and tools. The 360-degree view feature won't be available for contractor products, as it is challenging to implement 360 view for materials


Category
Category Services Icons

For icons, we had to make a few decisions. Initially, the idea was to produce 3D icons, but that turned out to be quite overwhelming, so we had to look for another plan. We then moved to 2.5D icons. While the colors were nice, they felt like they were losing some identity. We were inspired by the Agoda app which uses realistic stock images. I also find that Houzz Website which as been using realistic image to categorise their product which also helps a lot more easier to understand. Finding this approach interesting, I came up with a few different options and shared them with the team during our meeting.

Example of Category from Houzz Website 

Example of Category from Agoda App

3D, Vector , Realistic version of Category

My little notes for the 3 options of category icons


The team ended up liking the third option, which was my favorite too. We decided to use the realistic category as our final design. I then began to look through more categories and filled them up with realistic stock images


Gamification
Gamification Ideas 

My mind has been buzzing with gamification ideas from day one, for some reason. One idea that resonated well was integrating a mascot into our games. Clients particularly liked the idea of incorporating a check-in feature to earn rewards. 

First draft for the Gamification

Final draft for gamification

The game idea revolves around a 3-tile puzzle game where users match three identical patterns to clear puzzles and earn rewards, inspired by a popular China game which was a trend back then. Additionally, users can participate in daily check-ins to receive rewards. And Finally can "close-order" for gamification page YAYY


Filter & Sort 

Research on others app about their filters 

Since we're doing about homeowner and contractor side, both filter have different kinds of category to filter and sort , I try to categorise them as easy as possible without making confusion to the user. 

QuantoCube Filter & Sort 

I get the inspiration based on shopee, as shopee have different kinds of products which I also been curious how can they organise and categorise all the different kinds of products. I categorise them into shipped from , category , price , style , brand and rating. 


Week 8 - 
 01/06/2023

Profile & Settings 


Low-fi & High-fi Profile & Settings

Sticky Note from Jacq

Based on my exploration and Jacq's guidance, I've made several settings options and tested them. However, I encountered spacing and text size issues. We're also using sticky notes to keep track of these issues for further refinement.

QuantoCube Profile & Settings

 

Both homeowner and contractor have a slightly same interface for profile and have a same setting and the features 


Accessibility - Appearance for mode 

Since we are doing the dark mode and light mode, I added the features that able to switch the mode , I look through apple setting to see how it looks like and get inspiration from them.

Week 9 -  18/06/2023

D-Day ! 

High-Fi Figma workspace getting messier 

This week is definitely going crazyyy, the ui/ux team sleeping hours is getting lesser and lesser, and the presentation is onyl left for a few days yet the stuff is seems not even 50% done , kinda panic and anxiety. Jacq told me the same thing as well , felt so insecure this time working this QuantoCube and she do tend to think alot which makes her more stresful even sleep also have to think about the app flow. 


Project document 

 I just do not know where can I find another most rajin and most responsible human , as Jacq was really put all her effort to this module and had arrange all the flows nicely including the descriptions. 




Submission

Presentation Slides - Collaborative Design Practice  [ Proudly Done by Group 3: MBTIC3 ]


Figma Application - Prototype  - Collaborative Design Practice[ Proudly Done by Group 3: MBTIC3 ]

 


Figma Microsite - Prototype  - Collaborative Design Practice[ Proudly Done by Group 3: MBTIC3 ]

 


Pitching Video - Collaborative Design Practice  [ Proudly Done by Group 3: MBTIC3 ]





Canva Whiteboard  - Collaborative Design Practice  [ Proudly Done by Group 3: MBTIC3 ]






Feedback

Week 6 - 28/05/2023

  • The slides flow well, making the presentation easy to follow.
  • Add graphical elements to enhance the visual appeal of the key visual
  • Present the app first as it is the most important outcome.
  • The user flow is detailed and well-thought-out. The community page is a great addition.
  • The microsite is well-structured, and the user testimonials add credibility




Reflection

I always remember that Jacqueline, our leader, constantly reminded us that the key aspect of this module is to "collaborate." We needed to share issues and feedback consistently, participate more, and support each other. Although we called ourselves the "MBTI-CE" introvert team, we did our best to break out of our shells, work for the best outcome, and contribute to the team. This project had always make me download more and more app untill my storage is getting full and have to delete other app for more space :,) but i do believe the satisfaction to delete all of them once we completed this module. Additionally, I must thank every group member for their efforts. Special thanks to Jacq, especially for those sleepless nights, and had to come up with a plan B and burn LOTS of  midnight oil. While I won't miss those stressful nights, T.T we definitely could have enjoyed more time together beyond just working on assignments.

So many apps just for QuantoCube wowzers

One part that also makes me feel good and bad at the same time is where during the consult with the client where Jacq and Carmen joined,  The client mentioned they didn't need QuantoMall and Gamification features. While I understand their perspective as a startup, focusing on essential features first, Jacq saw it as part of my effort and contribution. She suggested we could include these features as "coming soon" to balance both the client's needs and our own portfolio development.

I also want to thank my family, especially my mom and brother. They helped me manage my anxiety, which I didn't fully realize I had until recently. They would take me out for talks when I felt overwhelmed, which helped me feel better instead of staying in my room and not eating. Sometimes, which i feel bad to my group members , which I realised I am not that "rajin" as my previous module which I feel really bad T.T , time management is also a part of it , which is hope one day is not just 24 hours. 

Doing this application task which also felt like "where is the ending ?" "there's no such thing as ending" It just more refinement and keep changing this and that, to keep it consistency which is also the headache part where constantly have to look for the same and same and same direction. 


Inside car also have to do QuantoCube 


Love my supportive mom and brother <3 


Comments

Popular Posts