#115 Revamp Home Screen Design
Opened 5 years ago by thelittlewonder. Modified 5 years ago

The current home screen design of split screen + carousel is not really intuitive to the new users, and I believe it can be simplified.


fedoraapp-home.png

Designed new home:
- changed the header of the app (color + logo) and put settings button instead of notifications
-Main section of the home page contains a widget style page where people can add diferent widgets to be able to customize the home page for their own taste.
For example I included in the image a widget "Up next" that shows the calendar events in the near future.
-Menu items: deleted the text for simpler design and put the notifications there.

Hey. Thanks for working on this. Interesting Ideas!. Since the design is an iterative process, there are a few things we can improve in here :)

  • The new home screen design should go with the current design, we are not changing the visual design but instead focussing on a new layout. Please head to http://pagure.io/Fedora-app/ or https://abhishk.me/design/fedora to see how the current app looks as of now. Think something along those lines, use the same colors and fonts. (https://fedoraproject.org/wiki/Logo/UsageGuidelines)

  • Fedora App's basic purpose is to let the people know about the latest updates from the Fedora Project - what is going in the community. So make sure we are showing the relevant information only to the user. Login functionality is not yet present in the application, so we can show only public information.

  • On the home screen, We want to primarily show a user on the go what's new with the Fedora Community. Example - Think of a new pattern to remove the existing carousel design and still convey the same amount of information. Other areas that are included on the home screen are - the social media feed of Fedora channels, community blog posts. These can be removed if we can find a place for them

  • What are you planning to show in the settings screen?

  • I noticed that you removed the "More" section from the navigation, I am afraid we can't do that :) We don't really need notifications as of now since login is missing.

Small tip: Sketch out ideas on paper, before you start putting them into a design.

We can first focus on designing the layout on paper, and then translate it to high fidelity.

All the best :)

fedoraapp2.png

I tried a different approach at a new home screen design.

  • Instead of the carousel I put two of the most recent podcasts because podcasts are some sort of news informations that I think should be accessible directly from the home page.
  • I switched the social media and blog posts tabs so the social media tab is the first one because I think is more relevant and people like seeing stuff on social media rather than on a blog.

P.S. About the previous design. The "settings" button was meant to replace the "more" button but I thought of it and I think "more" fits better than settings.

Ah, Interesting Concept!

There's a thing I would like to point out though
- Podcasts are not updated daily/weekly. It has been a long time since one came out. That's why we had decided to put it in the More Section since you don't want to stick the same content at the home page every day.

So I have an idea, let's do it this way. Go and Explore the Medium App Home Screen. Basically I want you to see how they categorize the design into parts. So what we can do is, whole of thing will be scrollable with
- Have a horizontal section of Top News (3-4 Items with Picture and Title)
- Then a vertical content section with the Community Blog Posts (with a read more button)
- Then a section of Social Media Updates.

Let me know if this makes sense or you need any help!

All the best :) I will increase the task deadline by a day.

Hey,

By "horizontal section of Top News" you meant every news to be places on a column?
For example "[] [] [] []" (where "[]" represents a photo)

Yes! The same way Medium App does :)

About "- Then a vertical content section with the Community Blog Posts (with a read more button)". The read more button should be for every blog post or it should be for all of them like "view more posts" ?

Also "- Then a section of Social Media Updates.". Should I put it as a tab like before or as a separate section?

Thx!

About "- Then a vertical content section with the Community Blog Posts (with a read more button)". The read more button should be for every blog post or it should be for all of them like "view more posts" ?

We can read the individual post by tapping the post, no need of "Read More" here. But since we will show around 5-6 posts, so for loading more posts, a Load More Posts Button (Like in the Magazine Tab of the Current Design)

Also "- Then a section of Social Media Updates.". Should I put it as a tab like before or as a separate section?

A separate section should be ideal I think.

fedoraapp_home_hopefullyfinal.png

I tried to make this design based on your recommendations.
The new top part should be scrollable sideways and shows about 4 posts there.

I didn't include the whole "Social media updates" part because it looks exactly the same like before but is separate from the community posts.

Hopefully everything is ok. If there is a problem please tell me! 😋

Good Job!

Let's
- Make the title consistent, the same kind of styles on "Top News" and "Community Blog Posts".
- Make the Top Cards with Rounded Edges - around 2,3 px.
- Title of the Top Cards the same style as the Community Blog Posts Title.

"Make the title consistent, the same kind of styles on "Top News" and "Community Blog Posts" - which title are you referring to?

The text labels : "Top News" "Community Blog Posts". One of them has a white background, other does not. Make things consistent :)

finalfinal.png

Should I change the color of the Top news elements to the same color as the "TOP NEWS" title?
Also instead of 2.3px rounded edges I made them 5px rounded because 2.3 was almost noticeable.

I would say instead Change the style of title of top news element to those like in blog posts - Black, Bold and Sentence Case. Will make things consistent :)

Login to comment on this ticket.

Metadata
Attachments 10
Attached 5 years ago View Comment
Attached 5 years ago View Comment
Attached 5 years ago View Comment
Attached 5 years ago View Comment
Attached 5 years ago View Comment
Attached 5 years ago View Comment
Attached 5 years ago View Comment
Attached 5 years ago View Comment
Attached 5 years ago View Comment