UI/UX case study: the creation process of the Doei App using the CBL methodology
On my last job experience at Apple Developer Academy — UCB I got to learn the best practice at iOS Design. We would be given challenges of 1, 2, 3 months to come up with an App from scratch and publish it at the App Store. Doei was born in one of those really short time challenges, giving us no choice but use agile techniques for design and development. My group was made of 4 developers (Matheus Ribeiro, Arthur Ravin, Afonso Lucas and Higor Chaves) and me (Juliana Furtado) as the designer.
But how did we end up in the donation scenario?
The Research Process
Our team began to brainstorm different themes that we thought we might’ve liked working with. At the end of the day we all agreed on choosing benefactors of charitable institutions as the main subject.
Our workflow was guided by Apple’s methodology CBL, so after finding out what our Big Idea was we moved on to the next step: the Essential Questions.
In this phase we ask away as many questions as we need to understand the subject and its scenario we defined on the last stage. It could be from 10 questions to 300 or as many as you want, it depends on how deep you and your team want to get into the subject and its details, the more the better. Here are some of our top questions that helped us move on to the next step:
- What is a benefactor?
- What types of benefactors there are?
- What limits help to those institutions?
- Where do I get info about charitable institutions in need?
- How those institutions ask for help?
After making all those questions together with the group we took our time to look for the answers, at this moment you don’t need to answer all of them. Your team can choose the ones they find more important for the project and do a research on that.
It is in that moment of questioning everything about the subject that you will eventually find a problem to be solved. What can possibly be going wrong at the donation community that our team could come up with a solution and present it to them? That’s when we define our Challenge.
The Challenge
After answering some questions and doing our research we found out the lack of benefactors wasn’t really the issue, but the access to charitable institution’s information. We had the challenge to make it easier to access those information and make the communication between the institutes and people willing to help easier and faster, converting them into loyal users and hopefully active members into the donation cause.
As we can see, technology is taking a big part of our daily life and that wouldn’t be different for those institutions.Their migration to the digital area resulted in most of them having their own website, but with the same problem: the lack of update and lack of constant maintenance. According to our researches people had a hard time getting the right and updated information about the charitable institution, most of the times the address and phone number couldn’t be reached.
The next step is move on to the Guiding Questions. This time we make questions specifically about our project, how will it be divided, what methodologies we will use, what kind of design… Down below are some of the guiding questions used in this project.
- How to solve the institutions needs?
- What kind of functionality can make the communication easier?
- What kind of platform our target is most familiar with?
- How to optimize the donation process?
- What informations about the institutions encourage people to donate?
Those are questions focused on how you and your team will specifically solve the problem you found and set as the challenge. It is suggested that you answer all of them, since they will be executed eventually in your project and you’ll want to know how to do that task in it.
Moving on to the Guiding Activities, the fifth step, we pointed out what we did to get all the information, what tools we used. In this project we had internet research support, visitations to the charitable institutions so we could understand more of the scenario we were dealing with and we had interviews with specialists of the area.
After pointing out what we did to get to all the information, we list where we found them. The next step is Guiding Resources. For this project we had help from great professionals that helped us to understand the scenario and validate our ideias during the process:
- Moema — Director of the Social Services Program of Universidade Católica de Brasília.
- Celso — Member of the Executive board of Lar Jesus Menino.
- Reginaldo — Information Technology Management, Information and Institutional Marketing Management — Anjos do Amanhã — TJDFT.
- Cyva Abreu — Substitute Supervision to families and school tutoring
Solution
Finally after all this research and data gathering we came up with our solution:
Develop an app that makes easier to get information about charitable institutions linked to children and teens placed in Distrito Federal along with the encouragement and engagement of donations to them.
We knew that besides our app we would have to make an website to collect all the info from the registered institutions so we could update the data in our app using the server. The charitable institutions have their own log in and can update what their needs are at the moment so the benefactors can find what is more viable for them to donate.
Prototyping
After going through all of the research process, I had the task to get into prototyping our first idea of the app. Since our time was limited, as soon as we defined the whole idea, I started prototyping and gathering ideas from the the whole team.
The prototype was simple and showed the main functionalities the app would have.
The App
Logo
After a 3 month challenge this is the result of our donation app called Doei. People can filter the institutions by their needs and location. You can also make a profile so you can keep track on your favorite institutions and also for further updates that would involve a lot more the user’s profile.
Our first challenge was to create the brand that would represent the whole idea. Therefore I incorporated the idea of angel wings to the name of the brand alongside with a very circular and smooth font to represent the tenderness of angels and also the tenderness of donating and taking care of those in need. The color blue also helps to communicate the calmness and serenity.
Screens
The app is composed by a log in screen where the user has the option to register with social media or create his own profile. Essential questions will be asked to create this new account.
Once set up the first screen the user will face is the map. In that section they will be able to see all the registered institutions and their location illustrated by the pins. Up ahead they will see a location filter in which you can choose which city you wanna search for the institutions.
To get more information about the institution the user has to tap on the pin and a card will come from down below almost until the middle of the screen. In that state they will be able to read the institutions’ name, what kind of institution it is and its distance from where they are.
If the user wants to know detailed information about the place, just swipe up the card and address, phone and their listed needs will appear. The user will be able to make the phone call and get directions all within the app just by tapping the buttons.
At the profile the user will be able to change their name and e-mail address and also see their favorite institutions.
The filter section will allow the user to search for institutions by their needs, so if the user has an amount of clothes to donate, they can filter all the institutions that needs clothes to appear on the map.
Next steps
Since it was a really challenging topic and there was a really short amount of time to fully develop the app and all the ideas our team had for it, our next steps are:
- Improve some of the design,
- change the filter screen to something that has more of the app characteristics,
- implement other functionalities at the profile screen so the user has more interaction with the app and the institutions,
- study better ways to make in-app donation possible,
- get even deeper in the UX by creating personas and customer journey map,
- usability testing,
- bug fixes.
Conclusion
The better way to develop an app that will reach its goal is to understand the most your target and be as empathic as you can be. In each new project you will learn something new and how to improve your skills and I can say for sure this experience taught me a lot more about UX Design and other methodologies I can use to improve the final outcome and to improve my professional skills. Everyday is a new learning.
The app is available at the App Store and our development process got published in an article as well in which you can read it by clicking here.
Thank you for reading!
