USER INTERFACE

• Target User Persona:

  • Name: Lam

  • Age: 23

  • Occupation: University Student

  • Background: Lives in District 4, occasionally visits VivoCity (District 7) with friends for movies, shopping, or dining. Usually spends about an hour per visit. Uses escalators primarily but elevators for speed. Parks her bike underground. Not a frequent shopper.

  • Motivations: Spending time with friends, entertainment after school.

  • Goals: Wants more new stores/restaurants, enjoys seasonal decorations.

  • Frustrations: Unclear store organization across levels, traffic congestion around entrances, difficulty finding her parked vehicle sometimes (implied need from Solution 1).

• Justification for Persona Choice: Persona 3 (Lam) was selected because previous research indicated a significant customer base within the 18-28 age range at VivoCity, providing sufficient data to understand their needs and challenges.

• Initial Design Challenge: Based on the persona and general user feedback, the key challenges identified were:

  • Need for easily accessible solutions.

  • Desire for simple access to mall information and offers.

  • Requirement for helpful services, especially for navigation (parking, elevators, stores) and information gathering.

• Initial Concepts:

Solutions addressing persona frustrations were initially developed

• Developing New Low-Fidelity Prototypes (5 Solutions):

Based on refining initial ideas and addressing persona needs, five distinct low-fidelity concepts were sketched:

• • Parking Map: A QR-code-based system in the parking lot to help users scan and save their parking range location on a digital map via their smartphone.

  • Touchscreen Information Board: Interactive kiosks located near escalators providing a mall map (for navigation to elevators, seats, stores) and a survey function for feedback.

  • Smartphone Integration: Making the map and survey functions from the touchscreen board accessible via a smartphone app/web interface (likely through QR codes in the mall).

  • Help Booth: A physical booth with voice interaction for users who prefer not to use touchscreens or smartphones, allowing them to ask for directions or information.

  • Holographic News/Offers: Using holographic displays near stores to showcase new arrivals, promotions, and upcoming events in 3D, aiming to increase engagement and inform infrequent visitors like Lam.

• Methodology: Low-fidelity prototypes (sketches) were tested with a focus group (7 people aged 18-28) via an online survey.

• Survey Questions:

  • What does the project in this sketch look like to you?

  • What part of the sketch made the biggest impression?

  • Are you willing to learn more about this project based on the sketch?

  • Rate your interest (1-10).

  • Explain your interest/disinterest.

• Key Feedback & Results:

  • Solution 5 (Holographic News) garnered the highest interest (7.6/10), followed by Solution 1 (Parking Map) (7.5/10).

  • Solutions 2 (Touchscreen) and 3 (Smartphone App) had similar interest levels (7.1/10).

  • Solution 4 (Help Booth) had the lowest interest (7.0/10), but still indicated moderate interest.

  • Willingness to learn more was generally positive across all solutions.

• Refinements Based on Feedback:

  • Solution 1 (Parking Map): Add parking card integration as an additional reminder and incorporate optional location services for better accuracy.

  • Solution 2 (Touchscreen Board): Add incentives (e.g., small gifts/discounts) for completing surveys to encourage feedback.

  • Solution 4 (Help Booth): Improve usability by adding soundproofing and providing headphones for privacy and clarity in a noisy mall environment.

• This section represents the outcome of the initial ideation and testing cycle. The refined concepts incorporate user feedback to improve the usability and appeal of the initial low-fidelity prototypes.

  • Refined Parking Map: A more robust system using QR codes and potentially location services, with reminders integrated into parking cards.

  • Refined Touchscreen Board: An interactive map and survey tool, now with added incentives for user participation.

  • Refined Help Booth: A voice-activated assistance point with improved audio features (soundproofing, headphones) for better user experience.

  • (Smartphone Integration & Holographic News): These concepts were generally well-received and did not have specific refinements mentioned based on the initial feedback round documented.

• Concept Selection: Out of the five initial low-fidelity concepts generated in Part 1, the Parking Map solution was chosen. This decision was based on its relatively high user interest score (7.5/10) from the initial survey and its potential to address a clear pain point for visitors like Lam who drive/ride to the mall.

