Digital Conversation Cards
Digital Conversation Cards
A digital platform that transforms physical conversation card decks into an accessible, simplified experience for reflection and discussion anytime, anywhere.
A digital platform that transforms physical conversation card decks into an accessible, simplified experience for reflection and discussion anytime, anywhere.
Project Overview
Project Overview
Project
Project
Internship Project
(AcadeMedia)
Internship Project
(AcadeMedia)
Role
Role
UX/UI Designer
UX/UI Designer
Time
Time
20 Weeks
20 Weeks
Team
Team
1 UX/UI Designer &
1 Frontend Developer
1 UX/UI Designer &
1 Frontend Developer
Background
Background
The first phase (Period 1) of the project was initiated as part of a course. The second phase (Period 2) and further development were carried out during my internship (LIA).
The first phase (Period 1) of the project was initiated as part of a course. The second phase (Period 2) and further development were carried out during my internship (LIA).
Problem
Problem
The project aims to make AcadeMedia Academy’s card decks accessible to more people and contexts, as they currently only exist as physical decks in Swedish. The target group includes students, teachers, and colleagues who use the cards for discussions and reflection. The main challenge is to create a simple digital solution that allows users to access and use the card decks anytime and anywhere, without losing their intended purpose and ease of use.
The project aims to make AcadeMedia Academy’s card decks accessible to more people and contexts, as they currently only exist as physical decks in Swedish. The target group includes students, teachers, and colleagues who use the cards for discussions and reflection. The main challenge is to create a simple digital solution that allows users to access and use the card decks anytime and anywhere, without losing their intended purpose and ease of use.
PERIOD 1
PERIOD 1
Research
Research
To understand how the card decks are used, a workshop was conducted with three colleagues at a co-working office in Stockholm. Participants tested both the physical card decks and a digital prototype.
To understand how the card decks are used, a workshop was conducted with three colleagues at a co-working office in Stockholm. Participants tested both the physical card decks and a digital prototype.
The instruction cards were largely ignored, with participants immediately starting discussions using the cards. This led to a natural roundtable format, while other intended ways of using the cards were overlooked. Some questions were perceived as unclear, and shorter questions resulted in shorter discussions.
The instruction cards were largely ignored, with participants immediately starting discussions using the cards. This led to a natural roundtable format, while other intended ways of using the cards were overlooked. Some questions were perceived as unclear, and shorter questions resulted in shorter discussions.
When testing the digital prototype, participants experienced some confusion around navigation and felt there were too many clicks and too much text, especially on the instruction page.
When testing the digital prototype, participants experienced some confusion around navigation and felt there were too many clicks and too much text, especially on the instruction page.
The icons on the cards, based on traditional card suits, were not seen as intuitive or connected to their topics. Participants preferred icons that better represented the content.
The icons on the cards, based on traditional card suits, were not seen as intuitive or connected to their topics. Participants preferred icons that better represented the content.
While the physical cards were described as more engaging and “cozy,” the digital version was seen as more flexible and accessible. However, the digital experience needed to be simplified.
While the physical cards were described as more engaging and “cozy,” the digital version was seen as more flexible and accessible. However, the digital experience needed to be simplified.
Define
Define
Insights from the workshop showed that both the physical and digital versions had issues with instruction cards containing too much text, which participants tended to ignore. This led to users defaulting to a roundtable discussion format, missing other intended ways of using the cards, such as writing exercises, reflections, or role play.
Insights from the workshop showed that both the physical and digital versions had issues with instruction cards containing too much text, which participants tended to ignore. This led to users defaulting to a roundtable discussion format, missing other intended ways of using the cards, such as writing exercises, reflections, or role play.
Another issue was unclear wording on some cards. Since the project did not include revising the content of the cards themselves, this was not addressed further.
Another issue was unclear wording on some cards. Since the project did not include revising the content of the cards themselves, this was not addressed further.
It was also observed that engagement was higher when using the physical cards compared to the digital prototype.
It was also observed that engagement was higher when using the physical cards compared to the digital prototype.
After identifying key pain points, several “How Might We” questions were generated. Through dot voting, the following was selected:
After identifying key pain points, several “How Might We” questions were generated. Through dot voting, the following was selected:
How might we develop a simple digital solution that makes AcadeMedia’s conversation card decks more accessible in everyday school contexts, without losing their reflective and educational value?
How might we develop a simple digital solution that makes AcadeMedia’s conversation card decks more accessible in everyday school contexts, without losing their reflective and educational value?
Prototype
Prototype
The design introduced an option to view the first instruction card, while keeping the original card content unchanged. Users are prompted to choose a way to play, making it necessary to view the remaining instruction cards.
The design introduced an option to view the first instruction card, while keeping the original card content unchanged. Users are prompted to choose a way to play, making it necessary to view the remaining instruction cards.
Icons were redesigned to better match each topic. To improve accessibility, a text-to-speech feature was added to read questions aloud.
Icons were redesigned to better match each topic. To improve accessibility, a text-to-speech feature was added to read questions aloud.
A saved cards view was also created, allowing teachers to curate a selection of cards that students can use.
A saved cards view was also created, allowing teachers to curate a selection of cards that students can use.
PERIOD 2
PERIOD 2
Ideate
Ideate
Since the project initially originated within a course, multiple design proposals were presented to the client from different teams. The client requested a final solution that combined elements from the different concepts they preferred.
Since the project initially originated within a course, multiple design proposals were presented to the client from different teams. The client requested a final solution that combined elements from the different concepts they preferred.
There was also a strong focus on simplifying the digital experience. The initial instruction card, which contained a large amount of text, was removed. Instructions on how to use the cards were reframed as optional “Tips” instead of mandatory reading.
There was also a strong focus on simplifying the digital experience. The initial instruction card, which contained a large amount of text, was removed. Instructions on how to use the cards were reframed as optional “Tips” instead of mandatory reading.
Additionally, the client wanted to keep the original card icons unchanged to maintain consistency with the physical decks.
Additionally, the client wanted to keep the original card icons unchanged to maintain consistency with the physical decks.
Wireframing
Wireframing
Based on client feedback and insights from previous research, low-fidelity wireframes were developed with an emphasis on simplicity and ease of use. The solution was structured into four primary views to streamline the user journey:
Based on client feedback and insights from previous research, low-fidelity wireframes were developed with an emphasis on simplicity and ease of use. The solution was structured into four primary views to streamline the user journey:
A landing page introducing the purpose of the card decks
A view for selecting a card deck
A view for selecting topics
The gameplay view
A landing page introducing the purpose of the card decks
A view for selecting a card deck
A view for selecting topics
The gameplay view
The dedicated instruction view was removed to prevent users from being overwhelmed by text. Instead, instructions were reframed as a small "Tips" tab containing concise explanations that users can access if needed.
The dedicated instruction view was removed to prevent users from being overwhelmed by text. Instead, instructions were reframed as a small "Tips" tab containing concise explanations that users can access if needed.
Prototype
Prototype
The wireframes were further developed into an interactive prototype in English to allow remote testing with a broader audience. The prototype translates the core functions of the physical decks into a digital format while prioritizing ease of navigation:
The wireframes were further developed into an interactive prototype in English to allow remote testing with a broader audience. The prototype translates the core functions of the physical decks into a digital format while prioritizing ease of navigation:
Topic Selection: The interface allows users to select one or multiple categories, with the purpose of each deck clearly described to ensure users understand the context before starting.
Gameplay Interface: The active card is placed centrally, and users can move through the deck by interacting directly with the cards.
Instructional Access: Long-form manual reading was replaced by a "Tips" button, making guidance available as an optional resource rather than a barrier to play.
Visual Structure: The layout uses a clean, grid-based structure to ensure the focus remains on the discussion prompts and questions.
Topic Selection: The interface allows users to select one or multiple categories, with the purpose of each deck clearly described to ensure users understand the context before starting.
Gameplay Interface: The active card is placed centrally, and users can move through the deck by interacting directly with the cards.
Instructional Access: Long-form manual reading was replaced by a "Tips" button, making guidance available as an optional resource rather than a barrier to play.
Visual Structure: The layout uses a clean, grid-based structure to ensure the focus remains on the discussion prompts and questions.
Test
Test
The interactive prototypes allowed for remote testing with a broader audience. Testing was conducted through Maze in an unmoderated format, providing access to heatmaps and participant responses.
The interactive prototypes allowed for remote testing with a broader audience. Testing was conducted through Maze in an unmoderated format, providing access to heatmaps and participant responses.
The goal was to evaluate whether users understood the purpose of the card decks and how they navigated the interface. A total of six test results were collected.
The goal was to evaluate whether users understood the purpose of the card decks and how they navigated the interface. A total of six test results were collected.
Results were mostly positive. Participants understood the purpose and found the navigation easy to follow. Some improvements were suggested:
It was unclear that multiple topics could be selected
A feature to go back to previous cards was requested
Results were mostly positive. Participants understood the purpose and found the navigation easy to follow. Some improvements were suggested:
It was unclear that multiple topics could be selected
A feature to go back to previous cards was requested
Heatmaps also revealed that some participants clicked on empty areas, indicating uncertainty about how to proceed. This suggested that it was not immediately clear that interaction should happen directly on the cards.
Heatmaps also revealed that some participants clicked on empty areas, indicating uncertainty about how to proceed. This suggested that it was not immediately clear that interaction should happen directly on the cards.
Final Design
Final Design
The topic selection view was updated to clarify that multiple options can be selected.
The topic selection view was updated to clarify that multiple options can be selected.
Cards now include a subtle shaking animation after a short delay, indicating that users can swipe or tap to move forward. Previous cards can also be accessed by swiping or tapping, appearing face-down next to the active card.
Cards now include a subtle shaking animation after a short delay, indicating that users can swipe or tap to move forward. Previous cards can also be accessed by swiping or tapping, appearing face-down next to the active card.
A progress indicator was added to show how many cards remain in the deck. Small tabs next to the cards display which topics are active in the current session, based on the user’s selection.
A progress indicator was added to show how many cards remain in the deck. Small tabs next to the cards display which topics are active in the current session, based on the user’s selection.
Reflection
Reflection
The project provided a deeper understanding of how important it is to design based on actual user behavior. During the workshop, participants consistently ignored long instructions and started interacting immediately, highlighting the need to reduce text and enable quick engagement. This insight influenced several design decisions throughout the project.
The project provided a deeper understanding of how important it is to design based on actual user behavior. During the workshop, participants consistently ignored long instructions and started interacting immediately, highlighting the need to reduce text and enable quick engagement. This insight influenced several design decisions throughout the project.
Continuing the project during the internship added another layer of learning, where the solution needed to align with client requirements and technical constraints. This led to further simplification of the flow and testing with a broader audience through remote methods.
Continuing the project during the internship added another layer of learning, where the solution needed to align with client requirements and technical constraints. This led to further simplification of the flow and testing with a broader audience through remote methods.
The collaboration with a frontend developer also provided valuable insight into the communication between design and development.
The collaboration with a frontend developer also provided valuable insight into the communication between design and development.
If the project had continued, testing in a real school environment with students and teachers would have been highly valuable, as the initial workshop only included colleagues. This could have provided deeper insights into how the card decks function in educational settings.
If the project had continued, testing in a real school environment with students and teachers would have been highly valuable, as the initial workshop only included colleagues. This could have provided deeper insights into how the card decks function in educational settings.