UX & UI Design for Accessible Modern News App
A humanist modern news app that provides accessible news for everyone.
Timeline: Nov 2021— Mar 2022
My Role: User Research / Competitive Analysis / Journey Mapping / Sketching / Wireframing / Visual Design / User Testing
Design Tools: Figma, Adobe Illustrator, Photoshop, Balsamiq Mockups
View Prototype:
Why is it difficult for everyone to read the news every day?
Firstly, not everyone prefers to read long chunks of news. Secondly, everyone needs to take time out of their busy lives to read the news. Perhaps one would rather hear the news from their friends and family members.
Can everyone read from a news application on their phone?
According to the World Health Organization, “Globally, at least 2.2 billion people have a near or distance vision impairment. ” After conducting primary and secondary research, I gathered that people with visual impairment or cognitive issues found reading to be difficult on smartphones and tablets. Also, a majority of apps have not yet made reading fully accessible.
Why this Redesign?
Coming out of Covid 19 phase, a lot of time was spent watching social media videos, and tolerating the guilt of having wasted time; I wanted to break my routine cycle to become more engaged in the productive task of creating a User-Friendly news app.
Problem Statement:
Online news platforms have become more popular for getting a daily dose of news, but most of them provide information that isn’t customized and accessible to be read by everyone.
Goal:
Create an easy-to-use, all-inclusive modern news application that can be used while doing everyday chores.
My personal goals:
- Take full ownership of the various roles involved in designing a product such as a User Researcher, User Experience Designer, and UI Designer.
- Improve my learning experience by challenging some design decisions and addressing their solutions.
Target Audience:
After a detailed analysis of major news providers in the market, I found that on average 63% of total readers are under the age of 50, consisting of roughly half and half ratio of males and females. The target age group of 18 to 49 seems a fair representative sample for the news app user base.
User Research
Empathizing with users through user interviews
To learn more about the problem space and to uncover news readers’ pain points from their perspectives, I reached out to people from my LinkedIn network and my friends who are active newsreaders. There were some interviews that I conducted via telephone, while others I conducted in-person to determine what motivates and/or discourages them from reading the news and learning about various news consumption habits.
Key Insights after conducting user interviews and going through app Reviews
- Users spend 30 minutes each day on news apps.
- A majority of participants browse only the headlines to stay updated quickly. If a headline grabs their attention, they are likely to read the entire article, so it needs to be clear and concise.
- Users found frequent pushes for a premium subscription to be annoying. Surprisingly, none of them had a paid subscription to use the news apps.
- The most used feature was Save and Share.
- 9/10 use the mobile app to check the news
- The majority of them said that they wanted to be able to customize their app, but that they would also like to be kept informed of breaking or trending news.
User Reviews
Nextly, to determine the pain points of existing users of the news app, I went through app reviews. I went over the reviews of renowned news apps like The New York Times, Forbes Economic Times, and BBC news on the app store. I found a few relevant reviews that gave me initial pain points that were common among all the news platforms.
Key Pain Points
After a thorough analysis of data from Initial Foundational Research, I came up with significant problems that users face.
Pain Point 1: Much of the content is inaccessible for people with visual disabilities.
Pain Point 2: No Dark mode
People wanted support for the dark mode to reduce strain on the eyes at night.
Pain Point 3: No Customization /Categorization
The user wanted more segmented news so that they could browse through various categories. They felt there was no organization of articles, videos, or magazines. They want displays to be prioritized based on their preference.
Pain Point 4: Hard to Read
Users with cognitive disabilities need special accessibility features to help them navigate through the app.
Pain Point 5: No offline Support
Users wanted more features besides cropping and sharing, such as saving for later, reading offline, and reporting.
Competitive Analysis
Before moving forward to ideation, I explored some existing products in the market that have similar objectives. Not only did I want to find out the existing approaches other similar products use to serve the audience, but also their strengths and weaknesses from a UX standpoint.
Concluding My Findings:
1. Lack of Inclusivity in current news app design
The current apps are designed such that they cannot be used by visually disabled people. There is hardly any support for the cognitive disorder that could have easily been solved using visual accessibility filters.
2. Readability issues as a result of Confusing and cluttered UI
Most of the users complained that the user interface made it impossible to read, and they had to keep scrolling horizontally to find relevant news. Font and spacing made the content look overpopulated. Most of them found the body text font small and the heading font quite large, leading to a terrible reading experience.
3. Lack of offline and audio support
The users wanted an offline read feature to save on mobile data usage, whilst others listened to audio news on their phones during commute rather than reading the news or doing everyday chores.
User Persona and Journey Map
I consolidated the insights into two main personas, Jane, the person found to have ADHD; and Celia, who has been reading news daily on her mobile devices. These personas are referenced frequently throughout the project to create empathy and guide design decisions.
User Persona — Jane has ADHD (Attention deficit hyperactivity disorder)
User Journey map — 1
User Persona — Cilia (regular newsreader)
User Journey Map — 2
Opportunities
I defined some key opportunities and room for improvements to optimize users’ experience based on the insights gained from journey mapping.
Discover Inspirations
Offering users a more customized searching/browsing experience so that they don’t have to go through an extensive amount of information.
Define & Decide
Allowing users to save articles and read them offline so that they can easily access them later while not having enough cellular data on their phone.
Communication & interaction with readers
Provide an easier way for news audiences to read, listen and watch the news.
Sitemap
I, then, created the sitemap to help me envision the overall navigations and the hierarchy so that I can understand what content should be provided on which page.
Ideation & Sketches
Mid-Fidelity Wireframes
User Testing
Next, I compiled all the feedback, insights, and pain points listed above and grouped similar ones. This helped me brainstorm and develop potential ideas and gave a clearer view of what was important to users while keeping in mind the business goals and objectives.
Affinity Map
Test Results & Iterations
This redesign prioritized easy navigation in the bottom navbar. To do this, I added more content from the website, prioritized the core features, and then grouped them all under four tabs below the navigation.
- Introduced a notification display screen to get users a better understanding of how notification works.
- Added optional feature of selecting the type of news one wants to receive to remove the confusion of the meaning of the (for you) page.
- Added feature to save video news to your lists
Final Design
Summary
Modern news is an all-purpose news app specially designed to meet the needs of young readers. News is delivered in audio, video, and written form with a special accessibility feature available for specially-abled humans.
Learnings
The Competitive Analysis has helped me gain a good understanding of what works and what doesn’t work for news audiences. Also, involving the users early throughout the design process has helped me tremendously in empathizing with the users’ mindsets and the problems they are facing. The usability testing had positive feedback therefore, I only made a few changes to the original prototype. Human-centered design is a continuous learning process…
Set-backs
Due to a lack of time and resources, Night mode could not be added to the prototype. I had fewer contacts with visually disabled people, requiring further research to produce a more compiling user experience. Getting minute details on point and correctly took more time than expected.
I enjoyed designing this news app. If you enjoyed reading please don't hesitate to share 👏🏽claps and reviews. Feel free to send any feedback or connect on my LinkedIn
My portfolio -Deep kamani
