I'm up for the landing page design

@ejirooghenekome1998 it's all yours! looking forward to see what you come up with!

Thank you so much duffy, I will let you know if I want more to work on.
Question, is there a style guide I can work with? Or I should create one?

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

duffy added a new comment to an issue you are following:
@ejirooghenekome1998 it's all yours! looking forward to see what you come up with!

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

@ejirooghenekome1998 oh that is an excellent question! we don't have a web app style guide per se. We do have a branding style guide (our logo guidelines) and there are example reference apps you can look through to get a sense of the style.

So here are the logo / branding guidelines:
https://fedoraproject.org/wiki/Logo/UsageGuidelines

As far as the web app style guidelines, the app you are using here, pagure.io is a good example. Some more:

Bodhi
https://bodhi.fedoraproject.org/

Elections
https://elections.fedoraproject.org/

Datagrepper
https://apps.fedoraproject.org/datagrepper/

thank you so much, I will keep in touch. If I have any challenges I will
let you know

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

duffy added a new comment to an issue you are following:
``
@ejirooghenekome1998 oh that is an excellent question! we don't have a we=
b
app style guide per se. We do have a branding style guide (our logo
guidelines) and there are example reference apps you can look through to
get a sense of the style.

So here are the logo / branding guidelines:
https://fedoraproject.org/wiki/Logo/UsageGuidelines

As far as the web app style guidelines, the app you are using here,
pagure.io is a good example. Some more:

Bodhi
https://bodhi.fedoraproject.org/

Elections
https://elections.fedoraproject.org/

Datagrepper
https://apps.fedoraproject.org/datagrepper/
``

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

Hi, I am Sara, an Outreachy applicant, Can I do this too?

@saralatif, I don't think you can. This project is already assigned to me

@saralatif @ejirooghenekome1998 We are always encouraged to collaborate with each other as much as possible, so you two may collaborate on this issue if you wish! :)

@ejirooghenekome1998 @saralatif both of you are welcome to create designs for this task. Be aware there are multiple people working here and we will need to choose one design to implement, though your contribution will count towards your Outreachy application whether chosen or not :)

For tracking purposes - here is @ejirooghenekome1998 's first draft:
https://www.figma.com/file/SqCSMIDg2oy5aXKQStuSgl/Fedora--badge-landing-page?node-id=0%3A1

Here is my feedback on the first draft:

Ejiro - this is great work, your wireframes! My main feedback would be - the "The badges" is just a random sampling of badges from the catalog, i think on mobile they take up too much vertical real estate. i would maybe hide it behind a disclosure of some sort or consider another layout on mobile for that widge. same with weekly and monthly leaders - i think you could use the space a bit more efficiently?

Here's Ejiro's second draft:
https://www.figma.com/file/SqCSMIDg2oy5aXKQStuSgl/Fedora-badge-landing-page?node-id=0%3A1

I want to make sure we track work items in the ticket so others can learn from the feedback / iteration process and also so we have a record. I had thought ^ this exchange was over email to pagure and I didn't realize until just now that the emails were outside of Pagure.

@ejirooghenekome1998 thanks for your revisions to the design! I noticed you filled in the filler text with copy, so I'm going to give you a lot of feedback on the copy you have there so we can work it more and get it really tight. So here's some more feedback on how you can iterate to make this design even better:

• I have the same feedback on "the badges" taking up too much vertical real estate on mobile. It would be worth investigating whether or not you could do 2 columns instead of a single column. In fact, for mobile I wonder if it even makes sense to highlight specific individual badges + their description, and instead just load a box with a promo for badges generally and a link to view the full catalog. That I think would be a better use of space? What do you think?

• The font for the "badges" part of the logo isn't the right one. If you look at the https://fedoraproject.org/wiki/Logo/UsageGuidelines you can see the list of logo fonts and the sublogo design guidelines which tells you the correct font with links to download it.

• Similarly the website design font is "Rubik", but this isn't a Fedora branding font. I would advise looking at the websites referenced earlier (https://pagure.io/design/issue/697#comment-694683) as a guide to figuring out the fonts to use.

• I would work on the main headline copy. Right now it says:

Fedora community badge awards

I think you want to make a strong, compelling call to action here. Can you think of a more activating, bold phrase for the top of the website to get visitors excited about earning badges?

• I would work on the copy under the main top headline more. Right now it says

Fedora community badge website is a fun website built to recognize contributors to fedora
projects, help new and existing contributors find different ways to get involved and encourage
the improvement ofFedora’s infracstructure

There's a few spacing and spelling typos (I bolded them above) and missing punctuation/capitalization you'll want to correct, and it should probably start with the article "The".

I would refocus the text maybe to support the main headline, which should be a call to action. Why should visitors care about this site? Why do they want to earn badges? What's in it for them? Some ideas include: They can build skills across a variety of software-related disciplines, they can earn experience in a large open source project, they can meet new friends and have fun.

I would also maybe add an actual action they can take. For example end with a link to allow them to log in, something like, "Get started now! Log in to Fedora Badges."

• Did you create the front page illustration on the top? If not, where was it sourced from and what is the license?

• I think the text under the badges headline could be a bit tighter:

These come in various designs to show appreciations to our community contributors. Each of
these badges gives some description and these descriptions gives us clues on how to acheive
them

The last sentence is missing punctuation, I highlighted the spelling error. Again, though, I think it would be worth refocusing the text towards building excitement for visitors and helping them understand what benefits they'll get from using badges.

