Experiential Design / Assignment 03: Project MVP Prototype
Duration: Week 6 – Week 10
Submission: Online posts in your E-portfolio
Type : Group
Task Summary:
- Test out the key functionality of our approved project.
- The output may not necessarily be a finished visually designed project.
Goal : We will be gauge on their prototype functionality and their ability to creatively think on alternatives to achieve the desired outcome.
Requirements
- 1. Screen Design visual prototype (Figma)
- 2. Functioning MVP of the App
Experience Submission
- 1. Video walkthrough and presentation of the prototype
- 2. Online posts in your E-portfolio as your reflective studies
- Assets Design / Drawing – Renee
- Floor Plan Drawing – Crystal
- 3D Modeling
- Exterior:
- Renee - Door / Window / Rooftop
- Crystal - Wall / Column
- Interior
- Renee - Level 1 Room
- Crystal - Level 2 Room
- Unity Work
- Renee - Exterior
- Renee - Interior
- Renee - Interior When Enter instruction
- Renee - Interior (ON/OFF) light
- Renee - Map
- Crystal - finish page
- Crystal - history
- Crystal - Quiz / Clue
We are developing an AR app called BuildSight, designed for horror enthusiasts and fans of abandoned buildings. This app allows users to experience exploring eerie, abandoned buildings without physically visiting them—using AR instead.
Users start by scanning an image of the building, after which they can view and interact with a 3D model—rotating, moving, and zooming in on it. They can then "enter" the building, using their phone to look around and navigate from room to room via a map function. During the exploration, users can collect quizzes and search for clues to uncover the building's mysterious background story.
Additional features include Day Mode and Night Mode:
- Day Mode: The building appears well-lit, offering a clearer view of the environment.
- Night Mode: The scene becomes dark, and the user’s phone functions as a flashlight, creating a more adventurous and creepy atmosphere.
This app will provides an immersive, spooky AR exploration experience for users seeking adventure and mystery.
With all the tasks delegated, I started by drawing and sketching the frames for various UI elements such as the button frame, map frame, quiz frame, finish page frame, history page frame, and others.
list of frame to sketch
- Button Frame
- Map Frame
- Quiz / Clue Frame
- Pop Up Panel Frame
- History Frame
To begin with modeling, I used Google Maps to explore the surrounding area, observing the space and capturing images of different doors. At the same time, I started sketching and noting down the measurements.
- Sketches for Doors:
The first function I worked on was the Exterior Function, followed by the Interior Function. When the user scans the target image, the building model appears. Users can then zoom, rotate, and move the model around on the screen. After that, they can tap a button to enter the building and navigate through the rooms.
Functions I have Implemented Now:
- Exterior:
- Scan the target image to display the model
- Zoom in and out on the model
- Rotate the model
- Move the model
- Keep the model visible even after the target image is lost
- Show a button after the model appears
- When the button is pressed, the exterior model disappears (along with the button)
- Reset the model size
- Enter building button
- Interior
- Enter building and see surrounding in real live scale
- change the room using the map (represent using button for now)
- Problems Encountered During Development:
- Cancel button not working
- Reset button not working after hiding and showing the model
- Target image not functioning properly after adding the "Enter" button
- Model floating far away from the target image (Solved: I forgot to deactivate the interior model, which caused scaling issues and pushed the model too far away)
- Unable to export FBX model with colors
- Interior colors missing; unable to navigate room-to-room after adding the Cancel/Reset button script
- Buttons not showing after entering the interior
- Methods Used:
- Exterior Display:
- For the exterior, I used Vuforia Image Target. When the user scans the target image, the building model appears, allowing them to rotate, zoom, and move the model around.
- Interior Room Navigation:
- To change rooms, I moved the room models to the camera's position. This creates a smooth transition between rooms within the same scene, avoiding loading times and making the experience more seamless.
- Exterior View ( All Function)
- Interior (Enter and navigate room to room)
- Replace Asset with the final one
- Light on and off function (phone act as a torchlight )
- Add more room for level 2 (Not yet done i did for level 1 only)
- Combine the file with Crystal UI part
Throughout this prototype design process, the progress has been quite challenging for me, especially with the coding parts. I am not very experienced with coding yet, and many of the tasks I was working on—particularly involving Unity—felt quite complicated.
One of the biggest difficulties I faced was that my Unity project kept crashing unexpectedly. After investigating, I found out it was because too many objects were spawning at the same time, which overwhelmed the system. Once I fixed that issue, I was finally able to continue working on other functions.
As usual, there were many bugs appearing in Unity, and I had to take time to slowly troubleshoot and solve them one by one. One of the most surprising (and honestly speechless) mistakes I made was when my model wouldn’t appear after scanning the target image. I spent the entire day trying to fix it, only to realize that I had forgotten to deactivate the interior model at the beginning—which was causing the issue. Although it was a simple mistake, I was relieved and happy to finally solve it.
Overall, this prototype assignment has pushed me out of my comfort zone and encouraged me to take the first step and start working on my project, even though it was difficult at times.
Comments
Post a Comment