Closed Bug 791685 Opened 12 years ago Closed 11 years ago

Sandstone design for elmo, l10n.mozilla.org

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: Pike, Assigned: mternoway)

References

Details

Attachments

(5 files)

mozilla_l10n_homepage
386.70 KB, image/jpeg
Details
Revisions to elmo home page based on Brussels work week feedback.
35.50 KB, image/png
Details
mozilla_l10n_homepage_v2
813.89 KB, image/jpeg
Details
mozilla_l10n_homepage_v2_loggedOut
847.87 KB, image/jpeg
Details
mozilla_l10n_homepage_v2_loggedIn
835.30 KB, image/jpeg
Details 
We'd like to sandstone elmo, the app that runs l10n.mozilla.org. See bug 748781.

As talked about in Warsaw, let's get a design bug on file.

The current design for elmo was done in bug 592515, the implementation of it in bug 661027.

One aspect that we use on and off on the current design is the subtitle. Like the "Users first, no matter where they are." on the homepage, also used on https://l10n.mozilla.org/teams/, and https://l10n.mozilla.org/dashboard/tree-status/fx_aurora. Looking at it, might not be worth keeping.


Key pages would be https://l10n.mozilla.org/, and https://l10n.mozilla.org/teams/fr.

We'd also have wide pages like https://l10n.mozilla.org/dashboard/history?tree=fx_central&locale=fr.

I see challenges with our current log-in UI, we'll need to position that.

Also, on the team page, we have a bunch of buttons with icons. The current icons would be at https://github.com/mozilla/elmo/tree/master/apps/shipping/static/shipping/img.

And then we have our extra wide pages for which we currently break out of the grid to use as much width as a desktop user can get, those are mostly data views which aren't all that useful on small screens to begin with.

Jeff had some ideas for changing the content itself on the homepage, I'll let him comment on that.
Thanks Axel for filing the bug. 
I'm sorry but I'm having a hard time digesting comment #0 and understanding what the request is.  Would you be able to please rephrase / clarify ? a short summary of the problem and ask would be really helpful, and then a brief background for context.  It seems like there are several things rolled up into this request and I just want to make sure I understand and am not over-complicating things in my head.

Thanks so much
We'd like to have a design based on sandstone for l10n.mozilla.org. That's it in a nutshell.

Jeff will comment on changes he wants for the entry page, and if they make sense outside of the design change or not.

The rest of my comment is more about details, and tries to highlight features that we probably need to get handled as part of the design.

Maybe this is that we need three designs? One for the home page, one for the team page, one for data-rich pages.
Thank you, that helps a lot. 

What is the overall priority level on this and desired timeframe to get the designs done?
(In reply to Tara (musingt) from comment #1)
> Thanks Axel for filing the bug. 
> I'm sorry but I'm having a hard time digesting comment #0 and understanding
> what the request is.  Would you be able to please rephrase / clarify ? a
> short summary of the problem and ask would be really helpful, and then a
> brief background for context.  It seems like there are several things rolled
> up into this request and I just want to make sure I understand and am not
> over-complicating things in my head.
> 
> Thanks so much

As far as content goes, I'd like to mix and match some of the stuff that's already been done on other mozilla.org sites for l10n.mozilla.org.

1) Similar to the Get Involved page, I'd like to see this video (http://www.youtube.com/watch?v=L_8rRDvlOl0) underneath a header with our tagline (Users first, no matter where they are). Then I'd like to see the text currently in the "Getting started with Localization" block underneath the video (or maybe just the line, "We speak 90+ languages, how about you?").

2) I like the three column approach for content used on sites like reps.mozilla.org. I'd like to adapt some of our existing blocks of content to fit within that framework.

Those are my initial ideas. But you guys tell me what's more feasible, should we work on adjusting content fixtures separately from the design, or does it make sense to do it all at once?
Slightly off-topic but...
"I can juggle with 11 balls, how about you?"
"I can wrestle a herd of lions, how about you?"
Regarding timeframe, I guess we have the same timeframe as all other requests.

Regarding priority, we have feature work that's on hold for sandstone, just because we need to win back some screen estate to spend some. Among the things I want to see for l10n.mozilla.org, sandstone is big. There's a lot of data to digest, and the current design is rather noisy, which is not helpful.

Not to mention that the html needed for the current design is pretty intense to deal with.

Another item we forgot (sorry, pile) is that we got a new wordmark for mozilla l10n in bug 759497.
Thank you.  I've asked Lee Tom to help us with this.  He's very familiar with the Sandstone theme and can help offer the best solution here.

(In reply to Axel Hecht [:Pike] from comment #6)
> Regarding timeframe, I guess we have the same timeframe as all other
> requests.

I'm sorry but can you please clarify what this means? I'm not sure what other requests you're referring to.  A more specific timeframe or date would be helpful.
Assignee: tshahian → ltom
Status: NEW → ASSIGNED
> (In reply to Axel Hecht [:Pike] from comment #6)
> > Regarding timeframe, I guess we have the same timeframe as all other
> > requests.
> 
> I'm sorry but can you please clarify what this means? I'm not sure what
> other requests you're referring to.  A more specific timeframe or date would
> be helpful.

We're hoping for a quick turnaround. We had already naively started hacking on something, and took a step back after I talked with Sean at MozCamp. So that thread is on hold 'til we get the designs now.

We want to put the deployed state of this design on our Q4 goals for elmo, so getting the designs within the end-of-october timeframe would be good. I hope that's realistic, given that Lee did the previous design, so in understanding our content he's not starting from scratch.
Could we get a status update here?
Still trying to get a handle on the scope - it can be hard to understand a project when it's not totally defined up front.

Based on comment #2, it sounds like you need three pages:
- homepage (ex. https://l10n.mozilla.org/)
- team page (ex. https://l10n.mozilla.org/teams/sq)
- data-rich page (ex. ?)

Do you have wireframes for these pages? Or an outline of the content you want featured? We'll need some more concrete info about what actually needs to get done before we can get going.

Also, if there are any other design mandatories (such as the points suggested in comment #4) we should know about going in that's important to share up front as well.

I know you all are trying to proceed quickly here, and I know this bug has been slow getting going. I apologize if it seems like I'm trying to delay anything here, but I assure you the project will go much more smoothly if we can get a really clear picture of what we need to do up front. It will definitely save time in the long run.
There are no content changes planned for any but the home page.

An example for a content-rich page would be https://l10n.mozilla.org/dashboard/history?tree=fx_central&locale=fr

As far as the suggestions for the homepage go that Jeff did, if we're asking you the wrong questions, who would be the right guys to ask? If you know who can get you the right input, mind filing a bug to get that? We've put here what we know, to the extent we do, and with the details we have. Everything beyond what's here is sadly outside of the scope of things we can do.
Hmm. We seem to be at a bit of an impasse - I don't want my team to start projects until they've been completely defined (am trying really hard to hold the line on this, not just for you but for everyone), and from comment #12 it sounds like you guys aren't able to package things up in the way I've requested. I'm honestly not quite sure what to do, but have copied Mike Alexis just in case he has any ideas...he's good at figuring these things out (no pressure Mike).

I'd also note that it's not a matter of you asking the wrong questions, it's mainly about just packaging up the info that's been discussed into a format that clearly outlines the scope of work and project details that will enable us to do a good job. Not trying to make anyone's life difficult, but that's a pretty standard ask from creative teams.
I'd suggest we get on a call to talk through the details.  

In the meantime, do you have a standard format in which you'd prefer us to present the information you need?
How's the planning progress on this one?

I know you said "[other work] will keep us pretty busy for most of January". Just gently poking to see if you've found a time slot for this work yet.
Attached image mozilla_l10n_homepage — 
Hi everyone,

I've attached an example for what the new l10n homepage could look like based on the new Mozilla sandstone branding. Overall I've closely followed the wireframes that were provided for this. Please let me know what you think of this direction.

Thanks!
Matt
I might look a fool for pointing the obvious out; but the links near the Tabzilla tab will be L10n specific right. E.g. Home, Teams, Documentation and maybe Sign-in.
Comment on attachment 706561 [details]
mozilla_l10n_homepage

I like it. I like the warm tone of the default mozilla background, too.

Yet, I'm still a bit hesitant on the colorscheme. We have a few pages that are quite edgy on the colors, like the teams/fr page. I'd love to see those in context, or see a color scheme for them that matches the default mozilla brownish style.

FTR, the footer content should be different, but that's independent of the design, I guess the one here is copied, and we'd put our existing footer content into that design?
(In reply to MT from comment #17)
> Created attachment 706561 [details]
> mozilla_l10n_homepage
> 
> Hi everyone,
> 
> I've attached an example for what the new l10n homepage could look like
> based on the new Mozilla sandstone branding. Overall I've closely followed
> the wireframes that were provided for this. Please let me know what you
> think of this direction.
> 
> Thanks!
> Matt

I really like it! We need to make sure to list some l10n team names in column two and maybe get Matej or another copywriter to give the copy a second glance (it never hurts).
Matt, nice work on this - thanks.

L10n team, my request for you all is to meet outside of bugzilla, agree on your feedback and then share it here in one organized burst. Doing creative reviews in bugzilla can be really tricky, with different folks weighing in, etc, so if you can present Matt with a clear set of agreed-upon next steps that would be a huge help to ensuring a smooth process and successful outcome.

We'll wait on that to move forward. Thanks!
(In reply to John Slater from comment #21)
> Matt, nice work on this - thanks.
> 
> L10n team, my request for you all is to meet outside of bugzilla, agree on
> your feedback and then share it here in one organized burst. Doing creative
> reviews in bugzilla can be really tricky, with different folks weighing in,
> etc, so if you can present Matt with a clear set of agreed-upon next steps
> that would be a huge help to ensuring a smooth process and successful
> outcome.
> 
> We'll wait on that to move forward. Thanks!

We recently had a team work week and compiled a list of suggested changes to the mock up. I also attaching an updated wireframe to contextualize all of this:
- Get involved/call to action needs to be more pronounced. We propose this happen both: 1) by customizing the tabs at the top so that the "Get Involved" link takes the user to wiki.mozilla.org/L10n:Contribute and not the Mozilla.org Contribte page; 2) Making the "Lorem ipsum" text underneath the video a large button. The copy within the button saying, "Help us bring Mozilla to the world, one language at a time." This button would also take the visitor to wiki.mozilla.org/L10n:Contribute. 
- Replace the copy in column one with the following:
Projects we localize
Mozilla's translation and localization (l10n) efforts spread Firefox and web throughout the world. No matter your language, technical skill, or education, there are many ways you can help us put users first, no matter what language they speak. These are some of the projects translation and localization contributors work on:
<ul>
<li>Mozilla products, like Firefox
<li>Mozilla websites, services, and marketing campaigns
<li>SUMO product support documentation
<li>MDN developer documentation
</ul>
Click the button above to learn how you can help translate and localize Mozilla into your language.
- Replace the copy in column two with the following:
L10n Teams:
We speak 90+ languages, how about you? Search for your language below to see what your l10n team is working on:
- In the l10n teams column, we'd like to add the auto-complete search bar found on https://l10n.mozilla.org/teams/ to allow visitors to search for their language team right from the home page. 
- "Mozilla Localization" to "Mozilla in Your Language"
- Customize the bar at the top of the page with the items in the middle bar between the slogan and video. Also add a login/sign-in option here too.
- Remove the middle bar from main page and only use it on the team pages. We also want this to move more content above the fold (specifically the "Get Involved" button, videos do not work in all areas of the world).
- Replace original sandstone color scheme with light gray sandstone color scheme.
- Video needs to be re-edited and we need to get our hands on one with higher resolution. We're already in touch with the video's owner for this and will follow up with you as we get more info.
- If we can't read in from our twitter feed and the blog in the "L10n Discussion" column, please add a twitter icon, or a reference to our Twitter account at the bottom of that column.
Thanks all, really appreciate the organized feedback.

Matt, do you have any questions? How do you feel about proceeding with the above direction?
Matt, anything we can help with?
Could I please get a status update?  This is a Q1 goal for us.
Flags: needinfo?(ltom)
Sorry about the delay...we'll be back with an update asap.
Hi all. I just connected with Matt on this and we realized that he wasn't cc'd on the bug, which explains a lot. Apologies for the confusion.

Now that we've got that straightened out, Matt can resume work on this very soon (as in this week). 

Laura, re: overall timing, when you say this is a Q1 goal, is it doing the design or having the site actually built? Am wondering what deadline we need to be aiming at.
Assignee: ltom → mternoway
Hi everyone,

Sorry for the delay on this, I wasn't purposely ignoring anyone!, unfortunately wasn't receiving any of the posts. 

Thanks for the feedback on the layout, I was able to work out some of the points of concern.  Looks like the main issue was to bring a CTA to a more prominent point. I've done this by moving above the fold and to the side of the video, as well as merging the original subheadline to flow into the text 'Help us bring Mozilla to the world, one language at a time' followed by a simplified CTA 'Get involved'. I think with the above amount of copy would be hard to work into a clickable button, especially in various languages.Please let me know how you feel about this approach.

Thanks,
Matt

    
    

    
  
Thanks Matt. That seems like a good solution to me. l10n team, please let us know what you think!

    
    

    
  
Thanks Matt, this looks good to me, too. I'm gathering the feedback outside of the bug at https://l10n.etherpad.mozilla.org/elmo-design-feedback
Flags: needinfo?(ltom)

    
    

    
  
Hi everyone,

Just want to check in to see if there were any final decisions for the l10n homepage.
I've been following the etherpad, and noticed there are a few minor tweaks that may be necessary. Please let me know if there is anything specific on my end that I can do before I pass along the PSD.


Thanks!
Matt

    
    

    
  
Let me get back to you on Monday, we'll gather in real life next week anyway, and then close out the remaining questions. I expect that https://dev.twitter.com/terms/display-requirements will stay on the questions for the twitter section, if you want to check that out already, that'd be great.

    
    

    
  
Rainer's got a high-def video, but needs to do new intros and outros still.

Rainer, the upcoming design is in attachment 721889 [details]

    
    

    
  
(In reply to MT from comment #33)
> Hi everyone,
> 
> Just want to check in to see if there were any final decisions for the l10n
> homepage.
> I've been following the etherpad, and noticed there are a few minor tweaks
> that may be necessary. Please let me know if there is anything specific on
> my end that I can do before I pass along the PSD.
> 
> 
> Thanks!
> Matt

Hi Matt,

In our work week we identified a few specific tweaks to make on the home page. Here's what made the list from the ep you've been following and the work week:

   * We want replace the copy under the "Users first, no matter where they are" block with this copy from the "Projects we localize" block:  

"Mozilla's translation and localization (l10n) efforts spread Firefox and web throughout the world. No matter your language, technical skill, or education, there are many ways you can help us put users first, no matter what language they speak."

    * Add Tabzilla
    * We need some feedback on displaying the twitter feed according to twitter's display requirements. If it's possible to display it according to their timeline guidelines and keep it looking awesome, we want to keep it. If not, we'll have to re-evaluate.
    * The contact link should lead to https://wiki.mozilla.org/L10n:Communication.
    * We're currently not using Persona to log in, as only those with LDAP accounts can perform their l10n signoffs, so that may need to be removed and could be replaced with tabzilla.

I believe that is all. If I've forgot something, Axel will chime in :-)

    
    

    
  
Thanks Jeff. Matt, let us know what you think.

Also, is there a due date we should be shooting for here?

    
    

    
  
(In reply to John Slater from comment #37)
> Also, is there a due date we should be shooting for here?

Getting the sandstone done is now a carry-over goal for Q2. In other words, our timeline is already pretty busted.

(In reply to jbeatty from comment #36)
>     * We're currently not using Persona to log in, as only those with LDAP
> accounts can perform their l10n signoffs, so that may need to be removed and
> could be replaced with tabzilla.

This comment should actually be about:

The current sign-on UI seems to assume that we're using persona. We need to continue to auth against ldap, and we doubt using the same visual assets is cool. Maybe we should just keep the current UX?
"Log in" being a link, showing the following on click:
"Email" "Password" `OK`, two textfields and on button
"Hello, Axel. Log out", Log out being a link for logged in users.

If using the same visuals as persona is cool, we can keep that, but it'd be replaced with the user name for logged-in users, I guess.

    
    

    
  


  

    
    

    
  


  

    
    

    
  
Hi everyone, 

I've attached two jpgs with the revised layout based on the latest feedback.  Included are a logged in and logged out scenario, as well as the revamped look to the twitter feed, which follows close to their guidelines. Please let me know what you think.

Cheers,
Matt

    
    

    
  
Thanks Matt! l10n team, like with earlier rounds, if you could evaluate outside the bug and then present us with your rolled-up feedback that would be super helpful. Are we close?

    
    

    
  
(In reply to John Slater from comment #42)
> Thanks Matt! l10n team, like with earlier rounds, if you could evaluate
> outside the bug and then present us with your rolled-up feedback that would
> be super helpful. Are we close?

Hi John,

I think we're all in agreement that this looks great! Thanks for all the help :-)

Jeff

    
    

    
  
Awesome! That's great news.

Matt, please post the PSDs here as soon as you can so the team can start building.

    
    

    
  
Hi guys,

Here is a link to the PSD!

https://www.dropbox.com/s/41zezhm3ibeeers/mozilla_l10n_homepage_v2.psd

    
  
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: