View source for Partnering:Projects:BYOB:Design/UX

== General ==

Build Your Own Browser is a utility web application that is aimed at
organizations who are looking to create a customized version of Firefox
for distribution. As such, the target audience is pretty small compared
to other Mozilla apps, and I don't suspect we'd have more then several
hundred users initially. Functionality is more important than form, but
we do want to assist and educate end-users about what they're customizing.

There's two components that will require design work: the customization
wizard and the customized first-run page, where applicable.

== Customized First-Run Page ==

The default first-run page for Firefox is:

http://%LOCALE%.www.mozilla.com/%LOCALE%/%APP%/%VERSION%/firstrun/

(i.e. en-US for 3.5 is
http://en-us.www.mozilla.com/en-US/firefox/3.5/firstrun/ )

We've done customized first run pages before with groups like Google
(http://tools.google.com/firefox/fftb) and eBay
(http://en-us.www.mozilla.com/en-US/add-ons/ebay/bundle/firstrun/).
First-run is the page that is displayed on a new profile creation, and
is where we try to differentiate customized builds by displaying the
first-run with a bit of info about Firefox and the customized build.

In BYOBs case, the intent is to use the first-run page to showcase an
addons collection if the distributor so chooses. What's needed is a
design spec to incorporate the quick hits of what makes Fx great (using
existing copy and graphics) and to import the collection the distributor
chooses. We're trying to let the distributor provide their own list of
recommended addons without bundling, and to expose and educate end-users
on what addons and collections are.

Requirements here are:

* Wireframe of page that incorporates Fx copy and an add-ons collection
* Quick hit info on what collections and addons are, with links to more
info, so that users can get more info on what they're being presented with.
* determination on whether the info provided by AMO can be incorporated

e.g. -
https://preview.addons.mozilla.org/en-US/firefox/api/1.3/sharing/collections/f5f9c0cb-72bf-e797-bbed-9ea2fbd21e15
or
https://preview.addons.mozilla.org/en-US/firefox/collection/f5f9c0cb-72bf-e797-bbed-9ea2fbd21e15?format=rss
(requires auth now, but fligtar has said we can remove for BYOB)

* suggestions on limiting max numbers of addons in a collection
* any required element and/or CSS design
* provide final hi-fidelity mockups

== Customization Wizard ==

The Customization Wizard is a step-by-step walkthrough of adding the customizations permitted by BYOB to the browser. The wizard is launched from the "Create new browser" link after login (see attached). It is intended for first time users, or for users who wish to use the wizard to define their customizations, and should permit a user to skip the hand-holding if they choose.

The framework for the wizard is in place, but it requires flow and UI optimization and polish. We're asking the design team to review the current implementation and final deliverables would be to develop design recommendations and mockups (wireframe through final high resolution mocks) to develop a finished product to be implemented by the development team.

The design requirements for the customization wizard are as follows:

* set expectations with the user of the process by informing them of the distribution and customization restrictions of BYOB, the expected level of effort and expertise required, and the usual turnaround time from when a distribution is submitted for review to the time it can be released.
* provide a mechanism where the user can opt out of the wizard, and go directly to editing the build (the expectations above should always be displayed on a new browser creation, however).

'''General'''

* each step should have a brief introduction outlining what information is being asked for, and how it is used with BYOB and the finished installer
* ideally the wizard will permit simple navigation allowing the user to go back to any step they have already completed (i.e. tabbed nav w/prev/next)
* branding the application is not nearly as important as functionality and user education
* user should be able to abort the process at any time with the option of saving work to date
* help information for each step should be readily available and apparent
* clear labelling of each step should be provided, to assist with troubleshooting

Wizard Walk-through requirements:

'''Basic Details''' (creating the custom browser record/entry)

* outline how this first step creates the parent entry for the customized installer
* define what the information required is used for, and how it is incorporated into the branding guidelines
* define what summary info should be presented upon "save and finish", if any, or whether it should be presented on browser generation.

'''Browser Customization Steps'''

* review flow of information presented, and identify sections that can be consolidated, such as platform and locale info (i.e. does the order the information is presented make sense. for context, required information is platforms and locales. most common customizations will be to bookmarks - with later revs, it will also include plugins, start pages, and extensions)
* define a preferred presentation model that will take the user step-by-step
* identify best way to let a user say "ok, done" at any point in the wizard
* recommend best way to provide information to user on discoverable services that are customizations (i.e. educating the user on things like Personas and Collections, and how they can be integrated)

'''Language Support'''

* Eventually BYOB will need to support all locales. We need recommendations on how best to allow users to identify which locales their build should support.
* An "all locales" build should be discouraged, as the affinity groups for the users making use of BYOB will tend to use one or two languages.
* review usability/intuitiveness of adding and removing locales and make change recommendations where identified

'''Platform support'''

* All platforms should be enabled by default
* Review usability/intuitiveness of adding and removing platforms and make change recommendations where identified

'''First-run Page'''

* Per design above, identify whether or not custom text should be permitted in the first-run page
* Recommend limits on customization (i.e. characters), as well as how guidelines for appropriate text would be laid out to user
* If applicable, incorporate custom text in First-run page

'''Bookmarks'''

* Identify what bookmarks are,
* Identify what type of bookmark customizations (link and livemarks, with folders to follow in a later rev) are supported
* Identify browser elements (toolbar, menu, and awesomebar) they populate

'''Bookmark Toolbar'''

* Outline limits, according to customization guidelines
* Identify what the Bookmark Toolbar is, and where the customized bookmark entries will appear
* Provide a UI for entering, modifying, removing, and re-ordering bookmarks simply.

'''Bookmark Menu'''

* Outline limits, according to customization guidelines
* Identify what the Bookmark Menu is, and where the customized bookmark entries will appear
* Provide a UI for entering, modifying, removing, and re-ordering bookmarks simply.

'''Collections'''

* provide information about what addons/collections are, and how they can be defined
* provide ability to specify a collection to use, and how to identify that collection
* generate a preview of what the firstrun page would use

'''Personas'''

* provide information about what Personas are, how they can be used, and where to go for more info
* provide ability to specify a Persona to use, and how to get the persona ID from getpersonas.com