Pontoon Homepage Redesign - UX

Pontoon
#1

Hello,

My name is Pramit and I have been working on Pontoon homepage redesign process as part of Google Summer of Code.

We started by conducting a survey and were super excited by the amount of feedback we got. Over 130 Pontoon users chose to participate! The target was to understand how the users felt regarding the homepage and what are the problems we need to tackle in the redesign.

Custom responses were mainly focusing on the problems regarding the navigation. Many people were confused in using Pontoon for the first time and some didn’t understand how to contribute. So the focus narrowed down to make the navigation and path to contribution easy on the homepage.

Based on what we heard from you, we built a wireframe of the new homepage, which we’re now sharing with you for the first time. The following high-level changes have been made:

  • The homepage pitches Pontoon as the place to localize Firefox and other Mozilla products.
  • The homepage has a clear call to action: to start contributing to Firefox localization.
  • The homepage no longer acts as a demo page for in-context localization.
  • The homepage shares the main navigation with other pages.

We’d like to hear what you think about it.

Please consider the proposal a wireframe. Which means we out more effort into the overall page structure and content and less into the details like fonts and colors.

5 Likes
Google Summer of Code 2018
#2

Hi Pramit, I really like the direction.

I think there are a few things to fix in the current copy, but my main question right now is about the “Localize Firefox” concept. What’s going to happen when the user click “Localize Firefox”?

  • We have several locales that don’t localize Firefox, but are on Pontoon nonetheless.
  • This makes the homepage meaningful only for Mozilla, and not significant for any external project that decides to adopt Pontoon as localization tool. Is that expected?

It’s a bit hard to make copy comments and notes on an image (you can’t copy and paste text). Having a doc with the current copy would really help with that.

2 Likes
#3

This makes the homepage meaningful only for Mozilla, and not significant for any external project that decides to adopt Pontoon as localization tool. Is that expected?

As far as I understand, there are 2 different things we have been talking about: Pontoon as an instance being used for translating Mozilla products, and Pontoon as a product that can be used by anyone. pontoon.mozilla.org is the former, and we don’t really support the latter. If we did, I believe we should have a different website (e.g. pontoon.io) that would act as a public-facing presentation of the tool in itself.

So, yeah, to me it makes sense that this is Mozilla-specific.

I would love to make Pontoon as a tool that anyone can use a thing, and we discussed that during our meeting in Berlin in 2017, but as far as I know it is not a priority right now.

4 Likes
#4

Hi Pramit,

Thanks for sharing this wireframe!

I like the general structure and I’m eager to see a new homepage live.

One quick general comment I have is that I think we should talk about projects rather than products. A lot of projects in Pontoon are not products nor fully integrated with one. But as flod said, this can be part of a broader copy edit.

The other thing I’m wondering, where does the “Get in touch” link at the bottom go to?

2 Likes
#5

Hi Pramit.

Thanks for taking the challenge of making Pontoon look awesome and attract more contributors! In general I like your proposal. May I have a few questions to clarify design of individual “slides”?

Slide 1 (Pontoon):

  • The top right part looks empty and sad to me, but it may be caused by my screen resolution. Do you plan to reshuffle the content based on screen size to use all the space?
  • I like the clean design. Is the top menu bar meant to stay visible, when scrolling down?

Slide 2 (Things which make is special):

  • Does this slide focus on contributors, l10n managers or l10n engineers?
  • To address contributors, I think we should highlight the fact, that Pontoon is built for (and by) localizers. As a person with English as my n-th language, I am not sure about the term “localization management platform”.
  • The same for the features on the right. As a localizer I would expect machine translation, translation memory and quality checks to be placed on the top.

Slide 3 (Using it is super simple):

  • I like the timeline design. I see you have got inspired by the user activity timeline. :slight_smile:
  • Do you want to make the actions on the timeline actionable/clickable? So when someone sees it and clicks “Pick your team”, they can actually pick the locale they want to contribute and start.
  • Instead of “wait until it gets approved
” and “wait until it lands
” I would prefer less waiting. Maybe a better wording would be “Your suggestion gets approved
” and “Your contribution lands
”. Or to propose more contributions instead of waiting for the first strings to land.
  • +1 for “Show it to your friends”. That was one of the motivations that has driven my first contributions.

Slide 4 (In-context localization):

  • I very like this feature. Nevertheless I have to say there are very few Mozilla websites that really support it, so people might be disappointed it is not available for Firefox and most of other projects.

Slide 5 (Join us):

  • I like this one. Clear call to action!
  • I have realized current Pontoon dashboards (like the Teams dashboard) are missing any Mozilla branding. Do you think it would be possible to create some unified footer line to share across all pages, except the translate view of course? The same way like you have decided to share the menu.

I need to say this page looks really nice and I think it will attract more contributors than the current and outdated intro. Looking at my e-mail, it may look like a criticism, but please keep in mind I am not a designer, so most of my comments a proposals may be just rubbish.

Michal

3 Likes
#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