• Developing the Medium-Fidelity Prototype:

  • Tool: Figma was used to create the interactive medium-fidelity prototype.

  • Process: The initial low-fidelity sketch of the Parking Map was translated into wireframe screens. Key user interface elements (buttons, map layout, text) were defined without focusing on high-fidelity visual details (color, specific typography).

  • Adding Interaction: Connections were created between screens in Figma to simulate the user flow, allowing users to navigate the prototype as if it were a live application. This included interactions like button clicks, scanning simulation, and displaying different map states (e.g., showing location, showing route).

  • User Flow: A primary user flow was mapped out, starting from scanning a QR code in the parking lot to viewing the map and finding the parking location, including options for allowing location services and language selection.

• Objective: To evaluate the usability and effectiveness of the medium-fidelity Parking Map prototype with target users. (Note: A/B testing was part of the assignment requirements but specific A/B test details were not in the provided documents; the focus here is on the documented usability testing).

• Methodology:

  • Participants: 4 university students aged 18-21 (matching the target user demographic).

  • Methods: Conducted via both online calls and face-to-face sessions.

  • Tasks: Users were asked to perform tasks simulating finding their parking spot using the prototype.

  • Metrics: Task completion time, number of clicks, error rate, success rate, user satisfaction (rated 1-10), qualitative feedback (challenges, rewarding aspects, suggestions).

• Procedure:

  • Introduction explaining the purpose of the test.

  • Users interacted with the Figma prototype on a smartphone (either theirs via link or the tester's).

  • Screen recording (where applicable) and observation notes were taken.

  • Post-test questions gathered qualitative feedback.

• Key Findings:

  • Quantitative:

    1. Success Rate: 50% completed successfully without issues, 50% completed with minor issues (e.g., clicking non-interactive elements initially).

    2. Task Time: Ranged from 3 to 5 minutes.

    3. Error Rate: Relatively low, with extra clicks often due to initial exploration or clicking too quickly.

    4. Satisfaction: Generally positive, ranging from 7/10 to 9/10.

  • Qualitative:

    1. All participants successfully achieved the main task.

    2. Minor challenges included clicking non-working buttons (expected in medium-fidelity) or clicking too fast before understanding the screen.

    3. Positive feedback highlighted ease of use, sufficient functionality, and the value of bilingual support.

    4. Crucially, no specific improvements were suggested by the participants during this testing round; they generally felt it was functional and easy to use.

• Iteration Decision: Based on the positive usability testing results and lack of specific user recommendations for changes at this stage, the decision was made not to iterate further on the medium-fidelity prototype within the scope of this assignment. However, the feedback indicated the prototype was functional but perhaps not "impressive," suggesting potential for future visual refinement or feature additions in a high-fidelity stage.

• Refinement Strategy: Address the minor usability issues from Assignment 2 and elevate the visual design based on the moodboard, focusing on:

  1. Clarity: Make interactive elements more distinct.

  2. Visual Hierarchy: Improve differentiation between titles, main functions, and secondary options.

  3. Aesthetics: Implement a consistent and appealing visual style using chosen fonts and colors.

• Specific Refinements Implemented:

  1. Welcome Screen:

     • Icons: Added icons next to button text (e.g., location pin for "View Your Parking Position", map icon for "View Parking Map") to improve visual recognition and appeal.

     • Button Design: Enhanced button styling (using color fills, strokes, potentially gradients based on moodboard) and adjusted scaling to make clickable areas clearer, reducing accidental clicks on non-interactive parts.

     • Hierarchy: Clearer distinction between the main title ("WELCOME TO VIVO PARKING MAP") and the interactive buttons below.

  2. Map & Direction Screens:

     • Visual Consistency: Applied the chosen color palette (purple/pink accents) consistently to map elements, directional lines, and buttons.

     • Font Application: Used the selected fonts ('Inter' and 'Rounded Mplus 1c') consistently for better readability and a modern feel.

     • Layout Clarity: Maintained the simple, clear layout but refined visual elements like lines and markers for better aesthetic quality.

  3. Fonts & Colors:

     • Fonts: Utilized 'Inter' for its modern readability and 'Rounded Mplus 1c' for titles or key elements to add friendliness.

     • Colors: Implemented the purple and pink color scheme inspired by the moodboard to create a modern, attractive vibe targeted at young users.

• Overall Design Layout:

Strengthened the visual hierarchy established in medium fidelity. Main function buttons were made more prominent (size, style) compared to secondary options (like language selection or 'About'). Titles were clearly differentiated from interactive elements.