DESIGN SPACE

1. Overview

• This project explores the creation of "Vivo's Parking Map," an immersive experience designed to enhance the user journey within Vivo City's parking basement. The core problem addressed is the often frustrating and time-consuming process of locating parked vehicles.

• This concept aims to transform this mundane task into an easier, more engaging, and informative experience, leveraging principles of experiential design. The project involves developing both an online map for quick navigation and information, and a physical, interactive guidance system within the parking lot itself.  

• Problem Space: Locating one's vehicle in a large parking structure like Vivo City's basement can be difficult and inefficient. The goal is not just to simplify this process but to make it interesting and educational, helping users become familiar with the parking layout for future visits.  

• Rationale & Objectives:

  • Simplify the vehicle finding process for users.   

  • Provide a knowledge base of the Vivo parking lot layout.   

  • Enhance the user experience through interactive elements involving light, sound, and physical interaction.   

  • Ensure the system is intuitive and easy to understand.   

• Target Audience: The primary users are envisioned as young adults (18-28 years old), largely university students, who constitute a significant portion of regular Vivo City visitors and are typically drawn to engaging and interesting experiences.  

• Concept: The core idea is a dual system:

  • Online Map: Accessible via QR code scan, providing standard navigation.

  • Physical Interaction: An immersive, guided experience within the parking lot, triggered perhaps after accessing the system.   

• Scenarios & User Flow:

  • Online: Scan QR -> Access Map -> Find Vehicle.   

  • Physical: Access System (potentially via smartphone connection/sensor interaction) -> Follow Light/Sound Guidance -> Answer Questions at specific spots -> Arrive at Parking Position.   

• Initial Sketches: Rough visuals depict the app interface (QR scan, map view, interactive question prompts)  and the physical installation concept (sensor spots, light lines on the floor, speakers for guidance/effects, lights indicating the parked car). The physical journey incorporates interactive questions to enhance engagement.

• While the provided document outlines the initial concept and plan, the final design would build upon the sketches and ideation. The proposed deliverables include:

  • Prototype: An interactive prototype created using Figma, demonstrating the user flow for both the online map and the physical interaction scenario.

  • Visual Design: Decorations and visual assets created using Adobe Illustrator to define the aesthetic of the app interface and potentially the physical installation elements.

  • Walkthrough Video: An animation produced with Adobe After Effects simulating the complete user experience, showcasing the navigation, interaction points, light/sound effects, and the overall immersive journey.

• The final design would integrate the online map accessibility with the physical guidance system, featuring clear visual cues (LED light lines, spot indicators), auditory feedback (voice guidance, sound effects), and seamless interaction via smartphone connectivity to sensors.

4. Final Design (Proposed)

1. Overview

The core concept involves guiding users within a parking structure using a combination of smartphone screen interactions and physical cues like lights and sound. The primary goal was to rapidly ideate, prototype (low-to-mid fidelity), and test a user-centric navigation experience, focusing on iterative development based on feedback and strong design rationale.

• Following ideation, the concepts were developed into mid-fidelity wireframes and a prototype flow, focusing on the core interaction mechanics:

  • User Interface: Designed screens for guidance, instructions, location confirmation, and feedback (correct/incorrect prompts).   

  • Interaction Flow: Mapped out the process involving license plate input, following light cues, interacting with checkpoints (potentially including questions), and receiving final directions.   

  • Technology Integration: Showcased the interplay between the mobile app and physical elements like guidance lights and sensors within the parking structure. This stage reflects the assignment's requirement to develop and test low-to-mid fidelity prototypes. 

4. Final Design (Mid-Fidelity Prototype)

Building on initial research, this phase focused on refining the target user understanding and visual direction:

• • Target Persona: Development continued with Persona 3 (Lam), representing the 18-28 age group identified as frequent visitors who value the overall experience. This focus allowed for tailoring the design to their preferences (e.g., social aspect, modern aesthetics).

  • Visual Style: The goal was a modern, simple layout with bright colors and cute characters, realized through 2D animation. A specific color palette (Red, Yellow, Green, Grey, Black) and fonts (Myriad Pro, Arial Rounded MT Bold) were chosen to achieve this aesthetic, aiming for a friendly, relaxing, yet modern feel appropriate for the target persona. This visual direction was validated as suitable during feedback stages.

2. Research & Inspiration

The mid-fidelity concepts were fully developed into a high-fidelity working model, primarily represented through a walkthrough video:

• • Visual Development:

    1. Screen Interaction: UI elements (logo, buttons, icons, fonts) were finalized using the chosen color palette and typography, creating polished screens for instructions, questions, and feedback.

    2. Physical Interaction: The design of the physical interaction points ("stop spots") was refined to match the overall visual style.

    3. Characters: Three distinct, friendly characters were designed in Illustrator, reflecting the target persona and color palette, to be used in the animation.

  • High-Fidelity Working Model (Walkthrough Video):

    1. The final prototype was presented as a 2D animated walkthrough video.

    2. Tools: Visual assets were created in Adobe Illustrator, animated in Adobe After Effects, and compiled with voiceovers and music using Filmora.

    3. Rationale: The video format was chosen to effectively demonstrate the complete user journey and the interplay between screen and physical interactions, serving as the primary representation of the high-fidelity prototype instead of an interactive Figma model.