I suggest to do something for non English users.
Our websites speaks multiple languages. GNOME does translates its UI and DOC. Our documentation is now close to be fully translatable. Last steps are dynamic content, stats.fpo should help us to improve here.

It would be great for fedora-diversity#75 to be taken into account for this ticket too. I would like a photo carousel or some equivalent with rotating pictures of our community.

If any engineering time goes into this, the Community Blog media library is a treasure trove of lots of pictures of people and communities around the world. Tapping into that as a dynamic media library would align maintenance of publishing pictures to the CommBlog editor workflow.

Sounds like a Great Idea.

For helping newcomers to join Fedora, We can redirect them to the Join SiG.

+1 @jflory7 Community Blog is indeed filled with lots of pictures of People and Communities around the world and having that in a Photo Carousel in the main page would be awesome as it feels pretty awesome to watch all those and how awesome things fedora has done & is doing.

Work progress:

User tasks list:
#1 A user just opening the browser window to go somewhere in the
browser and doesn't care about what the default page says. Maybe if
something catches their eye they will look at it, but they aren't
opening the browser to look at it intentionally.
#2 A user is a new Fedora user, and is opening the browser for the
first time in playing around with / evaluating the system. They may be
receptive to learning more about what they can do with Fedora at this
point.
#3 A user is a new Fedora user (or just new to this version of Fedora,
maybe they upgraded). They may be receptive to learning more about what
they can do with this new version of Fedora.
#4 A user is a new / less skilled Fedora user and is seeking help in
using it.
#5 The Fedora project would love to recruit new contributors, this page
seems like a good piece of real estate to do it.

Mock-ups:
https://abesu.gitlab.io/start.fedopro.gitlab.io/
&
https://abesu.gitlab.io/start.fedopro.gitlab.io/original

no carusells
no tons of bootstrap css with unused values
no fontawesome if just 3 or 5 icons from it are used
SVG before other pictures
all files minimized and compressed

https://fedoramagazine.org/design-faster-web-pages-part-1-image-compression/
https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/
https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/

diversity, has something to do with giving all people a chance, I really always ashamed that getfedora needs 4 minutes loading time

hey @gnokii for context, @abesu's html is prototype / mockup and not production level!

hey @gnokii for context, @abesu's html is prototype / mockup and not production level!

I know, I just want to remind that we address this, this time. Same with more prominent linking to torrent download option.

Just some follow up on some off-ticket discussions / feedback:

So I think the feedback you got on the task list hasn't conflicted with the list, so you can move forward with the 5 tasks you came up with:

USER TASK LIST

#1 A user just opening the browser window to go somewhere in the
browser and doesn't care about what the default page says. Maybe if
something catches their eye they will look at it, but they aren't
opening the browser to look at it intentionally.

#2 A user is a new Fedora user, and is opening the browser for the
first time in playing around with / evaluating the system. They may be
receptive to learning more about what they can do with Fedora at this
point.

#3 A user is a new Fedora user (or just new to this version of Fedora,
maybe they upgraded). They may be receptive to learning more about what
they can do with this new version of Fedora.

#4 A user is a new / less skilled Fedora user and is seeking help in
using it.

#5 The Fedora project would love to recruit new contributors, this page
seems like a good piece of real estate to do it.

The only modification I might suggest to the task list is added the qualifier that users are international, to include the consideration that was raised for translated content.

So I think the next step would be to come up with a list of "requirements" for the design - features or things that the design should and could include to enable the task list. For example, here are a few design requirements that I suggested in my last email that came out of the feedback you got:

DESIGN REQUIREMENTS LIST

1. start.fpo should include translated content for non-English speaking users.

2. Photography / graphics on start.fpo should be reflective of a diverse user base & community.

3. Any pointers to help users join Fedora as a contributor on start.fpo should point to https://docs.fedoraproject.org/en-US/fedora-join/welcome/welcome/

Can you come up with some more design requirements, basically listing things the design needs in order to enable the 5 tasks we came up with? In case it is helpful, I thought this guide might help you:

https://www.uxpin.com/studio/blog/write-good-product-requirements-document/

My ideas for the design requirements list:

1. Show "what's new" in the latest Fedora release.
2. Use the web page to display announcements that are relevant to users.
3. Fedora makes an excellent development environment, to help developers get started I think we should point to https://developer.fedoraproject.org/
4. Show users how to enable Flatpak and install additional software and media codecs.
5. Change the web page color / theme to match the wallpaper of the latest release or just display the wallpaper.
6. Maybe point to Fedora Spins and Fedora Labs to lets users know about them.
7. Links in the footer should include "Privacy Statement", "Terms of Use", "About"... etc

