Open Bug 998340 Opened 10 years ago Updated 10 years ago

Review / Feedback for the Gear Store design

Categories

(Websites :: Other, defect)

Product:
Websites
Component:
Other
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

People

(Reporter: gustavo, Assigned: tyronflanagan)

Details

Attachments

(11 files)

mozilla-store-sitelayout.pdf
2.04 MB, application/pdf
Details
MozGear_Store_1_MainPage.png
805.25 KB, image/png
Details
MozGear_Store_2_ProductPage.png
585.37 KB, image/png
Details
MozGear_Store_3_Cart.png
103.84 KB, image/png
Details
MozGear_Wordmarks.png
97.52 KB, image/png
Details
moz-logo-mark.jpg
359.79 KB, image/jpeg
Details
Moz_WM_OfficialMozillaGear.png
14.97 KB, image/png
Details
MozTee_Example_2.png
82.87 KB, image/png
Details
Moz_ClothingTag_Idea.png
105.14 KB, image/png
Details
mozilla-gear_logo-wordmark.eps
580.06 KB, application/postscript
Details
mozilla-gear-ClothingTag-v1.eps
1.17 MB, application/postscript
Details 
Attached PDF is the starting point for the store website design layout, provided by Treehouse creative team.
John - Let's chat about how you want us to process your feedback.
Thanks Geoffrey. Will post feedback here next week. It's looking good so far.
Assigning this to Sean. He's going to propose some tweaks to the color and header, and then we should be pretty set. 

Gustavo or Geoffrey, could we get the PSD for this page from Treehouse? Would make things a little quicker & easier for Sean if we had that.
Assignee: nobody → smartell
Anthony: Can we get the PSD of the gear store web site mock up? Will be faster for us to make our changes directly. Can you post to this thread?
Flags: needinfo?(anthony)
Ok I tried to attach but was too large so here is a link.

https://www.dropbox.com/s/mj57llz2x6h4rco/shop.mozilla.desktop-60-20-12c-990px.psd
Flags: needinfo?(anthony)
After looking at the layout I noticed the following:
1) It did not include social media sharing icons for products.
2) Asking for the user to join the Mozilla mailing list at the time to checkout would be a good way to increase reach. The same way that is done at the Donate to Mozilla web page: https://sendto.mozilla.org/page/contribute/EOYFR2013-newdefault

Not having both these elements could be a missed opportunity.
The mock-up also needs to include a "top up your donation" field that allows people to give us more money.

Adding Andrea for more details.
Flags: needinfo?(andrea)
NVM - Ignore last. It's already there.
Flags: needinfo?(andrea)
Anthony - thanks for adding the PSD. We are running a bit behind schedule on making recommendations, b/c Sean and the rest of my team keep getting pulled into last-minute projects pertaining to next week's Firefox launch, but we will share thoughts on this sometime next week.

Geoffrey - I hear that the name of the site is still up for grabs. We won't be able to make a proper wordmark or visual for the header until that's figured out of course. How can we help?
Is the URL gear.mozilla.org OK?

I'll ping our tax lawyer on the use of the word 'store'. If it's OK, then I suggest Mozilla Gear Store.

Thoughts?
I would vote for "Mozilla Gear" over that. I prefer two word names, and am not crazy about 'store' anyway...doesn't quite feel right for us.

wdyt?
WFM. I'll cancel the tax attorney ping.

