A mobile application connecting readers to credible election information and current events.
Research & Ideation
Design Lead
Prototype & Animation

Lucas Ayanoglou (researcher)
and me!
5 Days
Adobe XD
The current (state of) events

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.

A growing epidemic

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.

"It's scary how well these fake news sources pose as official, credible news. Without checking my sources, sometimes it's tough to figure out what's real and what isn't."
"You wouldn't believe some of the stuff I've seen shared on Facebook. Like, some people only read things from social media - you can tell."
setting the table

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

Scoping out the competition

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.

We looked at 9 existing solutions - mobile applications, browser extensions, and non-tech based solutions, too.

👍 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

Reading between the lines

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.

In the area of biggest frustration, we found an opportunity area: we could create an all-in-one solution that would clarify credible sources / information and would explain WHY these sources are deemed credible.
What do our readers want?

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.

Dealing with disaster

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.


priorities and features

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.

co-chefs in the kitchen

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.

the secret spices

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.

Drafting the outline

...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.

Refining the draft

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.


facing the heat

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.

A curated, credible selection

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.

Feel safe on social media

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.

Make an informed decision

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.

Know your sources & authors

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.

Learn about fact vs. fiction

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.

A silver medal

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.

"Super clear, super intuitive, and solves the problem well...it's clear what each feature and icon means."
Chen Wu
Senior Product Designer @ NYT
"You did a stellar job, the score is super simple...the home page suggestions are super clever."
Tulio Jarocki
Senior Product Designer @ NYT
"You guys did a great job fitting so many impactful features into one app. I commend you."
Natalie Dye
Senior Product Designer @ Adobe
Lessons learned

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.

Writing the second edition

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

Gathered feedback
Design improvements

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.

Future steps

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.

I'd love to work with you! Say hello and let's solve some problems together!