Improve design for community site (firefox-dev.tools)

[violasong]

(Following up from contributor onboarding work.)

• Something simple that matches other Mozilla sites (see: https://www.mozilla.org/en-US/firefox/developer/, https://extensionworkshop.com/)
• There could be a landing page-like section on the homepage that shows a images of new features. We don't currently have organized info on why one should use Firefox DevTools

[YoonSuhyeok]

I understand this issue. but I am not sure which repository to fix.
This is certainly not the repository. I want to know the store that needs to be fixed.

[YoonSuhyeok]

Sorry, I finally found it. I will write it up soon.

[afnizarnur]

Hi I can help with the design things!
Can you assigned to me? Also, do you have any others' requirement that need to be improved from current site @violasong?

[kartikcho]

Hey @violasong , remember I discussed about this a couple of months ago in detail on the slack channel.
Are we still sticking to using the current Jekyll theme for the site?
In my opinion, it could use a redesign matching the existing Mozilla aesthetic while having some unique accents like a color palette matching that of Firefox Nightly for example. Let me know what you think!

[afnizarnur]

Hi @violasong, I have a time today to do some quick wireframe for this project, would love to get feedback from the layouting or anything :)

Here the Figma link.

Thanks!

[violasong]

Hi @afnizarnur, thanks for this great wireframe! I've been busy but will respond soon, hopefully later this week. @YoonSuhyeok, I'll soon respond to your pull requests as well.

[violasong]

Also, thanks @kartik918 - yes, we're sticking with Jekyll for now and I think your design ideas sound great.

[violasong]

@afnizarnur: This wireframe is looking great! A couple thoughts I had -

• Header: This could be a bit smaller, since DevTools tends to have a more pragmatic feel than the usual product site.
• What's new: I think we may want to have a greater number of smaller sections in here to highlight what's special in each of the main panels. A link to download Firefox should also be here somewhere.
• How to Contribute: Looks great!
• Stay Updated: Nice, I like this! Maybe it should be higher up on the page. If users aren't here to contribute, the next best step for them is to follow us on one of these channels.
• The Team/Footer: These look great!

[afnizarnur]

Thanks @violasong for your feedback!
I'll proceed the feedback tonight, will come back to you ASAP.

[afnizarnur]

Hi @violasong, can you please elaborate me more about the second point of your feedback about "what's new" section?

[violasong]

Awesome! Re: What's New section: I think we might want to call this Highlights, and list maybe 8-10 different features with icons rather than big screenshots. Or maybe 2 things could get the big screenshot treatment, and the rest could be listed underneath.

It would be cool to focus on things that only Firefox has, so basically:

• Inactive CSS
• Changes
• Grid/Flex
• Fonts
• Accessibility
• 1-2 Console features
• 1-2 Debugger feature
• 1 Network features

cc: @digitarald for ideas of what to feature

[digitarald]

We update the What's New section in devtools itself on regular basis; so for most releases we can pull out new additions. Question is how much this should be hit highlights or really regularely updated features.

Could the primary CTA be to download Dev Edition?

Related, we also have the developer newsletter that we should feature for signing up.

[violasong]

For ease of maintenance, seems like it would be best to try to keep this page stable, and link to other places (release notes, twitter) where new things are announced.

Primary CTA being downloading DevEdition makes sense.

A new feature to add: Compatibility panel!

[afnizarnur]

Hi everyone, this is update for the landing page for firefox-dev.tools.

Summary based on last feedback:

- We want to call the what's new section as **highlights**
    - The content should be using just icons rather than big screenshot
        - We want to add many highlight > 5
    - Maybe we can add new variant for highlight
        - With 2 big highlights with screenshot and others just using icon
- Change primary CTA to download firefox developer edition
- Update header to be smaller
- Stay Updated: Maybe it should be higher up on the page.

Stay Updated: Maybe it should be higher up on the page.

From hierarchy standpoint, I think It's better to keep the grouping the "stay update" section with "how to contribute" section because if we put it higher up on the page this will break the primary goal of this landing page: to inform user about the What's Firefox DevTools + Highlighted feature.

[afnizarnur]

Anyway, I already update the wireframe based on feedback on Figma, please check it and if you have any feedback with the layout and content, let me know.

Thanks everyone!

[violasong]

This is looking great! Love the look of the What's New with feature highlights. Those icons are great too!

Contribute bar: Maybe this could be a bit more inviting and highlight the options of Code, Design, Give Feedback?

CCing @fvsch in case they have thoughts :)

[afnizarnur]

Thanks, It's still very rough icon I think 😅, I'll polish it in high-fidelity phase.

Contribute bar: Maybe this could be a bit more inviting and highlight..

I'm trying to explore some variation, how about making it more like this.

1. 3 columns (like pricing element on any landing page).

2. Scroll-tabs layout

I don't know its good idea to use this as direction, but it's more delightful and more inviting.

Example in real world:

Would love to get your input what's the best @violasong or you have any other idea that I can explore. Thanks again!

[violasong]

I love the three columns idea! The scroll tabs example is neat but I think in this case, it would be nice to be able to see all the content at once.

I was actually talking about this bar rather than the section (but great that you improved it :D)

Maybe it could mention the 3 ways of contributing.