Social Good App

The Product

The app is for people who want to get an overview of possibilities where to get free or cheap food in a certain location.

---

The Solution

Crafting the Personas

Based on some interviews but also with secondary research in addition I created two personas that represent different user groups with different pain points and goals.

Sketching the Ideas

Within the ideation phase I started drawing wireframes for all the different pages of the final app, always with the different goals and needs in mind. This exemplar shows the homepage. The stars mark the elements that made it to the final screen (the last one).

Low-Fidelity Wireframing

These sketches were then transformed into digital wireframes using Figma. These are some example screens of the most important pages.

After creating all the lo-fi screens for the app a prototype was created with adding all the mandatory connectors. This one was then used for the usability study with real users.

Conducting a Usability Study

With a specific workflow in mind but also testing the general behavior of the app I conducted one usability study with 4 different testers. This was done with using the low-fidelity prototype.

The results were all documented in a spread sheet and after that transferred to an affinity diagram. This helped me to create the major issues of all the tested users and create themes out of this.

With defining the Prio0 and Prio1 insights that definitely needed to go into the next iteration, I created another lo-fi prototype that can be viewed here.

High-Fidelity Prototype

Now I had a really good base to step into the next phase – creating high fidelity mockups and building another prototype out of these. That was also the time to think about the whole visual appearance of the app.

I did some research on what would be a good color scheme for the topic and also what fonts to use. Creating real content for all the pages was another task as well as finding the right imagery for the app. My conclusion was turned into a sticker sheet, based on which I then created the individual screens.

In the following you can see some example screens of the final app together with an interactive high-fidelity-prototype. The overall appearance should be attractive and simple based on the user groups with an easy navigation and high contrast color to cover most accessibility standards.

Responsive Layout

As the previous work was mainly focusing on a dedicated mobile app that can just be accessed via smartphones, I started working on additional responsive layouts. These show a website version of the app in different resolutions for mobile devices, tablets and desktop computers. The structure for each is clearly defined in this sitemap.

What did I learn from the Social good app?

This app was another opportunity to completely go through all the phases of the design thinking framework: Emphasize, Define, Ideate, Prototype and Test but with a completely new topic and user group in mind.

And with the different user needs I saw that it’s very important to decide for what device to design first, a single app, a responsive website or in that case both.

The full case study with some more details can be found here. Have fun with reading 🙂