Summer 2023

Summer 2023

Summer 2023

Sustainability Cards

Sustainability Cards

Sustainability Cards

Research Online Card Decks | Create Online Cards

Research Online Card Decks | Create Online Cards

Sustainability Cards
Case Study

In a world that is affected by KPIs and success
metrics, we need to consider our
sustainable business practices when we engage
with the world.

With the age of technology
and online collaboration, the necessity for
sustainable practices in the workplace is
crucial.

This growing need transformed the
Circles of Sustainability into a physical
card deck, created by Sebastian Prost and
Henry Collingham.

But how would they distribute their deck to
a wider audience?

Sustainability Cards
Case Study

In a world that is affected by KPIs and success
metrics, we need to consider our
sustainable business practices when we engage
with the world.

With the age of technology
and online collaboration, the necessity for
sustainable practices in the workplace is
crucial.

This growing need transformed the
Circles of Sustainability into a physical
card deck, created by Sebastian Prost and
Henry Collingham.

But how would they distribute their deck to
a wider audience?

Sustainability
Cards
Case Study

In a world that is affected by
KPIs and success metrics, we
need to consider our
sustainable business practices
when we engage with the world.

With the age of technology and online collaboration, the necessity for sustainable practices in the workplace is crucial.

In this growing need transformed the Circles of Sustainability into a physical card deck, created by Sebastian Prost and Henry Collingham.

But how would they distribute
their deck to a wider audience?


Deliverables
Paper Wireframes
Handoff Document
Hi-fi Mockup Demo





Tools
Miro
Figma
Google Docs


Deliverables
Paper Wireframes
Handoff Document
Hi-fi Mockup Demo

Tools
Miro
Figma
Google Docs

Deliverables
Paper Wireframes
Handoff Document
Hi-fi Mockup Demo

Tools
Miro
Figma
Google Docs

View Article

Overview

Approach

Activities

Walkthrough

Overview

Walkthrough

Approach

Activities

Overview

Approach

Activities

Walkthrough

Overview

The sustainability card deck is intended as a tool for HCI researchers to critically
reflect on the sustainability aspects of their past/current work as well as
plan for future projects. The cards currently exist digitally as a printable
PDF.

Within a 2-week design sprint, we explored the
interactive flow if the cards were to be played digitally.

It is important to note that the digital version was not intended to replace
or mirror the physical deck of cards, since each channel provides its own
benefits and affordances. Users are encouraged to try both and
choose what works best for them.

Overview

The sustainability card deck is intended as a tool for HCI researchers to
critically reflect on the sustainability aspects of their past/current
work as well as plan for future projects. The cards currently exist
digitally as a printable PDF.

Within a 2-week design sprint,
we explored the interactive flow if the cards were to
be played digitally.

It is important to note that the digital version
was not intended to replace or mirror the physical deck of cards,
since each channel provides its own benefits and affordances.
Users are encouraged to try both and choose what works best
for them.

Overview

Sustainability cards are intended as a tool for HCI researchers to critically reflect on the sustainability aspects of their past/current work as well as plan for future projects. The cards currently exist digitally as a printable PDF.

Within a 2-week design sprint, we explored the
interactive flow if the cards
were to be played digitally.

 It is important to note that the digital version was not intended to replace or mirror the physical deck of cards, since each channel provides its own benefits and affordances. Users are encouraged to try both and choose what works best for them.

Walkthrough
I collaborated alongside Purdue UXD students Coco Stevenson and Azaria
Revereza to create a live demo mockup in Figma.
I contributed paper prototyping and scholarly research on user engagement
techniques in CCGs or collectible card games.

It was designed to extend the physical card deck created while at Northumbria
University School of Design with Sebastian Prost and Henry Collingham.

Walkthrough
I collaborated alongside Purdue UXD students Coco Stevenson
and Azaria Revereza to create live demo mockup in Figma.

