Problem Statement
MisfoShield
Guarding Truth Together
In today's digital landscape, the spread of misinformation on social media is not just a challenge but a crisis that affects public perception and societal harmony. Solutions like Google Fact Check Explorer and Twitter's Birdwatch offer reactive solutions, stepping in only after misinformation has already spread. Recognizing this gap, our team developed MisfoShield, an innovative application designed with a proactive approach to prevent the spreading of false information.
The main idea of MisfoShield is its cutting-edge artificial intelligence (AI) technology, combined with robust community engagement and human verification mechanisms. This fusion allows for immediate reporting and real-time validation of questionable content, empowering users to be at the forefront of combating misinformation.
Key Features
Instant Reporting and Real-time Validation: Users can flag dubious content directly within the app. Our AI algorithms, supplemented by human oversight, work swiftly to verify the accuracy of reported information.
Integrated Browser for Trusted Information: MisfoShield includes a built-in browser feature, guiding users toward reliable sources and away from potential misinformation.
Educational Module for Enhanced Digital Literacy: The app comes equipped with an educational component that teaches users how to recognize and understand misinformation, fostering a more informed and discerning online community.
Preventative Alert System: A standout feature of MisfoShield is its alert system that notifies users about potential misinformation even before they share it, ensuring a timely and effective check against the spread of false information.
Team Members
Project Coordination Lead
Strategic Lead
User Interface Designer
Presentation Lead
Persona
Final Design
Based on our user testing and feedback, we made several changes to the high-fidelity prototype. First, we added a privacy policy to let the users better understand how our platform can protect their personal information. Even more, we added a feature where users can choose to log in as guests and sign in later on if they don’t want to share their personal information at the beginning. We also added gamification features to let users feel more engaged in our platform, where they could earn different badges based on the amount of content they submitted for fact-checking.
This link shows the interactive prototype of our design on Figma.
My Role
I am the user interface designer in this team. I led the design part of the project by discussing details with my teammates and came up with the sitemap for the user interface design. I developed the low and high-fidelity prototypes of the project by using Figma and I ensured the quality of the UI design deliverables. I did user testing to ensure the interface was intuitive, user-friendly and met the needs of our target audience. This involved gathering feedback from a diverse group of users, which helped identify areas for improvement and validate design choices. Incorporating the insights gained from user testing, I refined the prototypes, enhancing the visual design and interaction flow to ensure the app was both pleasing and functionally robust.
We created four personas including a teenager, journalist, social media influencer, and retired adult.
Prototype
Initial Design For Mobile App Prototype
Initially, we wanted to develop a prototype for a mobile app. We started with a paper prototype, and we transformed what we had into Figma. We developed a paper prototype for both our app and website to evaluate our preliminary design concept. Our initial idea from the paper prototype is to have a camera function where users can scan through questionable content. We also planned to list the recent detections in bullet points. However, we didn’t end up using any of our initial designs, but the paper prototype gave us a nice way to get started with the designs. We abandoned the “camera” feature because we mainly want to focus on the plugin-in feature that we will be providing for the users.
After transforming our paper prototype idea to Figma, we developed the above app version, a low-fidelity prototype. We did user testing on two users and received helpful feedback. In this version of the design, we were thinking we could have users download the app and still have it work as a plugin on the phone. However, social media platforms on our phones do not allow third-party apps to be inserted as plugins in their platform. For example, while browsing Instagram on our phones, we can not insert a plugin into the Instagram app, which makes our initial design unrealistic. To solve this problem, one of the most well-thought-out feedback we received was the user suggested we change our design to have users sign in to their social media accounts in our app. In this way, when they are going through social media through our app, the misinformation detection tools could work. The feedback was very useful; however, due to time constraints, we decided to work first on the desktop website version of our app.
Site Map: After discussion, we decided to focus on the website version of the prototype. We started with listing everything that we would be including on each of the screens and developed a site map.
Low-Fidelity Prototype: Following the sitemap, we started our low-fidelity prototype with no color, only gray shades, to show the big idea of our design. The low-fidelity prototype allows us to work quickly and gather our ideas together. This version of the prototype also allows us to receive feedback before needing to make big changes. We received useful feedback from several user tests. This early user testing helped us gather feedback on the concept, layout, and overall usability of the website before committing to a high-fidelity design.
The following link is the persona we created: https://docs.google.com/presentation/d/16nFhRKV8dEtyybzQaIB2ciev-3HslH14/edit#slide=id.g293f794a478_0_98
High-Fidelity Prototype: After finalizing the designs of our low-fidelity prototype, we added the colors, and images, and finalized the fonts of our webpage. We chose a color palette that has a combination of brown and blue. We decided to use light colors as the base so the color of the page isn’t too heavy when looking at it. We made all the fonts blue to be organized and easy to read. We came up with all the wording that we have on the high-fidelity prototype, such as the article title and the descriptions. The high-fidelity prototype gives us a realistic user experience. After having the title and description, we look for free images online to match with the title. We also used the grid tool on Figma to make everything look balanced in equal spaces.
Below is the design of our high-fidelity prototype for the social media page where the plugin is shown. We developed the prototype of the popular social media, Instagram, and added the plugin to mimic how it would work in real life.
Personal Reflection
Reflecting on my journey as the User Interface Designer for MisfoShield, I have gained invaluable insights and improved my skills in several areas. First, I learned the importance of flexibility and adaptability in designing. The initial concept of our mobile app concept had to be reimagined due to technical and practical constraints. Knowing what and how to adjust from our initial designs taught me the skill of responsive design thinking. From each stage of the user testing, I learned by observing how users interacted with our prototypes and understanding their needs and preferences. This experience with MisfoShield has highlighted the value of feedback in the design process. I cherish the opportunity to receive input from users and classmates, as it provides a perspective that is often different from my own. The feedback has been instrumental in guiding improvements, allowing me to refine and enhance the user interface in ways I might not have considered independently. I've learned that each piece of feedback is an opportunity to not only improve the product but also to develop personally and professionally as a designer.