With the rise of connection through technology, informational election resources are accessible today in ways that were unthinkable even just a decade ago. However, it's also become more difficult to discern credible election information and reputable sources from harmful, unsubstantiated fake news.
For the Adobe x NYT Creative Jam, we were tasked with finding a way to help people connect directly to credible sources and reading material. I worked with a co-researcher to do research and synthesis around the problem space, then tackled all the design work alone.
First, we wanted to learn more about the problem space. Keeping the tight timeline in mind, we performed secondary research as it was the quickest way to familiarize ourselves with the current situation. Immediately, it was clear that the detrimental effects of fake news were substantial.
91% of Canadians say that online distribution has helped propagate fake news
90% of Canadians say they've fallen for fake news
80% of Canadians say fake news has a negative impact on Canada's politics
We also conducted 2 interviews with family members who were frequent online digesters of news. We asked about their preferred platforms, notable observations, and how they checked the authenticity of things they were reading.
Looking over our research, we made a plan for things that we needed to address.
• the most-used tool to find food places was a smartphone, so a mobile application would be the best platform for our product
• we needed to prioritize convenience and familiarity - two key words that came up a lot in our interviews
• we had to look for a way to simplify the choices would also help to address choice paralysis
• the intrinsic fun in trying new food places and exploring your current location should be weaved into our product
• finding a way to both expedite and simplify the food-with-friends planning process would increase the use cases and marketability of our product
To get a better idea of how to create an effective solution, we looked to existing platforms that tried to solve the same problem. We noted product features and strengths as inspiration, and recorded weaknesses of current solutions to steer us away from making the same mistakes.
👍 In this space, competitors...
• employ an impartial, transparent grading system
• prioritize credible content
• fact check using official political websites and sources
👎 Weaknesses we saw were...
• grading systems were too complex to easily understand
• existing mobile solutions lacked clarity of function and layout
• multiple apps were required for holistic protection
We worked together to analyze our research, extracting 4 key user pain points:
💬
The easiness of sharing news online makes it easy to spread misinformation.
🕵️
Many sources convincingly masquerade as credible.
😞
Information overload makes it hard to find credible sources and information.
😵
The process of fact/credibility checking is confusing and time-consuming!
In our interviews, there was a lot of observed frustration around the process of fact + credibility checking. Using an experience map, I recorded the general experience of determining a valid source to help us pinpoint opportunities for improvements in the current process.
To capitalize on this opportunity area, we defined user needs statements based on our research and used them to generate relevant features. We prioritized features that would provide the most impact in our problem space and organized them using a site map to ensure our product was easily understood and intuitive.
Everything was going swimmingly. As with most things that go too well, however, a new challenge arose - my partner unfortunately had to drop out due to illness. I had to choose between shouldering the rest of the project myself or dropping it - and since I was balancing full-time school and volunteer design work, the prospect of less work seemed really tempting.
However...
To generate features, we created a Miro board and split it into 3 main categories that we wanted to address. This helped us create features that had solid rationale behind their inclusion.
We decided to leave two features out because they were too complex to code. They would be great features that would bolster our product, but due to our timeline we prioritized generating a strong core product first.
I crafted all the design work from sketches to the final product. I was also responsible for all the HTML, CSS, and implementing Hammer.js into our project.
My partner was a strong developer, and she was responsible for all of the complex API JavaScript work that made up the core function of our product. Without her, the product certainly would be a lot rougher than it turned out.
We started to source APIs that would help us achieve the features we needed. My partner was instrumental in figuring out how we could meld together multiple APIs to achieve our vision.
Mapbox →
Mapbox gives us an interactive, styleable map to use as the base of our application.
TravelTime →
TravelTime provides isochrones that filter out unreachable locations (customizable by transportation method).
MapQuest →
MapQuest gives us a location database, and codifies them by their type (e.g. cafe, restaurant, etc.).
Hammer.js →
Hammer.js allows us to incorporate common touch and swipe gestures into our app.
...being someone who loves to challenge myself and also was aligned with the importance of the design challenge, I wanted to see how far I could push this project alone. Using our site-map, I created wireframes that were informed by 3 key values:
😁
1. Ease-of-use
I wanted to make it easy for potential users to adopt and understand our product.
✏️
2. Aesthetic, minialist design
I surfaced important information and scannability to give the user control over their depth of investigation.
📱
3. Mobile channel optimization
I used common competitor mobile UI patterns to ensure a familiar, communicative product.
Being the sole designer meant I had to make lots of self-notes, answer my own questions, and make sure I was prioritizing key tasks to meet the deadline.
While bringing the project to a higher fidelity, I looked for ways of optimizing scannability, official information, and information organization. The dense functionality and information density of the project led me to keep things simplistic when defining interactions and colours in the interface.
An example of iterative changes I made to promote scannability and ease-of-use in the product.
CHALLENGES
When we were coding the project, we found that we had to cull back or adjust some features to make sure we met our project deadline.
Factually removes the credibility guesswork. Peruse credible, trending election articles and pieces that are relevant to your interests. Explore trustworthy articles that are outside your usual bubble to broaden your perspective.
Factually's grading system surfaces the quality of articles that others post on social media. It limits exposure to toxic misinformation and the people who spread it.
Easily learn about political leaders and parties by checking out their profiles. Factually displays relevant credible pieces to dive deeper, and provides external links to official websites for genuine information.
Factually has profiles on credible sources and authors. Easily check the quality of an author or source using our grading system, which is derived from past grades as well as their qualifications.
Factually targets fake articles and popular misconceptions to take down. Rather than just hide them, fake articles are dismembered using facts in an easy-to-understand format. Users are encouraged to send in stories to take down.
After I pitched Factually to the live judges, our team was awarded 2nd place out of 315 teams across Canada, the UK, and the United States. I learned so much from this experience including the importance of a strong presentation narrative, how to prioritize tasks effectively, and understanding how market research can inform the direction of your produced product.
Be adaptable!
Though my partner got sick, I used this setback as fuel to really challenge myself and grow my design skills. The design process in the real world is always in flux, and being flexible in my process allowed me to meet the tight deadline.
Prioritization & task management is SO important.
As we had very limited time, it was a great exercise in planning out a project's holistic development against the clock. It was through prioritizing the high-impact features and tasks that the product was able to come alive in both its design and presentation.
Though I placed well, I was bugged by the fact that I didn't get to put this in front of anyone before I submitted it. I organized user testing with 3 participants and combined their feedback with the live feedback I got from the live judges.
👩
Participant 1
• mid-30s
• keeps fairly up-to-date on current events
• primarily digests articles on her phone
👨
Participant 2
• mid-60s
• actively keeps up-to-date on current events
• primarily digests news from TV and newspapers
👦
Participant 3
• mid-20s
• not actively up to date with the news, but looks into issues/articles that interest him on his phone
🕶
The use of dark gradients and colours in the product looks dated and dark.
🤷🏿
The onboarding, while pretty, doesn't help the user actually use the product.
❓
The visual treatment of the takedowns page (F's everywhere) is confusing.
🔍
For some, it was hard to find and reach the search functionality.
An improved onboarding.
I replaced the previous animation-based onboarding with an interactive walkthrough of the product to ease the user into its functionality and layout.
Harnessing photography's power.
I removed the dark gradients on photos to instead use them as a way to entice users into reading the stories.
Improved visual design and information organization.
I made the product easier to use by prioritizing scannability, altering the text hierarchy, improving legibility, and moving the search functionality to the bottom nav for easier access.
Direct information > our written content.
I cut down on the amount of self-written copy and instead prioritize info, statistics, and links to official websites / credible articles.
Enhancing the takedowns page.
I moved to a horizontal-based layout for bigger touch areas and easier legibility. I also added a dark background with white text for stark differentiation from credible content.
Incentivizing activism and involvement.
Offering a gift card for submitted stories helps entice users to submit fake articles, making content generation easier for Factually.
User test the new designs.
Though these new designs attempt to address the shortcomings of the previous designs, I'm fully aware that these solutions may not be effective for the user. I remain open to feedback and change from the people who matter most in this project - the potential users.
Talk to developers about design feasibility.
For this project, I've been designing in a bubble that assumes everything is possible. In the future, I want to bring this project to a developer to talk about technical limitations and maybe even one day bring it to fruition.
ALCUMUS