Your thoughts please.

Interested, please assign me to this... From outreachy

Reassigning to @ejirooghenekome1998 to create a wireframe for Outreachy. @abesu - I seem to recall you didnt have as much time to work on this. If you are still interested let me know and I can reassign to you after Outreachy apps.

Duffy, I want to work on two solid projects as regards outreachy and more
for this organization. I am also interested in the landing page design, do
well to assign it to me please. Here https://pagure.io/design/issue/697

On Thu, Oct 8, 2020, 3:23 PM M=C3=A1ir=C3=ADn Duffy pagure@pagure.io wrot=
e:

duffy added a new comment to an issue you are following:
Reassigning to @ejirooghenekome1998 to create a wireframe for Outreachy. @abesu - I seem to recall you didnt have as much time to work on this. If you are still interested let me know and I can reassign to you after Outreachy apps.

To reply, visit the link below or just reply to this email
https://pagure.io/design/issue/672

Hello Duffy, will work on this as soon as i finish the landing page
https://pagure.io/design/issue/700

On Thu, Oct 8, 2020, 3:23 PM M=C3=A1ir=C3=ADn Duffy pagure@pagure.io wrot=
e:

duffy added a new comment to an issue you are following:
Reassigning to @ejirooghenekome1998 to create a wireframe for Outreachy. @abesu - I seem to recall you didnt have as much time to work on this. If you are still interested let me know and I can reassign to you after Outreachy apps.

To reply, visit the link below or just reply to this email
https://pagure.io/design/issue/672

Hello Duffy, hope your day is going well. Please can I have a call session
with you. I really need enoygh details for the landing page design

On Thu, Oct 8, 2020, 3:23 PM M=C3=A1ir=C3=ADn Duffy pagure@pagure.io wrot=
e:

The issue: Revamp start.fedoraproject.org of project: design has been
assigned to ejirooghenekome1998 by duffy.

https://pagure.io/design/issue/672

Hi @ejirooghenekome1998 are you able to ask some questions here to gather the information you need? For Mizmo to see your request you need to use an '@' symbol before the username like so: @duffy :)

Hi @ejirooghenekome1998 I am open for chat throughout the day, feel free to PM me from #fedora-design!

Grabbing this ticket as part of the pending new logo transition work.

Put this together, still WIP. Is this too flat / is flat design not in anymore, any thoughts around this - feedback, comments, etc. welcome

How about making a responsive layout version for mobile?

Grabbing this ticket as part of the pending new logo transition work.

Put this together, still WIP. Is this too flat / is flat design not in anymore, any thoughts around this - feedback, comments, etc. welcome

Hey, I was just exploring this thread. This surely looks clean but I have a few suggestions and ideas here as a beginner trying to figure out my way through Fedora myself.

The three links on the top right, are important but have different value and functions. So, why are we giving them the same status? Like they have the exact colours and font styling. We could do something like:

This establishes a difference in the primary and the secondary actions and could be helpful for someone lost. (Icons are just used randomly in this mockup made by me.)

Can we add a search functionality? It would save a lot of user's time and he can easily find what he wants.

Also, the logo is slightly shifted towards the left of the page margins. Is it intentional?

Also, slightly confused as to if we already have a Documentation link on the top, why are we showing it again in the sidebar?

And finally, a responsive layout for this sounds great. We could even highlight diversity in fedora and something for people looking out to contribute here. If nobody is working on it, I would love to take it up and make an attempt :))

Grabbing this ticket as part of the pending new logo transition work.

Put this together, still WIP. Is this too flat / is flat design not in anymore, any thoughts around this - feedback, comments, etc. welcome

Hey, I was just exploring this thread. This surely looks clean but I have a few suggestions and ideas here as a beginner trying to figure out my way through Fedora myself.

The three links on the top right, are important but have different value and functions. So, why are we giving them the same status? Like they have the exact colours and font styling. We could do something like:

This establishes a difference in the primary and the secondary actions and could be helpful for someone lost. (Icons are just used randomly in this mockup made by me.)

Can we add a search functionality? It would save a lot of user's time and he can easily find what he wants.

Also, the logo is slightly shifted towards the left of the page margins. Is it intentional?

Also, slightly confused as to if we already have a Documentation link on the top, why are we showing it again in the sidebar?

And finally, a responsive layout for this sounds great. We could even highlight diversity in fedora and something for people looking out to contribute here. If nobody is working on it, I would love to take it up and make an attempt :))

Any thoughts on this @duffy ?

hi! @yavnikaa

