The Facts Commando is a volunteering web app project born in response to the October 7th war in Israel.
It aims to disseminate accurate information in areas heavily impacted by fake news across the web, enhancing the understanding of the war. integrates gamification to create an engaging user experience.
Year
2023
Sector
Volunteering
Skills
Product Design, UXR, Lead, PM
Facts Commando
Volunteering Project - Web App
Tools & Software
Project Size
3
Months
800+
Screens
350+
Components
16
Flows
Introduction
📛 Problem Statement
Fake News In The War
The digital landscape during significant geopolitical events often becomes a breeding ground for misinformation, leading to confusion and misinterpretation. The Israel October War was no exception. Our challenge was to counter the proliferation of fake news, enabling users to navigate through a sea of conflicting narratives and arrive at a nuanced understanding of the historical context.
🧑💻 My Role
Product Designer & Design Team Lead
In this project, I stepped into the role of the product design within a thoroughly data-driven product environment, where I oversaw and took ownership of the product's design and user experience facets. Guiding and leading a team of UX and UI designers, I actively engaged in decision-making processes.
Tasked by the PM, Founder, and Business Coordinator, I prioritized and delegated assignments to my team. Simultaneously, I conducted user testing and A/B tests, contributing to the establishment of robust foundations for the business, product, and design
Background
🕰️ Background
7th October Massacre
On October 7th at 06:30 in the morning, Hamas invaded Israel and kidnapped, tortured, murdered about 1400 Israelis, including women, children, adults and boys.
Following this incident, the Palestinians' propaganda worked overtime to not receive an embargo and condemnation from the world, and by pushing their propaganda hard all over the world - the support for Israel slowly began to fade.
At the same time in Israel's homeland the situation was no better, the Minister of Information resigned due to the fact that she realized she had failed in her role, Israeli politics received shock after shock that continued the snowball created due to the legal reform conflict.
And on the other hand, many private initiatives of amazing people emerged, whether in the information industry or in another industry, that showed the side of the beautiful Israeli that was so needed these days.
🕰️ Background
In My Personal Front
At the same time, I have a reserve exemption due to hearing problems caused by my military service. Therefore, I could not contribute my share in the reserve system.
Due to my frustration with the situation, along with the feeling that the entire Israeli nation was involved in the war effort except for me - I decided to contribute my part in my line of work - UX Design.
At the same time I was doing another volunteering task for a game platform for the children of Israel, and I was looking for the next thing where I would contribute my part, but I was looking for something long-term that I could really influence and make a bigger impact.
Then, I met Boaz Deri.
Discovery & Kick Off
⏮ Kick Off
Background
I joined the project approximately one month after its initial launch, following the retirement of the previous designer.
Given the rapid momentum of the project's launch, there was a noticeable oversight in terms of user experience, and I identified several areas that required attention.
To address these issues, my first step was conducting thorough research to gain insights into our user demographics. Additionally, I delved deeper into the realm of content, aiming to enhance the precision of our product offerings.
⏮ Kick Off
The Beginning
Upon my initial assessment of the product, I encountered significant usability and design issues, which were a direct consequence of the rushed design process. for example: buttons with a "disabled" color pallette, overdesign, elements too small, and buttons poor positioning.
Following the initial round of revisions, I immersed myself in research, aiming to establish an initial database that would serve as the foundation for informed design decisions in the further development of the product.
how might we design an explanatory content sharing system that is on the one hand simple to operate and on the other hand effective that keeps users active for a long time?
Strategy
🔝 Strategy
Benchmark
during the benchmark phase of the project, I prioritized engaging in insightful conversations with key project stakeholders.
This was aimed at gaining a comprehensive understanding of the project's challenges, difficulties, and requirements, while also identifying successes, goals, and innovative ideas.
This foundational research informed the development of our initial strategy, which in turn guided our approach for creating both short-term and long-term strategies, as well as defining upcoming tasks.
Research (Data)
🔬 Research
The Survey
After incorporating input and questions from other departments, we deployed the survey across various project groups.
The response was overwhelmingly positive, with 579 participants providing detailed and comprehensive answers.
This wealth of feedback significantly enhanced our understanding of our user base and their unique requirements, enabling Rei and me to make more informed design decisions.
🔬 Research
Assumptions for Inspection:
1. The most common age range is 50+
2. Most users share posts at least once a day
3. Most users share posts according to their
personal taste, and not according to what is "needed"
4. Most users don't go into other people's posts afterwards to comment on them
5. The users will not share a post in the group/content that is not to their liking
6. Most users don't really know how much they/the project is influencing
The hypothesis that the common age is over 50 turned out to be correct
The hypothesis that most users share posts only once a day turned out to be incorrect
The 3rd amd 5th hypothesis turned out to be correct
🔬 Research
The Main Problem
The primary issue highlighted by the survey results is the lack of user awareness regarding the project's effectiveness and their individual impact.
This has become our primary objective—to enhance user understanding and perception of their influence till the next survey.
Research (Deliverables)
🔬 Research
Empathy Map
In order to begin formulating a certain standard on "who is the average user?" In our product,
We processed the data received from the survey and began to look for clear trends in order to trace main characteristics, which will later lead to the construction of the central persona.
How might we introduce the value of the project to the front both on a personal level and on a general level according to our target audience?
🔬 Research
The Main Persona
Following an in-depth analysis of our user audience, their requirements, and the challenges they've encountered within the product and beyond, we established a primary persona.
This persona serves as our guiding force in shaping the planning and design of the product.
🔬 Research
Information Architecture
As I joined the project, it became apparent that the existing design and structure required a thorough reevaluation.
My initial priority was to delve into Information Architecture IA to comprehensively assess the current features and arrangement, as well as identify any necessary additions.
Upon the acquisition of survey data and a deeper understanding of our 'average user,' it became evident that a substantial shift in design and planning was imperative. Consequently, I initiated a comprehensive transformation from the established product approach.
One significant modification involved the rearrangement of content, with a pivotal focus on enhancing the onboarding experience. This emphasis extended to both the product itself and the Golden flow. The overarching objective was to minimize the learning curve, reduce errors, alleviate frustration, and mitigate user abandonment.
Moreover, I ensured the implementation of a streamlined and intuitive user flow. This approach facilitates our target audience in their journey from point A to B, with a minimal number of steps and clicks, ensuring a smoother and more efficient user experience.
Research Conclusions
💡 Conclusion #1
Scope of Impact
The prevailing issue lies in the majority of users being unaware of the project's effectiveness and their own individual impact.
💡 Conclusion #2
Lack of Customization
Quite a few users do not share posts/groups that do not align with their worldview - which leads to a significant decrease in productivity and the goals of the project and product
💡 Conclusion #3
A Different Approach to Design
The survey findings unveiled that an overwhelming majority of users are aged 50 and above. This demographic data had not been verified during the initial design phase, resulting in a design and planning approach that didn't align with the actual target audience.
💡 Conclusion #4
A Sense of Belonging
Many expressed feeling like mere 'tools in the game' and indicated a sense of undervaluation. This sentiment was largely attributed to the prevailing 'publish and go' approach that currently characterizes the user experience.
UX Design
📇UX Design
Creating an Infrastructure
At the project's inception, I held the dual role of both UX and UI designer, wearing multiple hats to drive the project forward.
My first step was to establish an infrastructure for efficient tracking and monitoring of the work status for each screen. This infrastructure facilitated seamless collaboration between the designer, programmer, and myself. It was a crucial foundation for scalability, allowing the team and workflow to grow organically.
📇UX Design
Onboarding Rei
As the project evolved, Rei joined the team and assumed responsibility for the UX design aspect. Our collaboration was remarkably intuitive, primarily because Rei came onboard when we already had pre-existing components, a well-defined design language, and a clear design direction. This shared foundation saved us significant time that might have otherwise been spent aligning our approaches and understanding.
In Rei's role, he focused on designing screens in the concept phase and establishing the general design direction. Once the concept received approval from the project manager and myself, the screen would then proceed to me for final design and prototyping before advancing to the development phase.
UI Design
🎨UI Design
Scalability
One of the fundamental principles in dealing with complex systems is the importance of designing for scalability.
With this insight in mind, I applied the core principles of scalability to the various features within the product. The objective was to ensure that the product could effortlessly accommodate a growing number of users while maintaining an impeccable user experience.
To achieve this, I meticulously crafted a range of states for each feature that incorporates quantitative content such as blogs, content banks, lists, tables, and more.
Each of these states was meticulously designed to address scalability concerns at both the design and user experience levels, following a structured approach encompassing four key stages:
- Empty State: What happens when there's no content?
- Few State: What happens when there's one or just a few items?
- Many State: What happens when there are several items?
- Plenty State: What happens when there's a large volume of content?
At the UX level, I've tailored distinct controls for each scenario, progressively introducing more as the volume of content grows. This approach, in part, ensures users have clear guidance to effortlessly access their desired content, all while maintaining a seamless experience.
On the UI front, I've seamlessly integrated these controls into the evolving design system. I've maintained a user-friendly color scheme, leveraging familiar colors to encourage user engagement. For instance, primary actions are highlighted with a Fill button, while secondary actions use buttons with a Stroke.
Flexibility was key, and I made minor adjustments as needed.
For example, in the 'plenty state,' it became evident that not all controls are of equal importance.
To prevent overwhelm, I categorized the main controls (such as 'next' and 'previous') as primary actions, while relegating the pagination dropdown to a secondary status.
This decision was informed by user testing, which indicated that users prefer navigating from page to page, with the dropdown being used less frequently.
This user-centric approach guides users through one page at a time, not only aligning with their familiar browsing behavior but also meeting our product's goals. This strategy encourages users to explore more posts, even if unplanned, thereby increasing daily active users (DAU) and delivering an experience they find motivating and intuitive.
🎨UI Design
Flows
In order to organize the design for the sake of development, I decided to design and deliver the design to the developers in sections that are divided according to flows.
In this way, it is also more convenient for developers to understand what comes after what, and if necessary, then enter the prototype, choose the desired flow and see how the design behaves and looks in practice.
🎨UI Design
Flows on Sprint
The flow in the sprint process/not developed yet, next to the existing status elements, has a brown/yellow background color, implying that it is still working even when viewing the file zoomed out,
Along with this, there are sticky notes inside the file that explain things that are considered during development or design so that everyone is on the same line
🎨UI Design
What About The Desktop?
Soon ;) we are working on it while you're reading those very words.
Gamification
🕹️ Gamification
Background
The initial need arose from the fact that we saw that there was a "bleeding" of users that at any given period there are more and more people who leave, especially in the 7.10 projects that slowly faded over time.
From this, we realized that the users lacked something that would keep them in the product for the long term, so our goal was to prevent our product from becoming a "do and go" product, because then we would risk a massive decline of users, and actually provide value that would lead the users to be more emotionally invested and perform the actions of the product without a reminder from us.
🕹️ Gamification
References
In order to implement a gamification that is on the one hand efficient and effective and on the other hand adapted to the spirit of the times - I chose to take references from two different apps:
Duolingo
An application for learning languages in which the value of gamification is central and present. From here you chose to take a reference and trace the element of following the streak, the simplicity of the actions, the learning curve and including the gamification envelope in which our goal is to keep people for a long time
Pazam
An application that started as a tracking of the length of service of soldiers and over the years has become a kind of one stop shop among the military servicemen.
From here I chose to take a reference from the element of ranks, berets and the multitude of military elements in which alongside the distinct Israeli character in which due to our goal to build ranks in the product in order to keep people for a long time
🕹️ Gamification
Ranks
As a project that takes a lot of inspiration from the military field, it was important to me to integrate the gamification first of all in the ranks.
There are 21 ranks, which take inspiration from the military ranks of the IDF, and their names are divided according to words related to the Israeli explanatory segment instead of the traditional names.
In addition, in order to enhance the personal adjustment and to strengthen the Israeli layer, I designed ranks for the 3 branches of the IDF - Airforce. Navy & Land, and you can choose between them as part of building your profile.
The ranks are divided into ranks and levels. Every action in the product earns you points that at the end make you level up, and every 10 levels you level up.
Additionally, the inclusion of exclusive ranks, distinguished by their red color, adds an extra layer of prestige. These exclusive ranks are awarded for specific actions, events, or unique contributions to the product, serving as a public recognition of the user's dedication and involvement. This aspect enhances the emotional investment users have in the product, fostering a sense of belonging and community.
🕹️ Gamification
Ranks Design Process
First, I took inspiration from common words in the explanation section and symbols related to Israel alongside symbols and ranks in other armies in the world, and worked to give them a hint or mention in the lines.
In addition, I took inspiration from the arrangement of ranks in the IDF and divided the ranks into similar segments in the form of conscripts, permanent soldiers (Nagadim) and officers.
In the first ranks (1-4)
I drew inspiration from the conscript soldiers in Israel, who are characterized by stripes on the arm, and changed them to stripes with a small curve - simulating sound waves, radio/internet.
In the advanced ranks (5-13)
I drew inspiration from the ranks of the warrant officers (Nagadim) and the soldiers of the American army, and designed them in the form of chevrons, alongside an order that started in the IDF (from Rasal to Ranag) and continued to the American ranks (Staff Sergants and above) in order to strengthen the military visibility of the ranks and give them a stronger mention.
In the higher echelons (14-21)
I took inspiration from Israeli symbols such as menorah and the Star of David (which is a recurring motif in all ranks, and replaces the fig leaf that exists in the IDF uniforms), and built them in the form of small and large stars, similar to the officer ranks in the American army, and also in the Israeli police,
And in the higher ranks I added a leaf decoration reminiscent of the senior officer ranks in the IDF,
until finally the highest rank is crowned with a yellow color that differs from the other ranks that carry the color palette of its arm.
🕹️ Gamification
Berets
In addition to ranks, every self-respecting army has a beret that represents the corps to which it belongs.
Therefore, I designed the berets according to the forces of the Israeli army as an additional element that strengthens the element of gamification and customization, and to further strengthen the Israeli background of the product.
Lean Design System
🗃️ Design System
Background
In order to save the construction time of the design system so as not to delay the sprints and schedules, I decided not to build everything from scratch, but only the components - while I will take the layout and arrangement of the file from an existing system.
Therefore, I took the structure & file layout of "Functional UI Kit" designed by Alex Yakir and a team of other great designers & Developers.
🗃️ Design System
Architecture Planning
First, I mapped out the basics for designing a design system by writing down the guidelines in terms of Principles, Foundations, Main Components & Patterns. My goal here was clear - to create a lean design system as quickly as possible, to implement and learn it as quickly as possible and to save time in future design and development.
Following the principles of atomic design, I saw how the product was built so far and broke down each part of it into atoms, molecules, organisms, templates and pages - and then established clear naming conventions.
🧑🏼🤝🧑🏼 Community
Strategy
To foster a sense of community and enhance the overall user experience, we devised a comprehensive strategy in collaboration with Boaz and Aryeh. This strategy encompassed both short-term and long-term initiatives:
Short-term Focus:
In the short term, we prioritized building partnerships with prominent figures in the advocacy field. This enabled us to organize enriching sessions on effective advocacy practices, empowering our users to become more proficient advocates.
We aimed to equip them with a valuable toolbox and unique insights not readily available through other platforms.
Long-term Vision:
In a single word: gamification. In more detail, we recognized the importance of forging a lasting connection and fostering deep emotional engagement with our product to prevent it from becoming another fleeting volunteer initiative.
To achieve this, we began conceptualizing friction elements and their seamless integration into the product. These elements are designed to provide additional incentives for users to return to the platform regularly, while simultaneously creating a distinct and engaging product experience.
🗃️ Design System
The Assimilation Process
Due to the growth of the design team and the development team - I noticed more and more the need for a design system due to mistakes on the part of the design and mistakes on the part of the development that cost all of us very valuable time - especially that this is a voluntary project that people do at the expense of their free time.
Long term vision
My goal was to reduce the cost of developing features while saving design time for each feature, so that we could focus the designers' time on creating complex UX solutions instead of designing UI for every little thing in the system, along with creating a uniform line for all designers.
Integration within the scope of the project
First, since most of the team is made up of designers, most of whom were aiming for short sprints and focusing on short-term goals and less on the long-term - I focused on presenting the value in creating a design system.
After most of the team was convinced, I took it upon myself to create the beginning of the design system in order to have a ground for building a larger design system, while dividing the tasks in the sprint equally among the designers in order not to create pressure and bottlenecks in the sprints.
Little by little, while implementing the design system, we began to integrate all the components that existed until now within an orderly design system, thus building a lean design system that provides an effective and efficient response to both designers and developers.
By tackling the planning system challenges at a manageable scale, we laid the foundation for smoother project-wide migration and adoption. Thus we saved many precious hours of design and development, along with preventing mistakes.
Building Community
🧑🏼🤝🧑🏼 Community
The First Step
The inaugural step of our short-term strategy commenced with a significant Zoom workshop featuring Senia Waldberg, a renowned figure in the marketing field, which he became our Campaign Manager
Senia delivered an enlightening lecture on the principles of effective advocacy.
As previously mentioned, our objective was to provide our users with added value and a toolkit, fostering a sense of community rather than mere transient users.
Through these initiatives, we aimed to enhance the overall value proposition of our product.
🧑🏼🤝🧑🏼 Community
The Next Step
Following the success of our initial meeting, we accelerated our efforts to hold similar gatherings regularly, ensuring that the spark we ignited continued to burn brightly.
Moreover, we initiated a method to foster a stronger sense of community among our users. This involved sharing project statistics and performance data with them. By unveiling these insights, we aimed to reinforce their sense of belonging and, in essence, create an additional layer of emotional investment in our product.
🧑🏼🤝🧑🏼 Community
Presence on Social Media
As part of our efforts to build a thriving community around the product, we expanded our presence on social networks, focusing on three key areas:
1. Data
Showing off how much traffic and engagement we were getting validated users' contributions. The numbers don't lie - people could see their impact.
2. Team
Putting faces to names builds rapport. Getting to know the clever folks behind the scenes made things feel more human.
3. Updates
Regular news and new features kept it fresh and useful. The feed had value beyond the core product. Kept people in the loop and in control.
In the end, thoughtful social media was crucial to get users bonding with the product and each other. As top designer, I was stoked to take the lead in crafting an experience that was about connections, not just UX.
KPIs
📈 KPIs
How Do We Test The Design?
To test our designs we used Clarity by Microsoft in order to find segments, view and analyse our data, and find where we should improve and where we did the exact thing we should
By leveraging Clarity's features, we were able to conduct A/B tests, heatmaps, and session recordings to evaluate the effectiveness of different design elements and user interactions. This data-driven approach allowed us to identify areas of improvement and optimize our designs for maximum impact.
+210% (X3.1)
+7.76%
+292% (X3.93)
-6.39%
Reflection
🪞 Reflection
Lessons Learned
As a Design Lead
The outcome of this project underscored the critical importance of effective leadership in guiding complex product design processes. As a Lead Designer & a Team Lead, I learned firsthand the significance of assertive decision-making and strategic direction-setting.
By taking ownership of the design process and driving collaboration across interdisciplinary teams, I was able to steer the project towards successful outcomes.
This experience reinforced the notion that strong leadership is essential for navigating intricate design challenges and ensuring project success.
//
As a Product Designer
However, perhaps the most valuable lesson I learned was the importance of adaptability and flexibility in the face of evolving project requirements.
As a Product Designer, I realized the necessity of being agile and responsive to changing needs, whether it be from user feedback or shifting project priorities. This adaptability not only ensured the success of the project but also demonstrated my ability to thrive in dynamic environments.
🪞 Reflection
What's Next?
Moving forward, I am committed to further refining my leadership skills and strategic vision as a Product Designer and Lead Product Designer.
I recognize the importance of continuous growth and development in this dynamic field, and I am eager to embrace new challenges and opportunities for innovation. By staying abreast of emerging trends and best practices in product design, I aim to drive impactful change and deliver exceptional user experiences.
Looking ahead, I envision a project that continues to evolve and thrive, guided by the principles of user-centered design, collaboration, and innovation. The systems, processes, and design standards we have established will provide a solid framework for future teams to build upon, ensuring continuity and consistency in the project's trajectory.
In essence, while my journey as a designer may take me to new horizons, the lessons learned and experiences gained from this project will always remain a part of my professional identity. As I embrace the opportunities that lie ahead, I do so with gratitude for the opportunity to contribute to something greater than myself for my country, and with excitement for the future of design innovation.
Outcome Stories
02
Close cooperation with political parties & ministers
A number of ministers and key people in the government were exposed to our project, and after several conversations with the Founder - they decided to cooperate with us in the form of doubling every 1 ILS we bring in from donations, and establishing/budgeting the project on behalf of the Ministry of Information and Foreign Affairs
03
We raised over 100K ILS in 2 months
We embarked on a crowdfunding campaign before recruiting an angel donor, and created an audience on our own that donated over 100K ILS in less than two months, and the counter continues to run!
01
We reached a DAU of ~7.5K users
We created communities where we remember and motivate people to action every day and together we created and shared content that reached over 250 MILLION people worldwide with the help of 300K+ shares from platform users
The Team
© 2023 by Yarden Zafrir
Made with alot of energy drinks & coffee
🔬 Research
Main Survey
In our initial survey, I collaborated with Rei, our additional UX designer, to create a comprehensive survey.
This survey encompassed inquiries spanning various domains, including product experience, Whatsapp group experience, encountered challenges, and demographic information.
The collection of demographic data was particularly aimed at constructing a primary persona, serving as a foundational reference point for our subsequent design decisions.
After the initial formulation, we received requirements and feedback from the other departments of the project to bring relevant data to their sector as well.
🔝 Strategy
Strategy
First, I developed a comprehensive research strategy encompassing both short-term and long-term objectives:
In the short term, this strategy involves conducting an in-depth initial research phase comprising 20 key questions. This approach allows us to gain an up-to-date understanding of our user base and assess the current state of the product from a user experience perspective.
For the long term, our strategy entails deploying regular NPS questionnaires on a monthly or quarterly basis. These surveys will help us evaluate our progress in meeting the goals and KPIs we've established. Additionally, we plan to administer satisfaction questionnaires to users who choose to discontinue using our product, providing valuable insights into areas requiring improvement.
🔝 Strategy
Documentation
In addition to formulating the research strategy, I observed that the workflow was disorganized, leading to a chaotic and inefficient process. This disarray resulted in important tasks slipping through the cracks, and we struggled to meet our established goals and objectives.
To address this challenge, I proactively introduced a meticulously organized task schedule using Trello. This schedule was structured by departments, assigned team members, deadlines, and priorities. The implementation of this system successfully transitioned our work approach from a 'guerrilla work' style to a more structured and regulated workflow.
👥 The Team
A Pleasure To Work With
Founder & Lead Developer: Boaz Deri
Business Coordinator: Arie Duvdevani
Product Manager: Larry Shnirman
Product Manager: Batel Lugassi
UX Designer: Rei Ayal
UI Designer: Aviv Wildikan
UX/UI Designer: Hannah Ilievsky
Development Team Leader: Yair Orchen
Full-Stack Developer: Stav Hasidim
Full-Stack Developer: Ronen Boxer
Back-End Developer: Dima Drapkin
Infrastructure Developer: Noam Anisfeld
Infrastructure Developer: Nehoray Ilani
QA: Nadav Kassif
Content Manager: Orly Finkelman
Copywriter & UX Writer: Roy Fimiamov