Call it decided?
What domain are you guys thinking?  If you can keep as subdomian we have found that helps with rank especially if the official store.
John anyway we can get access to some high res artwork for various thoughts provided?
(In reply to Geoffrey MacDougall from comment #12)
> WFM. I'll cancel the tax attorney ping.
> 
> Call it decided?

Works for me! "Mozilla Gear" it is. Sean, when you work on direction for the theme, please use that.

(In reply to Anthony from comment #14)
> John anyway we can get access to some high res artwork for various thoughts
> provided?
Can you let us know what you need more specifically in the other bug?
Reassigning this bug to Ty - he's going to be taking over as the point person from our internal design team.

Ty, the ask here is to review the Sandstone-style mockups that Treehouse has already done and offer suggestions (either direction in the bug, or by updating the actual PSD) on how to enhance further.

My two main notes:
- we'll need a proper wordmark up at the top for "Mozilla Gear"
- I'd like to consider a different background color than the default Sandstone. I know Sean had thoughts about putting a color behind the top and then making the lower sections white, so you should sync with him on that.

The PSD is in comment #5. Goal is to have our recommendation ready next week. (Geoffrey...I had hoped we could do it this week but underestimated the Australis impact. Apologies.)
Assignee: smartell → tyronflanagan
Hello!  I was wondering if there were any updated design feedback from the branding team.
Flags: needinfo?(tyronflanagan)
Hi all,

Thanks for the PSD.

Sean and I discussed keeping the site clean and using primarily neutral colors for the background. By doing so would give our merchandise product shots the attention they need without additional colored areas vying for attention.

I tinkered with some of the design, started with header/navigation and included an example of a firefox-type product within the slider area. I also placed the slider nav elements on the sides with the slider pagination on the right. 

Since im not entirely sure how much modification can be done to the designs overall, I have kept the changes somewhat minimal.

One item on this page i did change was the filtered list under the header and slider. Its probably best to use that sub-nav to filter featured, popular adn sale items. Also, having the initial links too far down the page will make it difficult for a user to find these types of products unless they return to the main page. Hence why the navigation along the top includes these links now.
Main edits here was formatting of copy, layout changes for the right-side details column and giving the donation section a wider space to work with. Ideally, you dont want the donation section to feel like an after-thought before the shopper clicks on add to cart.
Same thing here. Mainly focused on spacing and formatting of the copy and content. I added in the "Gear name/Qty/Price bar" along with "Continue shopping" and "proceed to checkout" links at the top of the cart content area.

Im not sure whether we are adding in an Estimated Shipping calculator, so I did not include the tax + shipping fields with the subtotal/grand total fields for the time being. 

Same issue for adding a promotional/coupon code field.
Oh, something I meant to include with Comment 19 - Do we know how we are handling the sharing component on this site? I ask since with privacy promoted strongly at Mozilla, we have to use a sharing widget which the user initially needs to click on to trigger a list of social sites that can be shared to. From what I understand, this is restricted to sites we host on mozilla.org servers and might not apply to externally hosted sites.
Ty,

This design feedback is fantastic. The colors, spacing and typography are spot on. 

In regard to what of the design can be changed. I am always open to suggestions to keep the experience within Mozilla guidelines.

1) Navigation
I like the revised navigation.  I will have more to add to this are of discussion when I have the final product assortment and what categories and attributes we will be using to filter down these products.

2)Extras
Shopify provides some standard .liquid markup and layout for things like shipping calculators, tax info and promo codes. Most of these are basic table layouts with form fields and ajax call and response messages. I will apply revised styles from the PSD to anything not covered in my initial design. I'm confident anything we miss can be quickly formatted to established style guidelines.

3)Donation Area
I really like the revisions to this area. 

- - - -

Could you attach your revised design PSD. I would like to start pulling assets / typographic guidelines from it. I'm going to start creating the framework for the site.  I will be pulling markup styles and js functionality from existing Mozilla properties to make sure that the site experience stays within established brand guidelines.

Thank you Ty and team!
Hey Dan,

I have uploaded the revised PSD here:

https://www.dropbox.com/s/d8lad31yhlop95o/shop.mozilla.desktop-60-20-12c-990px_Ty.psd

Some of the additional fonts used which we tend to use as webfonts:
http://fontawesome.io/   (Icons)

https://github.com/mozilla/Fira
Thanks Ty!
Sorry, hit send a little too soon on that previous comment. I like the new designs, but do think we need to work on the wordmark a bit more. What we have there is fine now as a placeholder, but am not sure that's the exact wording or visual style we want.

Ty, let's discuss outside the bug.
Hey John,

