3

UX/UI Case Study: ParticipApp!

 3 years ago
source link: https://uxplanet.org/ux-ui-case-study-participapp-34d9440ef0b1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

UX/UI Case Study: ParticipApp!

A tool that gives you voice for the daily issues of your neighborhood

ParticiPapp a tool that gives you voice for the daily issues of your neighborhood
ParticiPapp a tool that gives you voice for the daily issues of your neighborhood

Introduction

During the 2 and a half months in our UX / UI Design Bootcamp at UXER School, we worked on the ideation and design of a digital product that would contribute to promoting citizen participation.

At first, we started developing our main subject which was Smart Cities that led us to the topic of our project.

As a result of analyzing all the fields that define the Smart Cities, we decided to put the focus on the people, and specifically on the Citizen Participation, as we consider that it is one of the fundamentals pillars for a city to develop socially and improve.

  • USERS: Urban citizens from 30 to 65 years old, with any level of technology usage.
  • PRODUCT: Mobile digital app.
  • TEAM: Andrea Camacho (UX/UI Researcher & Designer), Itxaso Ferreras (UX/UI Designer), Julia Besada (UX/UI Designer) and Litzanna Marmolejos (UX Designer & Researcher).
  • TOOLS: Slack, Miro, Hangouts, Photoshop, Figma, Maze.
  • STRATEGY & METHODOLOGY: Design Thinking & Lean UX.

Our goal was to get people actively involved to improve their environment, while creating a sense of community in them.

Current Context

We live in an increasingly individualistic society. Cities have become big places where everything happens very fast. More than half of the world’s population lives in cities with more than 300,000 inhabitants, and its growth has also accelerated since the end of the last millennium, so that by 2050 this percentage will already reach 70% of the world’s population.

At the same time, cities have become cold and impersonal places. According to various studies, the risk of suffering from anxiety is 21% higher for those who live in cities, who also have a 39% increase in the incidence of mood disorders. This is due, among other things, to the accelerated pace of life, but also to the lack of human contact, isolation and the feeling of loneliness felt by many people who live in large cities. These sentiments have also increased after the COVID pandemic.

As a conclusion, it could be said that people who live in big cities miss having close relationships with which to share projects, the “we would like to be part of something”.

However, despite the involvement of people in citizen projects has decreased in recent years, so we were not very clear about what people think and feel about citizen participation.

Understanding the problem

To clear up all the doubts that arose, we decided to immerse ourselves in a research process applying the Design Thinking method in which we applied both qualitative and quantitative techniques. Our objectives at the beginning of this process were:

  • To understand what people think and feel about citizen participation.
  • To know if they perceive needs or improvements in the environment in which they live.
  • To know how they get involved in order to improve their environment.
  • To understand what they need or lack when participating.

Research

To begin with the study we conducted a Desk Research to better understand the concept of Citizen Participation and what it encompasses. We visit pages of town councils and the government of Spain, official studies and media and magazines on participation. In them we discovered the types of participation that exist, the definitions of the term, the participation data of recent years, success stories and participatory experiences and the methodologies applied in them.

We continue with a benchmark in order to find out what apps or pages exist and what they contribute. We principally analyzed the following:

  • Change.org
  • Decide Madrid
  • Citizenlab
  • Civitas
  • Línea Verde
  • ¿Tienes Sal?

Most are portals created by the councils or municipal governments. They allow citizens to create proposals or allow incidents to be reported at the municipal level. Those that are not municipal tools are used to obtain signatures or to contact people. However, we did not locate any platform or app that was intended for citizens to promote the community nor are they focused on improving neighborhoods. Nor is there any tool with which you can track your created proposals: you only see the number of signatures collected, but you don’t know what happens to them after getting them.

Exploration:

We continue to carry out a Mind Map in order to identify the different topics that we wish to explore during the interviews. Thus, we were able to define the topics we wanted to investigate with our interviews.

Mind Map to identify the different topics that we wish to explore during the interviews
Mind Map to identify the different topics that we wish to explore during the interviews

Once this was done, we conducted 16 interviews with people of different ages and profiles. We were especially interested in knowing how they interact with their neighbors, what worries them, how they get involved and what would encourage them to participate more. The interviews provided us with a large amount of information that allowed us to establish initial hypotheses and detect some problems to which we could provide solutions.