I contributed paper prototyping and scholarly research on user
engagement techniques in CCGs or collectible card games.

It was designed to extend the physical card deck while at
Northumbria University School of Design with
Sebastian Prost and Henry Collingham.

Walkthrough
I collaborated alongside
Purdue UXD students Coco
Stevenson and Azaria Revereza
to create a live demo mockup in Figma.

 I contributed paper prototyping and scholarly research on user engagement techniques in CCGs or collectible card games.

It was
designed to extend the physical card deck
while at Northumbria
University School of Design with
Sebastian Prost and Henry
Collingham.

View Demo

Summer 2023

Summer 2023

Summer 2023

Approach

Approach

Main Project Goal

Create a user card flow through high-fidelity, interactive Figma mockups

increase user engagement on Sustainability Reflection Cards

Contribution

  1. Compiled research insights in a handoff document

  1. Led paper prototype walkthrough that inspired the final Figma demo

Looking for Inspiration in Card Game Studies


Context

I looked toward popular collectible card games for inspiration and wisdom. This is due in part to them having cult followings and strategies which could be employed into my card flow concepts.


It helped to base the logic flow by examining examples like Yu-Gi-Oh! and Pokemon, since they give the best possible environment for enabling user interactions.


The most influential CCG(collectible card game) on the final card flow was Vampire the Eternal Struggle.


It is a more nuanced level of interaction due to the addition of politics into each game session.

























Outcome

I gathered three insights from Selen Turkey's Collectible Cards as Learning Tools:


Looking for Inspiration in Card Game Studies


Context

I looked toward popular collectible card games for inspiration and wisdom. This is due in part to them having cult followings and strategies which could be employed into my card flow concepts.


It helped to base the logic flow by examining examples like Yu-Gi-Oh! and Pokemon, since they give the best possible environment for enabling user interactions.


The most influential CCG(collectible card game) on the final card flow was Vampire the Eternal Struggle.


It is a more nuanced level of interaction due to the addition of politics into each game session.

























Outcome

I gathered three insights from Selen Turkey's Collectible Cards as Learning Tools:



  • Collection
    New cards are bought and amassed

  • Creation
    Cards are laid out in strategic manner to win

  • Community
    Players trade and advise each other

Envisioning Card Flows
In order to workshop and iterate interactive card flows, I decided sketching and paper prototyping would be a great first step
as it allows:

1. As many ideas as possible without too much commitment

2. Spoken discussions to evolve before implementing them on Figma

3. Us to solve logic gaps and apply strategies from Collectible Card Games (CCGs)

Envisioning Card Flows
In order to workshop and iterate interactive card flows, I decided sketching and
paper prototyping would be a great first step as it allows:
1. As many ideas as possible without too much commitment
2. Spoken discussions to evolve before implementing them on Figma
3. Us to solve logic gaps and apply
strategies from Collectible Card Games (CCGs)

Envisioning Card Flows
In order to workshop and iterate interactive
card flows, I decided sketching and paper
prototyping would be a great first step as it allows:

1. As many ideas as possible without too
much commitment

2. Spoken discussions to
evolve before implementing them on Figma

3. Us to solve logic gaps and apply strategies from Collectible Card Games

  • Card Flow Storyboard

    Outcome
    The idea was to start in a storyboard format to understand what was in my brain and what I could conceptualize alongside Henry.

  • UNO Online

    Outcome
    Inspiration for sketches based on UNO Online App playable on PC, console, and mobile devices

  • Card Flow V2

    Outcome
    I decided to follow a diamond-layout. It was inspired by playing UNO online. It felt like an easy format for countless card layouts.

Online Sustainability Cards Walkthrough
Over the course of three afternoon sessions at Northumbria University School of Design, I helped inform & create
the potential UI layout for the Sustainability Card Deck

Online Sustainability Cards Walkthrough
Over the course of three afternoon sessions at Northumbria University School of Design,
I helped inform & create the potential UI layout for the Sustainability Card Deck

