AR Design

UX Research

Exploring the Evolution of Art and the Future of Interactive Art Exhibitions

Project Overview

Goal

Research Context

Understanding exhibition trends in LA and predicting the future of interactive art.

Key Institutions:

Highlighting contributions from The Broad, MOCA, and LACMA.

Cultural Insights:

Tracking themes like activism, identity, and the rise of digital art.

‍

Key Findings

Rise of Activism-Driven Art:

Artists are increasingly addressing social justice, identity, and environmental issues.

Growth of Digital and Immersive Installations:

The adoption of AR/VR and AI art has transformed audience expectations.

Shift Toward Personalization:

Audiences want more control over their experience through interactive, customizable features.

Data Analysis and Key Trends

Research Insights (2014-2024):

‍

Reasons for Continued Growth of Digital Arts:
‍

1. Technological Advancements

2. Increasing Digital Connectivity

3. Evolution of Consumer Preferences

4. Cultural and Economic Shifts

5. Sustainability

6. Integration into Commercial and Media Sectors

7. Community and Collaboration

The analysis phase synthesizes research findings into actionable insights and tools for ideation.

Personas

‍

Journey Map


‍

Feature Prioritization

‍

The ideation phase focused on transforming research insights into innovative concepts that enhance user engagement with art exhibitions through interactive and digital technologies.

Concept Development

‍

‍

Information Architecture

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Camera } from "lucide-react";
import { motion } from "framer-motion";

const ArtExhibitionPrototype = () => {
  return (
    <div className="min-h-screen bg-gray-100 p-4 space-y-8">
      {/* Home Page */}
      <section className="space-y-4">
        <h1 className="text-3xl font-bold">Discover Art Exhibitions</h1>
        <p className="text-gray-600">Explore the latest art exhibitions and personalized recommendations.</p>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {[1, 2, 3].map((exhibit) => (
            <Card key={exhibit} className="shadow-lg">
              <CardContent className="p-4">
                <img
                  src={`https://via.placeholder.com/300?text=Exhibit+${exhibit}`}
                  alt={`Exhibit ${exhibit}`}
                  className="w-full rounded-lg mb-2"
                />
                <h2 className="text-xl font-semibold">Exhibit {exhibit}</h2>
                <p className="text-gray-600">Immerse yourself in the world of contemporary art.</p>
                <Button className="mt-2 w-full">Learn More</Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* AR Scanning Interface */}
      <section className="space-y-4">
        <h2 className="text-2xl font-bold">AR Art Guide</h2>
        <p className="text-gray-600">Point your device at artworks to unlock interactive content.</p>

        <div className="relative h-96 bg-black flex items-center justify-center rounded-lg">
          <Camera className="text-white w-12 h-12" />
          <motion.div
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.5 }}
            className="absolute top-8 left-8 bg-white p-4 rounded-lg shadow-md"
          >
            <h3 className="text-lg font-semibold">Artwork Name</h3>
            <p className="text-sm text-gray-600">Artist: Jane Doe</p>
            <p className="text-sm text-gray-600">"Explore the inspiration behind this piece."</p>
          </motion.div>
        </div>

        <Button className="mt-2">Scan Artwork</Button>
      </section>

      {/* Personalized Tour Summary */}
      <section className="space-y-4">
        <h2 className="text-2xl font-bold">Your Personalized Tour</h2>
        <p className="text-gray-600">A summary of your preferences and recommended exhibits.</p>

        <div className="bg-white p-4 rounded-lg shadow-md">
          <h3 className="text-lg font-semibold">Based on your interests:</h3>
          <ul className="list-disc pl-4 space-y-2">
            <li>Abstract Art Exhibit - Section B</li>
            <li>Modern Sculpture Showcase - Hall C</li>
            <li>Interactive Digital Art - Room A</li>
          </ul>
          <Button className="mt-4">Start Your Tour</Button>
        </div>
      </section>
    </div>
  );
};

export default ArtExhibitionPrototype;

‍

‍
‍

The design phase focused on creating prototypes and refining them through iterative testing.

Wireframe

Wireflow

Prototype


Usability Testing

The results and reflections phase analyzed the impact of the project and identified areas for future improvement.

Final Outcomes

  1. Quantitative Results:
    • User Engagement: AR interactions increases user engagement by 40% compared to traditional exhibits.
  2. Qualitative Insights:
    • Users appreciate the personalized tour summaries, finding them helpful for post-visit sharing.
    • Feedback highlighted the importance of ensuring AR features are intuitive for all age groups.

All Recent Work

Illustration Set
Illustration Set
Illustration Set
Illustration Set
Illustration Set
Illustration Set
Illustration Set
Illustration Set
Illustration Set
Powered by Webflow