1055220 - Copy and Design for the FindMyDevice [FMD] landing page

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[vkrishnamoorthy]

>>Project/Request Title:
Copy and Design for the FindMyDevice [FMD] landing page

>>Project Overview:
Find My Device is a key feature for 2.0.
This feature allows a user to locate their device when required. The feature also provides additional functionality to ring, locate, setNote or erase the device.

>> Creative Help Needed:
Copy:    Yes 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
:nchapman can comment on this.

The landing page for https://find.firefox.com provides a "sign in" button that allows the user to sign in with their FxA account to access the FindMyDevice services.

Currently other than the "Sign In" button and some text 
"Rumor has it that you can't find your device.
Don't worry: we're the app for that.
Sign in
"
The page is largely blank. 
We would like input on how to design the page to provide a Mozilla look and feel as well as input from marketing to see if there is content that can be incorporated in this page without distracting the user from the main purpose i.e. signing into FMD.

>>CTA and Design:
ni :jrconlin - JR can you attach the screen grab of the website with the map and the verbs?



>>Creative Due Date:
2014-09-08

>>Launch Date:
2014-10-15

>>Mozilla Goal:
Firefox OS

>>Points of Contact:
[e-mail], [e-mail], [e-mail], [e-mail], [e-mail], [e-mail], [e-mail]

Comment 1

[JR Conlin [:jrconlin,:jconlin]]

Attachment: Current top landing page

Comment 2

[JR Conlin [:jrconlin,:jconlin]]

Attachment: Logged in; control page

After a user logs in, this is the display page for find.firefox.com

Comment 3

[JR Conlin [:jrconlin,:jconlin]]

Attachment: Command Verbs and items

Comment 4

[John Slater]

Hi Vishy. Sorry about the slow reply here, and thanks for filing the bug. We still are going to need more info to get started, though.

Most importantly, can you give direction on the content for the non-signed in page? I know we talked about it last week, but it's important to have it in written form so people who weren't in the meeting will know what you want.

We will handle the Mozilla look & feel part as requested, but need firm info on the content. Is it simply a cleaned-up version of what you have now? Is there more we should add? Re: guidance from marketing as to other topics on the page, I think given the timing involved we should move forward without that (unless you already have it)...the page should be extensible enough that we can add links or other info later as needed.

Thanks!

Comment 5

[John Slater]

To clarify a bit about my ask in comment #4, when I mention content I'm especially thinking of the functional details and states of the page...do we need to leave room for references to an account, legal text, other miscellaneous details like that.

Also, am assigning this to Ty but we won't be able to get started until things are more clear.

Comment 6

[John Slater]

Vishy - any info on my earlier asks?

Comment 7

[vkrishnamoorthy]

hi John,

A) Cleaned up version of what we have now with Mozilla look and feel/branding

B) replace the current string with some meaningful info
I would like to provide a brief synopsis of each of the features (Listed below) with some visuals
1 Locate your phone 
2. Ring
3. Lockscreen
4. Erase

Comment 8

[John Slater]

(In reply to [e-mail] [:Vishy] from comment #7)

> A) Cleaned up version of what we have now with Mozilla look and feel/branding

Thanks Vishy. By "what we have now" do you mean the pre-signed in state or the signed-in state as well?

> B) replace the current string with some meaningful info
> I would like to provide a brief synopsis of each of the features (Listed
> below) with some visuals
> 1 Locate your phone 
> 2. Ring
> 3. Lockscreen
> 4. Erase

Can you explain more about what these features are or what we want people to know about them? Is the idea that someone would come to this page and we'd explain about the different things you can do? Which each one have its own call to action?

Comment 9

[vkrishnamoorthy]

The feature description draft is in the etherpad

https://etherpad.mozilla.org/FMDlandingpage

Matej over to you

Comment 10

[Matej Novak [:matej]]

Here's my first stab at copy:

https://docs.google.com/a/mozilla.com/document/d/1miVp55bj9srSaMT2Jg5IOhMzcw0KAsdXoKvHP8_Dt2s/edit

Have a look and let me know what you think.

Comment 11

[John Slater]

Thanks Matej. Vishy, what do you think? Can you coordinate feedback from the product side?

Comment 12

[vkrishnamoorthy]

jslater - I have started commenting on the google doc.

ni: jbernard for input from marketing

Comment 13

[John Bernard]

In response to comment 12. Vishy, Matej, looks good to me. Approved.

Comment 14

[Ty Flanagan]

Attachment: FFxOS_FindDevice_LandingPage_EN-US_A.png

Hi all,

I have created 3 layouts which could be optioned as the Find My Device landing page. Let me know which you prefer (or not), or would like to edit and move forward with.

Comment 15

[Ty Flanagan]

Attachment: FFxOS_FindDevice_LandingPage_EN-US_B.png

Comment 16

[Ty Flanagan]

Attachment: FFxOS_FindDevice_LandingPage_EN-US_C.png

Comment 17

[John Slater]

