Major Project 2 - Final Compilation


Week 1 - Week 7
Wong Khye Qing / 0361000
Major Project 2/ Bachelor of Design (Hons) in Creative Media
Final Compilation


Link: 
 

Instructions
 


Previously on Major Project 1...
 
Items that are discussed in: 
  • Selected Rabbit R1 as our campaign focus for its fresh market presence and creative flexibility
  • Developed the Big Idea: "Your Pocket Concierge", showcasing Rabbit R1’s smart assistant capabilities
  • Explored creative execution through interactive kiosk, AR cube installation, and motion graphics
  • Conducted product research, style studies, and created a brand-aligned style guide
  • Designed mockups for website, kiosk interface, AR experience, and other campaign assets
  • Emphasized playful yet functional design language, working with modern shapes and bold type
  • Received valuable feedback to refine communication, visual identity, and user benefit emphasis
  • Practiced real-world team collaboration, strategic thinking, and multi-specialization contribution
  • Gained insight into the importance of user-focused design, emotional connection, and clarity in messaging


Week 2

Fig 1.0  Week 2 Progress Check Slide


Fig 1.1  Kiosk from Taylor's Library

Takeaway from this week:
  • We will continue with the proposed design for the website. 
  • We have plans to use the touch screen kiosk in the Taylor's Library to showcase the kiosk interface in real time
  • No plans yet for the AR display


Week 3
Fig 2.0  Week 3 Progress Check Slide

Fig 2.1  Website User Flow

