
<FullImage
  src="/project-assets/kitchen-experiment/intro-scroll2.jpg"
  width={1920}
  height={1682}
  priority={true}
/>

-- Amidst the sizzle and sweat, grime-coated hands render the use of touch devices not only inconvenient but distinctly uncomfortable. This prototype-driven project proposes a multimodal interface for recipe navigation in the kitchen.

<Team
  teammates={[
    {
      name: "Supervisor",
      position: "Dr. Carman Neustaedter",
    },
    {
      name: "Collaborator",
      position: "Ethan Ma",
    },
    {
      name: "Videographer",
      position: "Chris Thomas",
    },
  ]}
/>

<LayoutFull extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/kitchen-experiment/assembly-top-down-1.mp4"
    canScrub={false}
  />
</LayoutFull>

<ColorShifter background="#F9FFF1" color="#444" />

## A sticky situation

Slimy raw meat, dusty flour, and a million other things in the kitchen make you think twice before touching your devices.
Surveying HCI literature, we found promising ideas like [on-skin gesture control](https://www.tandfonline.com/doi/full/10.1080/14606925.2022.2058444) but it requires custom hardware, while recipe apps on the market often neglect the during-cooking phase.

Here, we saw the opportunity to challenge the dominant touch paradigm of modern mobile devices.

## A touchless cooking companion

No taps, flicks, or swipes. Our reimagined cooking experience integrates air-gesture and voice-query capabilities, allowing the user to focus on creating delicious meals, mess-free.

<LayoutMainContent grid="2/3" extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/kitchen-experiment/gesture-play-pause-2.mp4"
    canScrub={true}
  >
    <Caption
      label="1"
      title="Hold: play and pause"
      text="Users can toggle the play state by holding their hands in front of their device."
      overlay={false}
      topPadding
    />
  </Video>
  <Video
    src="https://stream.mux.com/s0000cfxUymggwk3wkk6vWwGGhCAPdUntA00019nf00x01g78/capped-1080p.mp4"
    canScrub={true}
  >
    <Caption
      label="2"
      title="Hold & lean: scrub"
      text="Users can scrub through the video by tilting their hand to one side, similar to using arrow keys, after activating control mode."
      overlay={false}
      topPadding
    />
  </Video>
  {/*<Video
    src="https://www.sfu.ca/~kkl64/videos/kitchen-experiment/gesture-scrub-square.mp4"
    canScrub={true}
  >
    <Caption
      label="2"
      title="Hold & lean: scrub"
      text="Users can scrub through the video by tilting their hand to one side, similar to using arrow keys, after activating control mode."
      overlay={false}
      topPadding
    />
  </Video>*/}
</LayoutMainContent>

<LayoutMainContent>
  <Video
    src="https://stream.mux.com/EF00EC301iNUOJONgvImvciR1VmhghcMZp01Ns1yn00qQsc/capped-1080p.mp4"
    canScrub={true}
  >
    <Caption
      label="3"
      title="Voice query: hands-free recipe lookup"
      text="Voice queries enable users to handle cooking tasks and look up recipes hands-free."
      overlay={false}
      topPadding
    />
  </Video>
</LayoutMainContent>

<LayoutMainContent grid="2/3">
  <Image
    src="/project-assets/kitchen-experiment/voice-unit-image-2-sq.jpg"
    width={585 * 1.5}
    height={585 * 1.5}
  >
    <Caption
      label="4"
      title="Mentioned measurements"
      text='A common question during recipe lookup is "how much". Measurement is highlighted when voice answers mentioned an ingredient.'
      topPadding
      overlay={false}
    />
  </Image>
  <Image
    src="/project-assets/kitchen-experiment/voice-action-wide-image.jpg"
    width={877 * 1.5}
    height={585 * 1.5}
  >
    <Caption
      label="5"
      title="Follow-up actions"
      text="Follow-up actions allow users to start a timer or pin a response with just their voice."
      overlay={false}
      topPadding
    />
  </Image>
</LayoutMainContent>

## Ethnography study (definitely not a hoax to get participants to cook for us)

To gain a more robust understanding of digital recipes usage during cooking, we conducted contextual inquiries with 5 home cooks of varying skill levels.

<LayoutMainContent grid="2/3" extraMargin>
  <Video
    src="https://stream.mux.com/InB32NeYUsHpbZnHipYZF4ivmvxz01SHTNlvKGruyEis/capped-1080p.mp4"
    width={800}
    height={800}
    canScrub={false}
  >
    <Caption label="" text="" overlay={false} topPadding />
  </Video>
</LayoutMainContent>

While users generally managed to complete tasks with workarounds, their experience was suboptimal. Here are our observations:

<LayoutMainContent grid="2/3" extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/kitchen-experiment/elbow-interaction_6.mp4"
    width={1920}
    height={1080}
    canScrub={true}
  >
    <Caption
      label="6"
      title="Observation: elbow interaction"
      text="Elbow interaction forces users into an awkward position, often leading them to accidentally move the devices into an upright position."
      overlay={false}
      topPadding
    />
  </Video>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/kitchen-experiment/knuckle-interaction_4.mp4"
    canScrub={true}
  >
    <Caption
      label="7"
      title="Observation: knuckle interaction"
      text="While affording higher precision, the digital device is prone to contamination due to its proximity to dirty fingers."
      overlay={false}
      topPadding
    />
  </Video>
</LayoutMainContent>

Through affinity diagramming, we also uncovered these key insights:

<List>
  <ListItem label="1">
    _Visual aids matter:_ Participants stressed the value of visual instructions. Videos and images help home cooks match their actions intuitively.

  </ListItem>
  <ListItem label="2">
    _Keep design interventions minimal:_ distractions from recipe lookups can be mentally taxing. Lightweight solutions help users stay focused on cooking.

  </ListItem>
  <ListItem label="3">
    _Participants move around the kitchen:_ Users move around the kitchen, often without direct sightlines to digital devices, emphasizing the need for accessible, hands-free solutions.

  </ListItem>
</List>

These insights guided our exploration. After generating ideas, we pursued a multi-modal approach, focusing on these primary investigation areas:

<List>
  <ListItem label="1">Video as primary recipe medium</ListItem>
  <ListItem label="2">
    Camera feed-based air gestures to substitute touch interaction
  </ListItem>
  <ListItem label="3">
    Voice query to enable omni-directional interaction
  </ListItem>
</List>

## Capturing the input

Leveraging iOS TrueDepth Camera, we can detect gesture distances and prevent unwanted triggers.

To design with this sensor, I developed a technique to process depth sensor data, capturing and smoothing user movements using Swift. The resulted platform allowed quick testing of various gesture approaches.

<LayoutFull extraMargin>
  <Video
    src="https://stream.mux.com/GuBJZ00FoNWKiocOl02KVEQpNB014cbSCou02SI9M65wUQ8/capped-1080p.mp4"
    width={1792}
    height={1052}
  />
</LayoutFull>

## Uncovering design principles

Using the [research-through-design](https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/research-through-design#:~:text=41.1.4%20Research%20through%20Design%3A%20Doing%20design%20as%20a%20part%20of%20doing%20research) methodology, designers develop understanding for the problem space through tangible prototypes.

In early experiments, we explored an air gesture pointer system but found it added too much cognitive overhead. Given the user's limited mental resource during cooking, this wasn't ideal. So, we limited gestures to essential video interactions, trading off flexibility for usability.

Nonetheless the we learned quite a few things from the prototype:

<LayoutFull extraMargin>
  <Image
    src="/project-assets/kitchen-experiment/air-gesture-problem.jpg"
    width={1792}
    height={1053}
  />
</LayoutFull>

We consolidated our learnings into the following principles:

<List>
  <ListItem label="1">
    _Use natural spatial mapping_: when gesturing left, the visuals should move
    left too. It would be confusing if they moved in the opposite direction.
  </ListItem>
  <ListItem label="2">
    _Appeal to the user's existing mental model_: for video
    scrubbing, people associate left with backward and right with forward.
  </ListItem>
  <ListItem label="3">
    _Continuous, instant visual feedback is crucial_. Gestures must always respond to the user's input, [even if they change their mind mid-action](https://developer.apple.com/videos/play/wwdc2018/803/). This builds trust in the interface, allowing users to interact without hesitation and encouraging exploration of new interactions.

  </ListItem>
  <ListItem label="4">
    _Design for imprecision to lighten cognitive load_. In our studies, users find larger interface elements easier because they encourage broader, less precise gestures.

  </ListItem>
</List>

## Perfecting the Scrub

To refocus our exploration, we have decided to tackle the more complex scrubbing action first.

### Attempt 1: wave to scrub

That lead us to experimenting with air gesture based wave to scrub” interaction.

<LayoutMainContent grid="1/3" extraMargin>
  <Video
    src="https://res.cloudinary.com/read-cv/video/upload/t_v_b/v1/1/profileItems/elxDbGufYVdRx2SBPOeM2V30vWr2/QocppSyo5cTqixN0OOaR/58dc8648-a6a8-4976-93f5-9c18d216448d.mp4?_a=DATAdtAAZAA0"
    width={1080}
    height={1920}
    canScrub={true}
  />
</LayoutMainContent>

While intuitive, the scrubbing system suffers a few drawbacks that makes it particularly tricky to move forward with.

<List>
  <ListItem label="1">
    Entering and exiting the motion may accidentally trigger scrubbing, which is
    difficult to fix without sacrificing responsiveness.
  </ListItem>
  <ListItem label="2">
    This interaction also introduces a very awkward in-between-swipe state of
    users have to lift their hands off the detection zone to restart swiping.
  </ListItem>
</List>

### Attempt 2: Dial to scrub

This iteration used a circular scrubbing motion, mimicking knob-turning.

<LayoutMainContent grid="1/3" extraMargin>
  <Video
    src="https://res.cloudinary.com/read-cv/video/upload/t_v_b/v1/1/profileItems/elxDbGufYVdRx2SBPOeM2V30vWr2/QocppSyo5cTqixN0OOaR/15a10979-b424-4fe3-806d-046f503a55d6.mp4?_a=DATAdtAAZAA0"
    width={1080}
    height={1920}
    canScrub={true}
  />
</LayoutMainContent>

The circular motion solves the in-between-swipe motion. Yet, aside from unresolved rejection on enter/exit motion, it also suffer from ergonomic issues. Users find it physically fatiguing to use
this gesture for a prolonged period of time because of the fine motor control involved.

### 3rd times the charm: Lean to scrub

We were initially stuck, but then we recalled an interesting behavior from our study: a participant navigated quickly through a YouTube video by holding down the arrow keys. This observation inspired us to explore the concept of using “leaning” to capture a user’s intent when scrubbing through a video.

<LayoutMainContent grid="1/3" extraMargin>
  <Video
    src="https://stream.mux.com/yVziBc4eEEknQ6AcEoHeL027wynPFUGtBpCtCeGwFQWI/capped-1080p.mp4"
    width={1080}
    height={1920}
    canScrub={true}
  />
</LayoutMainContent>

This was ultimately chosen to be included in the final solution because:

<List>
  <ListItem label="1">
    It is easy to perform for the user, as they only need to maintain a static
    position. This requires less motor effort compared to the constant movement
    needed for other solution.
  </ListItem>
  <ListItem label="2">
    With the additional hold state, it seemlessly incorporate the play, pause
    state into the design.
  </ListItem>
  <ListItem label="3">
    It still provides continuous feedback with subtle hints that acknowledge the
    user’s input.
  </ListItem>
</List>

<Quote who="Dr. Carman Neustaedter" title="Supervisor">
  {
    "The interaction—of pausing it, moving forward, backwards— is actually going really, really well. I am very impressed with that, very nicely done."
  }
</Quote>

## Takeaway: in praise of the barely working prototype

We kept delaying testing sessions, feeling we weren’t “ready.” It wasn’t until we set a hard deadline of “no prototype, no dinner” that we forced ourselves to test our design. Surprisingly, the prototypes we thought weren’t ready turned out to be incredibly valuable for learning.

<LayoutMainContent grid="2/3" extraMargin>
  <Image
    src="/project-assets/kitchen-experiment/chat-gpt-demo.jpg"
    width={3024 / 4}
    height={4032 / 4}
  >
    <Caption
      label="9"
      text="One wonderful moment was when we hacked together a ChatGPT voice interaction client and opened a YouTube tab next to it. Despite its rough form, this prototype gave us invaluable insights into how our solution could function."
      overlay={false}
      topPadding
    />
  </Image>
</LayoutMainContent>

## Takeaway: ideas happens when you make things

During the process of prototyping the air gesture, we explored various techniques for detecting hand gestures. As we experimented with different methods, we discovered new ways to detect user input and potential possibilities for interaction emerged.

<LayoutMainContent grid="1/3" extraMargin>
  <Video
    src="https://stream.mux.com/KNxHbSyrt4AjSQ00nhLFD017CEU5tC021KPuhJzZ1yhadQ/capped-1080p.mp4"
    width={1080}
    height={1920}
    canScrub={true}
  >

<Caption
      label="10"
      text="Because we developed the dynamic bounding box technique, we were able to to explore a circular air-gestures."
      overlay={false}
      topPadding
    />
  </Video>
</LayoutMainContent>

## Takeaway: testing just needs to make sense

Formative qualitative testing and feedback don't have to be overly complex or formal to be valuable; they just need to make sense. In our case, we frequently tested our idea with friends and family. By observing how they interacted with our prototype and interpreting their reactions, we were able to catch a lot of issues in the design. When approaching with caution, guerrilla testing on the go is a powerful tool.

## Appendix: a fascinated dad

My dad tried to scrub video with his head—slightly less violant than pointing a knife at the prototype(yes, someone did try the interaction with a knife)

<LayoutMainContent grid="1/3" extraMargin>
  <Video
    src="https://stream.mux.com/jHx00zHu02rMPr6q7G02dmvP7k02EjetS2IP4hq02nJkQcIk/capped-1080p.mp4"
    width={1080}
    height={1920}
    canScrub={true}
  />
</LayoutMainContent>



<FullImage
  src="/project-assets/whatif/intro.jpg"
  priority={true}
  width={1920}
  height={3230}
/>

-- Hosted by fabrica, "What if?" is an interactive art installations exhibition featuring 12 budding international artists. Child of a deep experimentation process, this expressive microsite with unique interactions and visual identity archives the artists' provocative works on humanity's future.

<Team
  teammates={[
    { name: "Aamir Ali" },
    { name: "Rhees Kennedy" },
    { name: "Samyak Sah" },
    { name: "Krista Mcdiarmid" },
  ]}
/>

<LayoutFull>
  {/* <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/exhibition-interaction.mp4"
    width={1920}
    height={1080}
  ></Video> */}
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/	exhibition-interaction.mp4"
    width={1792}
    height={1071}
    canScrub={false}
  ></Video>
</LayoutFull>

<ColorShifter background="#FFF" />

## Celebrate the works

As an online archive for the installation art pieces, the microsite intends to encapsulate the physical experience of the exhibition by creating a sense of immersion for visitors. The following are the major design features of the microsite:

<LayoutMainContent grid="2/3" extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/intro.mp4"
    width={1920}
    height={1080}
  >
    <Caption
      label="1"
      title="Priming Unique Interaction Pattern"
      text="The landing and introductory section act as primers to get visitors accustomed to our use of distortion to reveal content."
      overlay={false}
      topPadding
    />
  </Video>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/selection-page.mp4"
    width={1920}
    height={1080}
  >
    <Caption
      label="2"
      title="Denial & Reward to Encourage Content Discovery"
      text="The exhibit selection section reveals just enough information that entices the visitor to investigate more. This is achieved by tight image cropping and the “what if” prompts."
      overlay={false}
      topPadding
    />
  </Video>
</LayoutMainContent>

<LayoutMainContent extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/homo-quantis.mp4"
    width={1920}
    height={1080}
  >
    <Caption
      label="3"
      title="Individual Voices for Each Exhibit"
      text="Each exhibit page was given its own voice via unique color, font pairing and custom interaction which were inspired by its physical experience."
      overlay={false}
      topPadding
    />
  </Video>
</LayoutMainContent>

<LayoutMainContent grid="2/4" extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/nav-bar-going-out.mp4"
    width={1920}
    height={1080}
  >
    <Caption
      label="4"
      title="Adaptive Navigation"
      text="Visual form of the navigation bar mimics the content layout. As the visitor enters an exhibit, its visual form changes to signify a different viewing mode."
      overlay={false}
      topPadding
    />
  </Video>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/resistive-scroll.mp4"
    width={1920}
    height={1080}
  >
    <Caption
      label="4"
      title="Resistive Scroll as Punctuation"
      text="On the exhibit page, resistive scrolling connects one exhibition article to another. Working with the user expectation of scrolling on websites, it subtly draws attention to a page turn at the end of an exhibit article"
      overlay={false}
      topPadding
    />
  </Video>
</LayoutMainContent>

<LayoutMainContent extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/artist-page.mp4"
    width={1920}
    height={1080}
  >
    <Caption
      label="4"
      title="Draw to Reveal Artist"
      text="Below the exhibit selection page is the artist page, which is an open space where visitors can click & drag anywhere to reveal the name and portrait of all the artists involved in the exhibition."
      overlay={false}
      topPadding
    />
  </Video>
</LayoutMainContent>

## Experimental approach to art direction

Taking inspiration from Ellen Lupton, Woflgang Weingart and Chris Ashworth, the process began with a thorough investigation of a set of design principles and qualities.

<LayoutFull extraMargin>
  <Image
    src="/project-assets/whatif/three-directions.jpg"
    width={1792}
    height={949}
  >
    <Caption
      label="10"
      title="Converging from 3 Directions"
      text={`The approach I responsible for was chosen for its cohesive use of the principles and its versatility across different media.`}
      wideSpacing
    />
  </Image>
</LayoutFull>

<LayoutFull>
  <Image
    src="/project-assets/whatif/asset-wrist-band.jpg"
    width={1792}
    height={949}
  >
    <Caption
      label="11"
      title="Wrist band"
      text={`Event wrist band demonstrates the ability of this direction to both remain intact upon, and compliment various shapes`}
      wideSpacing
    />
  </Image>
</LayoutFull>

<LayoutFull>
  <Image
    src="/project-assets/whatif/asset-site-map.jpg"
    width={1792}
    height={949}
  >
    <Caption
      label="11"
      title="Site Map"
      text={`The application of a large scale site map installation illustrates how th direction adapts in large scale, functional application.`}
      wideSpacing
    />
  </Image>
</LayoutFull>

<LayoutFull>
  <Image src="/project-assets/whatif/typescale.jpg" width={1920} height={1080}>
    <Caption
      label="12"
      title="Type System with a Purpose"
      text={`I constructed a typographic system to ensure effortless alignment of cap-height and baseline across multiple type sizes, creating a structured appearance through consistent vertical rhythm.`}
      wideSpacing
    />
  </Image>
</LayoutFull>

<LayoutFull>
  <Image
    src="/project-assets/whatif/type-pairing.jpg"
    width={1920}
    height={1080}
  >
    <Caption
      label="12"
      title={`Pairing the Right Mono`}
      text={`With similar proprtions, Akkruat mono letter-form closely imitate Founder Grotesk in comparison to GT America Mono. `}
      wideSpacing
    />
  </Image>
</LayoutFull>

## Towards an interactive identity

Driven by a process that focuses on creating tangible artifacts, we iteratively explored interaction and motion possibilities.

To begin, we formulate 3 initial lines of investigations to see what the art direction affords us:

<List>
  <ListItem label="I">Distortion as a way to guide visitor attention</ListItem>
  <ListItem label="II">
    Denial and reward through high effort interactions
  </ListItem>
  <ListItem label="III">
    Playing with distortion for personal expression
  </ListItem>
</List>

After collecting and curating an extensive list of distortion techniques, hover interactions, animations, navigation, and methods of implementing dynamic grids, three distinct approaches was emerged as a way to surface content through interactivity.

Seeing how they could potentially compliment each other, the three approaches are unified into one in the final microsite.

<LayoutMainContent extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/interaction-approaches.mp4"
    width={1920}
    height={1080}
    canScrub={false}
  >
    <Caption
      label="5"
      title="Three Approaches"
      text="Three interactions approaches emerged from precedent research and hands-on exploration."
    />
  </Video>
</LayoutMainContent>

<LayoutMainContent grid="3/2">
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/exploration/exploration-cursor.mp4"
    width={1920}
    height={1080}
    canScrub={false}
  >
    <Caption label="6" text="My sketch on cursor interaction" />
  </Video>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/exploration/exploration-image-hover.mp4"
    width={1920}
    height={1080}
    fillHeight
    canScrub={false}
  >
    <Caption label="7" text="Hoverstate sketch" />
  </Video>
</LayoutMainContent>

<LayoutMainContent>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/exploration/exploration-typography-interaction.mp4"
    width={1920}
    height={1080}
    canScrub={false}
  >
    <Caption label="8" text="My AfterEffects sketch on cursor interaction" />
  </Video>
</LayoutMainContent>

<LayoutMainContent>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/exploration/processing-prototype.mp4"
    width={1920}
    height={1080}
    canScrub={false}
  >
    <Caption
      label="9"
      title="Prototyping with Code"
      text={`To test out the idea of "drawing to reveal content", I created an isolated study of the interaction on the process to give ourselves a sense of how it feels. This tangible artefact gave our team confidence to further pursue the idea.`}
      overlay={false}
      topPadding
    />
  </Video>
</LayoutMainContent>



<FullImage src="/project-assets/idagio/intro.jpg" width={1920} height={1435} />

-- iDAGIO Collector is a browser extension that classical music enthusiast to save serendipitous music discovery on the internet. By enriching their library on the iDAGIO platform, it further establish iDAGIO as the home of classical music.

<Team
  teammates={[
    { name: "Aamir Ali" },
    { name: "Rhees Kennedy" },
    { name: "Samyak Sah" },
    { name: "Krista Mcdiarmid" },
  ]}
/>

## About iDAGIO

iDAGIO is a streaming service developed specifically for classical music. By providing an extensive library and methods of discovering new music within it, IDAGIO intends to establish itself as “the [digital] home for classical music", in order to secure its future.

## "I love classical, but I also listen to other stuff" — Audience are Cultural Omnivores

For researchers who have been studying the classical music, this is not surprising. Despite their affection in classical music, even the most dedicated fans of the genre has been known to be listening to music outside of the classical genre . _The aficionado's diverse music taste implies that iDAGIO cannot expect their audience to be solely engaging with their classical only platform._

It has become a unique challenge to the positioning of iDAGIO.

<LayoutMainContent grid="2/3" extraMargin>
  <FullImage src="/project-assets/idagio/tweet.jpg" width={1190} height={942} />
</LayoutMainContent>

## Challenge: Enthusiast’s algorithm diet on the internet

On the other online platforms, namely youtube and forums like reddit, the classical music enthusiasts continues to discover music on these venue despite iDAGIO’s expert curations. Other than being a product, they also offer distinctive values that iDAGIO’s playlist curation lacks—namely the network of the online enthusiast community.

-- This is a problem for iDAGIO: they loose brand control in the classical streaming space as the users discover music on other venues. When user revisit those discovery on the other platforms, it undermine iDAGIO’s ability to deliver value.

## Strategy

As demostrated above, _iDAGIO needs to co-exist with it's competitors._ This project propose a feature that funnel new discovery back to the iDAGIO eco-system. By establishing iDAGIO as the user’s central classical music library, it create more sticky experience.

<LayoutMainContent extraMargin>
  <FullImage
    src="/project-assets/idagio/intervention.jpg"
    width={1920}
    height={1080}
  />
</LayoutMainContent>

## Meet iDAGIO Collect

iDAGIO Collect is a browser extension

## Expanding the scope

Through our research and design process, we also notice some die-hard fans have their physical music collection. To further establish iDAGIO as the digital hub for their classical music collection, this project may expand scope so that they may host and stream their own physical collection that iDAGIO may not be able to provide. For iDAGIO, this data sweat can help them to identify blindspot in their collection.

## Closing notes

This project was initially done as an experience design project in my senior years of university. Learnings from my product design internship make me see severe problems of the project, which ultimately led me rework a big chunk of it.

In this final iteration, the strategy and interaction design was refined by myself with the help of feedback from my friends.



<FullImage
  src="/project-assets/tedxsfu/intro.jpg"
  width={1904}
  height={1128}
  priority={true}
/>

-- TEDxSFU is an annual independently organised TED conference at Simon Fraser University. As the creative director of the 2021 iteration of the event, I was tasked with design and production of a microsite promotion campaign.

<Team
  teammates={[
    { name: "Lauren Mok", position: "Designer" },
    { name: "Gracie Gu", position: "Designer" },
    { name: "Sneha Shah", position: "Designer" },
    { name: "Matteo Miceli", position: "Web Dev" },
  ]}
/>

<LayoutFull extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/desktop-ui-keyframe.mp4"
    width={2780}
    height={1630}
    seekOnScroll
    preload="auto"
  />
</LayoutFull>
<LayoutFull>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/mobile-ui-keyframe.mp4"
    width={2780}
    height={1694}
    preload="auto"
    seekOnScroll
  />
</LayoutFull>

## A taste of the conference

Through interviewing stakeholders, we found that speakers and their topics were the major motivating factor for attendance. With that in mind, our strategy prioritises surfacing the featured speakers in order to intrigue the potential attendees.

Informed by user testing, the content features a collection of suspenseful, fast-paced, trailer-style interviews. This allows the site visitors experience the speaker's content before purchasing the tickets.

<LayoutFull extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/video-demo.mp4"
    width={1792}
    height={1008}
  >
    <Caption
      wideSpacing
      label="1"
      title="Immersive Experience"
      text="The immersion of edgeless video interface facilitates a feeling of intimacy between audience and the speaker."
    />
  </Video>
</LayoutFull>
<LayoutFull grid="2/1">
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/landing-demo.mp4"
    width={1792}
    height={1008}
    fillHeight
  >
    <Caption
      label="2"
      title="Speaker-Focused Landing"
      wideSpacing
      text={`Visitors are greeted with a seamless carousel of speakers and talk information right away.`}
    />
  </Video>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/mobile-landing-small.mp4"
    width={582}
    height={730}
  >
    <Caption
      label="3"
      title="Responsiveness"
      text="Touch optimised carousel for mobile navigation."
    />
  </Video>
</LayoutFull>

## Touchpoints

The speaker-focused content strategy was maintained across multiple communication channels. Through these external artifacts, curious individuals are encouraged to learn about the speakers on the website.

<LayoutMainContent grid="2/3" extraMargin>
  <Image
    src="/project-assets/tedxsfu/touchpoint-social.jpg"
    width={583}
    height={663}
  >
    <Caption label="4" />
  </Image>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/touchpoint-poster.mp4"
    width={882}
    height={882}
  >
    <Caption
      label="5"
      text="Speaker-specific QR code poster as initial touchpoint"
    />
  </Video>
</LayoutMainContent>

## Expressive interaction

We extended the existing TED branding expressive potential by introducing a motion language that inspired by petal — a nod to the conference theme "bloom". When tastefully applied, the gentle staggering motion soften the rather cold and precise modernist visuals.

<LayoutMainContent extraMargin>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/transition-demo.mp4"
    width={1792}
    height={1008}
    canScrub={false}
  >
    <Caption label="6" text={`"Bloom" motion language on page transition`} />
  </Video>
</LayoutMainContent>

<LayoutMainContent grid="2/3">
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/font-demo.mp4"
    width={583}
    height={407}
    canScrub={false}
  >
    <Caption
      label="7"
      text={`To achieve the weight animation, I modified Neue Haas Grotesk into a variable typeface.`}
    />
  </Video>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/button-demo.mp4"
    width={1792}
    height={1008}
    canScrub={false}
  >
    <Caption label="8" text={`Staggering type motion on CTA button`} />
  </Video>
</LayoutMainContent>

## Testing & iteration

Before development, I led a remote formative user research on the prototype with 6 university students. We also asked a middle-aged parent with visual impairment to participate with the intent of stress testing the system's usability. Major wins include:

<List>
  <ListItem label="1">
    Think-aloud exercise indicated that users mostly had little trouble
    understanding the interface and navigating the microsite. The result was
    supported by a decent score on the System Usability Scale (SUS) survey.
  </ListItem>
  <ListItem label="2">
    In the five-seconds-test, users find the presentation attractive with
    keyword "professional" cited frequently. Overall, the approach of
    prioritising speakers and topics on the microsite was well received.
  </ListItem>
</List>

<LayoutMainContent grid="3/2" extraMargin>
  <Image src="/project-assets/tedxsfu/sus-result.jpg" width={884} height={791}>
    <Caption label="9" text="System Usability Scale survey result" />
  </Image>
  <SlideShow
    label="10"
    text="Users generally enjoyed the speaker focused approach."
  >
    <Image
      src="/project-assets/tedxsfu/testing-quote-1.jpg"
      width={581}
      height={581}
    />
    <Image
      src="/project-assets/tedxsfu/testing-quote-2.jpg"
      width={581}
      height={581}
    />
    <Image
      src="/project-assets/tedxsfu/testing-quote-3.jpg"
      width={581}
      height={581}
    />
    <Image
      src="/project-assets/tedxsfu/testing-quote-4.jpg"
      width={581}
      height={581}
    />
  </SlideShow>
</LayoutMainContent>

<LayoutMainContent grid="2/3" extraMargin>
  <Image
    src="/project-assets/tedxsfu/content-before.jpg"
    width={582}
    height={582}
  >
    <Caption label="Before" />
  </Image>
  <Video
    src="https://www.sfu.ca/~kkl64/videos/tedxsfu/testing-video-demo.mp4"
    width={884}
    height={884}
    rowSpan={3}
    canScrub={false}
  >
    <Caption label="After" />
  </Video>
  <Caption
    label="11"
    title="Wordy Content"
    text="Users had raised that the speakers bio was too verbose to sustain their interest. As a result, the speaker bio was replaced by a snappy speaker interview video in the final design."
    overlay={false}
  />
</LayoutMainContent>

<LayoutMainContent grid="2/3" extraMargin>
  <Image
    src="/project-assets/tedxsfu/navigation-aid-before.jpg"
    width={582}
    height={582}
  >
    <Caption label="Before" />
  </Image>
  <Image
    src="/project-assets/tedxsfu/navigation-aid-after.jpg"
    width={884}
    height={1303}
    rowSpan={3}
  >
    <Caption label="After" />
  </Image>
  <Caption
    label="12"
    title="Lack of In-Page Navigation"
    text="Some users find the lack of in-page navigation frustrating, especially when browsing a lengthy page. To address this, new navigation modules was added to specific pages."
    overlay={false}
  />
</LayoutMainContent>



<LayoutFull>
  {/* <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/exhibition-interaction.mp4"
    width={1920}
    height={1080}
  ></Video> */}
  <Video
    src="https://www.sfu.ca/~kkl64/videos/whatif/	exhibition-interaction.mp4"
    width={1792}
    height={1071}
  ></Video>
</LayoutFull>

-- Tinkering design in code allow me to bring polish to a project and open doors for further investigations.
