UX Case Study: Bavovna Help — digital video library platform for the fundraising organization
Our team has been working on this project for three months while studying at OffGrid Design School. We would like to share a story about the design process and results of our work.
Project overview
Donating to cover military needs has become a part of everyday life for all Ukrainians. And what if you could donate and get a little benefit for yourself?
That is precisely what the Bavovna Help project is about. Besides raising funds to cover current military needs, the project team wants to create a space to help Ukrainians combat stress and doom scrolling. A mutual exchange is the primary idea behind Bavovna Help.
One of the initiatives the team is engaged in is hosting educational lectures on various topics in exchange for donations. The lecture topics are diverse, reflecting current issues relevant to everyday life or of interest to individuals.
Team composition
Coordinators:
Iryna Kovalyshyn — Experience Designer
Eduard Frankovskyi — Experience Designer
OffGrid Design School Students:
Tetiana Mokhnatkina
Mariia Yarova
Iryna Potapenko
The process
We chose the Design Thinking Process because this approach revolves around a deep interest in understanding the people we design products for. It proves extremely useful when you tackle ill-defined or unknown problems and develop empathy with the target users.
Empathize
Domain research
Our team started by conducting Domain research. To dive deep into the topic and look at the project from the users’ points of view, we analyzed their feedback and questions on Bavovna Help social media.
Kick-off meeting
The essential part of the empathize phase was the Kick-off meeting. No one knows the product better than stakeholders, so it is crucial to understand their needs and goals.
Before the Kick-off, we prepared a structured script with questions. The main questions were:
- What is the mission of your project?
- What are the target audience and competitors?
- What is the ideal outcome for you?
- What are the project risks and limitations?
- How will we communicate?
After our Kick-off meeting, we analyzed the answers and prepared the Design Brief. Our team realized we needed more details to see the whole picture. So we decided to ask the stakeholders for the second Kick-off session.
From these two kick-off meetings, we received a few insights:
- the audience at each lecture may be different;
- Bavovna Help carries out a detailed selection of lecturers and topics for lectures;
- the age of the Bavovna Help audience is from 24 to 35 years old.
Competitor analysis
The next step of our journey was to analyze competitors. There are no analogs to Bavovna Help in Ukraine, so we started with the SWOT analysis of direct and indirect competitors.
Performing a SWOT analysis is a great way to acquire information about the real-world experience you can use in multiple ways to help make better business decisions.
As a result, our team received a lot of data about the Strengths, Weaknesses, Opportunities, Threats, and Features of our ten competitors.
Key insights:
- really interesting content is paid;
- the information architecture of most sites is confusing;
- small fundraising funds don’t provide details about the purpose of donations and reports.
Define
Proto Personas
Founded on the domain research results and kick-off, our team defined several hypotheses, which constituted the basis for Proto Personas. Сreating Proto Personas helped us to align team members’ assumptions about users with the stakeholders’ imagery of the user and to become more empathetic to end users’ needs. We assumed to have 4 Proto Personas: Newcomer, Regular viewer, Lecturer, and Admin.
User Interview
To understand how all internal processes are organized in the project team, what is essential for the successful holding of lectures, and the attraction of donations, we conducted interviews with four lecture moderators. Then our team analyzed the interview scripts and learned a lot of insights.
The main conclusions are:
- moderators are responsible only for successfully holding a lecture they are assigned to;
- the stakeholder is the leading manager and manages the work of the team;
- Trello board is used for task management but not effectively;
- they hold documentation in different programs (Google Docs, Google Spreadsheets, Trello, etc.)
Survey
To better understand the needs of viewers and lecturers, we conducted qualitative research. Our team prepared a list of questions in Google Forms and distributed them in Bavovna Help social media spaces.
After collecting and analyzing the data, we learned some insights:
- 81,3% of the lecturers like to answer questions during lectures;
- 68,8% of the lecturers would like to share some follow-up materials about their lecture topic after a lecture;
- 83,3% of the viewers join lectures to get new knowledge;
- 93,3% of the viewers choose lectures by the topic;
- 72,4% of viewers prefer to donate before a lecture;
- 66,7% of the viewers prefer to watch lectures on YouTube.
Personas
Using the interview and survey results, we revised Proto Personas. We defined that user needs for Newcomer and Regular viewers are the same. One of our insights was that moderators need personal accounts, as they also need to get access to essential information about lectures and have the opportunity to manage tasks on the platform. As a result, our team created 4 Personas: Viewer, Lecturer, Moderator, and Admin.
CJM
Then our team conducted a Customer Journey Map workshop with the stakeholder, as in the previous stages. The process of attracting donations and gaining access to their lectures is not straightforward for the users, so we need to automate this process and make it more reliable.
As a result, we created maps for each persona to get the final vision of the product and its primary functions. There are key points we defined in the workshop:
- for the viewers and lecturers, we decided to provide a website. The viewers should be able to learn about Bavovna Help, actual gatherings and spending reports, watch lecture records and join future events. There should be an opportunity for a person who wants to be a lecturer to apply;
- on the team members’ side is required an admin panel with two types of accounts: moderator and admin. The Moderator account should provide users access to the current data about lecturers and the tasks list. Admin should be able to edit the website information and access some analytics about the project incomes and spending in addition to moderator account features.
Ideate
Brainstorming & Prioritization
Our team conducted a brainstorming workshop using the “6 Thinking Hats” technique to find the best solutions for all defined user needs.
Then we prioritized all solutions using the MoSCoW and the Impact/Effort Matrix methods. With the first iteration, the team prioritized solutions by the essence. Then we prioritized the other features with the Impact/Effort Matrix.
There are some of them:
- quick donation via just a button click;
- allow viewers to share their proposals about lecture topics;
- add a “Share” option on a gathering page to encourage users to share information about gatherings via social media;
- provide a form to apply for a lecture;
- offer links and docs with related materials on a lecture page.
User Stories
For each persona, we made a User Story Map. After the prioritization session, we defined MVP functionality (from ‘Quick wins’ and for ‘longer term solutions’ blocks in the Impact/Effort Matrix) and a list of features for future releases.
Prototype
Information Architecture
Using our data from the CMJ workshop and the User Story Maps, we created Information Architecture: for the website and the admin panel. Our team defined two flows within the admin panel: on the admin and moderator sides. IA creation allowed us to understand relations and contact points between the system sides and work on preliminary content prioritization.
Wireframes
We created wireframes for most screens from the website and the admin panel. In the discovery stage, our team defined that most users interact with the project services via mobile. For instance, moderators pointed out that they usually have to do their tasks on the run. So our team decided to follow the Mobile-First approach.
Test
Testing
After creating the wireframes, we conducted moderated and unmoderated testing for more feedback and better analysis of user behavior and to determine whether our design meets user needs. Our team used heat maps from unmoderated testing to see the main pain points of user interaction with the interface.
As a result, our team confirmed some of our hypotheses. For example, users found the announcement quickly, accessing the lecture was easy for most testing participants, and they liked the fast donation process. On the other hand, we realized that users’ navigation in “My account” is unclear, so we need to change it and represent recent transaction history on the admin panel to let an admin control all the incomes.
UI design
UI kit
Our team created a UI kit during our work, ensuring design consistency and purity. The visual concept was based mainly on the project branding materials, and the concept’s primary purpose was to convey feelings of confidence, friendship, and dynamic growth.
UI design
Before our work, the stakeholders shared a brand book with visual solutions for the project’s identity. We chose the color scheme, graphic elements, and fonts based on it.
The main goal was to simplify the user’s path to the goal. Instead of a difficult, long process, we offered only three simple steps: go to the site, subscribe and enjoy an exciting lecture.
Summary
The best way to provide a design that covers users’ needs and customers’ goals is to validate your solutions and ideas with end users and stakeholders. Don’t be afraid to conduct user interviews and different types of testing. It always will help you make your design better.
Summing up all our three months of work, we thank our mentors and organizers of the OffGrid Design School for the fantastic opportunity to find solutions to many challenges and improve ourselves.