this page is the first thing users see when they open a broswer on a new install of fedora and it is only seen by people who already have fedora, so the "get fedora" here isnt important enough to highlight so strongly. these are summary links at the very top that refer to resources given large amounts of real estate below - documentation and help forum postings. i would prefer to keep those links as is without a highligjt.

A search functionality here wouldnt be appropriate because this is not a destination site. It's a placeholder / default screen. It is also a one-page site so any search thag might be needed would be better handled by in-browser search (eg ctrl+f). the resources detailed here are transient and time-based and live in other locations (fedora magazine news, ask fedora help items, docs) and those sites have rich search functionality.

the logo shift is intentional, but a visual design issue i played with and am not 100% satisfied with.

the documentation link in the top is a summary link. the documentation content further down is more detailed and calls out specific relevant documentation which can be accessed directly by doc title.

thanks for your enthusiasm on this work item. Since I have already created a wireframe here and am pretty confident in my design choices, I would prefer not restarting from scratch on this. What I am looking for some feedback on here is the overall visual design. If you have an idea to integrate a call to action for contribution i think thats a brilliant idea, so please feel free to investigate that, but please also operate within the framework of the existing wireframe!

thanks :-)

Yes, I understand your point. I'll stay within the framework of this mockup and work as per the feedback and constraints stated by you. I will iterate further only on the mockup you made and not do any change without discussing with you :))

Hi @yavnikaa are you still working on this ticket? I am interested in picking this back up :)

Hey! I haven't made much progress on this tbh but would love to work with you on it. Let's connect on Telegram and discuss it further, what say?
We can later keep a meeting with @duffy and progress on this, if possible :))

Yeah, sure! @yavnikaa does element.io work for you? username: abesu
I will be basically testing the new mock-up.

So, @abesu and I connected, and we posted the mockup on discuss.fpo for user feedback and suggestions.
https://discussion.fedoraproject.org/t/how-do-you-feel-about-the-new-design-of-start-fedoraproject-org-page/28689 here it is!

After collecting feedback from the discussion, I came up with this simple affinity analysis:

Link to the live version: https://miro.com/app/board/o9J_lLWm_ko=/

This is just my humble opinion but I think adding a search box of the default search engine set by the user in the browser would be a cool feature (Like the one from the default Firefox homepage)

