Closed Bug 925893 Opened 11 years ago Closed 10 years ago

Demos Studio rework to conform to new MDN design

Categories

(Marketing :: Design, task)

All
Other
task
Not set
normal

Tracking

(Not tracked)

RESOLVED WONTFIX
Due Date:

People

(Reporter: aspivak, Assigned: mternoway)

References

Details

Attachments

(2 files, 1 obsolete file)

>>Project/Request Title:
Demos Studio rework to conform to new MDN design

>>Project Overview:
We are in process of redesigning the MDN website, with creative/design from Sean Martell. We're planning on doing a complete overhaul of the Demo Studio & Dev Derby sites over the next 2 quarters, but in the meantime would like to make some small adjustments to the design so they mesh better with the new design of the larger MDN site. 

Demo Studio: https://developer.mozilla.org/en-US/demos/
Dev Derby: https://developer.mozilla.org/en-US/demos/devderby

>>Creative Specs & Deliverables:
+  The current version of the Demo Studio logo looks distorted on retina displays.
+  The current button sets look poor with the dark background
+  The current background (cars, etc.) doesn't make much sense in relation to the overall new MDN design
+ alternative to the the hover overlay effect within the product list 
+  Redesign the individual demo's drilldown page - currently looks fragmented and not very fluid.  
+  Change Dev Derby background - current one looks bad on retina.  The cars don't suit the new overall MDN design. Get rid of the Trophies and have more meaningful screenshots of winners?


>>Launch Date:
2013-11-15

>>Creative Due Date:
2013-11-08

>>Mozilla Goal:
Developer Program/MDN

>>Points of Contact:
aspivak@mozilla.com
Due Date: 2013-11-15 → 2013-11-08
Hi All, 

Thanks for submitting your request. We'll be back in touch early next week with next steps. 

Cheers, 
Jennifer
Thanks Ali. Is it fair to say that we basically need to redesign these two microsites to match the look & feel of the new MDN? If so, that's great but it seems to be a little beyond the "small adjustments" description from comment #0. If so, we should have a quick chat to make sure my team & I fully understand what that would mean.

Mainly want to make sure we're all on the same page re: scope before we get going.
Due Date: 2013-11-08 → 2013-11-15
As the scope is defined, I want to go ahead and assign this over to Matt, so he can be privy to the discussion.
Assignee: jbalaco → mternoway
Status: NEW → ASSIGNED
Flags: needinfo?(aspivak)
Please assign to Matt so we can get moving on this. Let me know if I need to provide anything, such as a SOW, for the work. We should set up a meeting ASAP.
Flags: needinfo?(aspivak)
The bug has been assigned to Matt (shown here as MT) for a couple of weeks now. I believe we're waiting for you to kick things off.
Hi guys, I want to mention that I am working with Sean on direction for this, as he is finalizing the MDN site, these two sites would mirror that closely. In his new design there is some space reserved for  graphical treatment which we can have some fun with to give each their own unique feel. One thing I want to confirm is, will the content for these sites pretty much be the same?

Thanks,
Matt
Thanks Matt. AFAIK yes - it will be exactly the same content.

Ali, can you confirm?
Flags: needinfo?(aspivak)
Yes, confirming that the content will not change.
Flags: needinfo?(aspivak)
Moving this out of the critical path for the redesign launch.
Blocks: MDNPostLaunch
No longer blocks: MDNLaunchBlockers
Hi guys, I want to share a couple of mockups I have been working on for the Demo Studio and Dev Derby updates.  The idea behind these is to bring them closer in line with the new MDN site look and feel, but still give them a fun and unique environment. The two sites were designed to mirror each other closely to give a greater connection between the two. I have continued on with their original themes, but with more of a content first focus, by reducing the extra design elements with a minimalist like setting. Each use a monochromatic colour palette which I feel allows the content to have a greater focus. Please have a look and let me know how you feel about this direction. Looking forward to hearing your feedback.

Cheers,
Matt
Attachment #832409 - Attachment is obsolete: true
I like this, thanks Matt - particularly enjoy the nighttime palette.

Ali, what's the review/feedback process look like here? Who needs to weigh in, how will that be rolled up, who makes the final call, etc.
Wow, this is outstanding.  I *love* this.

I'm wondering if we should include Sean in some way, just to make sure he doesn't see anything inconsistent.

Again though, man I love this.
Thanks David!