Wordmark is definitely FPO right now.
Looking at mozilla-store-sitelayout.pdf, I'm a bit unclear on what these two products mean:
"PRODUCT TITLE MAX CHAR LEN"
"PRODUCT TITLE THAT HAS A<br>RETURN"

Are we saying that product names will be overflow:hidden by default and only wrap if you include line breaks in the product title? That sounds bad for l10n and slightly awkward.

Also, should product prices have local currency listed? ie: $999.99 USD?
+1 for "Mozilla Gear", only because I love shortening things to have a whimsical -moz prefix, ie: "-moz-gear"
I like it a lot (prefer the white-background screenshots to the sandstone PDF).
One thing I find mildly confusing is the donation aspect in the cart.
It'd help (I think) if we could do products + subtotal + taxes + shipping THEN donation, THEN grand total. The first thing I'd test (as a customer) is that I'm not being taxed on my donation. I know a lot of restaurants scam you on this where they add try adding tax onto a mandatory tip, or other weirdness, so I'm probably a bit over-paranoid.

Since this would now be a weird hybrid store+donation mashup, not sure if we need to add some clever wording about how donations are non-refundable. Sounds silly and obvious, but may be worth a footnote somewhere.

Now hurry up and take my money!
Hi Peter, all good Qs, and ones that I'm leading on answering. Taxation and donation receipting is something I'm tackling in this bug if you'd like to follow along: https://bugzilla.mozilla.org/show_bug.cgi?id=1005408 

Store + donation is something that other NGOs have solved for, we have also offered premiums (T-shirt) with donations so some of this challenge is familiar territory. Custom receipting by Treehouse gets us pretty far (something they'll be offering). The user funnel and where "add my donation" ultimately lives should be something we test, but that's unlikely for this initial launch.
 

(In reply to Peter deHaan [:pdehaan] from comment #29)
> I like it a lot (prefer the white-background screenshots to the sandstone
> PDF).
> One thing I find mildly confusing is the donation aspect in the cart.
> It'd help (I think) if we could do products + subtotal + taxes + shipping
> THEN donation, THEN grand total. The first thing I'd test (as a customer) is
> that I'm not being taxed on my donation. I know a lot of restaurants scam
> you on this where they add try adding tax onto a mandatory tip, or other
> weirdness, so I'm probably a bit over-paranoid.
> 
> Since this would now be a weird hybrid store+donation mashup, not sure if we
> need to add some clever wording about how donations are non-refundable.
> Sounds silly and obvious, but may be worth a footnote somewhere.
> 
> Now hurry up and take my money!
Andrea, what state should we charge tax in?  Just home office state or do we tax in all states? 

How do you handle taxes know?

Thanks,
Anthony
Flags: needinfo?(andrea)
After a quick discussion with our in house photographer I want to suggest a small change to the feature slider for the landing page.  

I would like to restrict it to a max-width of the grid.  Creative direction, banner layout and integration of product photography for an image that maintains an aspect ratio of 100% screen width is overly complex.  It was recommended that it be kept to a reasonable size constraint.
No objections here.
Hello All,

Is there any update from the design team on a new mark / color scheme / edits to the revised theme?
Daniel,

Will probably have an updated wordmark early next week. So far no changes to the color theme yet.
Will we have an opportunity to make any changes to a demo site before going live?
Flags: needinfo?(tyronflanagan)
Ty,

Although making changes to the demo site is possible, a lot work goes into these themes as they must be integrated with shopify backend so changes can be very time consuming and costly. It would be better to have the design locked down before starting to integrate.
Attached image MozGear_Wordmarks.png — 
Hi all,

Finally had some time to put some options for the wordmark together.

The attached image showcases:

Top-Left) "Mozilla Gear" wordmark intended for the website or elsewhere online.
Top-Right) "Mozilla Gear" wordmark intended for clothing or for tags
Bot-Centre) Wordmark with cursive-styled "Gear" along with "est. 2014" for a tee, or hat, or something printed to celebrate the launch.

Feedback is always welcomed and appreciated :)
Attached image moz-logo-mark.jpg — 
This is a mockup of the proposed Mozilla Gear logo for the store.
Ty,

