Collaborative Design Practice - Task 4
25/06/2024 - 01/07/2024
Week 10 - Week 12
Tan Pei Yun / 0345386
Collaborative Design Practice /Bachelor
of Design in Creative Media
Instructions
Timeline
Refinement Stage
- QuantoMall & Gamification will be in coming soon (reduced flow) ✅
- Profile Refinement (QuantoPay , QuantoCoins Ideaboard , My Post , Following . About , Terms And Conditions) ✅
- Filter for Find Pros ✅
- Update for Project Icons ✅
- Visual Design Concept ✅
- Project Document (just a few parts) ✅
MyKad Verification
 |
| Reference for MyKad Verification |
 |
| Refinement MyKad Verification |
In the previous Task 3, I realized that we had only uploaded the front view of the MyKad. During the refinement stage, I took the initiative to add the back view as well. I usually rely on visual references, which help me better understand and design the user interface. Having these visuals makes it easier for me to create a more intuitive and effective user experience
CIDB Verification
 |
| Task 3 Version Of CIDBVerification |
 |
| Final Refinement for CIDB Verification |
Same as well , for the contractor side, we have make refinement onto upload the document in either choose from files , photos or video for this CIDB verification.
Terms & Conditions
 | ||
Terms and Conditions Provided by Client
|
The terms and condition provided by client which I needed to chatgpt abit before pasting it into the app prototype and it was pretty long.. but so far no issues for this as this was an easy task.
QuantoPay
 |
| QuantoPay Withdrawal Flow |
QuantoPay took the longest time to develop, as I initially skipped the flow for withdrawals because I wasn't sure how it should work. I tried to reference Shopee's withdrawal process, but my attempt was rejected, leaving me uncertain about the correct flow. I asked Jacq for some suggestions, and with her guidance, I finally managed to complete the withdrawal process after many weeks. It was a challenging but rewarding experience!Once is done , happily told to Jacq that finally is done , she reply "Finally ! is not that hard right?!" sometimes is just i make myself complicated thinking huhu T.T
 |
| QuantoPay Top-Up Flow |
The top-up process was easier compared to the withdrawal process. For the top-up, I took references from Touch 'n Go and the popular ZUS Coffee application, which made it more straightforward to implement.
QuantoCoins
 |
| Refinement QuantoCoin Rewards Page |
QuantoCoins allows users to collect coins and redeem them for rewards. Jacq suggested I create a Reward Details page to better explain the concept of QuantoCoins and its interface. This approach is similar to the one used by Grab, making it easier for users to understand and engage with the rewards system.
Ideaboard
 | |
|
The Ideaboard feature allows users to save boards from the community page as inspiration. We've added a share icon in the top right corner, enabling users to share their Ideaboards with friends, similar to how Pinterest operates.
MyPost & Following
 |
| Task 3 - My Post & Ideaboard |
 |
| Refinement My Post And Following |
During Task 3, I struggled to come up with ideas for the My Post page, especially since it was under the profile section. I wondered if having both "Profile" and "More Profile" would seem redundant, given their similar interfaces. However, I later realized that incorporating a community page is a common practice, where having a dedicated My Post and Following section, inspired by platforms like XiaoHongShu and Instagram, would be appropriate.
Find Pros Filter
 |
| Filter for Find Pros |
For Filter which Jacq suggest that KookyKreator team have a good filter which I can learn and get inspiration from them , I used back the filter I did before in QuantoCube and change the price range and add a distance.
Project Icon
 |
| 3D Icons First Draft |
For 3D icons which required in the Project inside the app , I request from Jun Zhe where I needed few different icon , Jun Zhe manage to give the icon on time , However some issues were found when to put all inside the app , where we realise the colour was slightly darker , and some seems to be confuse for user too which we have to for alternate way to figure it out to change them.
 |
| Project 3D Icons , before and after |
The dull colour version seems to be hard and align with the direction of QuantoCube , which then refine some adjusting of the colour and lighting in Figma. Siew Weng give me suggestion on where and how I should improve and maybe we could remove some elements to makes it more easier to understand
 |
| Fews Attempts for Project Page |
In my last task in this refinement was actually add the icons, we 3 try to kinda give it a mix and match to have a look which one will be the most suitable and finally for the first one will be the final one. Comes to the end !! YAY
Visual Design Concept
 |
| Visual Design Concept Progress |
I quite enjoy doing the visual design concept cause giving me the feel of "Yes fianlly comes to the end and should close order" huhu , Jacq suggested that the visual design concept can be having some elements to represent QuantoCube , so we added the arc shape that we always use in app
VideoWalkthrough
 |
| Capcut Progress |
As a back-up plan , this was done during Midnight where have to record both contractor and homeowner application walkthrough and then I feel like my head is getting heavier and decided to have a rest and edit on the next day morning
Submission
🟧 QuantoCube Application 🟧
🔧Final Presentation Slides - Collaborative Design Practice [ Proudly Done by Group 3: MBTIC3 ]
🟧 QuantoCube Pitching Video 🟧
🟧 QuantoCube Social Media 🟧
Comments
Post a Comment