cntr app
Introduction
Project
UX/UI Design, Brand Identity
Role
UX Designer, Visual Designer, Researcher
Brief
"Your challenge is to design a user-centric mobile-first experience that increases trust and credibility in election content, in some way, for readers. Consider a visual or functional experience that confirms that news, polls, and outcomes are trustworthy to users."
Overview
Connor Jackson and I were finalists at the Adobe x New York Times Creative Jam. We designed the brand identity and user interface for an app that promotes clear and credible election news, called Cntr. Since U.S. citizens are increasingly skeptical toward media bias, each article on the app includes an authenticity score that gauges author credibility, news outlet bias, and reputable sources. The experience puts the user at the center by curating content that is specific to their local, state, and national elections. Users can select political issues that matter most to them and Cntr curates a selection of diverse viewpoints related to these topics. Cntr App ultimately strengthens each user’s civic engagement through a reductive interface and meaningful content.
Goals
With this project our goal was to create an app that gives the power to the user and provides the user with an experience that instill trust and credibility.
Process
Process
Research
Audience Research
Due to a compressed timeline of a week we were unable to conduct proper user research (i.e. surveys, user interviews). That aside we were able to do research regarding the demographic and determine a target audience from publicly available data.
A large majority of America consumes their news through some digital device and more specifically their phone.
- More than 8/10 Americans get their news from a digital device
- Rough half of Americans prefer to get news on a digital platform
- Those under 50 turn more frequency to digital news, linked here
- 42% of 18-29 year old Americans turn to social media for their news
From our user research we created two user personas to assist us in the development of the app.
Design
Sketches
Due to the limited amount of time during this design sprint we chose to build from the home page. We only sketched the home page for a few hours. Our main focus was to establish a functional and usable foundation that was recognizable to users yet a fresh take on news media.
Iterations
Post sketching we began to develop a visual language and direction of the brand and app with moodboards.
Processing that, our approach was homepage dominant and we began to build in necessary elements. A few of them being a page navigation bar that is easily accessible, user personalization, filtered system and sticky navigation.
Deliverables
Summary
Brand
Overall we wanted the brand to be approachable and easy to consume. We are not trying to sell something; we provide the public with a tool. Therefore, we blended colors associated with specific political parties or movements, like red and blue, to convey a middle ground and blended curation of news on the cntr app. The logo and other branding elements have rounded corners and soft curves that assist in the visual language of approachability.
UI Design
The structure of the UI is reductive and mimics elements from the brand, with the use of rounded corners and a blend of colors. However, this simple UI design also allows for more focus on the articles and their content. In addition, we used collaged image-making as hero and thumbnail images to convey the story and give an individual personality to each piece.
User flows
The user flows for the prototype explores three objectives; Onboarding, viewing an article and navigating between homepage tabs. The onboarding teaches the user-specific feature of the app, learns about the user, and gives them an understanding of critical components like authenticity badges. The journey from the homepage to the article is quick because of the precisely curated content. In addition, the homepage navigation bar is straightforward to guide between pages.
Reflections
Given the time constraints, there was multiple next steps and further iteration to explore moving forward. We established a strong foundation for the application but lacked quantitative and qualitative evidence to back out design decisions. In the future, we would like to be able to test things such as information architecture on the article and home page, the use of color, and user flows.