Pontoon Homepage Redesign - UX

Pontoon
#7

Hi Pramit,

That’s great work! thanks for posting this.

The first thing I’d love to get more details on here is: what’s the rational for promoting the localization of Firefox desktop only? I know it’s our flagship product, but I’m a bit afraid it may be daunting to some newcomers to be directed directly to a huge project (in terms of numbers of strings) - and that takes months to ship for a new localization.

I’m wondering if it couldn’t be more of a “Localize Firefox (or other Mozilla projects” kind of thing, that then brings the user to the list of all available projects.

I’m especially thinking this since it’s become more and more common for me to direct newcomers to smaller projects such as Focus Android, in cases where they aren’t backed up by other localizers and/or don’t have a lot of time to localize - but still want to contribute to Mozilla.

Before I continue giving more reasons, I think I need to get the rational, because that might just explain everything on my side and make more comments useless :slight_smile:
Thanks! And again, great work!

3 Likes
#8

I like so many things about this, Pramit. Good work :slight_smile:

I also have copy improvements to suggest (e.g., we should use the standard industry term for describing Pontoon, “translation management system” instead of “localization management platform”). I don’t think I need to mention those here (correct me if I’m wrong).

I like the flow, I like the workflow diagram for making a contribution. I wonder if it makes sense to include the notifications feature in there at some point (create account -> pick team/project -> submit suggestion -> wait for feedback -> see in product -> share with friends -> check notifications for more).

2 Likes
#9

Nice work, @pramit! The design is very clean, lightweight and inviting. It makes me happy to think that Pontoon is about to get a proper (and beautiful) landing page!

I really like how the structure of the page walks the user over the features and the process of localizing in Pontoon. I concur with @mstanke’s point about defining the target audience for the features slide. Perhaps there’s an opportunity here to discuss localizer-facing features separately from the ones which cater to the needs of l10n managers?

The gray bars between features suggest some kind of temporal progression to me, especially that similar bars are used on the next slide in order to explain the localization process (which could do with a bit less waiting in the description :slight_smile: ).

As a potential user, I would also like to see at least one screenshot of the UI to quickly get a broad idea of what kind of software this is. Perhaps it could even be featured on the RHS of the first slide?

I have similar questions about the CTA as @flod and @delphine. Maybe something more generic, like Choose a project to translate, would be a better choice? It would lead to https://pontoon.mozilla.org/projects/.

I also agree with what @adngdb said about the landing page being Mozilla-centric. I think embracing it in the design of the landing page is the right choice right now.

I can’t wait to see the landing page live! Thank you for starting this thread and for opening the design process up for discussion. Well done!

2 Likes
#10

That could fit into the empty space in the first slide. :slight_smile:

But instead of a screenshot, I would suggest to use more schematic picture. A swcreenshot may be to detailed and pulute the clean design of the landing page. Also some users might be confused if the actual user interface looks slightly different (e.g. icon shape changes etc.). But a picture of similar kind like on the second slide from the bottom, with some example strings, might give and nice image how the app looks like.

2 Likes
#11

I already told Pramit how excited I am that Pontoon is finally getting the homepage it deserves and how happy I am with the work he’s doing. :muscle:

I’m glad so many of you have provided feedback, which will be very valuable in the next steps of the development. I’d like to make two high-level comments to address some of the recurring topics.

#1 Target audience

As of today, the primary target audience of Pontoon is Mozilla and the only target audience of pontoon.mozilla.org instance is Mozilla. The homepage should reflect that. Not only by being Mozilla-centric, but also by being the same on pontoon.mozilla.org and when you set up your own instance.

When the situation changes, we should create a general-purpose pontoon.io instance as @adngdb pointed out and even make it easier to create a custom per-instance homepage. But today, given the quality of support & documentation we can offer to 3rd parties, I believe it’s helpful to clearly communicate who’s our target audience, starting from the frontpage.

#2 Call to action (CTA)

Knowing the target audience makes it easier to define a call to action, which lets users know what to do next. Specifically, our target audience for the homepage and it’s main CTA should be the new contributors to localization at Mozilla, because over 85% of existing localizers use a custom homepage (team dashboard). I also don’t think the (new) PMs would benefit a lot from the homepage, because they usually approach us directly before they start managing projects.

The “Localize Firefox” CTA, Pontoon being introduced as a “tool to localize Firefox” and no obvious path to selecting other projects indeed make the homepage too Firefox-oriented. That said, I believe Firefox should still be given a special treatment (same as on mozilla.org), because I believe it’s the primary magnet for new contributors to localization at Mozilla.

I think something along the lines of “Localize Firefox or pick another Mozilla project” that @delphine pointed out is the way to go.

2 Likes
#12

Thanks stas for the feedback, regarding your questions:

  • Features segregation
    (Categorizing features is not the best way to go for it, we can try to rearrange all the features but if we categorize them then it might confuse the user because we will need to specify that what are l10n managers and contributors and people might feel it is complicated, which is what I am trying to avoid. Users should feel that it’s an easy to use tool.)

  • Gray bars
    (I wanted to connect the features to one another, I will try to avoid that temporal progression feeling. I just wanted the user to feel that there are many more features and we are listing down the main ones that’s why I used the gray bars so as to make a feel like a chain. I will try to present it in a better way in the next iteration)

  • RHS of the first slide
    (The RHS can be used with the UI of the screen but I already used one in the ‘in-context localization’ section, so I was avoiding it. And I also had a plan to put a video in the background and arrange the content accordingly.)

  • Localize Firefox CTA
    (I agree that we should make it not specific to firefox, we can rename it to ‘Localize Mozilla’ and write about Firefox in our content on the first page. Keeping a big title for the CTA is not much appreciated as there are some users who don’t read everything, so I suggest that we should keep it short.)

#13

Thank you for your feedback. Regarding your questions.

  • Copy edit
    (Translation management platform is something standard which can be seen on transifex and other products as well)

  • Notifications
    (We will be mentioning the notifications in the features section and remove the offline mode feature.)

#14

Thank you for your feedback.

  • Localize Firefox CTA
    (I agree that we should make it not specific to firefox, we can rename it to ‘Localize Mozilla’ and write about Firefox in our content on the first page. Keeping a big title for the CTA is not much appreciated as there are some users who don’t read everything, so I suggest that we should keep it short.)
#15

Thanks for your feedback.

  1. Slide 1:

  • Top right side looks empty
    (because the background is not fixed, we will be experimenting with the video in the background and regarding reshuffling the content, we can do that and get it all centre-aligned but it needs to be checked with how it goes with the video).

  • Top menu bar
    (it will be visible while we scroll, its fixed as the header)

  1. Slide 2:

  • The page is focused on who?
    (It is mainly for the contributors and formally, the correct term is Translation Management System, but we could use a more commercial term like “Localization Platform”, which we also use in the README.)

  • Features reshuffling
    (Yes, a contributor will surely want to know about the features important to him first. I felt tracking deadlines is also important, dashboard is a feature which can help the contributors confirm about their contribution. I will make the new changes and add Notifications as a feature.)

  1. Slide 3:

  • The timeline action clickable
    (The timeline actions won’t be clickable. They are just to show a path to contribution, just a general idea.)

  • Content of the actions in the timeline
    (I agree that there needs to be less waiting, I was thinking the same that maybe we can write something else showing the same thing basically like instead of “wait until it gets approved by a trusted localizer” maybe we can write “Suggestion will be checked by a trusted localizer”)

  1. Slide 4:
  • Available for very few projects
    (I agree that people might be disappointed with it but it’s an amazing feature and needs to be communicated, it attracts a lot of contributors. Initially we might not have many projects about it but with time maybe we can get the other projects for in-context localization. So for the long run, we should do this.)
  1. Slide 5:
  • Unified Footer
    (Yes unified footer can be done.)
#16

Thanks for your feedback.

  • ‘Projects’ rather than ‘products’
    (We will change that as part of the copy edit)

  • ‘Get in touch’ link
    (it is directed to pontoon-team@mozilla.com)

#17

Thanks for your feedback.

  • Regarding Mozilla-centric CTA on homepage.
    (The current pontoon.mozilla.org is specific for all the Mozilla based projects and thus the CTA and the homepage proposal is Mozilla centric)
#18

Thank you everyone for the feedback, over the last week I have been working on all of your suggestions and questions regarding the new homepage.

I have come up with small changes in the design and the document for the copy of the homepage which I missed to update last time.

I would really like to know your thoughts regarding the new changes.

Here is the link to the copy:

And here is the link to the iteration:

3 Likes
#19

Hi everyone,

From the past few weeks I was working on the development of the homepage with the latest iteration- https://ibb.co/hAZgK8
and an updated copy- https://docs.google.com/document/d/1mdFxnK5CIIaSQNhj2gn-Yk9LVXUn4HPpDjtxI2qb00c/edit?usp=sharing

I have finished it and @mathjazz has published it on stage at http://pontoon-new-homepage.herokuapp.com/

We would like to hear what you think about this page as

  • How it appears to a person who is new to Pontoon.
  • If the details are mentioned in the right order.
  • Overall direction of the page and how it ends.
  • Comments or improvement in the copy (which I know there will be a lot).
  • The screen resolution and the symmetry of the design.

And any other ideas or feedback.

Thanks

#20

Some quick notes as I’m giving it a look:

  • The “Why should I join Mozilla localization?” link at the bottom of the first part is weird, I only noticed it was a link when I tried to select it to paste it here.
  • Going from an all black background to an all white background kinda hurts my eyes.
  • The font is too small on my vertical screens, making it hard to read (resolution is 1080 x 1920).
  • On my same screens, the dots on the left overlap with the content.

Otherwise, good work Pramit! :+1:

1 Like
#21

A few nits:

  • Button labels use inconsistent case (they should either use Sentence case or Title Case, not both).
  • As Adrian noted, the font is quite small, even on an horizontal screen (27", taking half the screen).

Is the plan to make this page localizable? If so, the font use is likely going to be an issue.

P.S. I’m going to leave some comments on the copy in the Google Doc.

1 Like
#22
  • The “Why should I join Mozilla localization?” I have put cursor and text-decoration as well to make it look like a link to other section. But it is actually an inspiration from some website so what I think is that main focus has to be on the primary CTAs that’s why its appearance is like a question just for the users who are interested in knowing more.
  • I am a little clueless with the background colours because as for Pontoon we don’t use many colours in the rest of the tool. It leaves me with a small set so the white background was the only fitting option for me as a background which looks neat with our content. I am still searching for suitable replacements.
  • Yes I checked it in the horizontal screens so the pagination dots were not overlapping, I completely forgot to check for vertical screens. It goes back to cover 960px in case of 1080x1920 screens and that’s why the CSS is actually messing it up. I will fix that. And same with the fonts.
#23

Probably, I am not sure. I need to ask @mathjazz regarding the localization of this page.

#24

Yup, we should make the site localizable. Not right now, but it the future.

#25

I like that kind of a link to the next slide. DuckDuckGo does it too on their homepage.

#26

Could we add something about joining a local community for your language to introduce yourself and get some general feedback on your contributions? It seems really important for onboarding and retaining new contributors.