I've attached a mockup of the logo on the site above.

The website mark is interesting.  However it feels very different from the other logos in the Mozilla family.
My thoughts on the gear wordmark mockups:

-- I like the distressed look, but I worry that it, along with the "gear" font, will be dated in a year. It might be too "in style" at the moment. 

-- midtone gray seems to fade into the background for me when there is so much color "popping" on the page. Perhaps we at least keep the "mozilla" red?
Flags: needinfo?(andrea)
Another thought: Given that we are very lenient with our trademark and there are lots of popup stores or merch with our logos, it might be good to use "official gear store" vs. just "gear store" in the title. It will ensure people know they are in the right place.
I think we've chosen to drop the word 'store'.

So "Official Mozilla Gear" is a good tag.
Quick update: Ty is going to submit some alternate logo ideas. I agree with Andrea that the distressing look probably isn't the best for the long term. Goal is to find something that looks good on the site and on an item tag.

Stay tuned....
John and Ty, would you be able to have the new store logo ready for August 5th? 

We are looking to start working on the promotional creative and the store logo will be a big part of it.
Flags: needinfo?(jslater)
I think we can have the start of something by then. That only gives Ty two days to work on it once he's back, which seems tight.

For the purposes of promotional creative, I do think we can set the general size & shape of the logo, so in the worst case you could use a placeholder for the first few days of work on the promo creative, and then swap the logo in later.

The logo will really just be a wordmark, so I wouldn't recommend making it a major part of any promotions anyway. Better to focus on the gear, and the overall Mozilla brand.
Flags: needinfo?(jslater)
Ty, could you give an estimate of when would you have a new version of the store wordmark?
Flags: needinfo?(tflanagan)
Hey Gustavo,

Will be putting together some time today to work on the wordmark/logo. Will keep you posted.
Hi all,

Here is the latest wordmark design that Sean Martell and I are recommending we go with. It keeps with our current wordmark guidelines and can be used on the site or a clothing tag if necessary. We had considered various other approaches but felt that this design should be kept simple and should not stray too far from our current wordmark system.

That said though, we also agreed that in some cases we should still consider alternate approaches when applying the wordmark to clothing or products especially when we want to match the style or design of a respective item.
Attached image MozTee_Example_2.png — 
Here is an example of using an alternate wordmark design for clothing
I like it!
Another idea I had for an on-clothing tag.
(In reply to Ty Flanagan from comment #51)
> Created attachment 8469611 [details]
> Moz_ClothingTag_Idea.png
> 
> Another idea I had for an on-clothing tag.

my favorite fwiw (more timeless i think)
All look good.
Great work Ty! When you have a chance could you share the esp versions (or vector based files).
Here is the wordmark to use on the website header
and the EPS of the clothing tag
(In reply to Ty Flanagan from comment #51)
> Created attachment 8469611 [details]
> Moz_ClothingTag_Idea.png
> 
> Another idea I had for an on-clothing tag.

Gorgeous tag! Just wanted to give my +1 =)
Can the final decision-maker on this wordmark kindly sign off on the design? Studio Mofo requires a signoff before we can design all the graphic assets requested for the launch. Flagging Hannah on this for now.
Flags: needinfo?(hannah)
Hi all -- on the new wordmark logo design, Geoffrey gave his approval in comment 53. I believe John Slater may also be needed to give signoff, but that's not clear as there's no RACI. We do need signoff asap (today if at all possible) as this is delaying our gear store collateral design. Is Matej serving in John's shoes while John's out? Or Ty have you shown this to John already?
Hi All. Consider the word mark approved for launch. We can always swap it out if John wants to make changes once he's back. Thanks!
Ty and I jammed on this.

Creative Approved!
YEAH! Thanks everyone!
Flags: needinfo?(tflanagan)
Flags: needinfo?(hannah)
As a note from just a bystander (don't let anything get derailed on this, it's more important to get the store up), I find it a bit confusing that the tag and the website logo are so far apart, though both look awesome by themselves.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: