scroll
We had six weeks to design a news app for today’s generation of news consumers.
We had to figure out how millennials consume and share content. We wanted to break new ground, take a couple of risks and be different.
In order to get this project started, we sent out surveys to find out what the main pain points were, and after we received all the necessary data we could begin the empathizing phase by creating a user story map.
The ideation process started to take form, but the majority was done in Sketch - even in the early stages. So when we had something that looked somewhat like a product, we started our first round of testing.
After the feedback we got from the usability test, we made several iterations before we settled with our final design.
The Problem
With thousands of news outlets, it's hard to know what sources are honest and unbiased. It seems the more we come to understand news organizations the more it becomes clear that one of the main purposes of the news is to promote clicks and opinion.
The challenge
Design a compelling news app that provides transparency to the millennial generation.
-
Promote balance in news consumption
-
Create a positive atmosphere
-
Inclusivity
my role
I was involved in research, ideations, prototyping testing, and designing.
I lead the project but what I worked most with was the visual designs and iterations.
Timeline
6 weeks
Company
Project for DevMountain
Deliverables
Competitive analysis
Surveys
Personas
Interviews
User Story Map
Low fidelity wireframes
High fidelity prototypes
Usability testing
Tools used
Sketch
Invision
Figma
Miro
Maze
Interviews
9
45
Survey Responses
Persona
1
Surveys
We sent out a survey via Google Forms where we received around 45 responses and conducted 9 interviews.
Key Insights
-
Hard to find unbiased sources
-
A lot of negativity in the news
-
A demand for conveniently fact checking articles
PERSONA
Based on the interviews and survey we set up our persona; Charlotte Walker.
Which we referred throughout the entire product development process.
Since we wanted to focus on accessibility, we made sure that was reflected in our persona as well.
Pain Points
-
Media bias
-
Negativity
-
Not accessible
Goals/Motivations
-
Effortlessly finding uplifting and unbiased news
-
Easily access more positive news
-
Ability to opt for audio instead of text when getting news
Competitive analysis
We found a lot of great apps out there, that were pretty diverse and already had a niche/target group. What we didn't find was an app that provided both a fact checker (truthometer) and a bias scale - while being accessible and uplifting.
Opportunities
-
Add bias scale with each article
-
Article accompanied with fact checker
-
Have a good news section
-
Make reading news more appealing, fun and engaging
User Story Map
To understand how customers find and interact with the service we created a User Story Map.
We identified that we would
-
Give users a way to find the bias in their news
-
Provide latest and local news
-
Bring positivity to their newsfeed
-
Ability to easily fact check articles
-
Different options on how to consume news
-
Give our users the opportunity to discover their own bias
We decided on creating the following features
-
A left/right leaning bias scale
-
A fact checker/truthometer
-
A good news section - the "palate cleanser"
-
Option for text-to-speech in articles along with video
-
Ability to choose topics that piques your interest
-
A social media section, especially a Twitter topic with trending hashtags
-
Have your own profile set up where you can find;
- Saved articles
- Topics you follow
- Your own bias based on the articles you have read, liked and saved
- Settings
We started the design process with pen to paper sketches.
Our group already had a similar vision of how the app would look like, but we were able to solidify that by sketching it down.
After we had done a couple of iterations on paper, we were ready to move forward with what we had and transfer them over to Sketch.
SKETCHES
low fidelity
At the beginning of my design process I created wireframes for testing purposes.
For our low fidelity wireframes I used some parts from two different UI kits, Deck News and Now to effectively hash out our wireframes so we could start the testing phase.
usability testing
We conducted the usability test both remotely, unmonitored, and in person.
The goal for the usability test was to validate that the flow was clear and especially that our three key features were understood; the bias scale, truthometer and the palate cleanser.
We asked our testers to complete the following tasks
-
Tap through onboarding, find more info about bias, find the discover page
-
Locate your profile and your own bias
-
Find the news feed, read an article, and find the "palate cleanser"
We quickly realized that the first task we had set up was a little bit too complex for our prototype, since all features were not clickable and we had a set path on how to complete the mission.
So what I learned from that is to simplify the tasks and set up multiple paths for the users to finish the assignment.
The second and third mission had a higher success rate, most likely because it was easier and more straight forward.
Feedback we got from usability test
- Testers didn't know where or how to find the palate cleanser
-
Info button for the truthometer and bias scale was very overlooked, and people were still a bit uncertain about what those features did
-
People wanted to slide the bias scale to change the bias, use it like a filter
After receiving usability feedback the following changes were made
-
Made the palate cleanser more noticeable.
-
The info button we had originally was easily missed, and we wanted to have multiple ways to educate our users about our key features. In order to do so we made those features tappable.
So when you tap on the bias scale, truthometer and the palate cleanser a little modal pops up explaining the function of the feature. -
We added a slider to the bias scale, so you can use that as a filter to find a certain bias.
UI DESIGN
As a first part of the UI design process, I presented a couple of different visual guides to the group, and this is what we decided on.
We chose to have green and yellow as our main colors, since it represents the colors of an avocado toast, but we also made sure that the brand colors had enough contrast and worked well for anyone with any vision impairment.
screens
We wanted to include the accessibility settings in the onboarding, front and center so you can adjust these options right away instead of trying to find the settings in the app.
In our newsfeed you will find both videos and summaries of news articles.
The video section was inspired by Instagram stories, and since a lot of our users consume their news via social media, we wanted to bring some of those familiar features in the app.
You will have the ability to filter the articles in by length, when published and accessibility.
We decided to have the bias scale in the tab bar since it's probably the most importantpart of the whole app. So we wanted that section to be easily accessed but also take the opportunity to educate our users and also show where we get our sources from.
There you will also find the truthometer to that screen, since those features go hand in hand.
On the discover page, you will find all topics you both follow and currently not following. If you tap any of these topics, all articles related to that topic will appear and have the same layout as the newsfeed.
Here you will also find our palate cleanser section.
On the profile page you will find the topics you follow, your own bias, and saved articles.
Your own bias is based on three things, the articles you’ve read, saved and liked - and with that you’ll get a percentage on where you lean.
Here you will also find your recently read articles, and suggested articles to read in order to balance your bias out.
In settings you will find more information on how we determine your bias (and turn recommended articles off), more accessibility and what type of notifications you would like.
We created a small animated Avocado icon that would randomly appear at the top of the article, to further educate the user about the Palate Cleanser while bringing some gamification into the app, making it rewarding to find it.
It would only be animated the first time the user interacts with the icon, so it wouldn't become a nuisance.
This is how the modal turned out after we decided to make the bias scale both slideable and tappable.
Results & reflection
I feel like we could have spent more time on the palate cleanser, making it more intriguing and straightforward.
It would also have been beneficial if we could have tested the product on someone with a disability to make it even more accessible. If there was more time, that is something I would have focused on.
From this I learned the difficulty to design with accessibility in mind, you have to think one step further - luckily there are a lot of resources such as the Stark-plugin to guide you.
To validate my design I made sure to get plenty of feedback from instructors, my team members, testers and pretty much anyone that I came across.
A lot of guerilla testing made this app possible!