Some of the hypotheses we validated were:

  • Citizens believe their opinions don’t count.
  • People don’t know projects in which they could collaborate.
  • They aro not actively involved in decision making.

After the interviews, we conducted more than 150 surveys from which we reached conclusions that helped us validate our initial hypotheses. For example: when asked how they would prefer to participate in initiatives in their neighborhood, almost 37% answered that through a participatory app, followed by 33% who would prefer to do it through neighborhood assemblies, and 80% consider that an app that allows them to share initiatives or complaints about the neighborhood with its neighbors would be useful (30%) or very useful (50%).

Image for post
Image for post
Image for post
Image for post

Analysing the results:

Once all the previous investigation has been carried out, we organized all the information obtained in blocks in order to be able to detect:

  • Behavior patterns
  • Motivations
  • Frustrations
  • Verbatims

Then, in a process of convergence, we were able to identify and group the problems that arose, the different types of existing concerns or needs, and the feelings that all participants in our research shared.

Image for post
Image for post

Among the most relevant discoveries or insights we obtained, the following stand out:

  • Most people consider themselves to be informed or that they are proactive when it comes to look up for information. However, they do not know about nearby initiatives or how they can participate because they do not have a clue on how to obtain that information.
  • Most of them are aware of their low participation and the majority would like to be more implicated as they believe if people get more involved, more things could be solved.
  • They are not more proactive mainly because they do not have time (family responsibilities, schedules, etc.) or because they do not know close projects in which they can get involved.
  • Many people are indifferent or disappointed when it comes to participating: they think that they will not be heard or that their protests will be of no use.
  • They all detect many areas of improvements in their neighborhoods.

Define

PERSONA

Thanks to the research carried out, the interviews and the multiple responses obtained in the survey, we define the Persona Archetype that will help us understand the frustrations of our users, their pain points as well as the opportunities for improvement that can be made.

The Persona Archetype that will help us understand the frustrations of our users, their pain points and opportunities
The Persona Archetype that will help us understand the frustrations of our users, their pain points and opportunities

In this phase of convergence we find Paula, worker, mom of a toddler and with no time to participate in activities beyond her duties and family responsibilities. Despite her fast pace of life, Paula would like to be more involved in her neighborhood.

Image for post
Image for post

Empathy Map

Once our archetype was defined, we wanted to understand how Paula felt and her thoughts, which things frustrated her and which ones motivated her. The idea was to understand her better and empathize with her.

Image for post
Image for post

Customer Journey

Building the customer journey we wanted to accompany Paula from the moment she leaves the house and faces the continuous dirt on her street until she takes the initiative and expresses her complaint.

Paula’s customer journey from the moment she leaves the house and faces the continuous dirt on her street until she takes the
Paula’s customer journey from the moment she leaves the house and faces the continuous dirt on her street until she takes the

Along this path, we identified the pain points that most affected Paula:

  • At first Paula gets angry about the lack of cleanliness that her street experiences continuously and feels that she needs to get involved.
  • Second appears the confusion. Paula looks for ways to express herself but feels lost and does not know their options to complain.
  • Later, we found the doubt. Paula thinks social networks could be an option, since she is not aware of a more direct channel with a high repercussion. But at the same time she wonders if it will really help.
  • In the next stage, Paula decides to make her complaint but does not know if there will be more people who share her frustration or even if there are already initiatives created in the neighborhood that address the issue that concerns her.
  • Finally, we find Paula’s distrust that having already made her complaint, she doesn’t know if it has been done well, since it seems that it is not having the impact she expected. Furthermore she does not believe that it will reach the institution that can make the changes in her neighborhood.

Ideation

We begin our design challenge once we identify our archetype persona and its problems and needs.

HMW

Once here, we use the HMW technique (How might we…?) in order to define our objective, identifying actions, users and expected results. It was about doing a divergence exercise, in which each of us would define every of these components, and which would conclude with convergence, since we voted for the ones that most convinced us.

How might we…? Design thinking
How might we…? Design thinking

Finally, we decided to group the three HMWs into one:

