News aggregator concept — UX design case study
This post is part of the capstone project for the Interaction Design Specialization program offered by the University of California San Diego. It covers the design thinking process of creating my final project as the culmination of eight courses covering user experience design.
Early assumptions
“The easiest, most straightforward way to create a great product or service is to make something YOU want to use.”¹ This is how I approached the project I’ve been working on within the above-mentioned specialization for the past two months.
As it turned out, the problem that bothered me and inspired me to search for a solution is a major pain point for many people. I am talking about how we deal with information.
Living in the Information Age is a blessing and a curse. On one hand, learning and communicating has never been so easily available. On the other — the amount of information we are exposed to is overwhelming and frustrating.
How to stay focused on things that really matter? Which sources to trust? How to distinguish facts from opinions and fake news? How to keep up with all the social media and stay sane?…
Whereas there is no cure-all for all those questions, there is definitely a way to improve the state of things by shifting control over the news and updates we receive from dubious algorithms used on social media and search engines to us — users.
This idea became a backbone driving force for my solution — the app, which gives users full control over their news and updates and helps make informed choices over the content they get.
Needfinding & Ideation
To prove my early assumptions and learn more about the problem, I started by conducting short interviews with friends and aquaintances and observing how they stay up-to-date and check the news.
After talking to them I realised I’m not the only one having troubles with keeping up with the info flow. In total, I managed to talk to seven people with different backgrounds and all of them shared my struggles.
I collected and analysed typical problems and needs and created user personas based on my findings:
After that, I continued further with the brainstorming. I came up with a “big idea” (point of view): “People are entitled to make informed choices regarding the news and updates they receive” and picked words that relate to my design idea: versatile, transparent, conscious choice, filtration, facts-based, independent.
I analysed the solutions that are already there. I checked the pros and cons of the most popular news aggregators: Google News and Feedly. Google News lacks transparency regarding how its algorithms work, I also found the settings and navigation a bit confusing. Feedly is the solution that I use myself. It has great functionality, AI tool is optional and can be trained by users. However, it doesn’t allow to add all your social media feeds there — so far it is limited to Twitter only.
I also learned how the news is structured on the websites of such media giants as Deutsche Welle and BBC News and researched the work of fact-checking organisations that fight against fake news distribution (StopFake and FactCheck.org). The latter gave me the idea to add fake news notifications that could be powered through the cooperation with such organisations.
Storyboarding & Prototyping
To demonstrate the usage situation and picture users motivations I created two storyboards focusing on typical situations where my solution will be needed:
Further, I translated user scenarios into the main functionalities of my future solution through paper prototyping. I conducted multiple walkthroughs with my prototypes to identify potential drawbacks, make it run smoother, discard irrelevant user flows.
I believe that paper prototyping is a very useful, enormously fun but underestimated and often neglected instrument. It allowed me to test ideas rapidly, gather in-person feedback and conduct heuristic evaluation without opening any design software which (let’s be honest) quite often ends up with hours of procrastinating and re-does.
Wireframing
Next step was creating interactive wireframes. I did it low-fi using Sketch in combination with InVision. I focused on reproducing the main functionality of the future app that was worth testing.
I did several iterations of testing using my friends and acquaintances, every time improving the flow and making the navigation more user-friendly. That is how, for example, the navigation appeared on the bottom bar, which is now always there and shows users where they are (instead of the hidden sliding menu that I thought of initially).
Following user feedback, I also moved the button that allows listening to the article to the middle of the screen, so it stays visible while users scroll down. That also helped avoid accidental pressing of it by right-handed users (who keep the thumb on the spot where this button has been initially placed).
Visual Design
As I have experience in branding, diving deep into the visual design part was very tempting. However, I decided to keep it simple: since the app is supposed to show users various types of content, I didn’t want the visual design of the app itself to be disturbing, but rather inconspicuous.
The name I picked for the app — Limelight — indicated the colour choice. I used lime as an active colour for accentuating separate elements to draw user attention. In addition to this colour, I used neutral tones: black, white, light grey.
I designed the logo and the primary set of icons on my own. The rest of the visual elements I adopted from Google Material Design.
User Testing
For the final iteration, I used UserTesting.com platform through which I recruited four users who kindly filmed themselves while using the Limelight app and completing the tasks I prepared for them. Overall the app received positive feedback. However, the testing also revealed some problems.
One of them was that not every user discovered the setting for managing their updates. To make it easier for users next time, I made some of the most often used settings easier to reach — directly on the updates screen. Following some users’ concerns, I also made the button for adding new content to the feed more visible and easier to find.
Selected screens above depicture main menu options and functionalities, namely:
- login page
- general updates overview (with the possibility to avoid potential fake news)
- article for reading or listening
- feeds overview
- adding content to a feed (and potential sources for content searching)
- account settings.
Final Prototype
You can see how the final prototype looks at the video below or even try it out yourself (click here to try).
Thank you for your attention, and as this is my first UX design project, I will appreciate any feedback you might want to share!
[1]: Rework by Jason Fried & David Heinemeier Hansson.