Matt can comment further, but I know he and Sean have been communicating throughout the design process, so the consistency should be pretty built in.
notes from https://bugzilla.mozilla.org/show_bug.cgi?id=941382

Before the full Demo Studio redesign (and maybe even before the redesign launch) we might want to consider making interim improvements to the Demo Studio. Minor to moderate style issues exist when the existing Demo Studio theme is viewed in the redesign.

Some examples are provided below. This is not a complete list.

Demo thumbnails are not using all available space
http://i.imgur.com/kKbTCYu.png

Some elements are out of alignment
* Buttons: http://i.imgur.com/rUp9heD.png
* Navigation: http://i.imgur.com/QSbsFWx.png
* Spotlight: http://imgur.com/z9NmC3I

Some text is difficult to read:
http://i.imgur.com/H1VAXE8.png

etc.
Boy, these new designs are beautiful. Congratulations!

For whatever it's worth, I think the engineering team can address comment 17 without anything else from the design team. For the most part the fixes involve simply updating those broken design elements to look as they do now in the current Demo Studio theme.
Just spoke with Ali in IRC. Looks like we will not be addressing comment 17 now, and will instead just wait on the full Demo Studio redesign.
:openjck++ this is looking sweet.

Adding a couple of folks for feedback:

Mark, can you ask one of the evangelists to give some feedback on these designs for the demo studio? Ideally they will help send many visitors to it. :)

Holly or Craig - do either of you want to give any additional feedback?
Flags: needinfo?(mcoggins)
Flags: needinfo?(hhabstritt.bugzilla)
Flags: needinfo?(craigcook.bugz)
One important note: The Dev Derby site currently visible on production is a stripped-down version of the complete site. This is because the contest is on hiatus. When the contest is running, the site looks like this:

https://developer-dev.allizom.org/demos/devderby

Designs will need to consider this additional content, as well.
The designs look really outstanding. My only concern is that the template that this is working off of is our zone level page template. This template is for pages the exist *below* the global navigation. Demo Studio is a global navigation item and we should differentiate this template from the Zone pages template.

We are working right now on a template that is intended to work for all Global landing pages: Developer Program, Tools, Zones, etc... and a variation of this would be for the Demo Studio. I also previously worked on an interaction idea for viewing demos inline instead of bringing the user to a separate landing page to do so. 

Let's discuss the separate paths we've been taking and resolve them before moving forward. Should I set up a meeting for before the Christmas break?
Flags: needinfo?(hhabstritt.bugzilla)
:habber - can you link to the bug for the new template for all global landing pages?
Flags: needinfo?(hhabstritt.bugzilla)
We are only starting with the Developer Program since that is what was a blocker for launch. 

https://bugzilla.mozilla.org/show_bug.cgi?id=918127


(In reply to Luke Crouch [:groovecoder] from comment #23)
> :habber - can you link to the bug for the new template for all global
> landing pages?
Flags: needinfo?(hhabstritt.bugzilla)
Good job! I prefer those designs  to the previous one for their simplicity: it seems to be easier to navigate, and find the information you are looking for.
Flags: needinfo?(mcoggins)
I really like these. Any thoughts on what they'll look like in smaller viewports? (I'm assuming this will be a responsive layout.) It might mostly involve doing something with the background and header treatment, maybe alternative backgrounds for small screens, or even just remove the image and fall back to a solid color or gradient.
Flags: needinfo?(craigcook.bugz)
:habber, is the Developer Program template mentioned in comment 24 a good enough starting point for :MT to tweak the Demo Studio mockups so the layout will fit in with our other landing pages?

For reference, here's the full Developer Program landing page: https://developer.mozilla.org/en-US/docs/Mozilla/Developer_Program
Flags: needinfo?(hhabstritt.bugzilla)
Wen eed to prioritize the demo studio/derby work before moving forward with more design adjustments. Let's wait until next week to discuss more?
Hey All, 

Can you let me know what next steps for design are here? I want to make sure that is not a hold up when you're ready to implement. 

Thanks, 
Jennifer
Hi Ali + Maris, 

I'd like to propose that we go ahead and resolve this bug for now. If additional work is needed from the Creative Team, you can either reopen the bug or submit a new one. 

Any concerns with that? 

Thanks!
Blocks: 882472
I'm going to won't fix this and open a new bug as our needs have changed.
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → WONTFIX
Flags: needinfo?(hhabstritt.bugzilla)
You need to log in before you can comment on or make changes to this bug.