768012 - [redesign] Army of Awesome

Status: RESOLVED FIXED

(support.mozilla.org :: Army of Awesome, task, P2)

Description

[Bram Pitoyo [:bram]]

Currently, the experience when using Army of Awesome is not consistent with the rest of SUMO.

As we are undergoing a visual redesign, expect some sort of an adaptation of that visual design into the Army of Awesome interface.

I think a good first step is to erase a lot of the font-family and color values, rather than adding things. This way, not only will they revert to the values that the rest of SUMO uses. They will also look consistent when we switch to the new set of stylesheets later this year.

Comment 1

[Bram Pitoyo [:bram]]

Some quick changes to make first:

.kbox-title
* Erase font-family

#twitter-modal
* Erase font-family
* Erase color

#speech-bubbles li
* font-family: Georgia, serif;

#tweetcontainer h2
* Erase font-size
* Erase font-weight
* line-height: 2em;
* font-style: italic;

#tweets li .twittername
* color: #0051B9;

#tweets li .reply_count, #tweets li .remove_tweet
* color: #0051B9;
* font-size: 13px

#tweets li time, #initial-tweet time
* color: #aaa;
* Erase font-style

Comment 2

[Bram Pitoyo [:bram]]

Attachment: Sign in with Twitter (Darker Style)

Twitter prefers applications to use this button.

Source:
https://dev.twitter.com/docs/sign-twitter-resources

Comment 3

[Bram Pitoyo [:bram]]

Attachment: Sign in with Twitter (Lighter Style)

Comment 4

[Bram Pitoyo [:bram]]

Attachment: Twitter Bird, 48px

This is to replace the ‘t’ wordmark to the left of “Choose a tweet to help”. This will help make AoA look more consistent with Twitter.

Comment 5

[William Reynolds [:williamr]]

Bram, this all looks great!

(In reply to Bram Pitoyo [:bram] from comment #2)
> Twitter prefers applications to use this button.

Will we be localizing the text on this button? Or is it alright if this button is English only?

Comment 6

[Bram Pitoyo [:bram]]

(In reply to William Reynolds [:williamr] from comment #5)
> Bram, this all looks great!
> 
> (In reply to Bram Pitoyo [:bram] from comment #2)
> > Twitter prefers applications to use this button.
> 
> Will we be localizing the text on this button? Or is it alright if this
> button is English only?

(In reply to William Reynolds [:williamr] from comment #5)
> Bram, this all looks great!
> 
> (In reply to Bram Pitoyo [:bram] from comment #2)
> > Twitter prefers applications to use this button.
> 
> Will we be localizing the text on this button? Or is it alright if this
> button is English only?


Now that I took a second look at the image, it still uses the old logo, and the color doesn’t fit with Twitter’s new color scheme, either.

I guess the best option is to use the same blue button style currently in use on Twitter.com (attached), or use our own button. The most important principle here is to make the style consistent across SUMO.

Comment 7

[Bram Pitoyo [:bram]]

Attachment: Sign in with Twitter (used on Twitter.com)

Comment 8

[Bram Pitoyo [:bram]]

Attachment: Proposed timeline

This is what the timeline should look like.

Twitter’s timeline display guideline is located here:
https://dev.twitter.com/terms/display-guidelines

Other than lots of font size and spacing changes (which should more closely matches Twitter’s), I also modified the “Reply” so that it is located on the bottom of the Twitter message, and put the real name of the user ahead of his/her @username.

Please note that the “Reply” will only appear when user mouses over a particular tweet.

Comment 9

[Bram Pitoyo [:bram]]

Attachment: Current timeline

For comparison to the proposed timeline (attachment 636876 [details]), here’s the timeline currently in use on Army of Awesome.

The proposed timeline not only has more breathing room, it also conforms to Twitter’s display guidelines.

Comment 10

[Bram Pitoyo [:bram]]

Please note that on the proposed timeline (attachment 636876 [details]), the second user should have had the @username displayed after the real name. In the mockup, I had forgotten to do the same.

Unfortunately, I made the mockup with Firebug, so it’s unfixable for the time being.

Comment 11

[William Reynolds [:williamr]]

This all looks great Bram - thanks!

Comment 12

[Ricky Rosario [:rrosario, :r1cky]]

Bram, I am assuming you will have a bunch of changes related to the whole redesign. I am assigning to you until that is ready then we'll pick it up. (No rush we have our hands full doing redesign stuff but just wanted to get this back on your radar.)

Comment 13

[Bram Pitoyo [:bram]]

This design was going to finish much earlier, before the new visual design got implemented. Now, it’s better if I just skin AoA with the new style.

I plan to get this done after the forum and AAQ design work.

Comment 14

[Ricky Rosario [:rrosario, :r1cky]]

There is a mockup in bug 762255.

Bram, is that final?

We need to make sure we follow all the new twitter rules as far as display goes. They are changing the Display Guidelines to be Display Requirements:
https://dev.twitter.com/blog/changes-coming-to-twitter-api

We may also have to redo some of the API code, but that is for another day and bug.

Comment 15

[Bram Pitoyo [:bram]]

(In reply to Ricky Rosario [:rrosario, :r1cky] from comment #14)
> There is a mockup in bug 762255.
> 
> Bram, is that final?

Hi Ricky,

Because the display guideline will turn into display requirement, I will need to tweak the design, but by just a little bit.

I was already designing to follow the guideline closely, so the only thing I need to add is the reply icon, as well as the links to retweet and favorite.

Retweet and favorite isn’t going to be relevant to AoA, but a requirement is a requirement.

I’ll post the change to the bug shortly. That attachment will be the final design.

FYI, this is the blog post that details changes to the Twitter API:
https://dev.twitter.com/blog/changes-coming-to-twitter-api

Comment 16

[Bram Pitoyo [:bram]]

See attachment 655868 [details] for the final design.

Comment 17

[Ricky Rosario [:rrosario, :r1cky]]

(In reply to Bram Pitoyo [:bram] from comment #15)
> Retweet and favorite isn’t going to be relevant to AoA, but a requirement is
> a requirement.

Yeah, this is unfortunate and out of scope for this round because we need to implement those features :-/

Comment 18

[Bram Pitoyo [:bram]]

(In reply to Ricky Rosario [:rrosario, :r1cky] from comment #17)
> Yeah, this is unfortunate and out of scope for this round because we need to
> implement those features :-/

I think we should be good for now to just implement the Reply button only. We can add retweet and favorite, which is not that important as a feature anyway, later.

Comment 19

[Ricky Rosario [:rrosario, :r1cky]]

Based on similar bugs from the redesign, this is a 3pt. There is a lot of modals, etc that we need to update.

Comment 21

[Ricky Rosario [:rrosario, :r1cky]]

Grabbing this one.

Comment 22

[Ricky Rosario [:rrosario, :r1cky]]

Rehan mentioned he started this and really really wanted to work on it :-)

Comment 23

[Bram Pitoyo [:bram]]

There will be parts that my design will miss, so let me know what needs to be designed further :)

Comment 25

[Ricky Rosario [:rrosario, :r1cky]]

Rehan landed last week and I just deployed to prod:

https://github.com/mozilla/kitsune/commit/d756e15109d8006b0407e9768822aba99a0d5986