Status

Marketing
Design
P3
normal
RESOLVED FIXED
8 years ago
8 years ago

People

(Reporter: fligtar, Assigned: Tara (musingt))

Tracking

Details

Attachments

(4 attachments, 2 obsolete attachments)

(Reporter)

Description

8 years ago
Please design the new AMO blog template. Things I remember from the meeting we talked about this in:

* We can separate into category subpages for AMO, Developers, Personas, Jetpack, etc.

* Much more column width for content

* Can use a heading that goes back to AMO

* Author bio info on side or bottom

* Threaded comments
"design" doesn't mean graphic design, does it?
(Reporter)

Comment 2

8 years ago
More detailed creative brief / spec:

The Add-ons Blog (http://blog.mozilla.com/addons) has become the primary communications vehicle for a number of different projects and initiatives over the past years, including:

* Announcements and discussions on addons.mozilla.org (add-on gallery) features and policies
* Changes to the Firefox platform affecting add-on developers
* Posts on the Add-on SDK and Builder, the next-generation add-ons platform
* Posts about Personas and getpersonas.com
* Marketing events and contests related to all of the above

We'd like to give the blog a new design that makes it easier to identify and drill down into these areas, as well as some cosmetic improvements that have been sorely needed.

Our biggest problems with the current design:
* The post column is extremely narrow, making it very difficult to include images and resulting in extremely tall posts. We'd like this column to be much wider.
* It's impossible to tell who wrote a post from the single post page. We'd like an author block with the person's name, picture, brief bio, and link to their other posts.
* Comments aren't threaded so replies are scattered everywhere. We'd like threaded comments with gravatars.

Design-wise, our website has recently gotten a new look to match that of other Mozilla sites like mozilla.com. While some of this design should be incorporated, I'd also like some variation and a more welcoming, we're-your-friends type feel to the design. Visitors should feel invited to ask a question on a blog post and get an answer or respond to something and start an interesting discussion.

It should be simple and easy to read, and also easy to identify the general topic of the post (AMO, developers, personas, etc.). There should also be an obvious link to the add-ons gallery (AMO/addons.mozilla.org) We'd also like an area to link to our Twitter account, promote our consumer-focused featured add-ons blog (rockyourfirefox.com), and a few other links.

A few specific in-content styles we'll definitely want to have are side-floated images, code samples, bulleted lists, and subheadings.

A couple brand assets we have specific to add-ons can be found here, though it's not necessary to use all of them: http://people.mozilla.com/~fligtar/amo-assets/
Assignee: chowse → jslater
Component: Public Pages → Design
Product: addons.mozilla.org → Marketing
QA Contact: web-ui → design
Version: 4.x → unspecified
(Assignee)

Comment 3

8 years ago
Thanks Justin.  Few quick questions that will help me get started:

* Given a Q1 launch date, what is my deadline to turn designs over to you?
* Do we need to factor in L10n?
* Do you have any rough wireframes capturing what you're looking for? or existing templates/blogs to reference as good examples/inspiration?

I think we should definitely skin the blog with a design that echoes the new AMO website to bring them closer together.  The current AMO site's design theme is pretty simple, and perhaps a little dry/text heavy.  I think we can bring the two sites closer together visually, while making the blog feel more friendly... as you described.  

I'll check resources and get back to you asap...
(Reporter)

Comment 4

8 years ago
(In reply to comment #3)
> * Given a Q1 launch date, what is my deadline to turn designs over to you?
I expect the add-ons blog to get a lot more attention starting in a few weeks as we start to announce some big initiatives, so it'd be awesome if we could have designs by mid-February or earlier.

> * Do we need to factor in L10n?
No, we don't localize our blog posts and don't have any plans to anytime soon.

> * Do you have any rough wireframes capturing what you're looking for? or
> existing templates/blogs to reference as good examples/inspiration?
I'll try to gather some designs I like and post tomorrow. Also adding some frequent contributors to the add-ons blog for their suggestions as well.
Great idea!

One note: I don't think Jetpack needs its own category.

The project works on products for developers, and its products are of general enough interest to those developers to warrant targeting the developers category (especially since we aspire to make those products the dominant platform for addon development over time).

Nor does it seem worth spending the time and effort to build "Jetpack" as a brand in its own right, which is why we renamed Jetpack SDK to Add-on SDK (although the name of the project that produces that product remains Jetpack).

So I would just push Jetpack project updates (product release announcements, roadmap updates, etc.) to the developers category.
(Assignee)

Comment 6

8 years ago
(In reply to comment #4)
> (In reply to comment #3)
> > * Given a Q1 launch date, what is my deadline to turn designs over to you?
> I expect the add-ons blog to get a lot more attention starting in a few weeks
> as we start to announce some big initiatives, so it'd be awesome if we could
> have designs by mid-February or earlier.

Getting designs turned around by mid-Feb or earlier is a little tough since our design resources are tapped right now.  But we're working on finding a freelancer who could help us with this.  In the meantime, if you can share any additional direction, wireframe sketches, etc so that it's ready to go when we find a designer, That'd be great.  Otherwise, stay tuned...

Comment 7

8 years ago
The contractor we hired to do the Air Mozilla redesign did a fantastic job. His name is Chris Daines and I could put you in touch with him and his portfolio if you like.
(Reporter)

Comment 8

8 years ago
(In reply to comment #6)
> Getting designs turned around by mid-Feb or earlier is a little tough since our
> design resources are tapped right now.  But we're working on finding a
> freelancer who could help us with this.

Thanks. I'd intended to use an outside contractor and was asking John for any suggestions when he said that you guys would take on finding the resources. So that's definitely fine with me.
(Assignee)

Comment 9

8 years ago
Sounds good, Thanks Justin.  Will keep you posted.  Tiffney, we already have two candidates under review, but thank you for the suggestion.
(Assignee)

Comment 10

8 years ago
Created attachment 508638 [details]
AMO redesign CR1

Feedback given includes:

---------
* Use smaller footer like on https://addons.mozilla.org/en-US/thunderbird/
* Search box is too prominent given how often it will be used. Prefer it in the sidebar and less bold
* The Register/Log in and Other Applications links aren't needed here and to balance out the empty space from removing them and the search box, recommend putting the add-ons gallery link elsewhere and moving the main heading up 
* It's the Mozilla Add-ons Blog, not specific to Firefox, so would like to see what the AMO logo instead of Firefox logo looks like. or other Logo display options including the FF logo.
* ontent font may be a bit too small.  
* Our blog posts don't have ratings - nix
* Would like to see what a post title wrapping 2 lines looks like.
* column widths look good.
(Assignee)

Comment 11

8 years ago
Created attachment 508985 [details]
AMO redesign CR2

Attached is the Round II of the creative, along with a summary of our feedback for next steps.

-------------
* We like the version with the add-ons guy vs. the toolbox.  It has more personality and avoids having the same image twice on one page (header and footer).
* On the right side, "visit the add-on Gallery" is too prominent, and it's also styled as a button which we've used for the FF download button, so.... I don't want it to be the same, but I also don't think this should be styled as a button. We also don't need an arrow -- especially as it is currently designed which has two arrows pointing in different directions.  
* The search box is too prominent.  Justin would like to move that to the bottom of the stack.  So, lets do that and put "visit the gallery" in its place.
* Can we try a different font/style for the headers within the body of the posts?  Currently we have them in bold and blue... but I think we need to scale up the font a bit or italicize (or something) so it stands out more.

Lets make these tweaks and see how things look.  Lets also start applying this theme to the other pages and see what that looks like.

-------------
(Assignee)

Comment 12

8 years ago
Created attachment 510532 [details]
AMO redesign CR3
(Assignee)

Comment 13

8 years ago
Created attachment 510533 [details]
AMO single post
(Assignee)

Comment 14

8 years ago
Created attachment 510534 [details]
ANO Single post + comments

Feedback for next steps:

----------------
* I'd prefer the previous and next post controls not be at the top. Given how often they are used, it's hard to justify moving the rest of the content down by that much.
* In the author block, Change the heading to "About the author..." and the link to "More from [author name]"
* The only useful tidbit of information in the bottom paragraph is the category, so, lets just state the categories and tags that the post is in.
* Add Twitter integration -- http://twitter.com/about/resources/tweetbutton
* Nested commenting style is too messy.  We need some improved vertical styling between comments.
* Field labels to the right of the fields seems pretty nonstandard and a usability problem
----------------
(Reporter)

Comment 15

8 years ago
Created attachment 511997 [details]
AMO Single post + comments, v2

Here's the latest single post view and comments style.

We're getting really close to finishing this up, so if anyone has feedback on this or the homepage view, please speak up now. Thanks!
Attachment #510533 - Attachment is obsolete: true
Attachment #510534 - Attachment is obsolete: true
Can we get a view of how a block of code would look like?
(Reporter)

Comment 17

8 years ago
Here are the latest designs for all pages including code blocks: http://people.mozilla.com/~fligtar/blog/

Please take a look Monday and let us know if you have any feedback... I expect implementation to begin quickly after.
They look great :)

Comment 19

8 years ago
Here are the final PSDs for the AMO Blog Design.
http://dl.dropbox.com/u/18740830/Moz/Moz_AMO_Blog_PSDs_Final.zip
(Reporter)

Updated

8 years ago
Blocks: 634178
(Assignee)

Comment 20

8 years ago
Hey guys unless there's a reason not to... I'm going to close this bug.  Thanks Ty for the great work.
Assignee: jslater → tshahian
Status: NEW → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.