Closed Bug 602392 Opened 15 years ago Closed 15 years ago

redesign new Army of Awesome page

Categories

(Marketing :: Design, task)

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

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: jslater, Assigned: ltom)

References

(
URL
)

Details

(Whiteboard: [redesign])

Attachments

(2 files)

sidebar with dashboard v1
775.61 KB, image/png
Details
sidebar with dashboard v2
276.73 KB, image/jpeg
Details
Hi Lee. I know it's not ideal to redesign a page that just launched, but we need to create a new version of the Army of Awesome page that matches the look & feel of the overall redesign project. We can discuss specific creative direction offline if you want, but generally speaking the page can use the current live content and can generally follow that layout as well. Since this is a SUMO page, please keep in mind the revised SUMO style. It's very very similar to what we're doing for mozilla.com, but does have a few nuanced differences. You can grab the files at: http://www.reachcreative.com/firefox/support_download_psd.zip http://www.reachcreative.com/firefox/support_article.psd.zip The development for this will be handled by our SUMO webdev team instead of silverorange, but let's shoot for a 10/13 due date on this if possible. Thanks!
Here's a mockup for Army of Awesome: http://intothefuzz.com/leetom/Mozilla.com/JPG/armyofawesome_01.jpg
Great, thanks Lee. Overall, I like it a lot...we should have Mary or William weigh in on right sidebar content. I think a lot of that stuff can go. Also, we should think about what the illustration at the top of this page will be. Do we need one? Do we want to do a new one?
Looking back to the current pages, there's definitely not a shortage of places we would use a 'support/aid/nurse' type graphic. I think it would be a good idea to commission a new one for FF4. Mary or WR, let me know what you'd like to see (or not see) for that side content. Thanx! L
Liking this a lot. Fits in well with the new SUMO design :) Would love to get a new illustration for this. While I like the nurse graphic, it doesn't make sense to me for the Army of Awesome. I think the new illustration should show a group of characters. And it could just be several copies of the same character like in our SFx promo: http://www.spreadfirefox.com/ The navmenu items under Ask a Question seem to just be floating in the middle of the sidebar. Can we move those to right below Ask a Question? For the sidebar, we'd like to include some stats about the page for the last 24 hours: XX% of tweets responded to; # of replies out of # of tweets; # of contributors; top 5 or 10 most active contributors. We should also drop the Plugins Check promo and move the Get Involved one down. I'll attach a screenshot in a few minutes.
Here's a very rough idea of what the dashboard could look like in the sidebar.
Thanks for the mock up William! Stay tuned...
William, can you confirm that everything from comment #5 is technically feasible? I don't want to design anything that's going to cause unexpected scope creep for the developers. Also, I think we can probably remove the nav items under Ask a Question...those are part of the main SUMO nav if you're in the help flow, but probably not relevant here. Let's talk more about the illustration...we already have one in progress for the main SUMO landing page (to replace the nurse). Would we want to reuse that or come up with something new?
Hey guys, http://intothefuzz.com/leetom/Mozilla.com/JPG/armyofawesome_01.jpg - I took out the nurse illo, so we can use the SUMO image (john is there another image you'd like to brainstorm here?) - removed the nav items under Ask a Question - FPOing the ticker/stats WR was hoping to implement. Let us know if this is feasible. see Comment 7
John, yes the dashboard data from comment 5 should be technically feasible, and we're planning to include it in our next release. For the illustration, is there a discussion/bug for the new illustration on the SUMO landing page? If not, is there a draft design you can share? Some feedback for the stats: - The header "Our Army of Awesome has responded to" feels cramped since it's on 3 lines. Is there a way we can shorten it or restyle it? We could change the copy to "Our Community" or "Our Army" instead of "Our Army of Awesome". We could also just say "We've responded to". Mary, thoughts? - The stats inside the bubble graphic look sweet. - Usernames for the top contributors look clickable to me since they're blue right now. I hadn't thought of making them links until I saw this, but we could have the username link to that person's twitter account (eg: http://twitter.com/username) Other feedback: - We ended up adding a sign out button to the current design so users can sign out from their twitter account. Can we add that back into this design? You can see it here: http://people.mozilla.com/~williamr/communitycare/presentations/images/aoa-main-page.png - We're thinking of implementing the "Filter by" dropdown box for the next version. Could you add that back in and also show what it looks like when someone clicks on it and the menu items appear? Here's the original mockup for reference: http://intothefuzz.com/leetom/Customer%20Care/JPG/customercare_10a.jpg
New mockup looks great to me. (In reply to comment #9) > John, yes the dashboard data from comment 5 should be technically feasible, and > we're planning to include it in our next release. excellent! > For the illustration, is there a discussion/bug for the new illustration on the > SUMO landing page? If not, is there a draft design you can share? the new illustration on the SUMO landing page is for SUMO in general, not the Army of Awesome, and I would prefer not to mix the two. If we were to do a new illo, I think the Army is certainly evocative enough to inspire something good. But, looking at the page as it is now, I don't actually think we need anything else at the top. The talk bubbles and twitter avatars provide plenty of color already, and adding anything to the top of the page would probably just make things feel crowded. My vote is to not add an illustration...let me know if you want to discuss further. > Some feedback for the stats: > - The header "Our Army of Awesome has responded to" feels cramped since it's on > 3 lines. Is there a way we can shorten it or restyle it? We could change the > copy to "Our Community" or "Our Army" instead of "Our Army of Awesome". We > could also just say "We've responded to". Mary, thoughts? just saying "our army" sounds good to me. > - The stats inside the bubble graphic look sweet. +1 > - Usernames for the top contributors look clickable to me since they're blue > right now. I hadn't thought of making them links until I saw this, but we could > have the username link to that person's twitter account (eg: > http://twitter.com/username) +1 > Other feedback: > - We ended up adding a sign out button to the current design so users can sign > out from their twitter account. Can we add that back into this design? You can > see it here: > http://people.mozilla.com/~williamr/communitycare/presentations/images/aoa-main-page.png > > - We're thinking of implementing the "Filter by" dropdown box for the next > version. Could you add that back in and also show what it looks like when > someone clicks on it and the menu items appear? Here's the original mockup for > reference: > http://intothefuzz.com/leetom/Customer%20Care/JPG/customercare_10a.jpg So would we have three buttons there? Or am I misunderstanding? That seems like a lot.
Thanks for the quick feedback, guys. Here's a new mock up: http://intothefuzz.com/leetom/Mozilla.com/JPG/armyofawesome_01.jpg
This looks good to me. William, any further changes? Can we wrap this one up?
New mock up looks great! A few comments and some small things I'd like to add for our next release, which we're hoping to get live in the next few weeks: - Not using an illustration looks good to me (replying to comment 10) - Having 3 buttons does seem like a lot. Could we relocate the Sign Out button? Also wondering if we should just make it a link instead of button so that area isn't as crowded. Thoughts? We're now working on some quick enhancements to address usability issues we've gotten feedback about. If we can incorporate those into this bug, that would be amazing. Here are the 3 enhancements: - Add "Load more tweets" button at the bottom - For each tweet show how many replies it has and the name of the first person to reply. I'm thinking this could appear underneath the tweet text or on the right side by the timestamp. - Show replies to a tweet if a person clicks on the number of replies (mentioned above). These replies appear indented underneath the tweet. I'll attach a screenshot that roughly shows what this could look like. John, can we include those enhancements in this bug? :)
Here's a mock up of the enhancements I mentioned. 2nd and 4th tweet show number of replies under the timestamp. 5th tweet shows it underneath the tweet text. Not sure which is better.
thanks for the mock up, william. i have a couple of comments. see below: - Having 3 buttons does seem like a lot. Could we relocate the Sign Out button? Also wondering if we should just make it a link instead of button so that area isn't as crowded. Thoughts? >> I think introducing a new style (blue linked text) by those buttons, could make it look "noisier" than leaving the 3 buttons uniform. That area doesn't seem to crowded too me. - Add "Load more tweets" button at the bottom >> Will this button do the same as the Refresh button? If so, i think we should leave it at the top, but maybe we can also put it down below just in case the height of blog entries gets too long?
(In reply to comment #15) > I think introducing a new style (blue linked text) by those buttons, could make it look "noisier" than leaving the 3 buttons uniform. That area doesn't seem to crowded too me. I'm okay with leaving it as-is unless John has other suggestions. It doesn't bother me much. > Will this button do the same as the Refresh button? If so, i think we should leave it at the top, but maybe we can also put it down below just in case the height of blog entries gets too long? This button has a different use because it will be loading older tweets, going past the 20 that are on the page initially. The refresh button adds new tweets to the top. The "Load more tweets" button will just show another 20 (older) tweets, so it should stay on the bottom.
got it. ok, check this version out: http://intothefuzz.com/leetom/Mozilla.com/JPG/armyofawesome_02.jpg - I'm wondering if leaving the first person to reply, out of the reply dropdown/count. seems cleaner to leave it as a reply count, then they can see the list of replies once they open the pulldown with the arrows? - the numbers, by the "a minute ago" seem a little confusing to me now, once we added the replies. Are thse necessary?
- Liking the use of green to show replies :) - Can we center the "Load more tweets" button with the tweets? It's currently right aligned. (In reply to comment #17) > - I'm wondering if leaving the first person to reply, out of the reply > dropdown/count. seems cleaner to leave it as a reply count, then they can see > the list of replies once they open the pulldown with the arrows? Agree it looks cleaner, but it also loses the "cool" factor of having your name show up after you reply. We think showing contributors' names will encourage them to reply more often because others will see their name too. I think this could work if the name is shown on the first line and the second line says "and X others replied". Could we try that? > - the numbers, by the "a minute ago" seem a little confusing to me now, once we > added the replies. Are these necessary? I can see how it can be confusing if you expand the replies for multiple tweets on the page. However, it seems to work okay if you open each thread individually.
Hey guys. Sorry I've been slow to respond on this - looks you're figuring things out without me, so I'm going to stay out of the way and let you resolve it. Generally speaking, I'm 100% in favor of using this opportunity to address some of the enhancements mentioned in comment #13. Thanks!
Hey guys, Here's a new version to look at: http://intothefuzz.com/leetom/Mozilla.com/JPG/armyofawesome_03.jpg - center justified the "load more tweets" button - added first responder w/ "and X replied"
Looks good to me.
Looking great! A few tweaks: - Indented reply tweets: let's just indent one level to keep this simple (similar to Facebook comments). Showing nested replies will look weird 3 or 4 levels deep. To change this in the mockup, have Dunkle88's tweet line up underneath foxface's tweet. Can we also update these timestamps to make it more clear to our developers? jldrunner: 2 minutes ago, foxface: 1 minute ago, Dunkle88: less than a minute ago, suuperberg: 2 minutes ago. - Remove "Load more tweets button". Looks like we're going to go with the infinite scrolling functionality instead of a button, which is what twitter.com uses now too. As soon as the user reaches the bottom of the page, additional tweets will load automatically at the bottom. - Show tweet's timestamp as a link. This one is a new request. If a user clicks on the timestamp in the tweet, we'll take them to the twitter.com permalink for that tweet. Ex: http://twitter.com/#!/dailycavalier/status/26406528177 . Wondering if it makes sense to just change the color of the timestamp when it's hovered over. Thoughts?
Hey William, New version here: http://intothefuzz.com/leetom/Mozilla.com/JPG/armyofawesome_03.jpg - indented reply tweets - removed "load more tweets" button - i think the blue hover state of the timestamp is a good idea. I mocked up the action in suuperberg's tweet - see jpg.
Fantastic, it'a a wrap! Can you post the psd file?
Thanks Lee :) Closing this
Status: NEW → RESOLVED
Closed: 15 years ago
Resolution: --- → FIXED
Would like to get in three more tweaks based on feedback from cbeard before WebDev starts on this in a week. I spoke with Lee about these briefly yesterday afternoon and he thinks they're pretty minor. * Show which tweets the user has replied to: add the green text with arrow after the user replies so it says "You replied". If others have replied too, it would say "You and 1 other replied". I'm also open to other ideas for this, but I think this may be the simplest and cleanest solution. * Change list of top contributors from a list of usernames to just avatars: Lee suggested doing this as a 9-up (3 x 3 grid) where each avatar is 32x32 pixels. Hovering over the avatar would show the person's name and number of replies they've sent (ex: foxymary - 23 replies) * Add a dropdown to show that the time period in the stats block can be changed: I think the old digg-style menu would work well for this. Here's how it looked like on digg: http://people.mozilla.com/~williamr/communitycare/mockups/dropdown.png There would simply be a down pointing arrow to the right of the default values (24 hours). When the value is hovered over, a rounded colored box would appear behind the value and arrow to show that it's a drop down. Clicking on the value or arrow would trigger the dropdown. Values: 24 hours, week, month, all time. Lee, I ran these changes by John and he said to go ahead with them.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Hey William, Here's a new mockup w/ changes from Comment 27 http://intothefuzz.com/leetom/Mozilla.com/JPG/armyofawesome_03.jpg - with those Contributor avatars at 32x32 px, I was able to do a 16-up grid. Not sure if it's too many, but I think fits that space better than 9-up - I'm showing the rounded box w/ pulldown tab highlighted. Default state would just have "In the past 24 hours" in that grey type
Nice, I think the 16-up grid works pretty well. For the pulldown, I'd suggest showing the active state as well. That will help the web developers know which colors to use for the box + highlighted item state and what size the box will be. Updated replies look good. Can we also show some tweets that have replies but not by the user visiting the page? They would say "XYZ replied" or "ABC and 2 others replied". That's not shown right now and I don't want it to get lost in the handoff for webdev. Thanks
You can toggle between these two to see the default and active state: http://www.intothefuzz.com/leetom/Mozilla.com/JPG/armyofawesome_03a.jpg http://www.intothefuzz.com/leetom/Mozilla.com/JPG/armyofawesome_03b.jpg I also included the replied mark (not by the user) in the tweet list
Wow, this looks great, Lee!
Thanks!
I really, really like the pulldown :) * Dunkle88's tweet should line up with foxface's tweet. We decided in comment 22 to only indent one level. * Change the default stats time period to "Yesterday" instead of "In the past 24 hours". It turns out we can't retrieve stats based on an hourly time range yet, only by days. The metrics team also pointed out that because of past issues retrieving stats from Twitter, we may need to fallback to displaying older stats occasionally. * Lee, could you add a message and maybe an icon at the bottom of the stats block that says "Recent stats not available" to show this case? Thanks!
Talked with David and Kadir from SUMO and we're going to call this a wrap. We're very happy with the redesign! For the "recent stats not available" message, we're just going to drop the asterisk at the beginning. Could we get the PSDs? Ready to hand this off to webdev. Thanks Lee!
Thanks! Marking this as closed.
Status: REOPENED → RESOLVED
Closed: 15 years ago → 15 years ago
Resolution: --- → FIXED
Great, thanks all. William, will you file the appropriate bug for webdev?
Already tracked in bug 606318. Hoping to have this updated in 2.3.1, which will go live in early December.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: