See how the UX Design process in solving a problem in the social and community economic business field.
A minor loophole in the business rule was responsible for pausing one of the main services offered by the News Agency of the Favelas (ANF), which has financially benefited over 4,000 families in more than 1,100 favelas in Brazil.
The minidoor Social
Get to know more about Minidoor Social by visiting their website and discover a variety of ways to help.
Click and go to Minidoor Social’s website.
A brief summary of the business.
Minidoor Social is an out-of-home media service in favelas that was established in 2014 with the aim of creating a sustainable cycle of advertising within the communities.
The project benefits both entrepreneurs, who can advertise their products or services to their target audience within the favelas, and the residents, who receive payment for temporary rental of their home facades as advertising space.
Major brands have advertised through Minidoor Social.
Current Scenario and Problem Situation.
A customer made an interesting request that, in theory, would make it easier to track the installed advertising pieces at the display addresses, with payment to the display being tied to visual confirmation of the board at the address. They called this control ‘visual check’, which was done as follows.
The customer wanted to use a service like Google StreetView to view the installed advertising pieces at the registered addresses and make payment to the display upon visual confirmation of the board at the address.
This led to a series of problems in the service closure process, because:
- Google’s service does not provide up-to-date images.
- We had difficulty capturing some geolocation data.
- Some geolocation data did not match with addresses.
- It increased the workload for installation agents.
- There were many papers and spreadsheets to manage.
- Etc. (We had many problems)
In this contract update, payment to the homeowner was conditioned on the success of the visual check, and as a result, homeowner did not receive their payment at the end of the campaign period, as agreed.
[1]
As a result, the News Agency of the Favelas (ANF) was forced to suspend the service, fulfill the commitment to payment to the homeowner, and rethink how they could modernize to meet customer demands and prevent the problem from recurring.
Back on track: Design process. Stages of proposed solution.
Double Diamond
With the intention of expanding the understanding of the problem, I used the Double Diamond tool to map divergent and convergent stages to guide the solution closest to the need.
With the intention of expanding the understanding of the problem, I used the Double Diamond tool to map divergent and convergent stages to guide the solution closest to the need.
Desk Research
In the first stage of discovery, through meetings and research, I was able to expand the understanding of what Minidoor Social was and get to know it in numbers. I learned that 4,177 families had been benefited. Over 4,000 plates were recycled. It was present in more than 1,100 slums, and over 500 thousand reais had already been distributed in income.
Glossary
In the initial conversations, I was introduced to a series of new terms. So, I created a glossary to adopt the language that constitutes that service.
Questioning
After the first meetings, new questions arose. And much of what seemed obvious needed to be explicit and understood. Thus, a list of questions was generated, classified among certainties, doubts, and assumptions that guided the exploration for a good starting point for the next meetings.
The 5 Ws
In this detailed analysis of important information, I used the 5W method to better contextualize the scenario. Thus, I could analyze who it is about, what happened, when the fact occurred, what motivated it, and where it happened.
How might we?
At the peak of the discovery stage and amid so many questions and assumptions, knowing “how might we” became a powerful question to generate different opportunities to reflect on the conflicts that were on the table.
BenchMark
An important task to broaden the understanding of Minidoor Social involves knowing its competitors. Analyzing… (the sentence seems to be incomplete, please provide more context or complete the sentence so I can translate it accurately).
Proto-persona, persona, and user journey.
The creation of proto-personas is a common practice to represent the profile and behavior of fictional users who represent real users. Through interviews, we were able to gather information about users’ needs, desires, and behaviors, as well as their opinions about the product in question. This allowed us to validate or adjust the proto-personas, ensuring that the design solution meets the expectations of real users.
Understanding the stakeholders we have in the project and analyzing the interaction between them, we defined that the campaign coordinator should be the user whom we should, at this first moment, focus our attention on and plan a solution that serves them.
User Journey Map
In order to obtain a more complete understanding of the user, mapping the user journey is a fundamental practice. This involved visualizing the path that the coordinator follows to achieve their objectives. Mapping helps to better understand the needs, expectations, and challenges that users face in the minidoor. Describing this path allowed us to identify the stages, problem situations, points of frustration, thoughts, feelings, and opportunities to improve the overall user experience.
Access the user journey map for campaign coordinator.
Validation stages.
After we got to know our stakeholder and understood which task would assume the role of the minimum viable product, we started the validation stages.
The first validation was based on a sketch frame, where the initial versions of the visual interface emerged based on the project’s needs and objectives. These versions were evaluated through tests with real users and feedback from relevant stakeholders. This helped us identify areas for improvement and make adjustments to the interface to meet user expectations.
We adopted an iterative and incremental approach in designing and validating visual interfaces, where with each feedback cycle, we learned and proposed continuous improvements to the interface in successive stages.
The second validation involved the gradual addition of elements to the visual interface as the project progressed. This allowed us to test and validate each new element as it was added, enabling continuous improvement of the interface over time.
We presented, tested, and collected new information with the stakeholder through our prototype.
You can navigate the prototype by clicking here. Second validation.
As more feedback was obtained and more insights were gained, the iterative and incremental process became an efficient and effective approach for creating and validating the third validation and visual interfaces, ensuring that they are designed based on the real needs of users and provide an enhanced experience.
In turn, we also presented this prototype to the user and once again conducted another validation to obtain new feedback and continue advancing the proposals.
Click here and browse through this low-fidelity prototype.
The user validations guided us to improve the proposals based on the new information obtained, evolving the prototype into a more complex interface with more details to meet the need and get closer to solving the problem in the fourth validation.
Browse through the fourth validation prototype
Metrics
I chose three metrics (success rate, task completion time, and user errors) for my last usability test based on the low-fidelity prototype.
These metrics allowed me to assess whether the users who participated in the tests were able to successfully complete tasks, identify which tasks took longer, and determine if there were interface issues leading to errors.
The data extracted from these metrics helped me identify problems so that in the construction of the high-fidelity prototype, I can propose an improved user experience.
Design System
To progress our advances based on stakeholder and user feedback, incrementing the design and development process in the creation of visual validations through prototypes, we turned to working on the Design System and this practice proved valuable for several reasons:
- We created a library of standardized design components and guidelines to be reused in different parts of the interface.
- It allows for greater visual and functional consistency throughout the application, which improves the user experience, making it more familiar and intuitive.
- Ensuring scalability and flexibility of the visual interface. As the product evolves and grows, the Design System allows for the addition of new components or design updates consistently throughout the interface, without compromising coherence and usability.
Colors
The primary colors were based on the visual identity of minidoor social.
Typography
Our typography scale was built based on the font called Inter.
Inter is a font designed specifically for interface design. It has a clean, modern, and legible appearance, making it a good choice for use in text of different sizes, from small buttons to page headers. In addition, Inter is an open-source and free font, making it an accessible option for projects of different scales and budgets.
Buttons
The choice to use buttons with rounded corners was based on a usability test in which it was observed that rectangular buttons were being confused with banners. Thus, adopting rounded borders for the buttons allowed for greater clarity in distinguishing between the buttons and other elements of the interface, contributing to a better user experience.
Data input controls (inputs)
The use of Figma allowed for flexible and personalized design of input controls, utilizing variables that can be adjusted according to usage needs. Additionally, the controls were given rounded borders to maintain consistency with the visual pattern of buttons, ensuring a cohesive interface and improving the user experience.
Miscellaneous or Diverse.
The Miscellaneous or Miscellaneous section in a Design System allows for the organization of elements that do not fit into other specific categories but are still important for the visual consistency and functionality of the interface.
This section may include elements such as icons, tags, logos, and other elements that are used in different parts of the interface and need to follow a consistent visual pattern.
Click here to view our design system on Figma.
High-fidelity prototype (In progress)
As we continue to iterate and validate our design, we are currently working on creating a high-fidelity prototype. This prototype will be fully interactive and tested on the actual device that our users will be using in the field.
Next Steps:
Developing the Solution. (Mobile Application)
The objective is for this solution to go beyond a textual proposal. We want everything we have worked on and produced to be consumable by the Favela News Agency on the Minidoor Social platform.
For the software development process, I have managed to assemble a team of highly skilled volunteer contributors, including:
- 5 backend analysts/programmers
- 3 mobile analysts/programmers
- 2 leaders in management positions and Scrum Masters to ensure the team aligns with Scrum values and practices.
- 2 UX designers to continue advancing tasks in the business-oriented and user-centric solution.
To provide a more detailed description of how I am conducting the software development process, from team formation to solution delivery, I will write another article and share it with you.
Thank you very much for reading.
References
[1] Illustration of a character made in silhouette, shooting multiple arrows at a target, but missing all of them. Image source: https://unasp.br/blog/a-importancia-do-fracasso/
Top comments (0)