Closed Bug 667554 Opened 13 years ago Closed 13 years ago

[Mobile] Optimize Landing Page for Desktop Experience

Categories

(www.mozilla.org :: General, defect)

x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Future

People

(Reporter: christine.brodigan, Assigned: jfu)

References

(Blocks 1 open bug, )

Details

Attachments

(3 files, 7 obsolete files)

This is a placeholder for a Q3 goal/project to design a terrific landing page for desktop users who click "Mobile" to learn more. We eliminated the previous landing page in Q2 because it was an added step to getting to the download page.

http://www.mozilla.com/en-US/mobile/
Is this meant to be the design bug or the implementation bug? If design, then consider filing it under the "design" flow, and changing this to the implementation bug.
Assignee: nobody → cbrodigan
(In reply to comment #1)
> Is this meant to be the design bug or the implementation bug? If design,
> then consider filing it under the "design" flow, and changing this to the
> implementation bug.

Hey Laura,

Thanks for this note! Jason and I will be working on this page together, and I don't think we're going to need any new original artwork. If we find that we do though, this bug will become first a tracking bug and later an implementation bug. But, right now it's exactly what it needs to be a placeholder bug for Q3 planning :-)

Best,
CB
Hey all, I got some ideas while on the landing page - just throwing them out there:

*A text-to-phone input field that would send an SMS with the Android Market download link to the user's phone
*A QR code (possibly hidden until covered over) that would also make the download process easier from desktop 
*"Learn more" or "Features" link easily accessibly near the download button
(In reply to comment #3)
> *A text-to-phone input field that would send an SMS with the Android Market
> download link to the user's phone

If you're already on your phone on this page, wouldn't a direct link to the Android Market be a quicker/easier path?
This would be for the desktop experience
(In reply to comment #5)
> This would be for the desktop experience

Ah, right - sorry. I misread the bug URL. Now that the Android Market allows installs directly to the phone from the desktop web versions, I find this a quicker solution. It does require you to log-in to the Android Market with your Google account though.
I'm not sure if people are aware that they can download from their desktop - it might be more straightforward for the user if they send it to their phone because it won't require connecting their phone to their computer or logging in
(In reply to comment #7)
> I'm not sure if people are aware that they can download from their desktop -
> it might be more straightforward for the user if they send it to their phone
> because it won't require connecting their phone to their computer or logging
> in

Jaclyn,

I think one thing to look at is did anything change in a positive and/or negative way when this page was removed from the experience last quarter. We can use that data to iterate on a new page or simply make changes to the existing page which is currently a direct path to download.

$.02

:)CB
Target Milestone: --- → 3.5
Jaclyn,

Assigning to you to decide the "future of"!

:)CB
Assignee: cbrodigan → jfu
Target Milestone: 3.5 → Future
Adding Mayumi!
Summary: [Mobile] Design New Landing Page for Desktop Experience → [Mobile] Optimize Landing Page for Desktop Experience
WON'T FIXing per convo with Chrissie, Laura & Jaclyn. Will come back to this when we have a more compelling reason to update the page (for now, it's functioning as intended).
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → WONTFIX
Blocks: 684378
Attached image Wireframe for new landing page (obsolete) —
Adding wireframe for upcoming redesign.
Hi Chrissie, the wireframe you uploaded was for the mobile experience.  Can you upload the ones you have for the desktop experience?
Attached image Version 1. (obsolete) —
Version 1.
Attachment #564728 - Attachment is obsolete: true
Attached image Verson 2. (obsolete) —
Sorry about that Jaclyn, I've uploaded the two versions I created:

comment 14
comment 15

Next steps would be feedback and finalizing one with any edits you have. Then we'll open a design bug.
Status: RESOLVED → REOPENED
Resolution: WONTFIX → ---
Hi Chrissie,

Thanks for the wireframes, these look great.  See below for comments and questions:

I like Version 2, but with the icon navigation of Version 1 that puts the navigation outside of the screenshots (possibly on top of the box?).  Also, if the "Learn More" if linking to Features, we probably will not need "More Information" and "Getting Started" links - what do you think? I would also like to have our Supported Devices and Platforms site more findable - would putting it under the download button or in the Notes Block be more effective? When the items under the Notes Block are expanded, will it affect the placement of the video? Are we using some magic for the slideshow? Where are Developer Tools now? Should we add it as a link in the Notes Block? 

For the Firefox Home version of this site, note release notes or future releases is not applicable. 

Thank you!
(In reply to Jaclyn Fu from comment #17)
> Hi Chrissie,
> 
> Thanks for the wireframes, these look great.  See below for comments and
> questions:
> 
> I like Version 2, but with the icon navigation of Version 1 that puts the
> navigation outside of the screenshots (possibly on top of the box?).  

The designer won't necessarily use a box like I have, but a good item to keep in mind when reviewing color comps. Wireframes are just meant to be guidelines for the designer.

Also,
> if the "Learn More" if linking to Features, we probably will not need "More
> Information" and "Getting Started" links - what do you think? 

What would you like to see included? SUMO has an awesome getting started guide and the /features page is not very readable according to the user testing we did.


> I would also like to have our Supported Devices and Platforms site more findable - would putting it under the download button or in the Notes Block be more
> effective? 

I recommend adding this to the Marketplace instead of adding more to the page, but if you would like it on the page either of your suggestions are good. What is your preference?

>When the items under the Notes Block are expanded, will it affect the placement of the video? 

That is likely, yes.

>Are we using some magic for the slideshow? 

Just some simple javascript for the user to switch views.


> Where are Developer Tools now? 

They are promoted on MDN.


> Should we add it as a link in the Notes Block? 

I don't think that would be a benefit to the users coming here to get the link to the Android store. It's information for a specific audience that MDN can serve.

> For the Firefox Home version of this site, note release notes or future
> releases is not applicable. 

So you would like them removed?

> Thank you!

Sure thing! LMK next steps.
Regarding the icon navigation, I mentioned I liked having it outside of the screenshot box in Version 1 was so that when they switched to Firefox Home version it would feel more like they were switching to a new product page, vs just switching screenshots in the slideshow. (I'll be sure to note that for designs later)

The Firefox Home site version should be a tad bit different to differentiate itself as it is not the same product as Firefox for Android - so let's remove the "release notes", "future release", Supported Devices (since it's iPhone only) links in the Notes Block for the Firefox Home version 

The "Getting Started" link sounds good, I first thought it meant we were just copying and pasting feature copy into this section. I like that it would link to the SUMO guide. Is there a way we can give options to learn how to get started for either phones or tablets? When this section is expanded maybe it will show 2 different links? I don't think we need the "More information" link if info is going to be covered in Learn More and Getting Started. 

I would still like the Supported Devices link on this page. We want users with compatible devices that will offer the best experience to download Firefox, so making this list handy will be good.  Let's put it under the green download button.

As for the Developer Tools, right now it's hidden away in the MDN (https://developer.mozilla.org/en/Mobile) and the download experience is not friendly. Even though it is a smaller audience, /mobile is still probably the starting point where developers would look to get connected. I suggest a "For Mobile Developers" link in the Notes Block to give them a starting point (and it won't take up a lot of site estate) 

Can we get a revised wireframe based on feedback? Thanks!
(In reply to Jaclyn Fu from comment #19)
> Regarding the icon navigation, I mentioned I liked having it outside of the
> screenshot box in Version 1 was so that when they switched to Firefox Home
> version it would feel more like they were switching to a new product page,
> vs just switching screenshots in the slideshow. (I'll be sure to note that
> for designs later)

OK.

> 
> The Firefox Home site version should be a tad bit different to differentiate
> itself as it is not the same product as Firefox for Android - so let's
> remove the "release notes", "future release", Supported Devices (since it's
> iPhone only) links in the Notes Block for the Firefox Home version 

It might make more sense to figure out if you want this to only reflect Android, since Firefox Home already has a really nice stand-alone landing page here: http://www.mozilla.org/en-US/mobile/home/

> 
> The "Getting Started" link sounds good, I first thought it meant we were
> just copying and pasting feature copy into this section. I like that it
> would link to the SUMO guide.

OK.

 Is there a way we can give options to learn
> how to get started for either phones or tablets? 

Absolutely, what do you want this area to include and specifically say?

When this section is
> expanded maybe it will show 2 different links? I don't think we need the
> "More information" link if info is going to be covered in Learn More and
> Getting Started.

This depends on what you decide above.
 
> 
> I would still like the Supported Devices link on this page. We want users
> with compatible devices that will offer the best experience to download
> Firefox, so making this list handy will be good.  Let's put it under the
> green download button.

OK.

> 
> As for the Developer Tools, right now it's hidden away in the MDN
> (https://developer.mozilla.org/en/Mobile) and the download experience is not
> friendly. 

Have you spoken with Jay Patel and pulled numbers to demonstrate the the experience is not friendly? If so, please add those findings in here,  if not, let's do that before making a decision.

Even though it is a smaller audience, /mobile is still probably
> the starting point where developers would look to get connected. 

Do we know this for certain? How? What are the numbers (referring traffic would be a good place to start research).

I suggest a
> "For Mobile Developers" link in the Notes Block to give them a starting
> point (and it won't take up a lot of site estate) 

OK, but pull the numbers first, talk with Jay, and then let's form a plan.

> 
> Can we get a revised wireframe based on feedback? Thanks!

I'll update with what I have, but there are still outstanding questions that it would be great to get answers for.
Blocks: 698505
One more question Jaclyn - have you moved forward on the text-to-phone project? Should that be in these wireframes?
No longer blocks: 698505
Hi Chrissie,

I like the suggestion of keeping the Firefox Home page as it is, so if users click on the Apple logo at the top we can just redirect them to http://www.mozilla.org/en-US/mobile/home/. 

For the "Getting Started" section, I would like this area to include links that direct visitors to either phone SUMO guide or tablet SUMO guide so it's not an overload of information in that section. 

I spoke with Jay, and he believes it's critical that we continue to promote developer tools on /mobile because is a major channel for consumer and developers (who need to go there to download Firefox Mobile)... so we need to have a developer-targeted message and link on that page.  He recommends a "Mobile Developer Resources" link + some copy about what we have on MDN for them + a link to the MDN Mobile page in the Notes Block.  

Since we have the email to self feature and QR code, I think that will suffice for this redesign.
(In reply to Jaclyn Fu from comment #22)
> Hi Chrissie,
> 
> I like the suggestion of keeping the Firefox Home page as it is, so if users
> click on the Apple logo at the top we can just redirect them to
> http://www.mozilla.org/en-US/mobile/home/. 
> 

Sounds good.

> For the "Getting Started" section, I would like this area to include links
> that direct visitors to either phone SUMO guide or tablet SUMO guide so it's
> not an overload of information in that section.

OK, please provide placeholder copy that you want there for me to include on the wireframe.
> 
> I spoke with Jay, and he believes it's critical that we continue to promote
> developer tools on /mobile because is a major channel for consumer and
> developers (who need to go there to download Firefox Mobile)... so we need
> to have a developer-targeted message and link on that page.  He recommends a
> "Mobile Developer Resources" link + some copy about what we have on MDN for
> them + a link to the MDN Mobile page in the Notes Block. 

OK, please provide placeholder copy that you want there for me to include on the wireframe.
 
> 
> Since we have the email to self feature and QR code, I think that will
> suffice for this redesign.

Do you have a bug open to create email to self functionality? Can you put a link to that bug here for reference. Will that be built for this redesign? What is the timeframe for this redesign of the page?
Jaclyn, one more question - would you rather use the Firefox Home template/design and plug in the relative Android assets instead of build an entirely new page? http://www.mozilla.org/en-US/mobile/home/

Then we could create a way for a person to go from one to the other with the Android and Apple icons. This way sync would also be represented for both products as well.

Depends a lot on positioning that you're working on, etc. 

Something to think about, lmk:)
Depends on: 698560
Placeholder copy for "Getting Started" section:  2 links "Mobile phone guide" and "Tablet guide" 

Placeholder copy for "Mobile Developer Resources" section: Interested in developing for Firefox mobile? Get the developer tools and resources from the Mozilla Developer Network _link_.  

Email to functionality Bug 698560

re: Firefox Home design - P1 to get the Android version and probably P2/P3 for the iOS version.  So I'm fine with keeping the Firefox Home landing page as is and redirecting users there when they click on the Apple icon for now. 

It would be super to get this page up for the Dec 20 release for tablets - since we will be executing promotions around tablets, I think it would be a priority for us to have a place to direct people to learn more about tablets/download.  Does this sound do-able? 

Thanks!
Blocks: 698505
No longer depends on: 698560
Quick ping - is the mid Dec time line do-able? This page will be integral for people who land here via our tablet promos so they can learn and download efficiently. Thanks

Note: we will not be implementing the email-to-phone feature for Phase 1 of this project
(In reply to Jaclyn Fu from comment #26)
> Quick ping - is the mid Dec time line do-able? This page will be integral
> for people who land here via our tablet promos so they can learn and
> download efficiently. Thanks
> 
> Note: we will not be implementing the email-to-phone feature for Phase 1 of
> this project

Jaclyn,

I've just attached two site maps:

comment 27 details the current user flow to the mobile pages on the desktop site (it's super disjointed and not totally logical)

comment 28 details a proposal for a future flow to the mobile pages on the desktop site that's more consistent with parent/child pages

Before we dive into updating the wireframe for a proposed redesign to http://www.mozilla.org/en-US/mobile/ I'd love to get your thoughts and organize for what it sounds like will be the addition of a new tablet product.

Please ping me for more detail and I'd be happy to walk through this experience with Michelle, Lukas, and me in a quick team meeting.
opps, one last note Jaclyn, if you are planning an ad spend for tablet-only or tablet-focused, you'll likely want to send that traffic to a tablet landing page v. a page with Android and Home options - unless it applies to both platforms. 

a more focused page usually will help with better conversion opportunities, less bounce or dropoff by too many choices and thinking.

Hopefully this helps clarify suggestions in comment 28
It's not really "adding a new tablet product" but more about making it known that we have a tablet version that is optimized for larger screened devices (it's just the UI that's different). It's still the same version as the phone and users would download it the exact same way.

For the proposed sitemap, I would prefer if phone and tablet were kept together on the same page to keep our messaging consistent.
(In reply to Jaclyn Fu from comment #31)
> It's not really "adding a new tablet product" but more about making it known
> that we have a tablet version that is optimized for larger screened devices
> (it's just the UI that's different). It's still the same version as the
> phone and users would download it the exact same way.

OK, if you aren't targeting tablet first then you won't need the page for SEO.

> 
> For the proposed sitemap, I would prefer if phone and tablet were kept
> together on the same page to keep our messaging consistent.

The sitemap is more about pulling the whole section together instead of having these pages spread around and not talking or referring to one another. Maybe that's something to tackle at another time.

Per comment 26, looks like this is probably something you want to wrap into the December release. I think you should go ahead and file a design bug with Tara and implementation bug with Laura Forrest to hit that date with any other assets like ad units. I think you're good to go!
Status: REOPENED → RESOLVED
Closed: 13 years ago13 years ago
Resolution: --- → FIXED
WOOT! Thanks!
Blocks: 699976
Hey guys. I'm jumping in here late, but I really like what Chrissie proposed earlier. Rather than redesigning the current /mobile page it seems like a good idea to focus on creating an optimized page for our Android browser (the equivalent of http://www.mozilla.org/en-US/mobile/home/, basically) first. If we still need to redo /mobile after that we can do so, but it seems like getting a nice, SEO-friendly page for Android should be the top priority.

What do you think? Is that doable? Can we discuss more?

Chrissie, could you share that wireframe for the Android page you mentioned?
Attached image Wireframe: Android landing page (obsolete) —
This wireframe takes into account feedback from 20 user videos and surveys conducted in October:

*includes a QR code (this can be easily swapped out to test for effectiveness)

*keeps continuity of the download button in the upper right corner

*incorporates both screen captures and the video (by request of the users in the research)

*takes copy and visual assets from the existing Android store, which is already localized (so we won't need to localize new copy)

*incorporates sync instructions (super important product that's been lost a bit in the transition of the site)

*presents data in a hierarchy that's streamlined and user-friendly 

*fills a much needed hole in our search and content marketing strategy (seo-friendly see attachment 571730 [details])
I think wireframe #2 (https://bugzilla.mozilla.org/show_bug.cgi?id=667554#c15) is a much more compelling experience than the current firefox home landing page. It also takes into account the feedback from surveys (QR code, more information, etc). This wireframe is a nice happy medium between too much information (Firefox Home) and not enough (current /mobile). It feels more like our /features page than an acquisition landing page. Also, since mozilla.org/mobile is our main mobile page, will we redirect everyone who goes to /mobile to this new Android landing page? Whatever main mobile page people land on it should include tablets. 

Wireframe #2 incorporates tablets cleanly, the different tablet and phone device sizes would be hard to represent in the static screen capture spaces of the Firefox Home design. Wireframe #2 puts a greater emphasis on visual rather than words, and I think that would be more effective (in our study users skipped copy and went to visuals) 

Also, putting this emphasis on Sync on the landing page might be affected when we go to Native UI soon. And although it's an important feature, I think having Sync on the landing page as a value prop, and not as instructions, would be more effective (users might be put off initially at the complicated set up procedure even before they download, I think putting Sync instructions in /features would be more appropriate).  

I also don't think we should be putting this much emphasis on specific details of the features with Native UI coming up after one more(ish) release.

I'm happy to discuss further, let me know if I should set up a meeting. Thanks
John & Jaclyn, 

Wow, great feedback and thoughts here. I've reopened this bug, so we can finalize a concept together.

Jaclyn, you're the content owner and expert, so can you provide an outline of the specific content and where that content links to that you want on an Android-only product page.

If we take content directly from the Android store that is already translated by l10n, we can launch this page across locales, so the closer we stay to that model the more reach and success we can have.

Examples might include:

-download button with Free from the Android Store
-link to supported devices page
-3 major bullet points that say....(headline  & subtext)
-Sync instructions
-a link to SUMO
-a mobile phone
-a tablet
-a unit for developers to download mobile tools or a unit for mobile developers that sends traffic to MDN

I'm the site architecture owner, so I'll take Jaclyn's content requirements and come up with layout that works with our existing templates, user research, and that also supports the overall information architecture of the site (existing and future).

John, you're the visual owner, so I'll circle back with wireframes that I'd love for you to comment and assist on the visual direction we're taking.

Thanks again all!
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Hi Chrissie,

Thanks for breaking down the next steps.  

Question: How will users get to this Android specific page? From the sitemap it seems users will have to get to it from /mobile, but I'm wondering if users should just be directed to this Android page? Is there just going to be a "Learn More" link on /mobile? 

Here's the content and links for the Android specific page: 

-Download button from Android Market (links to Android Market) 
-Link to Sync instructions, but not full instructions (http://www.mozilla.org/mobile/sync/) 
-Link to supported devices (http://www.mozilla.org/mobile/platforms/)
-Visuals with Firefox on tablets and phones 
-Link to SUMO (http://support.mozilla.com/mobile)
-QR code 
-Link to features (http://www.mozilla.org/mobile/features/)
-Link to release notes (http://www.mozilla.org/mobile/8.0/releasenotes/)
-Link to rapid release channels (http://www.mozilla.org/firefox/channel/android)
-Unit/link for developers (https://developer.mozilla.org/en/Mobile) 
-3 value props 
-Social unit (FB, Twitter, Newsletter) 


Thanks! Let me know what else you need
Hey guys. I'm pretty sure we're now talking about the same thing here - creating an Android-specific landing page.

Chrissie, can you work with Jaclyn to put the content from comment #39 into a wireframe?

Thanks!
Attached image Wireframe 2. Android (obsolete) —
Jaclyn,

For this layout, I have eliminated: screen captures and video

Included:

-Download button from Android Market (links to Android Market) 
-Link to Sync instructions, but not full instructions (http://www.mozilla.org/mobile/sync/) 
-Link to supported devices (http://www.mozilla.org/mobile/platforms/)
-Visuals with Firefox on tablets and phones 
-Link to SUMO (http://support.mozilla.com/mobile)
-QR code 
-Link to features (http://www.mozilla.org/mobile/features/)
-Link to release notes (http://www.mozilla.org/mobile/8.0/releasenotes/)
-Link to rapid release channels (http://www.mozilla.org/firefox/channel/android)
-Unit/link for developers (https://developer.mozilla.org/en/Mobile) 
-3 value props 
-Social unit (FB, Twitter, Newsletter) 

*****

I still have some concerns:

not delivering information that users have told us they would like to have: video and screenshots

serving too many audiences, specifically offering Fennec downloads to developers instead of referring developers to MDN where they can get downloads, documentaion, and community
Attached image Wireframe 2. Android (obsolete) —
Attachment #574438 - Attachment is obsolete: true
Hm I can't seem to open the attachment. Would you mind re-attaching a fresh copy? 

I should have probably been more specific with "visuals with Firefox on tablets and phones" but I was grouping the screenshots and images/video in with that category. 

/mobile should be a Fennec download point for developers and everyone else audiences since MDN is for documentation, not for downloads - but I do agree that all the tools and resources should remain on MDN. I would like a presence on /mobile, such as a small unit or a link, so that any developers starting out and finding out where to go will have that direction
Attached image Wireframe: Android landing page (obsolete) —
Attachment #574442 - Attachment is obsolete: true
(In reply to Jaclyn Fu from comment #43)
> Hm I can't seem to open the attachment. Would you mind re-attaching a fresh
> copy? 

See comment 24 for fresh copy

> 
> I should have probably been more specific with "visuals with Firefox on
> tablets and phones" but I was grouping the screenshots and images/video in
> with that category. 

Recommended layout is in attachment 573365 [details] 

Your feedback asked for: Visuals with Firefox on tablets and phones and did not mention video.

Do you want to include screenshots and video per attachment 573365 [details]?

> 
> /mobile should be a Fennec download point for developers and everyone else
> audiences since MDN is for documentation, not for downloads - but I do agree
> that all the tools and resources should remain on MDN. I would like a
> presence on /mobile, such as a small unit or a link, so that any developers
> starting out and finding out where to go will have that direction

Please be specific about what you want if it is different from attachment 574465 [details]
I like it! 

Some comments: 
-Would it be possible to incorporate a slideshow of images for item 2? That way we can use the space for screenshots+graphics? Also open to other suggestions on screenshots 
-Replace "Systems and Languages" under the download button with "Supported Devices"
-QR code seems a little out of place, how about somewhere near the download button or under #3?
Jaclyn,

I'd like to defer to John in the design phase before moving the QR code or adding a slideshow. Definitely add your notes and ideas over in the design bug.

Notes: 

*Copy has not been provided for this wireframe, so a lot of information might be changing or is strictly included as ipsum lorem.

*QR code does not include any directions as to how to use it, I would still advise that it's beneficial to the user to include this, since the main GA users are less tech savvy and less likely to have QR readers on their devices.

Final wireframe attached with revised button.
Attachment #564931 - Attachment is obsolete: true
Attachment #564932 - Attachment is obsolete: true
Attachment #573365 - Attachment is obsolete: true
Attachment #574465 - Attachment is obsolete: true
Regarding the site map, what about if we linked directly to the new Android product page and bypass /mobile completely? The new page will still have all the components of the existing /mobile page but since we want to focus on the Android browser, this would help remove the focus on Firefox Home.
+1
Status: REOPENED → RESOLVED
Closed: 13 years ago13 years ago
Resolution: --- → FIXED
Component: www.mozilla.org/firefox → www.mozilla.org
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: