831835 - Update design on Themes landing page

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect)

Description

[Amy Tsay [:amyt]]

Lightweight Themes (formerly Personas) and Full Themes now live under the Theme category on AMO, so we need to update https://addons.mozilla.org/firefox/themes/ to funnel people to the type of theme they are looking for.

Main things the design should communicate:
- Themes are a way to personalize the look of your Firefox
- Full Themes offer deeper customizations for the look of your Firefox

Comment 1

[Christopher Van Wiemeersch [:cvan]]

FYI: Greg's original spec: https://docs.google.com/document/d/1eT3FfUbeQu99J6Ra0tNQx7oR9LiT1KDiJv1svDKvS4c/edit

Covers more of the "themes" landing page design, not the "full themes" one. But a good read nonetheless.

Comment 2

[Bram Pitoyo [:bram]]

Attachment: themes and full themes landing pages - explanation

I got a note about this project from Maria this afternoon, so I thought I’d propose something I sketched and mocked up for a bit today:


It sounds like the problem with the full themes is not that it’s not prominent enough in the design.

In fact, the spec sheet wrote that we wanted to deemphasize full themes. The current information architecture makes sense for this purpose: put the link to full themes on the bottom part of the “Themes” mega-menu.


The problem will full themes are twofold:

1. First of all, it’s not very well explained. “Deeper customization”, “more extensible skins” and “change more of the look and feel” are good starts, but we need to be more specific.

In the mockup, I tried explaining full themes as “styles for the window frame, buttons, tab, address bar and menu items”. Let’s come up with a clearer explanation that will clarify what exactly makes full themes unique.


2. Secondly, the full themes section is lacking a proper landing page, so it’s not as attractive as themes. In the mockup, I repurposed the existing themes landing page for this purpose: replacing all the screenshot with those of full themes.


Note how on the lower part of each landing page, you’ll see a link to the other section as well as an image of either a theme or a full theme. This visual is important to include, so that user can visually understand and distinguish between the two.

Comment 3

[Jorge Villalobos [:jorgev] (he/him)]

The main problem we have with the design is that full themes are no longer easily discoverable, and we are possibly losing thousands of downloads every day because of this.

We now have two theme types: Lightweight Themes and Full Themes, both of which should have prominent billing in the common Themes landing page. If Lightweight Themes get more space in there, that's fine, given that they are intended for a wider audience, but we need Full Themes to have something more than a little box with a link.

Creating a better landing page for Full Themes sounds like a good idea, but what's really critical at the moment is to increase their visibility on the common Themes landing page.

Comment 4

[Amy Tsay [:amyt]]

Hi Bram, these look great, and thanks for the quick turn-around. I like the text further explaining what each type of theme does.

Jorge sums up our feedback pretty well. To this end, perhaps we could shrink down the main graphic (to show 3 features instead of 4?), and make the Full Themes graphic taller and maybe more colorful and/or splashier.

Comment 5

[Bram Pitoyo [:bram]]

Attachment: themes and full themes landing pages - explanation - 02

(In reply to Jorge Villalobos [:jorgev] from comment #3)
> […] we need Full Themes to have something more than a little box with a link.
> […] what's really critical at the moment is to increase their visibility on the
> common Themes landing page.


(In reply to Amy Tsay [:amyt] from comment #4)
> perhaps we could shrink down the main graphic […] and make the Full
> Themes graphic taller and maybe more colorful and/or splashier.


Hi Jorge and Amy,

Both of your suggestions sound good. Here is a second take on the themes landing page.

Basically, there are two possible approaches: we either divide the feature area horizontally or vertically.

In the horizontal layout, Themes is put on the left side and Full Themes on the right. In the vertical layout, Themes in put on top and Full Themes on the bottom.

Themes is always the most prominent element, occupying 60–70% of the total feature banner area. The one-click-tryout feature is still here, too.

Lastly, we use color to make the Full Themes area more visually interesting. There are two color variations: light blue and dark blue. I found the dark one more interesting, but we must be mindful as to the Full Theme that we pick as a representation, so that it doesn’t clash with the background color.

Comment 6

[David.Vincent]

Attachment: David.Vincent theme page suggestion

Comment 7

[David.Vincent]

I am a full theme developer. Since the theme page has been changed, I have lost more that 50% downloads per day. I think that the theme page must be changed quickly and here is my suggestion for a better look. This way themes and full themes are well-balanced (this is a photomontage).

Comment 8

[Andrew Williamson [:eviljeff]]

(In reply to Bram Pitoyo [:bram] from comment #5)
> Created attachment 704411 [details]
> themes and full themes landing pages - explanation - 02
> 
> Basically, there are two possible approaches: we either divide the feature
> area horizontally or vertically.
> 
> In the horizontal layout, Themes is put on the left side and Full Themes on
> the right. In the vertical layout, Themes in put on top and Full Themes on
> the bottom.
> 
> Themes is always the most prominent element, occupying 60–70% of the total
> feature banner area. The one-click-tryout feature is still here, too.
> 
> Lastly, we use color to make the Full Themes area more visually interesting.
> There are two color variations: light blue and dark blue. I found the dark
> one more interesting, but we must be mindful as to the Full Theme that we
> pick as a representation, so that it doesn’t clash with the background color.

My vote is the light vertical design, or the dark smaller vertical (I'm not as fond of the big block of blue in the larger vertical design)

Comment 9

[Andrew Williamson [:eviljeff]]

I'll just add my (I'm aware unpopular) statement of fact that I've not seen any evidence we (i.e. mozilla/amo) have lost any downloads at all.  Its more likely those users who've come looking for themes have still downloaded some themes, just not full themes.

Comment 10

[Jorge Villalobos [:jorgev] (he/him)]

I like the light versions, in the order presented (top one is my favorite). Note that we should change the Themes title to Background Themes, so that we can easily tell them apart.

(In reply to Andrew Williamson [:eviljeff] from comment #9)
> I'll just add my (I'm aware unpopular) statement of fact that I've not seen
> any evidence we (i.e. mozilla/amo) have lost any downloads at all.  Its more
> likely those users who've come looking for themes have still downloaded some
> themes, just not full themes.

I don't see any evidence for that statement, either. What we know is that Full Themes are now very difficult to find, and they are losing 40%+ downloads. Whether users are downloading something else, and whether it was what they wanted or are just conforming, is unknown and in my opinion inconsequential.

We should give both theme types equal or at least similar billing so users can make their choice.

Comment 11

[Amy Tsay [:amyt]]

Hi Bram, let's go with the vertical design in light blue, and go with the bottom design because it's less busy.

Agree with Jorge, we should call them Background Themes; however, Full Themes will need to be changed as well, to Complete Themes (bug 833584).

Jorge, are you fine with the screen shot we're using for Complete Themes? Either way, I'm thinking we can show a more aesthetically pleasing web site?

Thanks for all your work Bram!

Comment 12

[Jorge Villalobos [:jorgev] (he/him)]

(In reply to Amy Tsay [:amyt] from comment #11)
> Jorge, are you fine with the screen shot we're using for Complete Themes?
> Either way, I'm thinking we can show a more aesthetically pleasing web site?

Since we're giving Complete Themes a relatively small area, it'd be nice to have a few screenshots of the same corner, showing the same site, but with different themes enabled, and cycle through them using some effect. This can be a followup bug.

At the very least, we should have the screenshot show mozilla.org or AMO.

Comment 13

[Amy Tsay [:amyt]]

After thinking more about this, I think a more elegant way to handle naming would be to have the top part remain "Themes". So the graphics would say the following (note the extra zero on the number of themes we have):

Themes
Over 300,000 different designs to personalize your browser! Move your mouse over a Background Theme to try it on. Start exploring >

Want more personalization?
Complete Themes transform the look of your browser with styles for the window frame, buttons, tab, address bar, and menu. Start exploring >

Comment 14

[Frank Lion]

(In reply to Amy Tsay [:amyt] from comment #13)
> Want more personalization?
> Complete Themes transform the look of your browser with styles for the
> window frame, buttons, tab, address bar, and menu. Start exploring >

Just a couple of small points, Amy. Not all Complete Themes actually do transform that lot, as many are based off the default theme and only change the toolbar buttons and maybe the toolbar backgrounds. Secondly, that list is slightly confusing to understand (and I make the things!)

I'd suggest something like -

Complete Themes can transform the total look of your browser with styles for all
backgrounds, toolbar buttons, tabs, address/search bars, scrollbars and menus. Start exploring -

Comment 15

[Bram Pitoyo [:bram]]

Attachment: screenshot of complete theme

I was not able to install the FoxDie theme (which the mockup used) so please use this screenshot to populate the Complete Theme banner instead.

Comment 16

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/zamboni/commit/392cd8e 

TODO - nitpicks:
* Serve 1x promo images to non-retina users. Serve 2x promo images to retina users.
* Crop images so we're sending down only the visible part of the screenshots.
* Horizontal scrollbars for carousel (if still desired).

I'll gladly file a follow-up bug. If there are any additional requests, I can put that in the new bug.

Comment 17

[Amy Tsay [:amyt]]

Thanks Cvan! For the follow-up bug, can we add: "Remove the word 'different' from the Themes subhead to take it down to 3 lines of text"