2023 · Phionike Design-tech studio
2023 · Phionike Design-tech studio
·
·
context · plugin
context · plugin
A
A
Plugin
Plugin
that provides
that provides
Context
Context
to Ukrainian Refugees
to Ukrainian Refugees
Role
Role
Interaction Designer · Researcher
Interaction Designer · Researcher
Team
Team
2 designers · 1 PM
2 designers · 1 PM
Duration
Duration
2 months
2 months
Surfaces
Surfaces
For Ukrainian Refugees in the UK
For Ukrainian Refugees in the UK
Stack
Stack
Plugin Design
Plugin Design
Context is a digital companion that guides Ukrainian refugees through the intricacies of websites in the UK. It is a project initiated by the Royal College of Arts, London, that aims at contributing to a societal impact. This project is being pitched to the UNICEF and is under development as an MVP.
Context is a digital companion that guides Ukrainian refugees through the intricacies of websites in the UK. It is a project initiated by the Royal College of Arts, London, that aims at contributing to a societal impact. This project is being pitched to the UNICEF and is under development as an MVP.
Context has recently been recognised with the following awards:
Honorable Mention at Service Design Network's SDGN'23
Reconigtion at Helen Hamlyn Centre for Design
Context has recently been recognised with the following awards:
Honorable Mention at Service Design Network's SDGN'23
Reconigtion at Helen Hamlyn Centre for Design
DEFINE
DEFINE
RESEARCH
RESEARCH
DESIGN
DESIGN
IDEATE
IDEATE
1
1
Problem space
Problem space
Overview
Overview
2
2
User Interviews
User Interviews
User Persona
User Persona
User Journey
User Journey
Service Blueprint
Service Blueprint
Insights
Insights
4
4
Design System
Design System
High Fidelity Prototype
High Fidelity Prototype
3
3
Walkthroughs
Walkthroughs
Do- Go map
Do- Go map
Usabilty Testing
Usabilty Testing
Design Refinements
Design Refinements
A COLLABORATIVE PROCESS
A COLLABORATIVE PROCESS
Royal College Studio
Royal College Studio
Freelance Developers
Freelance Developers
London
London
London
London
Mumbai
Mumbai
Design Studio
Design Studio
User Research
User Research
Product Research
Product Research
Ideation
Ideation
UI Design
UI Design
Usability Testing
Usability Testing
Design Improvements
Design Improvements
Development
Development
01
01
DEFINE
DEFINE
PROBLEM STATEMENT
PROBLEM STATEMENT
To develop a browser extension aimed at assisting refugees by superimposing useful contextual cultural explanations in crowded settings.
To develop a browser extension aimed at assisting refugees by superimposing useful contextual cultural explanations in crowded settings.
OVERVIEW
OVERVIEW
During their settlement process in the UK, refugees often find themselves sifting through numerous websites to establish their new lives. These resources frequently lack the refugee context and are written in complex language. There exists a clear necessity for a service that can cater to diverse refugee communities, simplifying their lives and catering to their specific requirements. Imagining a digital companion that guides refugees through the intricacies of websites, this solution aims to overlay valuable crowdsourced information and cultural interpretations, offering much-needed assistance.
During their settlement process in the UK, refugees often find themselves sifting through numerous websites to establish their new lives. These resources frequently lack the refugee context and are written in complex language. There exists a clear necessity for a service that can cater to diverse refugee communities, simplifying their lives and catering to their specific requirements. Imagining a digital companion that guides refugees through the intricacies of websites, this solution aims to overlay valuable crowdsourced information and cultural interpretations, offering much-needed assistance.
02
02
RESEARCH
RESEARCH
USER INTERVIEWS
USER INTERVIEWS
The students from the Royal College of Arts conducted a series of ideation and co-creation sessions involving the Ukrainian refugee community. These interactions involved gathering feedback and collaboratively devising potential solutions. Through these exercises, a compilation of frequently asked questions that commonly arise among users was generated.
The students from the Royal College of Arts conducted a series of ideation and co-creation sessions involving the Ukrainian refugee community. These interactions involved gathering feedback and collaboratively devising potential solutions. Through these exercises, a compilation of frequently asked questions that commonly arise among users was generated.
From the user group of refugees seeking help:
?
Language Barrier
Feedback indicating challenges in navigating English-language websites due to limited language proficiency, leading to difficulties in understanding information and instructions.
Cultural Disparity
Statements highlighting confusion or misunderstandings arising from cultural differences that affect comprehension of website content and services.
Technical Hurdles
Instances where unfamiliarity with digital tools and online platforms hindered the ability to access necessary information and resources.
From the Volunteers willing to help:
Repetitive Queries
Observations of frequently recurring questions from Israeli immigrants about website usage, indicating a need for a centralized resource to address these queries.
Limited Support Infrastructure
Noticing a gap in available tools to assist Israeli immigrants in overcoming language and cultural barriers when interacting with online platforms.
Desire to Assist
Expressions of willingness to aid Israeli immigrants in accessing web resources more effectively, but lacking a structured solution to do so.
Kind of questions refugees ask
Kind of questions refugees ask
The students from the Royal College of Arts conducted a series of ideation and co-creation sessions involving the Ukrainian refugee community. These interactions involved gathering feedback and collaboratively devising potential solutions. Through these exercises, a compilation of frequently asked questions that commonly arise among users was generated.
The students from the Royal College of Arts conducted a series of ideation and co-creation sessions involving the Ukrainian refugee community. These interactions involved gathering feedback and collaboratively devising potential solutions. Through these exercises, a compilation of frequently asked questions that commonly arise among users was generated.
FLOWS
FLOWS
Introducing the nature of flow between different stakeholders involved in the service and use of the product
Introducing the nature of flow between different stakeholders involved in the service and use of the product
Individual Donations
Individual Donations
CSR Initiatives
CSR Initiatives
Paid Interpretive Service
Paid Interpretive Service
Individual Donations direct to charities/org
Individual Donations direct to charities/org
NGO Innovation Funds
NGO Innovation Funds
Verified Information
Verified Information
Timely Information
Timely Information
Data Analytics
Data Analytics
Data Analytics
Data Analytics
Community Content
Community Content
Individual Donations
Individual Donations
Innovation Funds
Innovation Funds
Refugee
Refugee
Refugee charities and orgs
Refugee charities and orgs
Platform
Platform
M.O Volunteers
M.O Volunteers
Sponsors
Sponsors
Created by shashank singh
Created by shashank singh
from the Noun Project
from the Noun Project
Created by shashank singh
Created by shashank singh
from the Noun Project
from the Noun Project
Flow of Money
Flow of Money
Flow of Content
Flow of Content
Flow of Data
Flow of Data
User persona- MO Volunteer
Pain Points
Lack of a dedicated tool for consistent and reliable support.
Limited availability to address repeated refugee queries, impacting assistance quality.
Difficulty understanding refugee cultural and language challenges.
Resource Gap
Time Constraints
Communication
Needs
Goals
Comprehensive Tool: Find a tool that provides cultural context.
Clear Resources: Centralized info hub for quick responses and reduced redundancy.
Training: Workshops on cross-cultural communication and effective plugin use.
Efficient Support: Providing timely guidance for online platform navigation by refugees.
Cultural Sensitivity: Tailoring assistance to diverse refugee needs.
Collaborative Network: Enhancing collective support for refugees.
Name:
Michael Jason
Age:
28 Yrs
Occupation:
Software Engineer
London
Location:
Biography
Michael, a dedicated community member, has called the UK his home for six years. Proficient in technology, he helps newcomers through events and workshops.
“I’m keen to share my learnings and information with those need it in efficient ways that benefit maximum people”
User persona- Refugee User
Pain Points
She encounters difficulties with local customs, affecting her community integration.
She encounters difficulties with local customs, affecting her community integration.
UK website navigation overwhelms her due to differences from Israel.
Cultural Adjustment
Language Barrier
Unfamiliar Platforms
Needs
Goals
Resource Access: Navigate local websites to find job opportunities, housing, healthcare, and education options for his children.
Cultural Fluency: Understand local customs and norms to feel more integrated and comfortable in the UK.
Language Assistance: A tool to translate website content and provide explanations in Hebrew.
Cultural Context: Information about UK norms and customs to aid David's integration and interactions.
Name:
Sarah Koval
Age:
32 Yrs
Occupation:
Former Teacher
London
Location:
Biography
Sarah, an Israeli immigrant in the UK due to political instability, faces language barriers, particularly in English. Still, she's determined to improve her family's life.
“ As a mother, I seek to regain my dignity, independence and autonomy in this phase of life”
Storyboading the concept
Storyboading the concept
Katia’s inquiry is sent by an email to an assigned org. expert.
Katia’s inquiry is sent by an email to an assigned org. expert.
A link is shared in a telegram group suggesting ‘context’ extension for helping Ukrainian refugees.
A link is shared in a telegram group suggesting ‘context’ extension for helping Ukrainian refugees.
Sarah installs context and proceeds to browse a topic on high traffic websites (job hunting).
Sarah installs context and proceeds to browse a topic on high traffic websites (job hunting).
The context extension triggers key words to be highlighted if culturally interpreted advice is available.
The context extension triggers key words to be highlighted if culturally interpreted advice is available.
Rolling over highlighted words prompts a window with a cultural translation and learn more button.
Rolling over highlighted words prompts a window with a cultural translation and learn more button.
Clicking the learn more button will generate related categories of FAQs to browse and expand.
Clicking the learn more button will generate related categories of FAQs to browse and expand.
Katia expands a category, which lists question/ answers with links to video explanation on youtube.
Katia expands a category, which lists question/ answers with links to video explanation on youtube.
Katia watches the videos in a pop-up window and then rates is she found it helpful.
Katia watches the videos in a pop-up window and then rates is she found it helpful.
Scrolling down, a window allows Katia to type in her own personal question.
Scrolling down, a window allows Katia to type in her own personal question.
Katia’s inquiry is sent by an email to an assigned org. expert.
Katia’s inquiry is sent by an email to an assigned org. expert.
The Org. expert researches her question and submits an answer for review to the context network.
The Org. expert researches her question and submits an answer for review to the context network.
Context has a closed network that allows org experts and MOVs to confer over the user questions.
Context has a closed network that allows org experts and MOVs to confer over the user questions.
A MOV is assigned to the question to give approval or suggest improvements to the expert answer.
A MOV is assigned to the question to give approval or suggest improvements to the expert answer.
Once an answer has been approved by at least two parties, it is sent to Katia by email.
Once an answer has been approved by at least two parties, it is sent to Katia by email.
Happy with the service, Katia now shares the downloads link for Context with her friends via text.
Happy with the service, Katia now shares the downloads link for Context with her friends via text.
Service Blueprint
Illustrating the journey of information between users and the backend, while capturing the evolving user emotions throughout the process.
research Insights
research Insights
Crisis
Crisis
Problem:
Informal communication, coordination & support
Problem:
Informal communication, coordination & support
Principle:
Advice coming from lived experience is most trusted
Principle:
Advice coming from lived experience is most trusted
Arrive
Arrive
Problem:
Refugees heavily reply on the ‘first point of contact’
Problem:
Refugees heavily reply on the ‘first point of contact’
Principle:
Leverage passionate people who want to help
Principle:
Leverage passionate people who want to help
Settle
Settle
Problem:
Services are split in silos, disconnected and inefficient
Problem:
Services are split in silos, disconnected and inefficient
Principle:
Connect organizations and enable outreach
Principle:
Connect organizations and enable outreach
Cultural Interpretation
Cultural Interpretation
+
+
Community Contact
Community Contact
+
+
Connective Tissue
Connective Tissue
CONTEXT PLUGIN
CONTEXT PLUGIN
03
03
IDEATE
IDEATE
Snippets from ideation process
Snippets from ideation process
Throughout various project phases, we engaged in extensive collaborative ideation, with each stage contributing to the ultimate refinement and finalization of the solution. This iterative process fostered creativity and innovation.
Throughout various project phases, we engaged in extensive collaborative ideation, with each stage contributing to the ultimate refinement and finalization of the solution. This iterative process fostered creativity and innovation.
Weekly Discussions
Weekly Discussions
Due to the geographical separation of the collaborators across two different countries, we conducted weekly discussions to deliberate on UX and UI requirements and explore opportunities for improvement.
Due to the geographical separation of the collaborators across two different countries, we conducted weekly discussions to deliberate on UX and UI requirements and explore opportunities for improvement.
USABILITY TESTING
USABILITY TESTING
Variation 1
Variation 1
Intro screen
Intro screen
Upon visiting the website, users find a welcome screen with two distinct choices: 'ask a question' and 'learn more.'
Upon visiting the website, users find a welcome screen with two distinct choices: 'ask a question' and 'learn more.'
Ask a question
Ask a question
Clicking 'ask a question' opens a new screen with a text box for typing and requesting answers.
Clicking 'ask a question' opens a new screen with a text box for typing and requesting answers.
Answer Screen
Answer Screen
This screen provides answers with related community-made videos. Users can vote on them, creating a feedback loop.
This screen provides answers with related community-made videos. Users can vote on them, creating a feedback loop.
Usability Test insights - variation 1
Usability Test insights - variation 1
The team of RCA made a 4-5 refugees use the plugin prototype to observe their behavior and get their feedback. Here are the results:
The team of RCA made a 4-5 refugees use the plugin prototype to observe their behavior and get their feedback. Here are the results:
Task
Task
To open the ‘context plugin’
To open the ‘context plugin’
Feedback
Feedback
Users felt the introduction screen was only increasing the number of clicks
Show the 'ask a question' button and highlighted words from the start to reduce clicks.
Users felt the introduction screen was only increasing the number of clicks
Show the 'ask a question' button and highlighted words from the start to reduce clicks.
Improvement
Improvement
Remove Welcome to context
Add hover to highlighted words to provide an immediate meaning
Add FAQs related to the web page
Remove Welcome to context
Add hover to highlighted words to provide an immediate meaning
Add FAQs related to the web page
Task
Task
To Ask a Question
To Ask a Question
Feedback
Feedback
There is no need for a different screen to type a question
The ‘ask a question’ flows is smooth
There is no need for a different screen to type a question
The ‘ask a question’ flows is smooth
Improvement
Improvement
The question button can change into a question box there itself eliminating use of another screen
The question can be made editable
The question button can change into a question box there itself eliminating use of another screen
The question can be made editable
USABILITY TESTING
USABILITY TESTING
Variation 2
Variation 2
Activation Prompt
Activation Prompt
In this version, there's no welcome screen. Users see highlighted words with dropdowns containing related Q&A.
In this version, there's no welcome screen. Users see highlighted words with dropdowns containing related Q&A.
Highlighted word
Highlighted word
When you click on a highlighted word, its dropdown opens to reveal the questions and answers.
When you click on a highlighted word, its dropdown opens to reveal the questions and answers.
Answer Screen
Answer Screen
Typing a question in the 'ask a question' box opens a plugin screen with direct answers and related community-made videos. Users can view, vote, and create a feedback loop.
Typing a question in the 'ask a question' box opens a plugin screen with direct answers and related community-made videos. Users can view, vote, and create a feedback loop.
Usability Test insights - variation 2
Usability Test insights - variation 2
The team of RCA made a 4-5 refugees use the plugin prototype to observe their behavior and get their feedback. Here are the results:
The team of RCA made a 4-5 refugees use the plugin prototype to observe their behavior and get their feedback. Here are the results:
Task
Task
To open the ‘context plugin’
To open the ‘context plugin’
Feedback
Feedback
Right side looks better than the pop-up.
Too many dropdowns to find answers.
Intro text is too long; it's important but not engaging.
Place 'Ask a Question' button before the text box for better user engagement.
Right side looks better than the pop-up.
Too many dropdowns to find answers.
Intro text is too long; it's important but not engaging.
Place 'Ask a Question' button before the text box for better user engagement.
Improvement
Improvement
Condense the intro text for precision.
Transform 'Ask a Question' into a two-click process: a button that, when clicked, becomes a text box.
Include general FAQs related to the website, not limited to highlighted words only.
Condense the intro text for precision.
Transform 'Ask a Question' into a two-click process: a button that, when clicked, becomes a text box.
Include general FAQs related to the website, not limited to highlighted words only.
Task
Task
To Ask a Question
To Ask a Question
Feedback
Feedback
The 'ask a question' flow is seamless.
To enhance visibility, consider adding thumbnails or icons to highlight related video links.
There is room for improvement in the user interface (UI).
The flow appears to be stuck in a continuous loop with no clear conclusion.
The 'ask a question' flow is seamless.
To enhance visibility, consider adding thumbnails or icons to highlight related video links.
There is room for improvement in the user interface (UI).
The flow appears to be stuck in a continuous loop with no clear conclusion.
Improvement
Improvement
Add a thumbnail to one related link.
Improve UI hierarchy with a buffer loader.
Include an email option for unanswered questions.
Add a thumbnail to one related link.
Improve UI hierarchy with a buffer loader.
Include an email option for unanswered questions.
04
04
DESIGN
DESIGN
Design System
Design System
The team of RCA made a 4-5 refugees use the plugin prototype to observe their behavior and get their feedback. Here are the results:
The team of RCA made a 4-5 refugees use the plugin prototype to observe their behavior and get their feedback. Here are the results:
PROTOTYPE
PROTOTYPE
We used all the information and feedback we gathered from multiple design concepts and wireframes feedback sessions with service providers and users, integrated that with our design system and started developing high-fidelity prototype to start designing interactions. Below is the analysis of the high fidelity wireframes.
We used all the information and feedback we gathered from multiple design concepts and wireframes feedback sessions with service providers and users, integrated that with our design system and started developing high-fidelity prototype to start designing interactions. Below is the analysis of the high fidelity wireframes.
Ask a question button lets the user type the question when the state changes on click.
Ask a question button lets the user type the question when the state changes on click.
The question can be edited there itself, minimizing the number of clicks.
The question can be edited there itself, minimizing the number of clicks.
If the users aren’t satisfied the answer, they can send an email to the community with their questions. After sending, they’ll receive a confirmation screen like shown below.
If the users aren’t satisfied the answer, they can send an email to the community with their questions. After sending, they’ll receive a confirmation screen like shown below.
The question dropdown displays answers with related video thumbnails. It also allows the users to vote and create a feedback loop.
The question dropdown displays answers with related video thumbnails. It also allows the users to vote and create a feedback loop.
Ask a question
Ask a question
Ask a question . . .
Ask a question . . .
Ask a question . . .
Ask a question . . .
Highlighted word:
On hover- a definition box of the same.
On click- questions and answers related to that word appears.
Highlighted word:
On hover- a definition box of the same.
On click- questions and answers related to that word appears.
The plugin can be activated from the chrome extensions.
The plugin can be activated from the chrome extensions.
Opens the plugin
Opens the plugin
User asks a question
User asks a question
CONCLUDING THOUGHTS
CONCLUDING THOUGHTS
Engaging in this project proved to be a pivotal juncture in our collaborative design journey. The extensive research phase, coupled with rigorous usability testing, not only broadened our understanding but also furnished us with invaluable insights, thus contributing significantly to the enhancement of the user experience.
Engaging in this project proved to be a pivotal juncture in our collaborative design journey. The extensive research phase, coupled with rigorous usability testing, not only broadened our understanding but also furnished us with invaluable insights, thus contributing significantly to the enhancement of the user experience.
FUTURE OPPORTUNITIES
FUTURE OPPORTUNITIES
The current project, an MVP, is poised for presentation to UNICEF, with strong potential for future public availability.
As we expand the database, the plugin can encompass a broader range of topics.
Integrating AI generation has the potential to enhance the plugin's functionality even further, promising exciting possibilities for its evolution.
The current project, an MVP, is poised for presentation to UNICEF, with strong potential for future public availability.
As we expand the database, the plugin can encompass a broader range of topics.
Integrating AI generation has the potential to enhance the plugin's functionality even further, promising exciting possibilities for its evolution.