How could we get people to participate without investing a big amount of their time, fostering a sense of community and obtaining results?

This is the goal that we have always had in mind when defining our solution.

Crazy 8’s

We use this technique to devise in a more detailed way what our solution idea would be like.

Crazy 8’s — Design Thinking
Crazy 8’s — Design Thinking

After an exercise of divergence, we presented the ideas that each of us had had. We ended up converging, making the decision to group the four ideas into one. The result was the following:

It is an app that, using geolocation, allows the user to mark or indicate the needs, flaws or improvements in their neighborhood. You can indicate which categories interest you in order to participate and join existing proposals and even create them. The most voted or followed initiatives will be communicated to the institutions publicly (eg, via Twitter, sending them to the relevant district boards) and also to users.

Users will only receive the information about their neighborhood that interests them in order to participate in what is relevant to them.

Reward: obtain points for sharing initiatives to, in this way, promote the image that being participatory generates individual and common benefit.

Later, we discarded the idea of ​​offering a reward to users, since we consider that people will feel motivated to participate if they see that their proposals are heard.

Value Proposition and Business Model

After working through the ideation phase and gathering a ton of information, we decided it was time to write our value proposition. To do this, we use several canvases in which we developed Paula’s joys, frustrations and works. In this way, we decided that our app would serve to help citizens of the same neighborhood who want to be actively involved to reduce their discomfort and create a feeling of community, at the same time that their neighborhoods improve.

Just as important as a well-founded value proposition is having a business model that supports the entire idea. Therefore, with the help of a Business Model Canvas, we define the way in which our app would get financed and all the expenses derived from its maintenance.

Business Model Canvas
Business Model Canvas

Being a non-profit app, we discard the idea that there are subscriptions or that people have to pay to use it. However, we have found a very important business opportunity in the information that our app collects. In this way, our main source of income would be both municipal and local political institutions for which this information can be a very useful help.

User Stories

With the help of the AGILE and SCRUM methodologies, we break up our value proposition into smaller, more manageable pieces, better known as user stories. It is the expression of a functional increase. Each UUSS carried out corresponds to the delivery of a piece of the value proposition that makes the final product enrich and complement each other.

User Stories — Scrum methodology
User Stories — Scrum methodology

Then, we refine them through an example mapping to obtain a better performance from each of them:

Image for post
Image for post

Next, we prioritize the functionalities that our MVP should have, based on the UUSS that we considered most important. For this we use a sequencer in which we order the characteristics from highest to lowest importance.

Image for post
Image for post

And, after this prioritisation exercise, we developed our MVP, which is nothing more than an excuse to validate our hypotheses or UUSS. Typically its goal is to satisfy a user’s needs. We developed only the features that we included in the first three points of the prioritisation:

Image for post
Image for post

This is how ParticipApp! arises, our solution, which consists of giving voice to the daily issues of the neighborhood.

Wire and task flows

Information architecture is the structure and organization of a product. In addition to helping users find what they are looking for, it also talks about who we are, gives an overview of the product and a strategic foundation. After analyzing the needs of our product, asking ourselves questions to understand our users, and inventorying our content, we reached into the wire flow of our solution.

Image for post
Image for post

About the task flow, we designed two based on the main two tasks our users will do while using our product.

Image for post
Image for post
Task flow of creating a new complaint
Image for post
Image for post
Task flow of supporting an existing complaint

Prototype

Naming & Brand

Knowing our target audience, market, problems and needs that we had to cover as well as the value proposition of our solution, it was time to define our brand values. We wanted our APP to be:

  • Committed to movements of change
  • Participative
  • That brings people together creating community
  • A meeting space between neighbors of the same locality
  • Encouraging proximity
  • Human-centered
  • Credible
  • A loudspeaker for all citizens

Regarding the personality of the ParticiPapp! brand we define ourselves as:

  • Brave: we are not afraid of changes.
  • Restless: we like to find out what is happening around us.
  • Non-conformists: we strive to improve our environment.
  • Committed: we believe in the power of unity
  • Close: all voices are equally important.
  • Dynamics: nothing slows us down.
  • Empathic: We are moved by people and their needs and that is why, with our app, we wanted to give them a voice. We care about people and besides their problems are ours too.
