UX/UI Case Study: ParticipApp!. The app that gives voice to the…
By: Andrea Camacho
Tags: UX Design, UX Research, UX, Ux Strategy, Ux Writing

Next, we prioritize the features that our MVP should have according to the user stories we consider most important. To do this we use a sequencer in which we order the characteristics from most to least important.

And, after this prioritization exercise, we elaborate our MVP, which is nothing more than an excuse to validate our hypotheses or UHHU. Normally, its objective is to satisfy a need of the user. We develop only the characteristics that we include in the first three points of the prioritization:

This is how we created ParticipApp, our solution, which consists of giving voice to the everyday things in the neighborhood.

Information architecture, wire flow (site map):

Information architecture is the structure and organization of a product. Besides helping users find what they are looking for, it also talks about how we are, gives an overview of the product and a strategic base. After analyzing the needs of our product, asking questions to understand our users and inventorying our content, we arrive at the wire flow of our solution.

Branding:

After defining our target audience, our business model and after understanding what problems we had to solve, we now had to define our values as a brand.

We wanted to offer a product committed to change, participative and helping to create community; a meeting space between neighbors in the same area, which acts as a loudspeaker for all citizens and is perceived as human and close to people.

In this way, we define ourselves in terms of the personality of the Participapp brand:

Brave: we are not afraid of change.

Restless: we like to know what is going on around us.

Nonconformists: we strive to make our environment better.

Committed: we believe in the power of unity

Close: all voices are equally important.

Dynamic: nothing stops us.

Empathic: We are moved by people and their needs and that is why, with our app, we wanted to give them a voice. We are concerned about people because we are too.

Naming:

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

Our isotype is the link between the P and the communication icon and the location. Three key elements in our app that also differentiate us from the competitors.

A participative and communicative app with a limited location in order to be up to date with what is going on in your neighbourhood.

Design System:

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

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

Our app is based on the union to achieve a common goal, that’s why we have chosen purple and yellow colours because they represent power, will, optimism and friendship.

We use the colour purple to perform the main actions of the application and the support actions. The pale purple for the actions carried out (when the proposals and initiatives are supported). Yellow for any highlighted action (registration, publishing a proposal or changing the display to a map in the list of complaints and initiatives).

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

The buttons on Participapp! are composed of rounded edges. In this way we avoid formalities, being in accordance with the copys that accompany them.

We chose Raleway for the titles and highlights and Lato for the paragraphs. These are non-serif fonts, which we found interesting because they are intelligible, full-bodied and easily adaptable to different devices and above all for those people who have vision problems.

On the other hand, we put a lot of emphasis on the information cards and form fields. As it is an app created for any type of user, the cards had to be easy to understand and intuitive.

PROTOTYPE

Onboarding:

When the user accesses the app for the first time, she/he will receive an onboarding where the operation of the application will be explained in 3 short steps. Once you have finished you will have the opportunity to continue browsing without the obligation to register.

Location:

The user must enter its location automatically or manually. This is one of our main values and is what differentiates us from other solutions because the user will only see the proposals created in the neighbourhood where he lives or in the area of interest he has selected.

Home:

Once this step is completed, the user arrives at the home page. There she/he will see a random selection of proposals and a ranking of the most supported, tht are the ones that are closest to being sent to the institutions.

After 20 seconds, a modal window will appear reminding you that you can find out or express yourself.

In this way, the user can access the proposal consultation section or the form to create a new one.

Entérate (consult) :

If the user clicks on “Entérate” (consult section) , they will be taken to a screen where they can choose between complaints (suggestions for improvement) or initiatives (activities or proposals from citizens). The user will also have a map view available in which it will be easier to locate them.

Filter:

There is a filter that allows the user to select the categories that interest her/him and thus to visualize more easily the proposals of the topics that she/he wishes to consult.

Extended complaint:

Once here, the user will be able to expand the proposal of his interest in order to read it carefully and, if he agrees, to support it. The user will also have the option to share it if they wish and to interact with their neighbours through a chat.

Create:

What if the user does not find any proposal with her/his concerns? In that case the user can create a new one and spread it through social networks, since the purpose of the app is that the complaints get all the support possible.

Notifications:

In addition, the user will be notified of the number of supports his proposals have received and also when they are sent to the responsible institution.This is another important point of our app because we consider it very important that users receive feedback to encourage them to continue participating.

Registration:

And finally, we would like to mention that the user will have to register only to support or create initiatives, never before if she/he does not want to, and she/he will do it for free.

Here is the video that shows how our app works:

USER TESTING:

We tested the app with a total of 8 people.

Positive feedback:

The app gives solutions to a need shared by the users. Everyone finds it interesting and necessary.

The app is intuitive and easy to use. The functionality of the app is well understood.

The language used is close and intelligible.

The colours used and the use of them are pleasing to the users because they make the app easier to understand.

It is positive that the user receives notifications in order to be informed.

The fact that registration is not mandatory at the beginning is considered a point in favour.

Improvement feedback:

Modal window: is invasive because it takes up the whole screen and can be a problem if the user wants to check the app for the first time.

Copy: The word “complaint” could be replaced by terms such as “Proposal” or “Improvement Opportunity”, that are more collaborative.

Home: review the copy of the home page to make it more intuitive and create a direct access for people to consult or create initiatives.

Tab bar: check icon for consultations and give it visibility.

Burger menu: not very useful; could be removed.

CONCLUSION:

After 3 months of intense teamwork we were able to finish a project that came out of nowhere.

It is impressive to see how through active listening, empathy and coordinated teamwork, we were able to find an effective solution to a problem. Starting from scratch, we were able to reach coherent conclusions and define a useful and real product.

I have been lucky enough to work with 3 excellent colleagues ( Julia Besada Viñas, Litzanna e Itxaso Ferreras) who have made the project enjoyable and fun as well as interesting.

I am also grateful for the help that UXER School has given us during this time, with the knowledge it has transmitted to us and with the constant follow-up and feedback it has given us in order to improve day after day.