Closed Bug 584452 Opened 15 years ago Closed 15 years ago

Design landing page for Customer Care

Categories

(Marketing :: Design, task)

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

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: williamr, Assigned: ltom)

References

Details

Attachments

(4 files)

Customer Care page - v1
1012.04 KB, application/zip
Details
Customer Care page -v2
1.20 MB, application/zip
Details
2b with tweet shown
202.67 KB, image/jpeg
Details
changes to make to 7a
196.52 KB, image/jpeg
Details
We'll be launching the Customer Care program on SUMO and need a design for the landing page. Docs and a mockup have been shared with Lee Tom via email. Initial requested deadline for WebDev hand-off is Friday, August 13th. Page should be launching at the end of August.
Hey guys. Just wanted to also mention that with respect to the design for these pages, we should be relying on the existing mozilla.com template vs. creating *new* designs. So, we should keep the general page layout and content structure of the existing site as well when creating these. We may need an illustration up at the top to jazz things up. For that, lets dig through the existing inventory of DDL illustrations -- how about the Firefox fan / gopher?
Sounds good to me Tara. Any chance you can attach or send me a working file of the gopher fan? I love those illustrations.
I can't seem to find that image in vector form. Not sure if I have it, actually, but will keep looking. Slater definitely will, but in the meantime, is this usable at all? http://mozcom-cdn.mozilla.net/img/tignish/about/background-logo.png
I think that will work just fine :) thanks! L
Hi all, I just attached a first pass at the Customer Care/Tweets page: - Copy is a combination of Greek and FPO from William's mockups. Elise asked me to suggest word counts/placeholders until I got the layout more solidified - Since we're using the standard Mozilla.com page layout, the right column was open under the page subnav. I felt the SUMO blurb would be more noticeable higher up on the page, than placing the call-out in the footer. I used the current standard footer - highlighted is the over state, to suggest that clicking on a particular tweet is actionable - v1b is the suggested state for action, once a tweet is selected
Thanks Lee! You rock. We'll take a closer look at this in the morning and provide feedback asap.
Adding Elise so she can take a look at the first pass as well.
Thanks again Lee. I'll let William and Mary chime in with their own thoughts. But my initial reaction was that it needs a bit more "twitter" in there. Meaning, the site is about customer care on our Twitter channel, but I'm not seeing any Twitter icons, or the Twitter "blue". It would be great if we can incorporate more of that in there. Perhaps a twitter icon next to the avatars? or the twitter blue as the hover state? something like that. Otherwise, it's looking great so far.
Great feedback, Tara. I'll definitely infuse more Twitter vibe into the next round of comps.
I like the clean content layout a lot. A few initial comments: -Agree with adding more of a Twitter vibe but still keeping a Mozilla look. -Is this currently using the mozilla.com or SUMO page layout? It looks like mozilla.com to me, but John suggested that this page live on SUMO. In that case, we should use the SUMO layout. We should also decide what nav elements this would include for the top and sidebar. -Forgot to mention this when we talked earlier, but we'll need a way for the user to authorize Twitter to let them tweet from this page. This is generally done using a "Connect with Twitter" badge. This badge should show on the main page or appear on the overlay. I think having it on the main page makes more sense. This page explains the logic flow and shows the badge: http://dev.twitter.com/pages/sign_in_with_twitter -We should have a way of notifying the user that their tweet reply has been successfully sent. This could show in the overlay box (1b) or appear on the main section (1a) -After a user submits a reply and is returned to the main page, we should indicate that the tweet has been replied to. This could be done by changing the background color or by placing a checkmark or reply icon next to that tweet. Alternatively, we could remove that tweet from the list. -Having the tweet numbers on the far right isn't something I considered before, but it could be neat. I asked Atul about using these numbers to trigger the overlay for that specific tweet and he says it's easy using Javascript. So a user viewing this page could press the '5' key on my keyboard and the overlay would appear as if they had clicked on that tweet. This would be helpful for repeat users who want to respond to a series of tweets very quickly.
Just a couple of quick notes from me: - I don't think the superfan illustration is the right one to use here. That would be perfect for the other page you're working on this week (the participation one), but for SUMO-related stuff I'd recommend using the little nurse graphic or something like that instead. (In reply to comment #11) > -Is this currently using the mozilla.com or SUMO page layout? It looks like > mozilla.com to me, but John suggested that this page live on SUMO. In that > case, we should use the SUMO layout. We should also decide what nav elements > this would include for the top and sidebar. The mozilla.com and SUMO detail pages basically have the same layout, so that's not a big issue. But, we should be sure it has the SUMO nav elements. Lee, here's a reference page you can use for the right nav links and other small details (we don't need the major functionality, like the search window, here though): http://support.mozilla.com/en-US/kb/Other+Firefox+support Looking good! > > -Forgot to mention this when we talked earlier, but we'll need a way for the > user to authorize Twitter to let them tweet from this page. This is generally > done using a "Connect with Twitter" badge. This badge should show on the main > page or appear on the overlay. I think having it on the main page makes more > sense. This page explains the logic flow and shows the badge: > http://dev.twitter.com/pages/sign_in_with_twitter > > -We should have a way of notifying the user that their tweet reply has been > successfully sent. This could show in the overlay box (1b) or appear on the > main section (1a) > > -After a user submits a reply and is returned to the main page, we should > indicate that the tweet has been replied to. This could be done by changing the > background color or by placing a checkmark or reply icon next to that tweet. > Alternatively, we could remove that tweet from the list. > > -Having the tweet numbers on the far right isn't something I considered before, > but it could be neat. I asked Atul about using these numbers to trigger the > overlay for that specific tweet and he says it's easy using Javascript. So a > user viewing this page could press the '5' key on my keyboard and the overlay > would appear as if they had clicked on that tweet. This would be helpful for > repeat users who want to respond to a series of tweets very quickly.
Good points. Thanks Slater. Agree with the Superfan dude. I was viewing that as a placeholder.. but agree that the Nurse icon is a good fit, so lets go with that. http://www.flickr.com/photos/intothefuzz/2651542051/in/set-72157606069938392/
Is there an AI file or similar with the white background separated from the nurse graphic you could send to me? Also, I'm hoping we can flush out the ideas William has before I try to design the functions. If we decide on any particular UX, it would be more efficient for me to design to those after they've been vetted. Thanks! Lee
Which ideas would you like us to flush out? Are you referring to comment 11 or something else?
I'm wondering if it would be better to put the authorization badge above the response forms (v1b) so as not to push the feed list down before they select one (v1a) > -We should have a way of notifying the user that their tweet reply has been > successfully sent. This could show in the overlay box (1b) or appear on the > main section (1a) - a green check mark can appear in the overlay box (1vb) after they click the Submit button. I think once it's sent, maybe the tweet from the list is replaced by a new one? - I'm also unclear about the tweet numbers from Comment 11
Attached file Customer Care page -v2 —
Attached v2 of the Customer Care page. Also https://www.yousendit.com/download/aHlUS3dtcWZsUjlFQlE9PQ v2a - Added Twitter authorization forms above tweet feed - design revisions to make the feed more Twitter-esque v2b - design revisions to make the feed more Twitter-esque - confirmation message at bottom of dialog box, if submission is successful
v2a - I like the Twitter-esque feel a lot. Wondering if we want to include a Twitter icon or bird graphic on this page as well. Thoughts? - Placement of the Twitter authorization form seems weird to me. On other sites, I've seen two flows: 1) Click on "Connect with Twitter" badge on main page, redirected to authorization page, and then redirected to main page. 2) Click on "Connect with Twitter" badge on main page, small pop-up window appears with authorization page, main page is refreshed once Twitter authorization completed. We could use one of these or see if the Twitter authorization could be done in the overlay before the reply interface is shown. I don't know how feasible this is from a WebDev perspective. Ultimately, we should choose a flow that is simplest for the user. -Tweets numbers are fine as they are. I'll flesh out implementation details with WebDev. v2b - can you show what the error message would look like if the submission is not successful? - can we include the selected tweet from v1a at the top of the overlay in v2b? That will be helpful for a user to reference when replying. I'll attach a screenshot that shows where it could be placed.
Attached image 2b with tweet shown —
Sorry I missed this. It's looking great. I like the more twitter "blue" incorporated... but I guess what's still missing for me is the Twitter icon. Is there any way we can incorporate that in here somehow? One suggestion is to include an icon next to each of the feed updates, something similar to this: http://twitter.grader.com/top/women thoughts?
We could also use the hand drawn-esque Twitter icon from the First Run page: http://www.mozilla.com/en-US/firefox/3.6.8/firstrun/
Definitely :) I didn't mean to suggest that we should use the other icon.... but just how it was displayed. Lee, you have that re-illustrated icon set, right?
yes, I have the re-illustrated icon and I'll try to implement it in the Tweet feed list. >We could use one of these or see if the Twitter authorization could be done in >the overlay before the reply interface is shown. I don't know how feasible this >is from a WebDev perspective. Ultimately, we should choose a flow that is >simplest for the user. I think this could be a good flow since the user as already engaged a tweet. They authorize themselves, then can continue onto their reply. >can we include the selected tweet from v1a at the top of the overlay in v2b? >That will be helpful for a user to reference when replying. I'll attach a >screenshot that shows where it could be placed. I'll make a version with the tweet in the reply state. Good idea, William!
Hi all, Here's the link to the latest round: https://www.yousendit.com/download/aHlUMWZHRStoMld4dnc9PQ - I tried using the sketchy Twitter logo next to the Tweet avatars, but I thought it looked a little bit noisy and redundant, so I opted to make the whole feed area more Twitter-esque. Not sure if it's overkill, or now nice-and-obvious that these are tweets. - (4b) is the sign in field that will appear once a tweet is selected. - (4c) Once the user is authenticated, the dialog box will expand, displaying the selected tweet and reply options etc. (I left the Submit confirm blurb at the bottom up for reference) Let me know what you guys think! Lee
4a: feels like users are tweeting on behalf of Twitter instead of Mozilla. I think the large Twitter logo and cloud background might be overkill. -Could we also add a "refresh" icon and/or text link above the tweets list? near the Filter menu item might be good 4b: looks great 4c: can we add a character counter that shows how many characters (out of 140) the user as left in their message to write? There's one illustrated in the initial mockup you can reference. Should be in a gray or similar color so it's not the focus. Could be placed just above the right side of the message box or above the bird icon. Tara and Mary, would love to get your input as well.
I think we're near the finish line on this one. Just a few more tweaks. Any more feedback? :) Just spoke with WebDev this morning and they're ready to start on this next week. Would like to give them a finalized psd on Monday if possible.
Hi there. So... agree that we're getting close and just need to play around with the elements/tweak a bit. Here are some thoughts: * I didn't mind the Twitter logo and clouds much.. but after looking at the page a bit more, I agree with William that it doesn't feel quite right. The page now feels more "Twitter" than "Mozilla" or "Firefox", and looks more like a Twitter widget or feed. I think I too would prefer the twitter icon, vs. the entire wordmark logo. And a more clear tie to "Firefox". Not sure if I have any compelling design solutions to suggest right now. Any thoughts? I'll think about it some more. * It might be just me, but I'm actually not a huge fan of that Twitter bird image :(
Blocks: 584886
Hi again. I thought about this some more and discussed it with Mary and Slater. Here are some additional (collective) thoughts for next steps: * As mentioned before, this is great, but feeling a little too "Twitter" now. Lets walk that back a bit. * The page overall also feels a little too blue. I'd like to incorporate some more color in there to bring it to life. * Lets make sure that the main CTA "choose a tweet below" and the filtering option really stand out and are given more prominence. Right now the "Twitter" brand is capturing all the attention. Lets remove that, and move the copy to the left, perhaps adjust the color so it stands out. * When referencing twitter, lets use the re-illustrated icon. With the main copy moved to the left side of that space, maybe the twitter icon could go on the right? We want to make sure that we don't lose the twitter references altogether. * That background blue box framing the tweets doesn't feel right, with the clouds, etc. Lets take out the clouds, and turn that into a warmer / more organic shade? Maybe something that echoes the Firefox brand colors. * Apparently there are laws governing the "red cross", preventing us from having a reddish hue on the cross as we currently have on the nurse's hat. Lets eye-drop her hair and replace the color. Please :) Questions for William/Mary: * What will the header be on this page? It currently says "Twicker Tweet", which is cute, but I don't think that's the final header copy..right? Depending on what that says, we may replace the nurse graphic with something more relevant. Another option I had suggested, depending on that header copy, was the chat bubbles that you see on this page: http://www.mozilla.com/en-US/firefox/personal.html Lee, ping me on IM if you have any questions or would like to talk this through. Looking forward to the next rev!
Mary and/or William - can you guys let us know what the main header text is going to say? Depending on what that says, we may need to adjust the nurse graphic to something more relevant. I'm working with Lee on it now. Lets chat today if you guys are in.
Hi guys, Here are is the latest group of revisions: https://www.yousendit.com/download/aHlTTG0rZDVtMEkwTVE9PQ Lee
Not sure on the header text yet. Playing around with ideas such as Firefox/Community Fleet, Beat, Meet, or Greet. Still deciding if we want to include "Tweet" in the name or not since we'll be expanding beyond Twitter in the future. 5a: I think we still need a visual to show that a user on this page can sign in with their Twitter account. Adding the "Connect with Twitter" badge mentioned earlier would accomplish this. Otherwise, we need another way to convey that a user will sign into their account to reply. Or maybe this is already clear? 5c: Looks better without the bird icon -- while I like the bird's design, the bird's expression/posture didn't feel right. For character count, I don't think we need to explicitly say "Character count: 102" -- larger text with just the number should be fine and that's common with other Twitter apps. The message box should be sized more appropriately so it barely fits 140 characters. Right now it looks like 2-3x that could fit in the box so the box can be confusing when the message fills less than half of the box. So we can either make the box smaller or increase the text size (twitter.com uses a smaller 13.8px Lucida Grande, bit.ly uses a larger 13px Arial). I think having the message text size match the size of the "How will you make it personal?" header would be good. And then we shrink the text box itself it fit 140 characters. Thoughts?
Here are the latest for your weekend viewing pleasure: http://intothefuzz.com/leetom/Customer%20Care/ 5a: William, can you send or attach an image of the "Connect with Twitter" badge? 5c: I took out the bird graphic, and revised the character count and reply box. The FPO type in the box is a light color to suggest what the user is supposed to do. Once a user starts to type into the box, the font color could be darker.
"Connect with Twitter" badges (2 colors, 2 styles) are on this page: http://dev.twitter.com/pages/sign_in_with_twitter Also a few more options here: http://twibs.com/oAuthButtons.php 6a: The "t" icons next to each username in the list look repetitive. I think we should consider taking these out. It'll make more sense to include this if we eventually expand the page to include Facebook comments as well. Then we could distinguish tweets from FB comments with the appropriate icons.
Talked with Mary about using the friendly Yeti instead of the discussion bubble graphic in the header. Could we see what it looks like with this instead? http://mozcom-cdn.mozilla.net/img/tignish/template/background-about.png Yeti graphic is currently used on http://www.mozilla.com/en-US/about/
Hey William. I know we talked about this a bit on Friday, but the more I think about it, the more I think we need to finalize/refine the content a bit more in order to finish out the design. Specifically, the design looks nice but doesn't feel very clickable. I think a person who does a quick scan of this page would think it was just some sort of Twitter stream rather than a place where you're expected to actively jump in and start helping. My suggestions: - come up with a really good headline that explains what this page is all about - follow that up with a clear 1-2-3 series of steps that outline what people need to do - clean up/punch up the graphical areas accordingly Also, I'm not really feeling the Yeti for this page. Let's fix the other stuff and then the main illustration will probably fall into place fairly easily. Am happy to discuss more in person if you want.
Hey there: Quick update - William will work on the copy. I'll bite my tongue about the Yeti right now...but what I like about it is that this program is about getting users to be part of a global force that takes care of other users. The Yeti is giving a giant bear hug!
In addition to the "Connect with Twitter" button from comment 33, let's make these content changes: Header: Army of Awesome Intro text: Love Firefox and have a few moments to help? Help other Firefox users on Twitter. Sign in with your Twitter account and pick a tweet to reply to. Then respond away. Good things will come to those who tweet! List of categories and sample topics for response overlay: -Welcome and Thanks -Using Firefox -Firefox Beta -Firefox Home -Support * Quick fixes to deal with crashes * Improve your Firefox experience * Start Firefox faster * Get help on SUMO * Ask our community support team -Get Involved
Thanks for the additional copy for the page, William. Here are the latest versions: http://intothefuzz.com/leetom/Customer%20Care/JPG/ (7a) - Headline and intro text have been placed (copy may need to be edited down?) (7a) - Hero image is still FPO (7a) - Took out the Twitter icon per tweet, added one at the top of list with "Choose a Tweet Below" (7a) - Added "Sign in with Twitter" button (7c) - Flowed new category and sample topics onto response overlay
Visually this is looking good, but from a content perspective I still think we need to make what's expected of people much more clear. I recommend a really clear 1-2-3 series of steps that we can call out.
William: can we change "will come" to just "come"?
Hey John: We were just doing place holder text since we were going to have a copywriter. At this rate do you want us to just take a stab at it for real? Lemme know - we can regroup on this tomorrow and show you updated copy :)
Talked with John and Mary about a 1-2-3 series of steps. Changes to 7a: - Title: "Join our /new line/ Army of Awesome" - Intro text: Drop text after second sentence (shown in attached mockup) - Add 1-2-3 steps below intro text. I think this works best horizontally but feel free to play around with a vertical list. This list could include a small thumbnail for each step (1. mouse cursor hovering over a topic 2. thumbnail of sign in screen from 7b. 3. mouse cursor hovering over Submit button from 7c. I'll attach a rough mockup of the 1-2-3 steps. If the "Good things come to those who tweet" takes up too much space for step 3, we can include it at the end of the intro text instead. - Remove the "Sign in with Twitter" button next to the refresh button since we're making that sign in step 2 instead of step 1.
Attached image changes to make to 7a —
mockup of some changes to make to 7a
http://intothefuzz.com/leetom/Customer%20Care/JPG/customercare_8a.jpg - Implemented the 1,2,3 steps - Replaced the Support nurse graphic as the hero - it seems appropriate to the helping theme/function of the page. Any other thoughts on what we could/should use here? - Was able to keep "Good things come to those who tweet" in the intro text - The 1,2,3 is more instructional than a place for users to click, I would recommend leaving the Sign in with Twitter button in the Tweet section, to keep the controls available and in once place for the user to find.
A big step forward! I like the nurse graphic, fwiw (always have). In the text right above the tweets, I wonder if we should say "choose a tweet to help" or something like that?
Very nice. Agree with John that this is a big step forward. A few comments: - Can we update the title to "Join our / Army of Awesome" (2 lines)? - We can remove the "Sign in with Twitter" button since clicking a tweet will bring up the sign in overlay - Wondering how the refresh button would look if we add the text "Refresh" to the right of the arrow graphic. This text would appear inside the button. Can you show a comp with that? - Seems like there's a lot of blue on this page. Could play around with the colors of the 1-2-3 bubbles to add a splash of color. Thoughts?
Couple thoughts on 8c: - change message box header (How will you make it personal) to: "Get personal" or "Get ready to get personal". I like the first one more. - change text in message box to: "Tweak it and make it your own. Personalized messages go a long way in helping others."
I love the bubbles! I'd just add in some light color to the bubbles - perhaps a gradient?
Hi folks, Please see the latest revisions here: http://intothefuzz.com/leetom/Customer%20Care/JPG/
Color in the bubbles looks great. Talked with Tara and Mary about this and we feel like the bubbles have a bit of a glossy feel to them that doesn't quite fit with the organic style for the rest of the page. Could we give the bubbles a flatter, matte look? I think the bubbles from the participation page do this pretty well, maybe something similar? http://intothefuzz.com/leetom/Participation/JPG/participation_8.jpg "Refresh" button looks good, although I would change the text color to match the "Filter by" text color. Once those changes are made, I think we'll be ready for the PSDs :)
Lee, could you take a look at the feedback in comment 50? Would like to wrap this up today or tomorrow morning since WebDev is ready to turn the PSDs into code. Thanks!
Hi all, Latest versions JPGs and PSD are up here: http://intothefuzz.com/leetom/Customer%20Care/ Let me know if you guys have any questions, Lee
All files have been refreshed, per our conversation regarding the 1,2,3 bubbles. http://intothefuzz.com/leetom/Customer%20Care/ Thanks, Lee
Perfect, thanks Lee!
Status: NEW → RESOLVED
Closed: 15 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: