Interaction Design: Youth Access to Green Spaces

Emilie Isch
5 min readMar 31, 2021

An interactive Adobe XD prototype of an android application designed for Youth in inner-city Johannesburg.

“How might we provide access to safe and inclusive green spaces for youth of inner-city neighborhoods in Johannesburg, South Africa?”

The problem statement above targets the United Nation’s Sustainable Development Goal #11 for Sustainable cities and communities — more specifically #11.7 which is to provide access to safe and inclusive green spaces and parks.

The following will lay out my activities, and thoughts behind the design process which led to my final XD prototype of the android application.

Building Empathy

The first step was to establish empathy with my target user group. This was done using an empathy map. Since I would not be interviewing the target users for this project it was important to conduct thorough research, really delving into who these individuals were and how they thought. The needs and insights boxes at the bottom were rooted in this research.

Empathy map

User Stories

After this I needed to identify some possible user stories based off those needs and insights gathered during the empathy building phase. User stories essentially help to describe who the user is, and what it is they want, and what they want is hopefully what they’ll get from the app.

User stories

App Name and Definition

I need to come up with my app name, so to give it life and character. I decided to call the app, Amapaki, which means ‘parks’ in Zulu (a common language spoken in South Africa). Then I established what my app definition would be.

Amapaki is an app that empowers youth to access safe and inclusive parks and green spaces through an interactive map, connecting them to other youth with sport and activity planning.

Task Saturation

Based on the user stories it was time to begin thinking of what tasks I wanted the app to have. In order to do that I used a popular design thinking strategy called Crazy 8’s. Below is what I came up with during that brainstorming session. It’s basically three stages of design ideation, with each stage getting more focused on key ideas. After doing this I went ahead and chose which tasks I really liked, and which made sense with the user stories in mind, and saturated them into three high level themes: discover, monitor, and connect.

The three stages of Crazy 8’s (From the top left, stage 1, to the bottom right, stage 3)
Task saturation

Activity Flows

In this nest phase, I took only the user stories which matched the tasks from my task saturation, and mapped out some basic end to end flow structures. I began to imagine how I wanted the user to travel through Amapaki, what steps they would be required to complete, and how easily it would be to move between tasks. This was a more challenging phase since breaking down an activity into a well designed flow takes a clear thought process. I wanted the flows to be seamless, and sharp.

Activity flow map

Screen Sketches

Once my activity flows were done it was time to sketch what I mapped out. Another challenging phase for me. While I love the mind to pen connection that comes from sketching your ideas, it does require patience and ease on my end. I sketched over 30 screens, but only kept about 20. Through sketching I was able to better discern where certain elements of my original plan for flows would not work out, and where some of my tasks led to awkward stalls. During this phase it was important to get a second opinion, someone who could test out the app in its messy pencil look. So I laid out each screen and had my brother ‘use’ the app while pretending to press on buttons moving through each flow. This was eye opening since it was the first my designs were being put to the test.

Eg. of screen sketches

Adobe XD Design

After my brother gave his feedback, and I was more or less happy with my sketches it was time to move onto the high fidelity design stage. This is where I used Adobe’s XD software to create, design, animate, and prototype interactions of my screens. This was a relatively new software for me so it was both frustrating and exciting to learn to use. I quickly fell in love. I tried and tested various interactions, and was met yet again with some flows that needed a lot of help. Just as I did with my pencil sketches, I was hungry for feedback. So this time around I found myself either showing, or asking people around me to test it, or to just simply see what they thought. It was fascinating to me that I could miss how the position of a button would cause discomfort, or where a task did not seem to be properly be embedded in the larger flow. This is why testing your designs on fresh eyes is so crucial to your designs.

I realized that design is sort of a never ending process. There are still parts I thought I could improve on. But I ended up with a design I love, and believe has a lot of potential. There is still a lot the app could do in effectively solving some of the user stories and needs. But if youth in Johannesburg could use this app, I believe a lot of good would come from it.

Access to safe and inclusive green spaces and parks is not a privilege. It’s for everyone. Amapaki is one way that could be made possible.

Link to the XD prototype: https://xd.adobe.com/view/064d837e-beb2-4cf3-9d64-a723a8bdb048-531e/

--

--

Emilie Isch

MA, Urban and Regional Studies. Researching smart cities, urban utopias, and technology.