Hey @abesu! How are you doing on the design of this? Should we do an iteration based on the forum feedback (have you done already? I thought you showed something in a design team meeting but I don't remember.)

@duffy hello!
I tried working against the feedback we got from the Discourse discussion which I have posted on this affinity board (with comments on unresolved cards), here are the two main resulting iterations (Figma Link with more unpolished ideas) :

Hey! I'm just working on coding this web page, and I have a few questions.

• where is the 'Join Fedora' link going to take the user to?
  My initial instinct was to use accounts.fedoraproject.org but I'm unsure if it should be this or a docs page (if it is to accounts, should we also have a login link for users who already have FAS accounts?).

• Placement of the User Documentation at mobile/small screen size
  My initial thought on this was to put it in the menu as there would only be 3 links currently.

• Placement of Latest Solved Issues at mobile/small screen size
  This card feels like it could either

  • not be shown on mobile
  • go underneath the article content
  • go under the top bar and above the search, but as an expandable dialogue box.
    • or go under the search bar and display the 1st 3 latest solved issues with a see more button to expand. (these would be repositioned as columns.

Let me know what your thoughts are.

Hey there @lilyx !

Happy to hear that you are working on this webpage, the page was meant to be viewed mainly on a computer screen therefore the design did not take into account mobile screen size.
I have been able to quickly make a mock-up (see below) with my suggestions (@duffy any thoughts on this please?).

Answering your questions and adding my suggestions:

1. The 'Join Fedora' link was meant to take users to (https://fedoraproject.org/wiki/Join) where they can better understand what they can do and how.
2. I suggest that we have the "User Documentation" and "Latest Solved Issues" cards as expendables under only two featured articles from the Fedora Magazine.
3. I suggest that we drop the search box for mobile (to save some real estate space) as well as for web browsers other than Firefox provided that it is not possible to set a default search engine on a webpage form the settings on other browsers*.
4. Displaying "More articles" as unordered list would make it more visible on mobile.

*The search engine of the search box follows the default search engine set by the user in Firefox settings, inspired by the search box of Firefox default "about:home".

Thanks for reaching out @lilyx ! Questions and opinions always help improve the design. If you have any suggestions or opinions please share.

Thank you for sharing these. I'm going to add them to the gitlab repo under _REVAMP for documentation.

Hey there @lilyx !

Happy to hear that you are working on this webpage, the page was meant to be viewed mainly on a computer screen therefore the design did not take into account mobile screen size.
I have been able to quickly make a mock-up (see below) with my suggestions (@duffy any thoughts on this please?).

Answering your questions and adding my suggestions:

1. The 'Join Fedora' link was meant to take users to (https://fedoraproject.org/wiki/Join) where they can better understand what they can do and how.
2. I suggest that we have the "User Documentation" and "Latest Solved Issues" cards as expendables under only two featured articles from the Fedora Magazine.
3. I suggest that we drop the search box for mobile (to save some real estate space) as well as for web browsers other than Firefox provided that it is not possible to set a default search engine on a webpage form the settings on other browsers*.
4. Displaying "More articles" as unordered list would make it more visible on mobile.

*The search engine of the search box follows the default search engine set by the user in Firefox settings, inspired by the search box of Firefox default "about:home".

Thanks for reaching out @lilyx ! Questions and opinions always help improve the design. If you have any suggestions or opinions please share.

Awesome thank you for clarifying. and I really appreciate the mockups.

Small Screens
So regarding mobile version, I figure this is more relevant to when people have a browser window open small, or use tiling window managers etc as well as mobile. Cause ya you're right this isn't really a page people would access from phones.

My thoughts were to not take away the search bar and instead condense the links down to just Latest solved issues and documentation underneath the search menu. These would go to the top level of the page. See (very very low res) mockup attached.

Search Bar
On the search bar, I'll be working on coding that over the next week. Which browsers are you referring to that cannot have default search engine set?

I'm hesitant to get rid of the search box at small screen size because IMO the search bar should function as a page anchor focus/launch point. Thus having those links under the search box would keep that focus all in one place for users. -- What are your thoughts on that direction?
- I am concerned about putting it inbetween two groups of articles because the use case is slightly different for browsing articles vs searching for stuff.

Join Link
That makes sense for the join link. Do we want to have any access to fedora accounts from this page? Or a link to pagure?

More articles and Community Blog
It makes sense to put this as unordered list as you've suggested.

I agree to cut the latest articles down on small screen too. When I was playing with mockups on this I only ever put two items too so that makes sense as well.

Regarding the community blog, I was playing with a design idea where the blog posts would go into a flexible grid. Layout would shift depending on the lengths of the titles.
- Otherwise I was thinking of using 3 small tiles as is noted here.
- If neither of these, I'm thinking that the community blog could just go into a list at the bottom.

Forgive the misalignment in the design, I threw these together super quick.
what are your thoughts?

Hi @lilyx & @abesu

One thing to note about start.fpo is that the core use case is that it's the default homepage configured on browsers shipped on Fedora. Since Fedora targets desktop, the mobile use case is pretty unlikely, so I wouldn't stress too much about the smallest, mobile-oriented sizes (But certainly responsive in terms of fitting in different size / tiled desktop windows is important.)

With that being said.... this is my perspective, let me know what you think -

I think for desktop users using Fedora on their desktop, the docs and solved issues are pretty important and should be visible by default:

• Re: solved issues: Because this is a screen they'll see routinely on their way to do something else, the thought is that if there is a known issue that impacts them with a solution, it might catch their eye and help them out.

• Re: docs... again I am thinking the case where they just see the list of available docs routinely, so it'll heighten their awareness that they exist and they'll know how to access them. (the Fedora-shipped browsers already have a "documentation" link, they could click on that, but I think it better to list out the different available doc items just so they have better awareness of what exists.

I think this isn't necessary to fully have the contents of these cateogories listed out on mobile, because loading up start.fpo on a mobile phone is not a routine / automatic thing, it'd be an exceptional type of thing, so it wouldn't serve the general / routine "awareness" goal of having them there.

So on mobile, less important - it's OK To collapse them as links out IMHO. I like @abesu 's approach of having them accessible via expansion, it feels like less effort to take a look in an expander than to click over to a new page via link, but because the use case for mobile is so exceptional I don't think either way is better than the other - in @lilyx 's mockup it's certainly a bit cleaner to just have a plain link.

I love your mockup @lilyx and your mockups @abesu are super helpful as well. I would suggest something like @lilyx 's mockup for mobile would be perfect - I think the "more at fedoramagazine.org" approach is a little cleaner than listing out additional headlines with links. I love the DuckDuckGo search top and center, it makes the page feel more interactive IMHO.

I would be confused about what is under the hamburger menu. I wonder if it's needed. Maybe better to just have 4 links at the top, or three links (Solved Issues, Help Forum, Docs) And have a Join promo area at the bottom?