For example, when you say they "show appreciation to our community contributors" - that gives a little bit of distance to a visitor who might not necessarily yet consider themselves a contributor. It might feel like it's for somebody else and not them.

Can you think of a better way to phrase this?

I would also put some language to indicate that the badges in that section are a sample of the badges available, with a link to view the full catalog of badges. And maybe make sure the badges are representative across categories, so they're not all development / technical badges? I think the selection you have there is a nice wide variety - do you intend for those to be static or will different badges load in dynamically each page load or at some interval?

• Under "Latest Awards," the copy is

This is an auto update award section, it gives latest update on the most recent award collected > and by whom

This text reads like it's more a note for the mockup or for the person implementing the design rather than aimed at site visitors. I would try to rephrase this with the website visitor audience in mind, again along the theme of building excitement for the site. For example, something like this:

Fedora community members like you are earning badges right now! Check out the latest badges we've awarded below, and congratulate your colleagues. Maybe your next badge achievement will be highlighted here next!"

• Latest badges earned vertical alignment - here's what I see for the layout of an individual entry in the latest badges earned section:

I like how you've emphasized the people whove earned the badges here by making them larger and listing them first (on the left.) The general layout seems a little awkward and not balanced, though. For example, The badge is on a dark blue background and the text below is white, which puts a lot more weight on the top than the bottom of that right column, but the photo takes up the full vertical with, so there's an uneven vertical balance across the row. Also, because the photo is a circle and the blue background is square with corners, there's a visual trick making it seem as if the right column is higher up than the left column so it also looks like they're not top aligned (even though they are.)

Can you play around with alternative layouts for the rows in this part of the design to try to remove the imbalance?

• I like that you're highlighting contributors both via the latest awards section and the weekly leaders section. With those areas fleshed out a little more in this latest version of the mockups, I am not sure that the latest award section warrants quite so much attention, especially in contrast to weekly & monthly leaders. The leaders have achieved more over a longer period of time than a single contribution, yet their weight is much lower in terms of their much smaller avatar and the general amount of space granted to them on screen. I would suggest based on this maybe downsizing the latest awards section to a single row with individual's avatars running across the row and maybe their earned badge below? And you probably dont need the full badge description, just a name and a link to more info could be sufficient?

See screenshot of mockup below - the latest awards highlight 5 people and take up more than twice the real estate of either the weekly or monthly leaders.

• Instead of showing weekly and monthly leaders in succession, have you considered showing monthly by default and having a tab to move over to weekly? Or vice-versa? I think it could be confusing to have one after the other vertically. I like the layout of the individual people's details here a lot better than in the latest awards though - it's better balanced for sure!

• Visual design note - i noticed you have transparent overlapping squares as a visual design theme. It doesn't appear those squares are in the fedora palette, they look peach and violet to me? We want this website to feel like it matches the other fedora website properties. I think using fedora palette colors on those blocks could help. We also dont have anysort of visuals with that kind of theme of overlapping squares, not to say it couldn't work but i wonder if you explored using other shapes too like maybe the fedora bubble shape or infinity sign or even badge artworks?

• What does the ribbon with numbers on it mean in the individual leader squares on the leaderboards? star 4.8 in this screenshot?

• What does "Badges/Awards" mean in the leaderboard individual details blocks? Every entry has it - what is meant to go there and what does it mean? Also where are the job titles coming from? What field in our FAS account data or on the badges profile badges is that string coming from (for example, "UX Researcher"?
  r
  

• Did you create the welcome artwork in the join us section? If not, where did it come from and what is the license?

• I like the "why join us" copy better than the other copy - i think it has the right tone and attitude and is more engaging! This section has a nice layout too. I don't think the copy actually addresses the question "why join us" though, instead, it just has basic information about how to use badges. The text, with a little editing and tightening up, could probably be used elsewhere. I think it would be worth developing text here to answer the why join us question, or change the question to "How do I join?" since that's what it's really answering.

It’s really easy! Just sign in badges with your Fedora account, and you will see you have
atleast one badge. Congratulations, you’re a badger. If you participate in Fedora in
anyway, you would probably notice badges popping up on your profile as you go about your
business. Want to see your badges collections compared with others? Check the
leaderboard. Jonsing for more badges? You can see all from our badge index and get to
work on your collection.

• The FAQ section text I think could also use some editing / corrections:

We have recurrently received some questions from those who are interested in joining our
community, here are some and their answers.

• The navigation at the top of the page seems to be HTML anchors down the page, is that right? If not, what pages will they point to? If so, how can users navigate to the other parts of the site? Where is the search box?

OK, hope this helps! Looking forward to your next draft! :)

Corrections made, please review : https://www.figma.com/file/SqCSMIDg2oy5aXKQStuSgl/Fedora-badge-landing-page?node-id=295%3A1678

@riecatnor

1st draft of a redesign on the landing columns. A reduction in width for the weekly and monthly columns, accompanied by an increase in width for the latest column, may move eyes to the badges themselves.

Hi @ejirooghenekome1998 in case you aren't working on this ticket anymore, is it okay if I take over this issue ?

Hi @riecatnor if it's possible, please can I contribute/ be assigned to this project?

Great work with the design! @ejirooghenekome1998 I had a little tweak to the design in mind, let me know if it's okay to go ahead.
Hi @riecatnor please advise. Thank you #outreachy2021

Hello @ejirooghenekome1998 . Amazing work on this ticket ! Are you still working on this or could I take it up , as discussed with the Fedora Websites and Apps Team ?