The plan for the website is to just make it as simple as possible. Having a Landing Page that has the basic information for the users. Then, Large Action Model (LAM) Page and Product Spec Page if they would like to learn more about the product and features. Lastly, Call to Actions will be guiding the user to the Official Shop page of Rabbit R1. 

    Fig 2.2  Kiosk User Flow

    The Kiosk is mainly created to allow users to experience more about the features of the actual Rabbit R1 device. It will also be featuring the main feature of Push to Talk, LAM and Camera, which are the features that will be promoted for this product and campaign launch. 


    Fig 2.3  Request for Kiosk Usage Permission

    We got the library in-charge's email address during our visit to the Information Desk (Library Level 3). Request for the usage of Kiosk in the library was undergoing in order to get permission for kiosk usage and filming as soon as possible. 

    Takeaway from this week:
    • Established User Flow for Website and Kiosk to enhance the workflow 
    • Planned to emphasize on the main feature of the device and keep it as simple as possible
    • Sketched the web pages for better visualization


    Week 4
    Fig 3.0  Week 4 Progress Check Slide


    Fig 3.1  Color Palette for the Website

    We have decided to select Orange as the main color across designs, Orange red will be included with the Orange. While the Light Yellow will just be the tertiary color for minor parts of some designs to create variations with White.


    Fig 3.2  Jeans Attempts, Figma

    I have tried using jeans to be integrated into the website, be it realistic image or vector. Unfortunately, it didn't stick well with the overall design. 

     

    Fig 3.3  Landing Page Progress, Figma

    The top part of the page will feature an overlay transition for the device as shown in the GIF. Besides, the main 3 features mentioned will also be featured, as well as a section to briefly explain about the LAM.  

    At the meantime, Gim Khoon also recommend the usage of Framer to host the website, in order to ease the process of hosting the website. Hence, I needed to learn some of the functions and workings for Framer as I was not familiar with it. 


    Fig 3.4  Kiosk Usage and Filming Request Success

    The usage and filming for the Kiosk was approved and we just needed to fill up the Library's Student Filming Form online which is available here. 


    Takeaway from this week:
    • Corrected and reinforced color palette for websites and other designs
    • Created the first version of Landing Page and LAM Page Interface, with some minor animations.


    Week 5
    Fig 4.0  Week 5 Progress Check Slide


    Fig 4.1  Specification Page, Website

    I also added the Specification page to inform users that are interested to know about the detailed dimension and specifications of the device. 


    Fig 4.2  Auto Scrolling, LAM Page

    I have also suggested Gim Khoon to add an auto scrolling to the supported apps near the top of the page in order to reassure the users the supported apps that they can use with the device. 


    Takeaway from this week:
    • Creation of the Specification Page, with adequate information
    • Minor enhancements towards the LAM Page with experimentation towards the simulator



    Week 6
    Fig 5.0  Week 6 Progress Check Slide




    Fig 5.1  Week 5 Progress Check Slide

    I went to the 3D Printing Lab and got a form from the Technical Officer, Mr Ahmad. We filled in the form in order to request printing service. 

     

    Fig 5.2  Kiosk Progress and References

    We also slowly shifted our focus back at the Kiosk to start making progress in order to speed up the progress for the showcase and filming for the kiosk. 

    I have also tried to emulate the graphics and style of the device UI into the Kiosk interface, as the goal of the kiosk was to allow users to experience the features on the devices. We tried to find relevant UI references in order to replicate the device experience onto a bigger screen which posed some challenges. Fortunately, there are quite a number of images to reference to instead of creating ourselves from scratch.

     

    Fig 5.3  Learning Framer

    Learning Framer took some of my time in adjusting to it, as I was moving the works from Figma to Framer. Fortunately, I was able to recreate the scroll effect from Figma into Framer using Scroll Section and a few features, which is different from the convenient Smart Animation from Figma. 


    Fig 5.4  Tutorials from YouTube

    I also went on YouTube to find out how to create the Scroll effect since I am still a novice for Framer, any help really is great to expose me more to Framer workings. 


    Takeaway from this week:
    • Requesting the 3D printing service. 
    • Progress with the Kiosk interface, finding suitable Rabbit R1 device references for Kiosk UI
    • Moving from Figma to Framer, understanding the workings of Framer


    Week 7
    Fig 6.0  Week 7 Progress Check Slide

    Selected Rabbit R1 as our campaign focus for its fresh market presence and creative


    Fig 6.1  First Print, Rabbit R1 Device

    Upon printing finish the first device, I was excited and posted in the group for the good news. 


    Fig 6.2  3d printing Timelapse

    Fig 6.3  New Kiosk User Flow

    We have also updated the Kiosk user flow by not adding too much features that will overwhelm the user. With that, we have categorised them into LAM and Teachmode for them to experience. This in turn made it lesser features to experience while also able to digest the information given. 

     


    Fig 6.4  Recreate High Definition Rabbit GIF

    The GIF that we got online was low quality and blurry, hence why I went into After Effects to recreate the GIF in bigger resolution in order to have a clearer and high definition GIF that can be used throughout the project. 


    Fig 6.5  Change of Gradient Color

    With Mr Asrizal's suggestion, we have changed the gradient to a more suitable transition that creates a subtle shift from Orange Red to Orange. The first gradient was too subtle so we changed a new one to be fitted into the background of the project. 


    Fig 6.6  Overall Kiosk Interface

    I have altered the UI for some pages. Bigger changes came from the Weather Page, which featured a more established layout. The food page ordering page and identifying page were also polished in order to create a seamless experience.


    Fig 6.7  Startup page for Kiosk

    Gim Khoon also helped me in adding the loading screen to boot up the Kiosk when it is idling. The page will then redirect user to the main page where they get to choose the features that they would like to experience.




    Fig 6.8  Testing AR using Adobe Aero

    I also used the 3D made by Sejin to test out the Pop Up Experience using Adobe Aero in the evening at campus so that we can use it for filming for the set up. Video can be found in the Slide. 

     

    Fig 6.9  Kiosk Display Printout 

    We also designed and printed the display printouts for the Kiosk in order to stick them on the Kiosk and attract more users to experience the kiosk. 



    Fig 6.10  3d Scan of the Kiosk Filming Setup

    Gim Khoon also scan the Kiosk using a mobile app, Lumalabs, in order to show how we set up our Kiosk for filming in the library with the display printouts. 



    Fig 6.11  Kiosk Filming Timelapse, Behind the Scene

    With the completion of Kiosk design, Gim Khoon and I went to the library to film the usage of kiosk during the requested time. We made sure that the laptop was able to be connected to the kiosk and interactable using touch in real time, proving that our interface worked. 


    Fig 6.12  AR Filming at TRX, Day 1, Behind the Scene

    Gim Khoon and I went to TRX and film the Augmented Reality for the Pop Up experience using Adobe Aero on my iPad. We went there to try and film and gauge if the program able to load the 3d model set up made by Sejin. It worked out fine but sometimes the model might not be sticking on the ground. 

    Takeaway from this week:
    • 3D printing started
    • Restructure of Kiosk User Flow
    • Completion of Kiosk Interface and start of Kiosk filming


    Week 8 



    Fig 7.0  Sanding Timelapse, Behind the Scene

    Gim Khoon and I went Sanding in the wood workshop in campus in order to smoothen out some rough surfaces of the 3d printings. We manage to use the tools in the workshop to speed up our sanding process a lot and saved time.

         

    Fig 7.1  Final Website Look 

    We also wrapped up on the website design and remain it as a 3 page website. with addition towards the refined simulator as well as LAM section on the Landing Page. Other than that, the website Footer was also rearranged to an optimum position to be seen by the user. 


    Fig 7.2  Assembling 3d prints, Behind the Scene

    We bought 3-second glue to assemble all the 3d printed pieces on a foam board sandwich between two MDF board to reinforce it. We also sticked the design prints on some of the parts to showcase our designs on the pop up experience set. 


    Fig 7.3  3d Scan of Set Up while Assembling, Behind the Scene

    This is the setup for the pop up experience mockup that we did at the Student Life Centre, Gim Khoon had the idea of scanning it while we are assembling it, enabling us to look at our set up again soon. 





    Fig 7.4  Trial and Errors for file 

    Then on the day 2, the file can't seem to be uploaded to Adobe Aero and faced with a few errors, which is why we needed to find alternatives. Then, I found out that we can use the Apple's Ar preview method which just required USDZ file, luckily we can just convert it from GLB to USDZ. 

    Since the Apple preview still has some issues in sticking to the Floor, Gim Khoon has found Preview AR in App Store to use for AR filming. 

     

    Fig 7.5  AR Filming at TRX, Day 2 & 3, Behind the Scene

    We also went TRX for another 2 days to shoot for a night and day version just to see if the set up will look good for both conditions. 


    Fig 7.6  Presentation Day, picture by Mr Asrizal


    Final Compilation

    Final Deliverables Link:

    Fig 8.0  Final Presentation Slide


    Click to Website (Optimized for 1440px Width):
    https://rabbitr1.framer.website/


    Fig 8.0  Final Website Mockup


    Fig 8.1  Kiosk UI/UX Walkthrough Video


    Fig 8.2  3D Scan of the Kiosk



    Fig 8.3  Kiosk Display Printout Mockup


    Fig 8.4  Augmented Reality: Pop Up Experience Walkthrough Video


    Fig 8.5  3D Scan of Pop Up Mockup



    Fig 8.6  Pop Up Experience Mockup @TRX


    Feedbacks 

    Week 8
    • The team has good team  dynamic
    • The animation can be more energetic like cartoon
    • Could have a Shiny silhouette behind the product in the website  to show contrast 
    • For campaign, it's okay for to focus on feature. Try establishing why the user needed to use or buy the product 
    • Others are important for aesthetic understand the audience 
    • There are different strategy for marketing, targeted audience, it is also important to understand your market
    Week 7
    • Can add a rounded base on the base of the 3D model
    Week 6
    • Stay consistent for the kiosk, use the buttons that are alike the website in the kiosk
    • Try using Orange in the main page like the website
    Week 5
    • Try adding subtle gradient into the orange to make it look premium 
    Week 4
    • The jeans can try vector
    • Won't recommend using yellow for the secondary and being a dominant color in the website, try using it as a tertiary color 
    Week 3
    • Social media careful with the size of text, could convert into carousel post
    Week 2
    • Social media careful with the size of text, could convert into carousel post
    Week 1 
    • Social media careful with the size of text, could convert into carousel post
    • Poster, usage of images, amend on positioning and framing of elements
    • Keep in mind of the marketing funnel it, awareness, consideration and conversion. Website url to guide after awareness, included CTA
    • Instagram, feed, stories, highlights (features, take videos from social media)
    • Kiosk, provide after effects (video demo, MVP), website link with micro animation
    • Cube, can do print mockup
    • Mockup the picture of the setup instead of VR, assuming that we have a
    • Repurpose content from one motion graphic video, bring elements to different dimension of video format
    • Application mockup of blend in with venue