Awesome, thanks Ty. I know Nick is in the process of gathering feedback from the FMD team, but I'll throw in a quick 2 cents and say that, although all the layouts are nice, option C seems to best fit my understanding of what's needed from this page.

Comment 18

[Nick Chapman [:nchapman]]

Ty, these look great! I actually like B best for the following reasons:

- The imaging indicates its clearly about Find My Device rather than about Firefox OS in general.
- The call to action and intro text share prominence with the leading image.
- The header and subhead are connected to the intro text which I think makes it more scannable and feels appropriately connected.
- The features at the bottom are largely represented but are more tightly coupled to the leading block than C and therefore don't need the "Features" heading.

Those are my favorite bits. I'll leave it Vishy to make the final call. Once we do decide which direction we like best, it'd be great to have a specific version of the design for mobile. I'll make the site responsive so there will likely be more than one break point, but I can work with Ty to interpolate the sizes in between desktop and mobile.

Comment 19

[John Bernard]

These are great. I like both C and B, C edges slightly for me, so Vishy unless you shout we'll move forward with this. J

Comment 20

[John Bernard]

Nick, you raise some good points here for B. Will still await Vishy's comments.

Comment 21

[Edwin Wong [:edwong]]

setting NI on vishy

Comment 22

[vkrishnamoorthy]

my vote would be B as the user can see the feature description as well as the imaging together.

Also on the phone, having the image juxtaposing with the description reduces the need to scroll. 

Having said that C is also good and both are a vast improvement on what we currently have :)

Comment 23

[Edwin Wong [:edwong]]

Sounds like B is the winner - let's close this as fixed.

Comment 24

[Edwin Wong [:edwong]]

actually, let's get agreement from :jslater.  Also, dev needs a Mobile version, is Ty the right person to work on that?

Comment 25

[Edwin Wong [:edwong]]

:jslater out this week, setting NI on :matej for design agreement.

Comment 26

[Matej Novak [:matej]]

(In reply to Edwin Wong [:edwong] from comment #25)
> :jslater out this week, setting NI on :matej for design agreement.

I think all the options are great and I agree with B as the pick.

Ty, will you be able to help out with the mobile version?

Comment 27

[Ty Flanagan]

(In reply to Matej Novak [:matej] from comment #26)
 
> Ty, will you be able to help out with the mobile version?

I can create a mobile-ready PSD today to match version B and pass on all PSDs tomorrow morning.

Comment 28

[Ty Flanagan]

Attachment: FFxOS_FindDevice_Smartphone_mockup.jpg

Here is a mobile mockup. It is a bit of a combination of B and C, however since they use the same visuals, we should be easily able to place them where needed.

Something to consider - Is it important to have the Sign In CTA within the initial screen, or are you ok with having it below the copy and image. 
I mocked up both scenarios. Let me know what you think.

In the meantime, here are the PSDs:

Desktop (ver. B) - https://www.dropbox.com/s/gxetnp5yme7ilqj/FFxOS_FindDevice_Final.psd?dl=0

Mobile -  https://www.dropbox.com/s/t9rt0soownzxjtw/FFxOS_FindDevice_MobileView.psd?dl=0

Comment 29

[Nick Chapman [:nchapman]]

Looks great! Thanks Ty! I'll get started on coding this up, and then maybe we can experiment with the location of the buttons on a few different devices.

Comment 30

[Edwin Wong [:edwong]]

:ty any chance you could hand off sliced up src or discreet images to Nick. This will speed things up for us.  Let us know if you can help us out.

Comment 31

[Ty Flanagan]

(In reply to Edwin Wong [:edwong] from comment #30)
> :ty any chance you could hand off sliced up src or discreet images to Nick.
> This will speed things up for us.  Let us know if you can help us out.

Unfortunately I cant help for the next few weeks. I have several projects related to the FFx 10th Anniversary that are taking priority over everything else on my plate.

Comment 32

[John Gruen [:jgruen]]

(In reply to Ty Flanagan from comment #31)
> (In reply to Edwin Wong [:edwong] from comment #30)
> > :ty any chance you could hand off sliced up src or discreet images to Nick.
> > This will speed things up for us.  Let us know if you can help us out.
> 
> Unfortunately I cant help for the next few weeks. I have several projects
> related to the FFx 10th Anniversary that are taking priority over everything
> else on my plate.

Hey Ty If you can hand off your source file, I'm happy to do all the asset exporting and stuff.

Comment 33

[Ty Flanagan]

(In reply to [:jgruen] from comment #32)

> Hey Ty If you can hand off your source file, I'm happy to do all the asset
> exporting and stuff.

Hey John, you'll find the links to the PSDs in comment #28

Comment 34

[John Gruen [:jgruen]]

Nick, here's a folder of the assets, LMK if you need more stuff from the mocks.

https://www.dropbox.com/sh/vlb9y8sh4lymd26/AADNvIojzQrf96XK2E42bHLwa?dl=0

Comment 35

[Nick Chapman [:nchapman]]

Thanks so much jgruen!

Comment 36

[Edwin Wong [:edwong]]

awesome, let's close this.