Image for post
Image for post

Finally, the name chosen was ParticipApp!, which included the core of the product, which was citizen participation, added to the mobile app as a means of expression.

Our isotype is the nexus of the P with the communication icon and the location. Three key elements in our app that also differentiate us from the competition.

A participative, communicative app with a limited location to be up to date with the latest things that happen in your neighborhood.

Image for post
Image for post

Design Thinking

One of the objectives we set ourselves to achieve this was that our app could be used and understood by everyone, regardless of their age or how well they handle apps.

For this, in addition to using a close and familiar language, we opted for a clean design that offers the information that people are looking for in a structured way so that no one gets lost.

Our app is based on unity to achieve a common goal, that is why we have chosen purple and yellow colors because they represent power, will, optimism and friendship.

Image for post
Image for post

The icons help guide users, using universal metaphors that everyone can quickly identify. Simple, friendly and close icons.

Image for post
Image for post

The buttons on Participapp! They are made up of rounded edges. In this way we flee from the formalities, being in accordance with the copies that accompany them. Using purple to perform the main actions of the application such as the call to action for support, pale purple when proposals and initiatives are supported, and yellow for any highlighted action such as registering, posting a proposal or changing the display of a map in the list of complaints and initiatives.

Image for post
Image for post

Regarding the typography, we chose Raleway for the headings and highlights and Lato for the paragraphs as the font style. They are non-serif fonts, which we found interesting because they are intelligible, full-bodied, and easily adaptable to different devices and especially for those who have vision problems.

Image for post
Image for post

On the other hand, we put a lot of emphasis on the information cards and the form fields. Since it is an app created by and for the user regardless of their age. For that reason they have to be easy and intuitive.

Image for post
Image for post
Image for post
Image for post

Prototype

From our prototype, it is worth highlighting some of the elements that we have included in the product that it is what differentiates us from the rest of the existing applications about this theme.

One of them is that the user must enter their location automatically or manually. This is one of our main values since, in this way, the user will only see the proposals created in the neighborhood in which they live or in the area of ​​interest they have selected.

In addition, the user will receive notifications about the number of supports that their proposals have received and also when these are sent to the responsible institution. This is another important point of our app, since we consider it essential that users receive feedback so that they want to continue participating.

And finally, we would like to mention that the user must register only to support or create initiatives, never before if they do not want to, and will do so for free.

Testing

In order to validate the prototype developed we tested our solution with 8 potential users.

Due to the health crisis situation the testing sessions were conducted remotely and we received the following feedback that we wanted to separate between positive — those features or aspects the users liked — and enhancement.

Positive feedback:

  • The app provides a solution to a need shared by users. It seems to everyone an interesting and necessary topic.
  • The app is intuitive and easy to use. The operation of it is quite well understood.
  • The language used is close and intelligible.
  • The colors used and the use of them are liked by users because they facilitate the understanding of the app.
  • It is positive that the user receives notifications to be informed.
  • That registration is not mandatory at the beginning is considered a plus.

Enhancement feedbak:

Modal:

  • It is invasive, it appears 20 seconds after the user accesses the home, distracting the user from their reading and in some cases confusing them.
  • Also the modal occupies the entire screen

Copy:

  • The use of the word complaint could be replaced by terms such as “Proposal” or “Opportunity for improvement”, which are more collaborative.
  • Home page: review the copy used on this section and make it more intuitive. Create a shortcut in order for people to be able to consult or create initiatives.

Tab bar: the icon for looking up initiatives should have more visibility.

Hamburger menu: it is not very practical so it could be removed.

Conclusions

I have deeply enjoyed this project in each of its phases. Not only because of the social issue we arrived at after the research process, but also because we were involved in each of the phases of creating a digital product, ParticiPapp! It is the result of teamwork and the contribution that each of us made throughout the development.

We believe in this project so the next step we would like to take once we finish some secondary screens would be to continue with the development of the product.

I want to end by thanking the good atmosphere and support that I have received from my team and to UXER School for preparing me for this adventure in a discipline as fascinating as the user experience.

Thanks also to you for reading my article 👋🏾


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK