Interaction_Engineers/index.html at main · devashrisamani/Interaction_Engineers · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
<!DOCTYPE html>
<html lang="en-AU">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://deco3850-ixd-exhibit.uqcloud.net/css/style.css"
    />
    <!-- Rebox JS CSS -->
    <link
      rel="stylesheet"
      media="all"
      type="text/css"
      href="https://deco3850-ixd-exhibit.uqcloud.net/css/jquery-rebox.css"
    />
    <!-- Update this one -->
    <title>2024: Zen Den</title>
  </head>

  <body>
    <header>
      <div class="container">
        <div class="project-header">
          <!-- Project Title & Team Name -->
          <h1>Zen Den</h1>
          <h3 class="team-name">by Interaction Engineers</h3>
          <!-- Project 1-liner – max 140 characters. -->
          <p class="tagline tagline--template">
            An immersive, sensory-driven space for mindfulness and creative
            interaction.
          </p>
        </div>
      </div>
    </header>

    <main class="container">
      <aside>
        <!-- Project Theme-->
        <div class="project-details">
          <h3>Theme</h3>
          <p>Interactive and Playful Visualizations</p>
        </div>

        <!-- Project Domain-->
        <div class="project-details">
          <h3>Domain</h3>
          <p>
            Interactive and Playful Visualizations forms a core part of our
            concept, where technology, data, and creative design converge to
            create an engaging experience. This theme emphasizes the use of
            physical computing technologies to transform data into interactive,
            visual narratives that uncover new insights into our personal and
            social environments.
          </p>
        </div>

        <!-- List of Team Members (using their preferred names), their key contributions/roles and preferred contact information (email - don't use your s122345 email) -->
        <div class="project-details">
          <ul class="project-details-list">
            <li class="member">
              <a class="member__name" href="mailto:[email protected]"
                >Jeff Davis</a
              >
              <p class="member__role">
                Designer,Storyboard Artist, Mechanical Engineer, Materials
                Procurement Specialist, Prototyping Specialist, UX Designer
              </p>
            </li>
            <li class="member">
              <a
                class="member__name"
                href="mailto:[email protected]"
                >Chun Yiu Jason Yeung</a
              >
              <p class="member__role">
                Interaction Designer, Arduino & Unity Developer, UX Researcher,
                Sound Engineer, Electronic Engineer
              </p>
            </li>
            <li class="member">
              <a class="member__name" href="mailto:[email protected]"
                >Devashri Samani</a
              >
              <p class="member__role">
                User Experience Designer, UX Researcher, User Tester, Documentor
              </p>
            </li>
            <li class="member">
              <a class="member__name" href="mailto:[email protected]"
                >Pratik Bajaj</a
              >
              <p class="member__role">
                Interaction Designer, UX Researcher, User Tester, User
                Experience Designer
              </p>
            </li>
          </ul>
        </div>

        <!-- List of interaction design methods used to inform project -->
        <!--Can be more/less than three-->
        <div class="project-details">
          <h3>Methods Used</h3>
          <ul class="project-details-list">
            <li>User Research</li>
            <li>Brainstorming</li>
            <li>Proposal Development</li>
            <li>User Acceptance Testing</li>
            <li>Prototyping</li>
            <li>Usability Testing</li>
            <li>Feedback Collection and Analysis</li>
            <li>Iterative Design</li>
            <li>Gesture Analysis</li>
          </ul>
        </div>

        <!-- List of additional keywords (these can be type of interaction, audience, technology… ) -->
        <!--Can be more/less than three-->
        <div class="project-details">
          <h3>Keywords</h3>
          <ul class="project-details-list">
            <li>Mindfulness</li>
            <li>Zen Gardening</li>
            <li>Sensory Integration</li>
            <li>Interactive Art</li>
            <li>Creative Expression</li>
            <li>Immersive Environment</li>
            <li>Relaxation Aid</li>
          </ul>
        </div>

        <!-- List of technology used in the implementation of your project -->
        <!--Can be more/less than three-->
        <div class="project-details">
          <h3>Technology Used</h3>
          <ul class="project-details-list">
            <li>Ultrasonic Sensors</li>
            <li>Arduino Microcontrollers</li>
            <li>LED Lighting</li>
            <li>Unity Game Engine</li>
            <li>Gesture Recognition Technology</li>
          </ul>
        </div>
      </aside>

      <section class="content">
        <!-- Kickstarter style/explainer embedded video -->
        <!-- Use YouTube's Embed Sharing option and copy & paste iframe code in the place of current empty +iframe-->
        <section class="kickstarter">
          <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/N8f-aBCAQ7Q?si=WrvpO0HAv2JDBzJU"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin"
            allowfullscreen
          ></iframe>
        </section>

        <!-- Project Description – 150 - 300 words describing what the project is and the intended experience. -->
        <!-- Can use multiple paragraphs <p></p> if wanted. -->
        <p>
          The Zen Den reimagines the traditional Japanese Zen garden through the
          integration of modern technology, creating an interactive and
          immersive art piece designed to foster relaxation and creativity. By
          incorporating sensor-enabled rakes and interactive sand surfaces, Zen
          Den allows users to engage dynamically with the environment. These
          rakes, responsive to user gestures like tapping and raking, activate
          auditory and visual feedback through LED displays and sound outputs,
          enhancing the sensory experience.
        </p>

        <p>
          This project embodies the theme of "interactive, playful
          visualizations," aiming to transform the way we engage with
          traditional cultural practices through modern technological
          enhancements.
        </p>

        <p>
          Zen Den is designed for environments where calm and creativity are
          cherished—ranging from wellness centers and art therapy rooms to
          meditation studios and private homes. By integrating traditional
          mindfulness practices technology, Zen Den offers a peaceful retreat
          from the hustle and bustle of daily life, inviting users to explore
          their artistic side while experiencing deep relaxation and mental
          clarity.
        </p>

        <section class="gallery">
          <!-- COPY & PASTE THIS FOR EACH NEW IMAGE YOU WISH TO DISPLAY. BE SURE TO REPLACE THE FULL SIZE IMAGE & THUMBNAIL WHERE APPROPRIATE (LOOK FOR THE CAPITALISED TEXT. AND DON'T FORGET YOUR CAPTIONS!!!!!!
            <a class="gallery__item"
              href="FULL SIZE OF IMAGE A"
              title="Caption for image A"
              ><img
                src="THUMBNAIL FOR IMAGE A (CAN BE THE SAME URL AS ORIGINAL, BUT THUMBNAIL PREFERRED 400PX"
                alt="ALTERNATE TEXT FOR IMAGE A"
            /></a>
          -->

          <!-- IF YOU WANT TO PLACE IMAGES INTO OTHER SECTION (i.e. TECHNICAL DESCRIPTION), THEN COPY AND PASTE THE FOLLOWING CODE (BE SURE TO REPLACE THE FULL SIZE IMAGE & THUMBNAIL WHERE APPROPRIATE (LOOK FOR THE CAPITALISED TEXT. AND DON'T FORGET YOUR CAPTIONS!!!!!!)
            <div class="gallery">
              <a class="gallery__item"
                href="FULL SIZE OF IMAGE A"
                title="Caption for image A"
                ><img
                  src="THUMBNAIL FOR IMAGE A (CAN BE THE SAME URL AS ORIGINAL, BUT THUMBNAIL PREFERRED 400PX"
                  alt="ALTERNATE TEXT FOR IMAGE A"
              /></a>
            </div>
          -->
          <a
            class="gallery__item"
            href="images/ZD4.jpeg"
            title="Post-Exhibit Prototype of the Zen Garden"
            ><img
              src="images/ZD4.jpeg"
              alt="Post-Exhibit Prototype of the Zen Garden"
            />
          </a>
          <a
            class="gallery__item"
            href="images/ZD3.jpeg"
            title="Rake - used to draw patterns on the sand."
            ><img src="images/ZD3.jpeg" alt="Rake" />
          </a>
          <a
            class="gallery__item"
            href="images/ZD7.jpg"
            title="Prototype showcasing sand patterns."
            ><img
              src="images/ZD7.jpg"
              alt="Prototype showcasing sand patterns."
            />
          </a>
        </section>

        <br />

        <section class="gallery">
          <a
            class="gallery__item"
            href="images/ZD1.jpeg"
            title="The ultrasonic sensors attched to the prototype."
            ><img
              src="images/ZD1.jpeg"
              alt="The ultrasonic sensors attched to the prototype."
            />
          </a>
          <a
            class="gallery__item"
            href="images/ZD8.jpg"
            title="Prototype showcasing the arduino system and LED output"
            ><img
              src="images/ZD8.jpg"
              alt="Prototype showcasing the arduino system and LED output"
            />
          </a>
          <a
            class="gallery__item"
            href="images/ZD6.jpeg"
            title="Prototype in the evening time."
            ><img src="images/ZD6.jpeg" alt="Prototype in the evening time." />
          </a>
        </section>

        <!-- Technical Description – a description of how the project is built (physical form, technology hardware and software). -->
        <section class="technical-description">
          <h2>Technical Description</h2>
          <p>
            Initially, our setup included an ultrasonic sensor for proximity
            detection, a buzzer for audio outputs, and an LED light for visual
            feedback. These components were connected to an Arduino
            microprocessor, which managed operations based on user interactions.
            Throughout the development phase, we conducted multiple rounds of
            User Acceptance Testing (UAT) internally to identify and rectify as
            many usability and technical issues as possible.
          </p>

          <p>
            As the project progressed, we received extensive feedback that
            emphasized the need to enhance the sound quality of our prototype
            and create a more dynamic user experience. In response, we made
            several iterations to refine the design and better align with our
            goal of delivering a playful, interactive experience. We integrated
            the Arduino with Unity, a powerful game development platform, to
            advance the quality of the sound outputs. Additionally, we added
            multiple LED strips to the Zen Den gardening tools, which
            synchronized the lighting patterns with user movements and
            interactions. To further enrich the experience, we employed Unity to
            visualize user movements on the sand with aesthetically pleasing and
            impressive graphics. In our final enhancement, we focused on
            customization, developing a hand gesture recognition system within
            the rake. This system allows users to modify the audio and visual
            settings by performing simple gestures, such as tapping, enabling
            them to personalize their meditation sessions according to their
            preferences.
          </p>
          <p>
            All in all, Zen Den brings to life the concept of interactive and
            playful visualizations by integrating sensor-enabled rakes and a
            dynamic sand surface that responds to human touch and movement. As
            participants interact with the Zen Den, their gestures—such as
            raking and tapping—activate a series of visual and auditory feedback
            mechanisms. This includes patterns of light that mimic the ripples
            in traditional Zen gardens and soothing sounds that enhance the
            meditative experience. The playful yet thoughtful integration of
            these elements invites users to explore the boundaries of creativity
            and interaction, turning a simple garden into a canvas for personal
            expression and exploration.
          </p>
        </section>

        <!-- To be completed following the Exhibit - a final statement regarding the response from visitors to the exhibit and next steps for the project. -->
        <section class="final-statement">
          <h2>Final Statement</h2>
          <p>
            The Zen Den exhibit was met with enthusiastic reception and positive
            feedback from both the public and experts in the field. Visitors
            were captivated by the seamless integration of technology and
            traditional Zen gardening, praising the interactive and immersive
            nature of the experience. The combination of ultrasonic sensors,
            synchronized LED strips, and advanced audio outputs created a
            captivating and soothing environment that resonated well with
            participants. Many users highlighted the innovative use of hand
            gesture recognition within the rake, which allowed for a
            personalized and engaging meditation session. The ability to modify
            audio and visual settings with simple gestures such as tapping was
            particularly well-received, as it provided a level of customization
            that enhanced the overall user experience. The visually appealing
            graphics rendered by Unity, along with the dynamic lighting patterns
            that mimicked ripples in a Zen garden, added to the aesthetic and
            sensory appeal of the exhibit. The feedback underscored the
            effectiveness of our approach in merging playfulness with meditative
            practices. Participants appreciated the thoughtful design that
            turned a traditional Zen garden into a vibrant canvas for personal
            expression and creativity. The interactive nature of the Zen Den
            invited users to explore and experiment with their movements,
            creating unique visual and auditory feedback that fostered a deeper
            connection with the exhibit. As we look to the future, several key
            steps have been identified to further enhance the Zen Den
            experience. One of the primary goals is to make the rake wireless,
            thereby increasing the ease of use and mobility for participants.
            This improvement will allow for more fluid and unrestricted
            movements, contributing to a more natural interaction with the sand
            surface. Additionally, there is a plan to expand the audio-visual
            feedback mechanisms to enrich the sensory experience further. This
            includes exploring more sophisticated soundscapes and lighting
            patterns that respond even more dynamically to user interactions. By
            integrating advanced sound design and more intricate light
            sequences, we aim to deepen the immersive quality of the Zen Den and
            provide users with an even more captivating and personalized
            experience. Moreover, we are considering the development of new
            gesture recognition capabilities to broaden the range of
            interactions available to users. This would allow for more complex
            and varied user inputs, enabling a richer array of responses from
            the Zen Den system. By continuously refining the technology and
            expanding the interactive elements, we strive to keep the experience
            fresh and engaging for all participants. Overall, the success of the
            Zen Den exhibit has validated our approach and provided a solid
            foundation for future enhancements. The positive interactions and
            feedback from users have been instrumental in shaping our next
            steps, guiding us toward creating an even more immersive and
            interactive meditative environment. As we move forward, our focus
            will remain on blending technological innovation with thoughtful
            design to offer a unique and enriching experience for all who engage
            with the Zen Den.
          </p>
        </section>
      </section>
    </main>
    <footer class="footer container">
      <p>DECO3850/7385 Physical Computing and Interaction Design Studio 2023</p>
    </footer>

    <!-- Rebox JS Script -->
    <script src="https://deco3850-ixd-exhibit.uqcloud.net/lib/jquery.min.js"></script>
    <script src="https://deco3850-ixd-exhibit.uqcloud.net/lib/jquery-litelighter.js"></script>
    <script src="https://deco3850-ixd-exhibit.uqcloud.net/js/jquery-rebox.js"></script>
    <script src="https://deco3850-ixd-exhibit.uqcloud.net/js/imagefit.js"></script>
    <script>
      $(".gallery").rebox({ selector: "a" });
    </script>
  </body>
</html>