iNewsgr homepage redesign project
The product
iNewsgr.com is a news content aggregator. It automatically collects RSS feeds as provided by more than 300 websites and delivers news content. Content is then categorized in different ways (e.g. per news source or per news category). Monetization is done via advertising and is connected with users’ engagement to the news content the portal provides.
The goal
Provide a new Homepage mockup, incorporating their new logo. The main pillars that need to be improved in the requested design are:
1. User engagement
2. Content accessibility
3. Ease of use
4. Ad interaction
User research
Objectives:
1. Find out how users interact using the site, especially when navigating and looking for information
2. Find pain points in the user experience
3. Iterate solutions to solve those pain points
Process:
I did the Design Thinking Method (Empathize, Define and Ideate) in order to find out and provide solutions, to problems experienced by users
User research: Empathize
I developed interview questions, which were then used to conduct user interviews. During Usability Testing I also ask participants to say how they feel and think when using the homepage.
Interview goals:
To understand common challenges people face when navigating the site, and to identify frustrations people experience during the process
Interview questions:
1. How do you find the news you want to read when you open the homepage?
2. Can you find the information about the news article when you find the news you want to read?
3. What challenges do you face while navigating the homepage?
4. Is there any way in which you feel these challenges could be resolved?
User research: Personas
Helen, 29 y/o Blogger
”I love news and I spend many hours of my day reading about everything”
needs
- Wants to read news from multiple sources
- Prefers refreshing latest news
- Wants to read the news entirely and comfortably
Thomas, 49 y/o Banking Expert
”I need to know what’s happening and I hate when ads pop up while reading news”
needs
- Wants to read latest and important topics
- Wants to read the news without interruption
- Would love to watch live news
User pain points
- Messy and overcrowded design
- No proper hierarchy
- Annoying ads
- Too much information on a single page
- Confusing list news. No sectioning based on newest, trending, recommendation, etc
- Main menu and search bar difficult to reach
- The headlines do not outstand and are not based on some category
Ideation
I did a quick ideation using paper wireframes for desktop, mobile & tablet
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Newsgr homepage. These designs focused on recreating the whole page
Mockups
The original homepage had too many categories at the top menu, so I limited them to the most important and I inserted the “more” icon (dots) for the users to find the rest of them. I also inserted a sign-in icon, where the users will be able to save some preferences.
I moved the first advertisement after the header so the users can see both without confusion.
Then I redesigned the whole layout and homepage construction. I replaced the endless texts that made the page overcrowded with too much information, and distinguished the news head-titles, the categories and the sources, and added image boxes.
My next challenge was to arrange the sources categories which were too long with tiny text, and too many causing a long scrolling down. I decided to put the sources’ logos and limit the long texts to 2 head titles. The dots indicate that the users can press to read more about their preferable source.
I limited also the newspapers’ covers to 4 most viewed and again giving the choice for the users to read the rest of them