Online Sustainability Cards Walkthrough
Over the course of three afternoon sessions at Northumbria University School of Design, I helped inform & create the potential UI layout for the Sustainability Card Deck


Main Features


Re-order Cards

Options for sorting &

reloading the board space

for new cards


Select grid layout

Inserts grids like coordinate plan, diamond map, etc.


Switch Domains

Change to cards/topics from the three separate domains in addition to current selection




Main Features


Re-order Cards

Options for sorting &

reloading the board space

for new cards


Select grid layout

Inserts grids like coordinate plan, diamond map, etc.


Switch Domains

Change to cards/topics from the three separate domains in addition to current selection



View Sketches


Main Features


Re-order Cards

Options for sorting &

reloading the board space

for new cards


Select grid layout

Inserts grids like coordinate plan, diamond map, etc.


Switch Domains

Change to cards/topics from the three separate domains in addition to current selection



Showcasing our Prototypes with fellow UX Designers
After paper prototyping, we needed to start testing our ideas/sketches with our fellow UX Design students.
In our observations we created two main prototypes:
1. An in-person prototype to be displayed for four participants from Purdue UXD
2. A digital prototype made on Miro to be displayed for three participants from Purdue UXD

Showcasing our Prototypes with fellow UX Designers
After paper prototyping the card flows, we needed to start testing our ideas/sketches
with our fellow UX Designers.

In our observations we created two main prototypes:

1. An in-person prototype to be displayed for four participants from Purdue UXD
2. A digital prototype made on Miro to be displayed for three participants from Purdue UXD

Showcasing our Prototypes with fellow UX Designers
After paper prototyping the card flows,
we needed to start testing our ideas/sketches with our end users.

In our observations we created two main prototypes:
1. An in-person prototype to be displayed for four participants from Purdue UXD
2. A digital prototype made on Miro to be
displayed for three participants from Purdue UXD

In-Person Prototype

In-Person Prototype

Outcome
In order to understand the flow and intent of the cards, I conducted an in-person usability test with four fellow UX designers. It was found that the cards needed to be translated into a simple digital format instead of aesthetic cards.

Digital Prototype

Digital Prototype

Outcome
When conducting a usability test with three Purdue UX students, the sticky notes helped convey the intended flow. This meant we were ready to create our Figma mockup with digital representations of the cards & a new, simplistic layout.

Lessons for projects going forward…

Check. Explore. Check Again.
Based on contextual observations, we found that the cards were most useful at the beginning and end of a project cycle. At the end of the project, the deck can be used as a checkpoint to determine if the sustainability aspects they initially discussed have been taken into consideration.


Working with Limited Resources Shows True Creativity
Having a team of three UX/UI Purdue students was the definition of a skeleton crew. However, by interviewing, validating decisions in less than two weeks, and exploring a brand new culture in the UK, this project brought out new strengths in each team member. For me, it was inspirations from my favorite games such as Uno, Pokemon, and Yu-Gi-Oh that led to our UI layout and mockups.

Lessons for projects going forward…

Check. Explore. Check Again.
Based on contextual observations, we found that the cards were most useful at the beginning and end of a project cycle. At the end of the project, the deck can be used as a checkpoint to determine if the sustainability aspects they initially discussed have been taken into consideration.


Working with Limited Resources Shows True Creativity
Having a team of three UX/UI Purdue students was the definition of a skeleton crew. However, by interviewing, validating decisions in less than two weeks, and exploring a brand new culture in the UK, this project brought out new strengths in each team member. For me, it was inspirations from my favorite games such as Uno, Pokemon, and Yu-Gi-Oh that led to our UI layout and mockups.

View Cards

Let's Work Together!

Let’s collaborate and bring fresh concepts to life. Drop a line below!

Get in Touch

Linktree

© Nikolai Hoogewerf - The Concept Kanvas