The UX/UI team's main goal was to understand the user and try to define their needs, frustrations, and their motivations for using our Dots. web app. We did this, for example, by organising a brainstorming session with the Kona B team, conducting research on the experience of refugees and people in need, creating user personas, user journies and wireframes, and interviewing different kinds of people with connections to Senegal (e.g. we spoke to a Senegalese citizen based in Geneva, Abdou, and a refugee living in Senegal, Loua) as well as underserved people in other parts of the world (e.g. we spoke to a Peruvian woman from Lima, Elizabeth). These real life experiences provided us with invaluable insights - both into Senegal's social landscape, and into the prioritisation of needs around the world (given that the intention is to replicate this web app in other countries worldwide). The UX work combined not only brought us closer to the types of users that might interact with Dots, it formed the basis for many of our design decisions (i.e. main features, user interface colours, visual imagery, etc.).
One of the first team exercises we did was a brainstorming session on the user needs, motivations, and frustrations - not only was it a useful way to understand and define the types of users that might interact with our web app, it was also a great team building activity. Our Figma jam "inspiration" board was the main tool for this. The below image can be viewed in more detail on our Figma design page: https://www.figma.com/file/F0nGn8xVPq6rsHqWRG5SPg/UX-Design-Sprint?node-id=0%3A1
A significant challenge for the UX team was to know and understand the different types of users that would be interacting with Dots. A typical UX sprint involves conducting user interviews. However, this was not possible, at least in the beginning of the project. One of the ways we tried to overcome this knowledge gap was by researching the experience of refugees and migrants and, in particular, how they might use technology to access support services. The following research paper https://www.rand.org/pubs/research_reports/RR4322.html discusses the role that technology plays in the lives of displaced people and included interviews with 6 different focus groups of refugees. It offered some interesting insights into how people in vulnerable situations interact with technology (e.g. privacy/data concerns, connectivity issues). We also did some research on mobile apps with similar objectives/mission to Dots. (e.g. RefAid, I-Need Switzerland).
Initially we created a user persona (based on our research and brainstorming) using a fictional character "Khady", a domestic abuse survivor. We mapped out a user journey for Khady, which was a useful exercise in the sense that it brought up some questions regarding how a vulnerable person like Khady might perceive the app and the importance of having reassuring messaging and/or visual imagery to build trust and make her feel secure when using it. Later on we were fortunate to interview Loua, a refugee living in Senegal, who was able to give us his lived experience as a vulnerable person trying to access basic services for himself and for his family (e.g. primary education for his daughter). We also spoke with Elizabeth, a woman from Peru, who said she would benefit from the Dots. app, particularly in terms of accessing education for her child or projects that empower women. These meetings showed us that, globally, people often have similar needs, concerns, and use for a tool like Dots., despite being from different geographical regions and cultural backgrounds.
https://www.figma.com/file/F0nGn8xVPq6rsHqWRG5SPg/UX-Design-Sprint?node-id=2%3A183
https://www.figma.com/file/F0nGn8xVPq6rsHqWRG5SPg/UX-Design-Sprint?node-id=2%3A184
Refugee in Senegal: Interview with Loua.txt
Senegalese citizen: Interview with Abdou.txt
Peruvian citizen: User research - Elizabeth.xlsx
Before building the wireframes and mockups, we decided to do some basic sketches of what we thought the web app could look like, in particular, the homepage, the quiz, and the table of organisations. It was a helpful way to visualise key features and functionalities of the web app (e.g. for the quiz, having a progress bar and a back button). For a closer look, check out our Figma design page: https://www.figma.com/file/F0nGn8xVPq6rsHqWRG5SPg/UX-Design-Sprint?node-id=2%3A185
The primary tool we used for this part of the design phase was Figma. Our wireframes and mockups can be viewed at the below link. https://www.figma.com/file/F7R0hfMA46SMYNVa8MnPHV/Wireframes?node-id=0%3A1
To avoid confusion between Kona Connect as a whole and the service offered by Dots, we found it appropriate to create a new visual identity for the application. By abstracting the original logo and exploring the “connect the dots” metaphor, we arrived at a new logo design which is simultaneously recognizable as being part of the Kona brand while also taking on a life of its own. There are two distinct versions of the logo - one for large format / print and the other for within the app itself.
In the end, we decided to use a colour palette similar to Kona Connect since Dots. will be operated by them, and we wanted to maintain a link both to Kona and to our reimagined logo for Dots. We also went with slightly softer colours than what we had originally conceived.
Using Figma, we created an "inspiration" board to share ideas, brainstorm, and document some of our designs. https://www.figma.com/file/9pduIVje8vDdGgXf4DkydV/Inspiration?node-id=0%3A1
Figma was also our main tool for working on wireframes and mockups.
Adobe Illustrator was used to create the logo.