MozillaWiki - User contributions [en]

Open Design

2015-11-02T23:52:53Z

Robmac: /* Push to Github */ fixed typo

< intro here>

This section includes instructions for Alopex Product + Design teams.

=== Create a Github Account ===
# Create your account at [http://www.github.com Github.com]
# Email your Github handle to ehunt@mozilla.com - she'll add you to the Github org as a Member.
# You'll receive an email invitation inviting you to join [https://github.com/fxos-product-design FxOS Product Design]. You need to accept the invitation before doing the next step - [[Open Design#Set up Github Desktop|Set up Git on your computer]].

<hr>
=== Set up Git on your computer ===
To work with Github, you need to set up [https://git-scm.com/ Git] on your computer. For Product and Design teams, we recommend you use '''[[Open Design#Set up Github Desktop|Github Desktop]]''' to work with Git.

===== Set up Github Desktop =====
:1. '''Install [https://desktop.github.com/ Github Desktop].'''

:2. '''Open Github Desktop.'''
::Click the button to move Github Desktop to your Applications folder. Github Desktop will close briefly and re-open itself from your Applications folder.
::[[File:01 move to apps.png|none|300px|Move to Applications]]

:3. '''Click "Continue" on the welcome screen.'''
::[[File:01 open github.png|none|300px|Welcome to Github]]

:4. '''Enter your Github credentials and click "Continue."'''
::We're not using the Enterprise options, so don't click that.
::If you're using two-factor authentication, you'll be asked to enter that before you can click "Continue."
::[[File:02 connect to github.png|none|300px|Enter Github credentials]]

:5. '''Confirm your account and click "Continue."'''
::[[File:04 acct added.png|none|300px|Confirm Github account]]

:6. '''Configure Git and click "Continue."'''
::Confirm (or edit) the name and email address you want associated with this project on Github.
::You do not need to install the command line tools.
::[[File:05 configure git.png|none|300px|Configure Git]]

:7. '''Click "Done" on the Find local repositories screen.'''
::This screen is asking if you want Github Desktop to know about your existing local repositories.
::If you're new to Github, you won't have any local repositories. So just click "Done." If you already have some repos on your computer, select the ones you want Github Desktop to know about.
::[[File:06 find local repos.png|none|300px|Find local repos]]

:8. '''You're done!"''' Github Desktop setup is complete.
::Skip the tutorial (it describes a different workflow than the one we'll be using) and go to [[Open Design#Clone the Alopex Repository|Clone the Alopex Repository]]
::[[File:07 done.png|none|550px|Setup complete]]

<hr>

=== Clone the Alopex Repository ===
Github repositories on your computer are called "local repos." Local repos are where you save your work. Then you "push" your work to the remote repo on Github, where other people can see it.

Repositories on Github are called "remote repos" because they are remote from the computer where you do your work. Remote repos are also sometimes called "upstream repos."

To get started with Alopex, you need to clone the remote repo for Alopex. When you "clone" the remote repo, you copy the current state of the remote repo and paste it to your computer as a new local repo.

:1. '''Decide on a location for your local repositories.'''
::Choose the location thoughtfully - moving a repo to a different directory after you've done Step 6 can cause problems later. See the example directory structure below.
::[[File:Open design example folder structure.png|none|400px|Example Directory Structure]]

:2. '''Go to ''File > Clone Repository''.'''
::[[File:19 clonerepo.png|none|650px|Clone Alopex repo]]

:3. '''Select the remote repo you want to clone.'''
::If you're new to Github, you will only see "alopex" as an option.
::If you're a member of other Github repositories, you can search for "alopex" in the list.
::Select the "alopex" repository, and then click "Clone alopex."
::[[File:20 selectrepo.png|none|550px|Select remote repo]]

:4. '''Navigate to where you want to put the cloned repo.'''
::You may need to expand the down arrow to navigate to the right location.
::[[File:21 clone 1.png|none|550px|Browse to location]]
::[[File:21 clone 2.png|none|550px|Browse to specific location]]

:6. '''When you've navigated to the right folder, click ''Clone.'''''
::Here's an example using the directory referenced above.
::[[File:21 clone 3.png|none|550px|Clone it]]

:7. '''You're done!'''
::When cloning is complete, you'll see history of the remote repo in the History tab.
::You'll also see that "alopex" has been added under the header "Github" in the left column. If you clone other repos, they'll appear here too.
::[[File:25 cloned repo.png|none|550px|Clone it]]
::If you go back to your Finder and navigate to where you're storing your Github repositories, you'll see that a new folder called "alopex" has been added. Inside that folder are all the project files.
::[[File:26 cloned folder.png|none|400px|Clone it]]

''If you want to use the command line, go for it, though be mindful of how we're using Github.''
*Designers in particular work alone on their files. So we're not (overly) concerned about collisions.
*We've created a simplified workflow so designers and other non-dev teammates can start using Github faster with a less steep learning curve.
*We're only using the master branch.
*We're not accepting pull requests (for now) -- this may change your workflow. You can just clone and pull/push to master.

<hr>

=== Example Workflow ===
# '''Create something you want to share in public.'''
# '''Export files.'''
#* For designers, export as pdf or image.
#* For others, you might want to export as a pdf (e.g., if you've created slides) or just create text files - Github uses [https://help.github.com/articles/github-flavored-markdown/ Markdown], so it's easy to format docs in a nice way.
#* If you were using the example directory structure above, you would export your file to ''Sites / FxOS_Product_Design / alopex / folder-name''
# '''Push to Github''' using instructions below.

<hr>
=== Push to Github ===
This workflow is a simplified way to interact with Github. We're using this approach so team members who aren't familiar with Github can get used to it, before we move on to more sophisticated methods.

In this workflow, you're pushing directly to the master Github branch with no 2nd person review. As with Dropbox and Box, it’s possible to overwrite someone else’s changes to the same file if you’re not careful.

:1. '''Open Github Desktop.'''

:2. '''Get latest files from the remote repo.'''
::As other people work on and push files to the remote repo, your local repo will become out of sync with the remote repo. So you'll want to "pull" files from the remote repo before you push any changes.
::When you "pull" from the remote repo, Github Desktop looks at the difference between files in your local repo and files on the remote repo. If there is a difference, Github Desktop copies them to your local repo.
::There are 2 ways to do this in Github Desktop:
:::* Option 1: Go to ''Repository > Pull''.
::::[[File:repo pull.png|none|550px|Repo Pull]]

:::*Option 2: Click the "Sync" button in the upper right corner.
::::[[File:sync.png|none|550px|Sync]]

:3. '''Confirm that your changes appear in your local repo.'''
::If you've already exported your work (pdf, image, etc) into your local repo, the screen will say "XX uncommitted changes."
:: If it doesn't say that, move (or copy) your changed files into your local repo.
::[[File:file_changed.png|none|550px|File changed]]

:4. '''Switch to the "XX uncommitted changes" tab.'''
::[[File:prepare commit.png|none|550px|Uncommitted changes]]

:5. '''Prepare your commit.'''
::"Committing" means you are saving a particular state of your local repo. If you changed just one file, your commit consists only of that file. If you changed several files, your commit consists of all the changed files.
::* Enter a title for your commit in the Summary field. For example, "Updated PTW spec."
::* Enter a longer description for your commit in the Description field. Here you can describe the difference between your changes and the current versions on the remote Github repo. For example, you could copy your Change Log details into the Description field.
::: ''Note: the Summary and Description are displayed on the Github remote repo, so other people can see what you’ve changed.''
::[[File:commit info.png|none|550px|Prepare commit]]

:6. '''Commit to your local repo.'''
::When you're satisfied that you've got all the changes you want included in this commit, and you’re satisfied with the Summary and Description, click "Commit to master."
::[[File:commit info 2.png|none|550px|Commit]]

::The screen will update to show that your changes were committed and there are no uncommitted changes.
::[[File:committed.png|none|550px|Committed]]

:7. '''Push to Github.'''
::"Pushing" immediately sends your committed changes to the remote repo, and creates a new version for each changed file.
::There are 2 ways to do this in Github Desktop:
:::* Option 1: Go to ''Repository > Push''.
::::[[File:push.png|none|550px|Repo Push]]

:::*Option 2: Click the "Sync" button in the upper left corner.
::::[[File:push sync.png|none|550px|Push Sync]]

:8. '''Confirm your changes on Github.'''
::Go to the [https://github.com/fxos-product-design/alopex remote repo] and browse the folders where you expect to see your changed files.
::If it doesn't look the way you expect it to, repeat Steps 2-8. ''Note: once you get used to using Github, you probably won't need to do this step.''

:''Tip:''
::* If you need to stop in the middle of Steps 2-7 and start over later, it's a good idea to start over again at Step 2. This helps ensure that you don’t overwrite someone else’s change to the same file.

=== Gathering Feedback from Team and Collaborators ===
All files in the remote Github repo are visible to anyone on the web. So people can browse the repo and look at your files if they want to get an update on the project. But we'll get more (and more effective) feedback if we actively solicit it.

# '''Copy the remote repo URLs for the files you want feedback on.'''
# '''Open a new issue.''' Go to the repo’s ''Open Issues'' and click ''New Issue.''
# '''Enter a short descriptive title for the issue.'''
# '''Label the issue.''' Be sure to use ''feedback wanted'' label. You can also use any of the other labels.
# '''Add comments.''' Use the Comment field to provide context for your request for feedback and to describe the kind of feedback you're looking for. E.g., maybe it's specific - help me figure out this piece. It might be more broad - does Flow X work better than Flow Y?
# '''Include the copied URLs in the Comment.'''
# '''Post a message to the [https://groups.google.com/forum/#!forum/mozilla.dev.fxos fxos-dev mailing list] and include request for feedback with the URL to the new Open Issue.''' This way we'll hit contributors who may not know about our Github org.

<hr>
=== Github Roles ===
* '''Members:''' Everyone on a project team is invited to the project's Github repo as a Member. Members can clone, pull, and push to any repositories.

* '''Collaborators:''' Collaborators can clone and pull any repository. They can also open issues and comment on any issue.
** Everyone on the web is a Collaborator. They just need a Github account to find our repos and participate in conversation. This means anyone inside or outside Mozilla can collaborate with us just by signing up for Github - we don’t need to explicitly add to them to our project repos.

* '''Owners:''' Owners create repos and add/remove Members. Owners can also make Contributors into Members. We’ll get into more details on Owners later.

Firefox OS/Alopex

2015-10-14T23:54:22Z

Robmac: /* UX Updates */

==='''Ignite Design Vision'''===

<big>'''An open OS that puts Web content first'''</big>

==='''What is Alopex?'''===
Alopex is the project name for our design-based initiative to evolve the overall experience of Firefox OS based on Ignite.
Alopex used to be the [https://en.wikipedia.org/wiki/Arctic_fox genus under which the Arctic Fox was included] and it's a cool [http://turtlepedia.wikia.com/wiki/Alopex female mutant Arctic Fox] from a popular cartoon.

==='''Project Goals'''===
Alopex is about delivering an open OS that puts Web content first.
It is about crafting an end-to-end Firefox experience that:
* Puts Web content in the center of the experience
* Directly addresses the shortcomings of the Web on mobile
* Emphasizes the Web's strengths of immediacy and continuity across devices
* Is centered around simplicity yet puts the user fully in control
* Creates an open platform for participation, and promotes community contribution

This initiative will build on top of the amazing work that has gone into customizations (add-ons), the ability to save/use Web content (Pin the Web), data sync and more.

==='''Ideal End State'''===
* Discovering great Web content is simple, yet familiar
* Different content types (web apps, websites, etc.) are abstracted away from user
* All Web content is optimized (to the screen size and input method)
* Mobile content barriers (such as installations and re-authentication using the same credentials) are a thing of the past
* Loading Web content is quick and fluid
* Connection issues no longer "break" experience (endless spinners, partially loaded content)
* Users can access their favourite content from any device
* Users feel fully in control over their device and online experiences
* Content is not bound to the scope of specific apps, encouraging interesting new experiences to be created and shared with others
* Community members have a direct channel to offer new experiences to users

==='''Communication Channels'''===
IRC: #fxos
<br />
Slack: ProjectAlopex.slack.com
<br />
https://projectalopex.slack.com/signup
''Instructions below to sign up''
* Enter your email address to get started. No need to enter the Mozilla email domain "@mozilla.com"
* Then you will be prompted to enter the slack team domain name "'''projectalopex'''".

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Management || Peter Dolanjski, Preeti Sanketh, David Almstrom, David Bialer
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Bryant Mao, Rob MacDonald, Philip Walmsley
|-
| Engineering || Etienne Segonzac, Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace/Content || Sakina Goth, Bill Walker, Scott DeVaney
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Content Discovery Journey || David A, David B, Bryant, Harly, Juwei, Philip, Scott || Discovery, Search results, Marketplace, Community
|-
| Core OS || Etienne, Francis, Hung, Patryk, Przemek, Rob, Vicky || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Optimizing for web content || Bill, Jacqueline, Jonas, Peter || Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Research || Irina || Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}



==='''Alopex Schedule'''===
[[File:FirefoxOSAlopex.001.jpg|1000px]]

==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v3.0 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
----

==='''UX Updates'''===

Last UX documentation

{| class="wikitable"
|-
! Focus Area !! Document
|-
| Content Discovery Journey || Example
|-
| Core OS ||
From Tuesday, October 13th's Weekly Gaia Meeting
* [https://mozilla.box.com/s/qhvwe6treaej7xurmormm3ir5q3in06d Oct 13, 2015 Browser OS Spatial Layers]
* [https://mozilla.box.com/s/xxam5j4wtztnsueh7lsew7qwj89lld88 Oct 13, 2015 Alopex Slide Deck]

|-
| Optimizing for web content || example
|-
| Research || Example
|}

Firefox OS/Alopex

2015-10-14T01:03:20Z

Robmac: /* UX Updates */

==='''Ignite Design Vision'''===

<big>'''An open OS that puts Web content first'''</big>

==='''What is Alopex?'''===
Alopex is the project name for our design-based initiative to evolve the overall experience of Firefox OS based on Ignite.
Alopex used to be the [https://en.wikipedia.org/wiki/Arctic_fox genus under which the Arctic Fox was included] and it's a cool [http://turtlepedia.wikia.com/wiki/Alopex female mutant Arctic Fox] from a popular cartoon.

==='''Project Goals'''===
Alopex is about delivering an open OS that puts Web content first.
It is about crafting an end-to-end Firefox experience that:
* Puts Web content in the center of the experience
* Directly addresses the shortcomings of the Web on mobile
* Emphasizes the Web's strengths of immediacy and continuity across devices
* Is centered around simplicity yet puts the user fully in control
* Creates an open platform for participation, and promotes community contribution

This initiative will build on top of the amazing work that has gone into customizations (add-ons), the ability to save/use Web content (Pin the Web), data sync and more.

==='''Ideal End State'''===
* Discovering great Web content is simple, yet familiar
* Different content types (web apps, websites, etc.) are abstracted away from user
* All Web content is optimized (to the screen size and input method)
* Mobile content barriers (such as installations and re-authentication using the same credentials) are a thing of the past
* Loading Web content is quick and fluid
* Connection issues no longer "break" experience (endless spinners, partially loaded content)
* Users can access their favourite content from any device
* Users feel fully in control over their device and online experiences
* Content is not bound to the scope of specific apps, encouraging interesting new experiences to be created and shared with others
* Community members have a direct channel to offer new experiences to users

==='''Communication Channels'''===
IRC: #fxos
<br />
Slack: ProjectAlopex.slack.com
<br />
https://projectalopex.slack.com/signup
''Instructions below to sign up''
* Enter your email address to get started. No need to enter the Mozilla email domain "@mozilla.com"
* Then you will be prompted to enter the slack team domain name "'''projectalopex'''".

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Management || Peter Dolanjski, Preeti Sanketh, David Almstrom, David Bialer
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Rob MacDonald, Philip Walmsley
|-
| Engineering || Etienne Segonzac, Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace/Content || Sakina Goth, Bill Walker, Scott DeVaney
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, David B, Harly, Juwei, Philip, Scott || Discovery, Search results, Marketplace, Community
|-
| Core OS || Etienne, Francis, Hung, Patryk, Przemek, Rob, Vicky || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Optimizing for web content || Bill, Jacqueline, Jonas, Peter || Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Research || Irina || Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}



==='''Alopex Schedule'''===
[[File:FirefoxOSAlopex.001.jpg|1000px]]

==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v3.0 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
----

==='''UX Updates'''===

Last UX documentation

{| class="wikitable"
|-
! Focus Area !! Document
|-
| Browsing & Content Journey || Example
|-
| Core OS ||
From Tuesday, October 13th's Weekly Gaia Meeting
* [https://mozilla.box.com/s/qhvwe6treaej7xurmormm3ir5q3in06d Oct 13, 2015 Browser OS Spatial Layers]
* [https://mozilla.box.com/s/xxam5j4wtztnsueh7lsew7qwj89lld88 Oct 13, 2015 Alopex Slide Deck]
Additional files will be made available at https://mozilla.box.com/alopex
|-
| Optimizing for web content || example
|-
| Research || Example
|}

Firefox OS/Alopex

2015-09-25T20:06:25Z

Robmac: /* Focus Areas */

==='''Project Tagline'''===

<big>'''An open OS that puts Web content first'''</big>

==='''What is Alopex?'''===
Alopex is the project name for our initiative to evolve the design and overall experience of Firefox OS.
Alopex used to be the [https://en.wikipedia.org/wiki/Arctic_fox genus under which the Arctic Fox was included] and it's a cool [http://turtlepedia.wikia.com/wiki/Alopex female mutant Arctic Fox] from a popular cartoon.

==='''Project Goals'''===
Alopex is about delivering an open OS that puts Web content first.
It is about crafting an end-to-end Firefox experience that:
* Puts Web content in the center of the experience
* Directly addresses the shortcomings of the Web on mobile
* Emphasizes the Web's strengths of immediacy and continuity across devices
* Is centered around simplicity yet puts the user fully in control
* Creates an open platform for participation, and promotes community contribution

This initiative will build on top of the amazing work that has gone into customizations (add-ons), the ability to save/use Web content (Pin the Web), data sync and more.

==='''Ideal End State'''===
* The process of discovering and finding great Web content is simple, yet familiar
* Differences between content types (web apps, websites, etc.) are abstracted away from the user entirely
* Users no longer experience non-optimized Web content (web content not formatted to the screen size and input method)
* Barriers to the consumption of content (such as installations and re-authentication) are a thing of the past
* The experience of loading Web content is quick and fluid
* Connection issues no longer "break" the experience (endless spinners, partially loaded content, etc.)
* Users can access their favourite content from any device
* Users can start any task on one device and finish it on another
* The Firefox OS experience is familiar and approachable for the average Web user, yet enables full control over users' online experiences (should they choose to exercise it)
* Developers/content creators have new ways of getting content in front of users and are not beholden to the rules/terms of distribution via controlled app stores

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Owner|| Peter Dolanjski
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Rob MacDonald
|-
| Engineering || Etienne Segonzac, Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace || Sakina Goth, David Almstrom, Bill Walker, Scott DeVaney, David Bailer
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, David B, Harly, Juwei, Philip, Scott || Discovery, Search results, Marketplace, Community
|-
| Optimizing for web content || Bill, Jacqueline, Jonas, Peter || Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Core OS || Etienne, Francis, Hung, Patryk, Przemek, Rob, Vicky || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Research || Irina || Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}



==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v2.5 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
* [Peter] Insert your draft project cycle from your desk..

----

==='''UX Updates'''===

Watch this space for updates from UX.

Firefox OS/Alopex

2015-09-25T14:46:01Z

Robmac: /* UX Concepts */

==='''Project Tagline'''===

<big>'''An open OS that puts web content first'''</big>

==='''End Goals'''===
* The process of discovering and finding great Web content is simple, yet familiar
* Differences between content types (web apps, websites, etc.) are abstracted away from the user entirely
* Users no longer experience non-optimized Web content (web content not formatted to the screen size and input method)
* Barriers to the consumption of content (such as installations and re-authentication) are a thing of the past
* The experience of loading Web content is quick and fluid
* Connection issues no longer "break" the experience (endless spinners, partially loaded content, etc.)
* Users can access their favourite content from any device
* Users can start any task on one device and finish it on another
* The Firefox OS experience is familiar and approachable for the average Web user, yet enables full control over users' online experiences (should they choose to exercise it)
* Developers/content creators have new ways of getting content in front of users and are not beholden to the rules/terms of distribution via controlled app stores

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Owner|| Peter Dolanjski
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Rob MacDonald
|-
| Engineering || Etienne Segonzac, Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace || Sakina Goth, David Almstrom, Bill Walker, Scott DeVaney, David Bailer
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, David B, Harly, Juwei, Philip, Scott || Discovery, Search results, Marketplace, Community
|-
| Optimizing for web content || Bill, Jacqueline, Jonas, Peter || Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Core OS || Francis, Hung, Patryk, Przemek, Rob, Vicky || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Research || Irina || Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}



==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v2.5 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
* [Peter] Insert your draft project cycle from your desk..

----

==='''UX Updates'''===

Watch this space for updates from UX.

Firefox OS/Alopex

2015-09-25T14:45:15Z

Robmac: /* Development Plan */

==='''Project Tagline'''===

<big>'''An open OS that puts web content first'''</big>

==='''End Goals'''===
* The process of discovering and finding great Web content is simple, yet familiar
* Differences between content types (web apps, websites, etc.) are abstracted away from the user entirely
* Users no longer experience non-optimized Web content (web content not formatted to the screen size and input method)
* Barriers to the consumption of content (such as installations and re-authentication) are a thing of the past
* The experience of loading Web content is quick and fluid
* Connection issues no longer "break" the experience (endless spinners, partially loaded content, etc.)
* Users can access their favourite content from any device
* Users can start any task on one device and finish it on another
* The Firefox OS experience is familiar and approachable for the average Web user, yet enables full control over users' online experiences (should they choose to exercise it)
* Developers/content creators have new ways of getting content in front of users and are not beholden to the rules/terms of distribution via controlled app stores

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Owner|| Peter Dolanjski
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Rob MacDonald
|-
| Engineering || Etienne Segonzac, Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace || Sakina Goth, David Almstrom, Bill Walker, Scott DeVaney, David Bailer
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, David B, Harly, Juwei, Philip, Scott || Discovery, Search results, Marketplace, Community
|-
| Optimizing for web content || Bill, Jacqueline, Jonas, Peter || Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Core OS || Francis, Hung, Patryk, Przemek, Rob, Vicky || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Research || Irina || Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}



==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v2.5 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
* [Peter] Insert your draft project cycle from your desk..

----

==='''UX Concepts'''===

Watch this space for updates from UX.

Firefox OS/Alopex

2015-09-25T14:43:27Z

Robmac: /* Draft Feature List */

==='''Project Tagline'''===

<big>'''An open OS that puts web content first'''</big>

==='''End Goals'''===
* The process of discovering and finding great Web content is simple, yet familiar
* Differences between content types (web apps, websites, etc.) are abstracted away from the user entirely
* Users no longer experience non-optimized Web content (web content not formatted to the screen size and input method)
* Barriers to the consumption of content (such as installations and re-authentication) are a thing of the past
* The experience of loading Web content is quick and fluid
* Connection issues no longer "break" the experience (endless spinners, partially loaded content, etc.)
* Users can access their favourite content from any device
* Users can start any task on one device and finish it on another
* The Firefox OS experience is familiar and approachable for the average Web user, yet enables full control over users' online experiences (should they choose to exercise it)
* Developers/content creators have new ways of getting content in front of users and are not beholden to the rules/terms of distribution via controlled app stores

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Owner|| Peter Dolanjski
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Rob MacDonald
|-
| Engineering || Etienne Segonzac, Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace || Sakina Goth, David Almstrom, Bill Walker, Scott DeVaney, David Bailer
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, David B, Harly, Juwei, Philip, Scott || Discovery, Search results, Marketplace, Community
|-
| Optimizing for web content || Bill, Jacqueline, Jonas, Peter || Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Core OS || Francis, Hung, Patryk, Przemek, Rob, Vicky || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Research || Irina || Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}

==='''Development Plan'''===
* Planned to branch out from: Firefox XXX<br />
** Ref: [[RapidRelease/Calendar#Future_branch_dates|Future_branch_dates]]

----
==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v2.5 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
* [Peter] Insert your draft project cycle from your desk..

----

==='''UX Concepts'''===

Watch this space for updates from UX.

Firefox OS/Alopex

2015-09-25T14:40:23Z

Robmac: /* Focus Areas */

==='''Project Tagline'''===

<big>'''An open OS that puts web content first'''</big>

==='''End Goals'''===
* The process of discovering and finding great Web content is simple, yet familiar
* Differences between content types (web apps, websites, etc.) are abstracted away from the user entirely
* Users no longer experience non-optimized Web content (web content not formatted to the screen size and input method)
* Barriers to the consumption of content (such as installations and re-authentication) are a thing of the past
* The experience of loading Web content is quick and fluid
* Connection issues no longer "break" the experience (endless spinners, partially loaded content, etc.)
* Users can access their favourite content from any device
* Users can start any task on one device and finish it on another
* The Firefox OS experience is familiar and approachable for the average Web user, yet enables full control over users' online experiences (should they choose to exercise it)
* Developers/content creators have new ways of getting content in front of users and are not beholden to the rules/terms of distribution via controlled app stores

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Owner|| Peter Dolanjski
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Rob MacDonald
|-
| Engineering || Etienne Segonzac, Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace || Sakina Goth, David Almstrom, Bill Walker, Scott DeVaney, David Bailer
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, David B, Harly, Juwei, Philip, Scott || Discovery, Search results, Marketplace, Community
|-
| Optimizing for web content || Bill, Jacqueline, Jonas, Peter || Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Core OS || Francis, Hung, Patryk, Przemek, Rob, Vicky || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Research || Irina || Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}

==='''Development Plan'''===
* Planned to branch out from: Firefox XXX<br />
** Ref: [[RapidRelease/Calendar#Future_branch_dates|Future_branch_dates]]

----
==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v2.5 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
* [Peter] Insert your draft project cycle from your desk..

----

==='''Draft Feature List'''===

The below table is a list of features currently under consideration for inclusion in Firefox OS release 2.5. The list of features will change - unannounced -
and if you need more details feel free to contact your specific partner product managers for a more detailed view of the feature set for Firefox OS Release 2.5.

Firefox OS/Alopex

2015-09-25T14:34:39Z

Robmac: /* Focus Areas */

==='''Project Tagline'''===

<big>'''An open OS that puts web content first'''</big>

==='''End Goals'''===
* The process of discovering and finding great Web content is simple, yet familiar
* Differences between content types (web apps, websites, etc.) are abstracted away from the user entirely
* Users no longer experience non-optimized Web content (web content not formatted to the screen size and input method)
* Barriers to the consumption of content (such as installations and re-authentication) are a thing of the past
* The experience of loading Web content is quick and fluid
* Connection issues no longer "break" the experience (endless spinners, partially loaded content, etc.)
* Users can access their favourite content from any device
* Users can start any task on one device and finish it on another
* The Firefox OS experience is familiar and approachable for the average Web user, yet enables full control over users' online experiences (should they choose to exercise it)
* Developers/content creators have new ways of getting content in front of users and are not beholden to the rules/terms of distribution via controlled app stores

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Owner|| Peter Dolanjski
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Rob MacDonald
|-
| Engineering || Etienne Segonzac, Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace || Sakina Goth, David Almstrom, Bill Walker, Scott DeVaney, David Bailer
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, David B, Harly, Juwei, Philip, Scott || Discovery, Search results, Marketplace, Community
|-
| Optimizing for web content || Bill, Jacqueline, Jonas, Peter || Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Core OS || Francis, Hung, Patryk, Przemek, Rob, Vicki || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Research || Irina || Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}

==='''Development Plan'''===
* Planned to branch out from: Firefox XXX<br />
** Ref: [[RapidRelease/Calendar#Future_branch_dates|Future_branch_dates]]

----
==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v2.5 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
* [Peter] Insert your draft project cycle from your desk..

----

==='''Draft Feature List'''===

The below table is a list of features currently under consideration for inclusion in Firefox OS release 2.5. The list of features will change - unannounced -
and if you need more details feel free to contact your specific partner product managers for a more detailed view of the feature set for Firefox OS Release 2.5.

Firefox OS/Alopex

2015-09-25T14:18:29Z

Robmac: /* Teams Members */

==='''Project Tagline'''===

<big>'''An open OS that puts web content first'''</big>

==='''End Goals'''===
* The process of discovering and finding great Web content is simple, yet familiar
* Differences between content types (web apps, websites, etc.) are abstracted away from the user entirely
* Users no longer experience non-optimized Web content (web content not formatted to the screen size and input method)
* Barriers to the consumption of content (such as installations and re-authentication) are a thing of the past
* The experience of loading Web content is quick and fluid
* Connection issues no longer "break" the experience (endless spinners, partially loaded content, etc.)
* Users can access their favourite content from any device
* Users can start any task on one device and finish it on another
* The Firefox OS experience is familiar and approachable for the average Web user, yet enables full control over users' online experiences (should they choose to exercise it)
* Developers/content creators have new ways of getting content in front of users and are not beholden to the rules/terms of distribution via controlled app stores

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Owner|| Peter Dolanjski
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Rob MacDonald
|-
| Engineering || Etienne Segonzac, Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace || Sakina Goth, David Almstrom, Bill Walker, Scott DeVaney, David Bailer
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, Philip, Harly, Juwei, Scott, David B || Loading, Search (includes Marketplace), Saving, Sharing
|-
| Optimizing for web content || Peter, Jonas, Bill|| Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Core OS || Przemek, Rob, Harly, Juwei, Patryk, Hung || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Research || Irina, Francis|| Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}

==='''Development Plan'''===
* Planned to branch out from: Firefox XXX<br />
** Ref: [[RapidRelease/Calendar#Future_branch_dates|Future_branch_dates]]

----
==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v2.5 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
* [Peter] Insert your draft project cycle from your desk..

----

==='''Draft Feature List'''===

The below table is a list of features currently under consideration for inclusion in Firefox OS release 2.5. The list of features will change - unannounced -
and if you need more details feel free to contact your specific partner product managers for a more detailed view of the feature set for Firefox OS Release 2.5.

Firefox OS/Alopex

2015-09-25T14:17:14Z

Robmac: /* Teams Members */

==='''Project Tagline'''===

<big>'''An open OS that puts web content first'''</big>

==='''End Goals'''===
* The process of discovering and finding great Web content is simple, yet familiar
* Differences between content types (web apps, websites, etc.) are abstracted away from the user entirely
* Users no longer experience non-optimized Web content (web content not formatted to the screen size and input method)
* Barriers to the consumption of content (such as installations and re-authentication) are a thing of the past
* The experience of loading Web content is quick and fluid
* Connection issues no longer "break" the experience (endless spinners, partially loaded content, etc.)
* Users can access their favourite content from any device
* Users can start any task on one device and finish it on another
* The Firefox OS experience is familiar and approachable for the average Web user, yet enables full control over users' online experiences (should they choose to exercise it)
* Developers/content creators have new ways of getting content in front of users and are not beholden to the rules/terms of distribution via controlled app stores

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Owner|| Peter Dolanjski
|-
| UX Facilitators || Przemek Abratowski, Patryk Adamczyk, Francis Djabri, Harly Hsu, Juwei Huang, Rob MacDonald
|-
| Tech Lead || Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| Marketplace || Sakina Goth, David Almstrom, Bill Walker, Scott DeVaney, David Bailer
|-
| FE Developer|| Etienne Segonzac
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, Philip, Harly, Juwei, Scott, David B || Loading, Search (includes Marketplace), Saving, Sharing
|-
| Optimizing for web content || Peter, Jonas, Bill|| Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Core OS || Przemek, Rob, Harly, Juwei, Patryk, Hung || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Research || Irina, Francis|| Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}

==='''Development Plan'''===
* Planned to branch out from: Firefox XXX<br />
** Ref: [[RapidRelease/Calendar#Future_branch_dates|Future_branch_dates]]

----
==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v2.5 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
* [Peter] Insert your draft project cycle from your desk..

----

==='''Draft Feature List'''===

The below table is a list of features currently under consideration for inclusion in Firefox OS release 2.5. The list of features will change - unannounced -
and if you need more details feel free to contact your specific partner product managers for a more detailed view of the feature set for Firefox OS Release 2.5.

Firefox OS/Alopex

2015-09-25T14:10:03Z

Robmac: /* Project Tagline */

==='''Project Tagline'''===

<big>'''An open OS that puts web content first'''</big>

==='''End Goals'''===
* The process of discovering and finding great Web content is simple, yet familiar
* Differences between content types (web apps, websites, etc.) are abstracted away from the user entirely
* Users no longer experience non-optimized Web content (web content not formatted to the screen size and input method)
* Barriers to the consumption of content (such as installations and re-authentication) are a thing of the past
* The experience of loading Web content is quick and fluid
* Connection issues no longer "break" the experience (endless spinners, partially loaded content, etc.)
* Users can access their favourite content from any device
* Users can start any task on one device and finish it on another
* The Firefox OS experience is familiar and approachable for the average Web user, yet enables full control over users' online experiences (should they choose to exercise it)
* Developers/content creators have new ways of getting content in front of users and are not beholden to the rules/terms of distribution via controlled app stores

==='''Teams Members'''===
{| class="wikitable"
|-
! Role !! Name
|-
| Product Owner|| Peter Dolanjski
|-
| UX Leads || Rob MacDonald, Patryk Adamcyik, Harly Hsu
|-
| Tech Lead || Jonas Sicking
|-
| Product Strategist || Irina Sandu
|-
| Program Manager || Jean Gong
|-
| IxD/VisD || Przemek Abratowski, Francis Djabri, Juwei Huang, Hung Nguyen, Philip Walmsley
|-
| Marketplace || Sakina Goth, David Almstrom, Bill Walker, Scott DeVaney, David Bailer
|-
| FE Developer|| Etienne Segonzac
|-
|}

==='''Focus Areas'''===
{| class="wikitable"
|-
! Focus Teams !! Team Members!! Content Area
|-
| Browsing & Content Journey || David A, Philip, Harly, Juwei, Scott, David B || Loading, Search (includes Marketplace), Saving, Sharing
|-
| Optimizing for web content || Peter, Jonas, Bill|| Addressing web deficiencies, Authentication, Offline and include many technical driven issues
|-
| Core OS || Przemek, Rob, Harly, Juwei, Patryk, Hung || Navigation and spatial model, Cross platform alignment, Customization model, Privacy and security, Application Model
|-
| Research || Irina, Francis|| Competitive analysis, User perceptions on Mobile Web Browsing, Alignment & Definition of target audience
|}

==='''Development Plan'''===
* Planned to branch out from: Firefox XXX<br />
** Ref: [[RapidRelease/Calendar#Future_branch_dates|Future_branch_dates]]

----
==='''Milestone'''===

* Dev Start: Q1/2016 (Dev start) <br />
* Release Availability (RA) : TBD (branch here for gaia X.X and gecko b2g_XX) <br />

{| class="wikitable"
! style="text-align: center;" | Milestone
! style="text-align: center;" | Dev Start
! style="text-align: center;" | Release Availability
|-
| style="text-align: center;" | Date
| style="text-align: center;" | Q1/2016
| style="text-align: center;" | TBD
|-
| Gaia Branching
|
| Gaia v2.5 branch created
|-
| Gecko Branching
|
| Gecko XX moves to mozilla-beta<br /> mozilla-b2gXX branched
|-
| style="text-align: center;" | Bugzilla milestone
| style="text-align: center;" | TBD
| style="text-align: center;" | TBD
|}

----
* [Peter] Insert your draft project cycle from your desk..

----

==='''Draft Feature List'''===

The below table is a list of features currently under consideration for inclusion in Firefox OS release 2.5. The list of features will change - unannounced -
and if you need more details feel free to contact your specific partner product managers for a more detailed view of the feature set for Firefox OS Release 2.5.

Git for designers

2014-08-21T23:46:15Z

Robmac: /* Putting Patches on Your Device */

== '''Putting Patches on Your Device'''==

Specifically your Nexus 4 but I’m guessing the first few steps will work for other phones too.

Has a developer given you a patch link and when you click on it you’re taken to github and think “now what??” Read on my friend!

Overview:
<ul>
<li>Add “git remote add <keyword> <url>”
<li>Sync “git fetch <keyword>”
<li>Download code “git checkout <keyword>/<branch>”
<li>Flash (nexus 4 camera) "make install-gaia APP=camera”
</ul>

Here is an example - https://github.com/mozilla-b2g/gaia/pull/17233

The first step is to open terminal (aka command line) and make your way to wherever you’ve been downloading the code. Do this with cd (change directory) and the name of the folder you want to navigate to. ls (not sure what that stands for) will show you the contents of the folder if you can’t remember names.

'''Find the github username'''

Looking at the github page, you want to find the username of the person. This could be listed under participants, in the comments section, or listed in the text at the top, or on the commits page.

In this case, our user is hyunacho.

You can go to their github user page and check out more information about that person: https://github.com/hyunacho Here, you’ll also see repositories they are contributing too.

'''Add the user'''

If this person is totally new to you, you have to first add them in order to be able to see their branches and get the code.

What if you don’t remember if you’ve added them? Do “git remote” and you will see a list of what has been added in the past. If they are there, awesome move along. If not, you are going to have to add them.

Go to the person’s user page: https://github.com/hyunacho and click on the repository you want to add. Most likely, this is going to be a repository they have rather than something they have contributed to. In our case we want to add gaia: https://github.com/hyunacho/gaia

On this page you should see a URL that may have the word clone around it. This basically means you want to get a copy of the code. For our example, our URL is: https://github.com/hyunacho/gaia.git

The full command is “git remote add <keyword> <url>"

The first bit “git remote add” is going to add this to our list.

The <keyword> bit is the keyword we want to use to refer to this URL so we don’t have to remember the URL or type it out every time. Go with something easy like the person’s username.

The URL is going to be that clone URL that we found on the github page.

So for our example, the full command is going to be “git remote add hyunacho https://github.com/hyunacho/gaia.git”

Now they are added!

'''Getting the code - syncing'''

Next we want to grab everything that is in this repository. We aren’t downloading actual code yet, think of it more like grabbing the Table of Contents for a book. We can then use this to actually grab the specific chapter we want without having to get the whole book.

“git fetch” is what we use to both get this the first time and each time to make sure everything is current and up-to-date.

Recalling what our keyword was we can insert that into the command to make sure everything is current.

“git fetch hyunacho” - much easier than typing the whole URL!

We’ve got our Table of Contents (or what it really is, a database of branches)

'''Getting the code - finding our branch'''

Now we need to figure out which branch (chapter) we want to download.

The developer may have told you, or you can figure this out on your own via one of two ways.

“git remote show <keyword>” is going to show you that Table of Contents you just obtained. Scanning that may show you what you need to know.

You can also go back to that very first patch page you found and take a look there: https://github.com/mozilla-b2g/gaia/pull/17233. In this case we can see near the top our user’s name and then “bug971090-preview-gallery”. This is the branch we want! And if we were to do “git remote show hyunacho” we would also see this listed in what was returned.

Whew - almost there!

'''Getting the code - downloading!'''

Finally getting the actual code.

With our branch name (chapter) in hand, we can now use “git checkout” to download the code.

“git checkout hyunacho/bug971090-preview-gallery”.
So we’re saying get this code, from the URL that is referenced by our keyword hyunacho, specifically this branch (chapter).

If you see some crazy, weird warning talking about “HEAD” and “commits” just ignore it. This is basically telling you that if you try to make code changes, you are going to have some issues when checking it back in. We aren’t changing any code, so we don’t really care.

'''Push it!'''

This is probably more specific to the Nexus 4 stuff I’m doing, but here it is anyway.

Now that the code is synced and on your computer, you are ready to flash your phone. Make sure the phone is:
- plugged into your computer
- on
- unlocked (you can open apps and use the phone)

Go back to our lovely friend Terminal and type in there "make install-gaia APP=camera”. This is pretty specific to the camera, I’m guessing you could replace “camera” with any app name and it would have the same effect of updating that app.

And hopefully it worked and you are done!! Watch out for copy/paste errors and typos if you run into any issues.

=== '''Running Into Issues''' ===

===== Nothing is Updating! =====
If it seems like you keep going through this process and nothing appears to be updating, make sure the git checkout process isn't failing. If you see something like this after typing your checkout command, keep reading.

''tshakespeare-17453:gaia tshakespeare$ git checkout wilsonpage/996766''<br />
''error: Your local changes to the following files would be overwritten by checkout:''<br />
''test_apps/music2/js/metadata_scripts.js''<br />
''Please, commit your changes or stash them before you can switch branches''<br />
''Aborting''<br />
''tshakespeare-17453:gaia tshakespeare$''

Basically, git is preventing you from overwriting files that should be the same but are different. Kind of like when you drag a file into a folder with the same file name - you get a warning to prevent you from doing something destructive.

Since we aren't making code changes, I'm not actually sure how we get into this predicament, but apparently we do and there are two ways to fix the problem. We can either stash or reset. The big difference between the two is the ability to undo. If you care (or are curious) what the changes are you can do "git diff". If you get stuck because there is a ton of output, you can type q to quit or enter to see more.

Stash lets you put the changes that were made aside and move on with life. The plus is that you aren't doing anything destructive and you can keep your work (assuming you've been making changes). The downside is you now have something to manage because you keep putting more changes there. "git stash"

Reset is the much, much, much more destructive path. You are discarding all modifications forever and ever (unless you have a photo graphic memory). It's akin to using AI for a few hours making updates/changes and then shutting down the program without saving. There is no undo, no backup, you have shredded the file, burnt the scraps, and thrown the ashes out of a plane. That said, if you're confident that you haven't been changing things and just don't care about overwriting (i.e. most likely us designers), then go this route. There's nothing to manage and you are starting with a clean slate. "git reset --hard"

===== Phone Won't Restart =====
If you're finding that you can't get your phone to restart, press & hold the power button to shut off the phone. Then press the power button again. If you see it starting to boot then a black screen. Try these steps.

A great first step is to try and reset gaia.
make reset-gaia

If this doesn't make it work, then try updating Gaia/Gecko via the flash tool steps.

If the issue still isn't fixed, and you've double checked that your power cord isn't failing nor the USB port on your computer, then it's time to try something a little more in depth - restoring the image.

TBD

Gaia/UXTeam

2014-05-29T21:46:37Z

Robmac: /* Release Assignments for FxOS UX Features Team */

==UX Team Structure==
[[File:Team structure only-02.jpg]]

The FirefoxOS UX team has 4 components to the team:
* UX Strategy: identifies design strategy themes which have a long term benefit to the product
* UX Prototying: the entire team participates, but we have UX engineers who comprise the expertise on the team for prototyping
* UX Frameworks: a small group which manages design patterns, including but not limited to- visual refresh, interaction patterns (including Haida updates), motion patterns, style guides
* UX Features: maps to the functional teams and areas for the product (both Interaction or UX (IxD) and Visual Design (VxD)) and includes an internal design reviewer system to ensure design consistency and quality within the UX team.
** Please note- for uireview? flags, please refer to the list below for the various feature area UX and VxD owners (e.g. do not use our internal UX reviewers)

For assignments to all of the 4 components above, please refer to https://wiki.mozilla.org/images/a/aa/Team_structure_dec2013_e_1.4.pdf

Below you will find ONLY the LATEST 1.4 release assignments specifically for the UX Features team. The wiki below will be kept more up to date than the attachment above.

==Release Assignments for FxOS UX Features Team==
<p>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th style="background:#efefef;"> Area
</th>
<th style="background:#efefef;"> Feature Group
</th>
<th style="background:#efefef;"> IxD Assignee
</th>
<th style="background:#efefef;"> VxD Assignee
</th></tr>
<tr>
<td> Communications</td>
<td> WebRTC</td>
<td> Maria </td>
<td> N/A</td>
</tr>
<tr>
<td> </td>
<td> DSDS</td>
<td> *Carrie</td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Dialer </td>
<td> *Carrie </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> Contacts </td>
<td> *Carrie </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> SMS/ MMS </td>
<td> *Omega </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> Cost Control App </td>
<td> TEF TBD </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> Media Recording </td>
<td> *Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Telephony- RIL </td>
<td> *Omega </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> Telephony- CDMA </td>
<td> *Juwei </td>
<td> Vicki </td>
</tr>
<tr>
<td> System Front End </td>
<td> FRE </td>
<td> *Jacqueline </td>
<td> Sabrina / Patryk </td>
</tr>
<tr>
<td> </td>
<td> No install model </td>
<td> *Maria </td>
<td> N/A </td>
</tr>
<tr>
<td> </td>
<td> Backpack </td>
<td> *Maria </td>
<td> N/A </td>
</tr>
<tr>
<td> </td>
<td> Sheets </td>
<td> Francis, *Rob </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Browser OS / Rocketbar </td>
<td> *Francis </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Task Manager </td>
<td> *Francis </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Download Manager </td>
<td> *Francis </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Offline Handling </td>
<td> *Francis </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Smart Data Consumption </td>
<td> *Rob, Valentin </td>
<td> TBD </td>
</tr>
<tr>
<td> </td>
<td> e.me </td>
<td> *Maria </td>
<td> Patryk </td>
</tr>
<tr>
<td> </td>
<td> Replaceable Home / Lock Screen </td>
<td> Josh / Jacqueline / Maria </td>
<td> *Peter </td>
</tr>
<tr>
<td> </td>
<td> Status bar </td>
<td> *Francis </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Notifications </td>
<td> *Rob </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Patterns </td>
<td> *Harly </td>
<td> Przemek / Casey </td>
</tr>
<tr>
<td> </td>
<td> Flexible UI / SVG Icons </td>
<td> Harly / Omega </td>
<td> *Patryk </td>
</tr>
<tr>
<td> </td>
<td> Utility / System Tray </td>
<td> *Francis </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Datastore / Permissions </td>
<td> Rob </td>
<td> N/A </td>
</tr>
<tr>
<td> System Platform </td>
<td> Bluetooth </td>
<td> *Omega </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Keyboard </td>
<td> *Carrie / Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Settings </td>
<td> *Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Scaling Devices </td>
<td> N/A </td>
<td> Helen* </td>
</tr>
<tr>
<td> </td>
<td> NFC </td>
<td> *Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Hardware Related UI </td>
<td> *Omega </td>
<td> Patryk </td>
</tr>
<tr>
<td> Media </td>
<td> Music Player </td>
<td> Jacqueline </td>
<td> *Hung </td>
</tr>
<tr>
<td> </td>
<td> Gallery </td>
<td> *Tiffanie </td>
<td> Amy </td>
</tr>
<tr>
<td> </td>
<td> Audio Recording </td>
<td> Jacqueline </td>
<td> *Hung </td>
</tr>
<tr>
<td> </td>
<td> Camera </td>
<td> *Tiffanie (1.5+) / *Rob (1.4) </td>
<td> Amy </td>
</tr>
<tr>
<td> </td>
<td> Video Player </td>
<td> *Tiffanie </td>
<td> Amy </td>
</tr>
<tr>
<td> </td>
<td> FM Radio </td>
<td> Jacqueline </td>
<td> *Hung </td>
</tr>
<tr>
<td> </td>
<td> Media Playback Controls </td>
<td> *Jacqueline </td>
<td> Hung </td>
</tr>
<tr>
<td> </td>
<td> DRM </td>
<td> *Tiffanie </td>
<td> Hung </td>
</tr>
<tr>
<td> Visual Assets </td>
<td> Typeface </td>
<td> N/A </td>
<td> *Patryk </td>
</tr>
<tr>
<td> </td>
<td> Iconography </td>
<td> N/A </td>
<td> *Peter </td>
</tr>
<tr>
<td> </td>
<td> System Sound Design </td>
<td> N/A </td>
<td> *Patryk (via Vendor) </td>
</tr>
<tr>
<td> </td>
<td> Wallpapers </td>
<td> N/A </td>
<td> *Patryk (via Contractor) </td>
</tr>
<tr>
<td> Productivity </td>
<td> Email </td>
<td> *Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Calendar </td>
<td> *Harly </td>
<td> Peko </td>
</tr>
<tr>
<td> </td>
<td> Calculator </td>
<td> *Harly </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Clock </td>
<td> *Juwei </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Notes </td>
<td> *Juwei </td>
<td> Peko </td>
</tr>
<tr>
<td> Ringtones </td>
<td> </td>
<td> *Tiffanie </td>
<td> Carol </td>
</tr>
<tr>
<td> Fx Services </td>
<td> WMF </td>
<td> *Jacqueline </td>
<td> Peko </td>
</tr>
<tr>
<td> Graphics </td>
<td> </td>
<td> *Casey </td>
<td> </td>
</tr>
<tr>
<td> Performance </td>
<td> </td>
<td> *Gordon </td>
<td> </td>
</tr>
<tr>
<td> Partners </td>
<td> </td>
<td> *Jaime / *Mike </td>
<td> </td>
</tr>
<tr>
<td> BD </td>
<td> </td>
<td> *Jaime </td>
<td> </td>
</tr>
<tr>
<td> Localization </td>
<td> </td>
<td> Stephany </td>
<td> Amy </td>
</tr>
<tr>
<td> Tablet </td>
<td> </td>
<td> Mike </td>
<td> Carol </td>
</tr>
</table>

==UX Team Contact Information==
<table border="1" cellpadding="5" cellspacing="0">

<th style="background:#efefef;">Name</th>
<th style="background:#efefef;">Role</th>
<th style="background:#efefef;">Organization</th>
<th style="background:#efefef;">IRC</th>
<th style="background:#efefef;">Skype</th>
<th style="background:#efefef;">GitHub</th>
<th style="background:#efefef;">Email</th>

<tr>
<td>Jaime Chen</td>
<td>UX Manager & Design Strategy</td>
<td>Mozilla</td>
<td>jaime</td>
<td>jaimecchen</td>
<td></td>
<td>jachen@mozilla.com</td>
</tr>

<tr>
<td>Stephany Wilkes</td>
<td>Program Manager</td>
<td>Mozilla</td>
<td>swilkes</td>
<td></td>
<td>stephany</td>
<td>swilkes@mozilla.com</td>
</tr>

<tr>
<td>Rob MacDonald</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>robmac</td>
<td></td>
<td></td>
<td>rmacdonald@mozilla.com</td>
</tr>

<tr>
<td>Francis Djabri</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>fdjabri@mozilla.com</td>
</tr>

<tr>
<td>Jacqueline Savory</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>jsavory@mozilla.com</td>
</tr>

<tr>
<td>Tiffanie Shakespeare</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>tshakespeare@mozilla.com</td>
</tr>

<tr>
<td>Josh Carpenter</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>jcarpenter</td>
<td>joshuacarpenter</td>
<td>jcarpenter</td>
<td>jcarpenter@mozilla.com</td>
</tr>

<tr>
<td>Maria Sandberg</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>msandberg</td>
<td>maria.sandberg.mozilla</td>
<td></td>
<td>msandberg@mozilla.com</td>
</tr>

<tr>
<td>Casey Yee</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>cyee</td>
<td>kc_yee</td>
<td>caseyyee</td>
<td>cyee@mozilla.com</td>
</tr>

<tr>
<td>Gordon Brander</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>gordonb</td>
<td></td>
<td>gordonbrander</td>
<td>gbrander@mozilla.com</td>
</tr>

<tr>
<td>Rafael Rebolleda</td>
<td>UX Strategy</td>
<td>Telefonica</td>
<td></td>
<td>rafaelrebolleda</td>
<td></td>
<td>hello@rafaelrebolleda.com</td>
</tr>

<tr>
<td>Ayman Maat</td>
<td>Interaction</td>
<td>Telefonica</td>
<td></td>
<td>aymanmaat</td>
<td></td>
<td>aymanmaat@hotmail.com</td>
</tr>

<tr>
<td>Victoria Gerchinhoren</td>
<td>Visual</td>
<td>Telefonica</td>
<td></td>
<td>vixvixy</td>
<td></td>
<td>vpg@tid.es</td>
</tr>

<tr>
<td>Mike Tsai</td>
<td>UX Manager</td>
<td>Mozilla</td>
<td>GoodMike</td>
<td>yilungisme</td>
<td></td>
<td>mtasi@mozilla.com</td>
</tr>

<tr>
<td>Juwei Huang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>juwei</td>
<td>juwei.huang_mozilla</td>
<td></td>
<td>jhuang@mozilla.com</td>
</tr>

<tr>
<td>Carrie Wang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>CarrieW</td>
<td>carrie75521</td>
<td>CarrieWang</td>
<td>cawang@mozilla.com</td>
</tr>

<tr>
<td>Peko Chen</td>
<td>Visual</td>
<td>Mozilla</td>
<td>pekochen</td>
<td>peko chen</td>
<td></td>
<td>pchen@mozilla.com</td>
</tr>

<tr>
<td>Helen Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>HHuang</td>
<td>zilunhuang</td>
<td></td>
<td>hhuang@mozilla.com</td>
</tr>

<tr>
<td>Fang Shih</td>
<td>Visual</td>
<td>Mozilla</td>
<td>fang</td>
<td>fangshih09</td>
<td>fshih</td>
<td>fshih@mozilla.com</td>
</tr>

<tr>
<td>Patryk Adamczyk</td>
<td>Visual</td>
<td>Mozilla</td>
<td>patryk</td>
<td>twisted_x_design</td>
<td>patrykdesign</td>
<td>padamczyk@mozilla.com</td>
</tr>

<tr>
<td>Przemek Abratowski</td>
<td>Visual</td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>pabratowski@mozilla.com</td>
</tr>

<tr>
<td>Peter La</td>
<td>Visual</td>
<td>Mozilla</td>
<td>peterla</td>
<td>peterla.mozilla</td>
<td>PeterLa</td>
<td>pla@mozilla.com</td>
</tr>

<tr>
<td>Eric Pang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>epang</td>
<td>eric.pang7</td>
<td>epang</td>
<td>epang@mozilla.com</td>
</tr>

<tr>
<td>Pavel Ivanov</td>
<td>Visual Design Eng.</td>
<td>Mozilla</td>
<td>ivanovpavel</td>
<td>pivanov.com</td>
<td>pivanov</td>
<td>pivanov@mozilla.com</td>
</tr>

<tr>
<td>Harly Hsu</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>harly</td>
<td>harly21</td>
<td>harly21</td>
<td>hhsu@mozilla.com</td>
</tr>

<tr>
<td>Omega Feng</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>Omega</td>
<td>huskyomega</td>
<td>huskyomega</td>
<td>ofeng@mozilla.com</td>
</tr>

<tr>
<td>Carol Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>Carol</td>
<td>carol.h96</td>
<td></td>
<td>chuang@mozilla.com</td>
</tr>
<tr>
<td>Hung Nguyen</td>
<td>Visual</td>
<td>Mozilla</td>
<td>hnguyen</td>
<td></td>
<td></td>
<td>hnguyen@mozilla.com</td>
</tr>
<tr>
<td>Amy Lee</td>
<td>Visual</td>
<td>Mozilla</td>
<td>AmyLee</td>
<td></td>
<td></td>
<td>amlee@mozilla.com</td>
</tr>
<tr>
<td>Sabrina Smelko</td>
<td>Visual</td>
<td>Mozilla</td>
<td>Sabrina</td>
<td></td>
<td></td>
<td>ssmelko@mozilla.com</td>
</tr>
<tr>
<td>Valentin Tsatskin</td>
<td>TBD</td>
<td>Mozilla</td>
<td>vt</td>
<td></td>
<td>vtsatskin</td>
<td>val@mozilla.com</td>
</tr>
</table>

Gaia/UXTeam

2014-04-09T16:21:50Z

Robmac: /* Release Assignments for FxOS UX Features Team */

==UX Team Structure==
[[File:Team structure only-02.jpg]]

The FirefoxOS UX team has 4 components to the team:
* UX Strategy: identifies design strategy themes which have a long term benefit to the product
* UX Prototying: the entire team participates, but we have UX engineers who comprise the expertise on the team for prototyping
* UX Frameworks: a small group which manages design patterns, including but not limited to- visual refresh, interaction patterns (including Haida updates), motion patterns, style guides
* UX Features: maps to the functional teams and areas for the product (both Interaction or UX (IxD) and Visual Design (VxD)) and includes an internal design reviewer system to ensure design consistency and quality within the UX team.
** Please note- for uireview? flags, please refer to the list below for the various feature area UX and VxD owners (e.g. do not use our internal UX reviewers)

For assignments to all of the 4 components above, please refer to https://wiki.mozilla.org/images/a/aa/Team_structure_dec2013_e_1.4.pdf

Below you will find ONLY the LATEST 1.4 release assignments specifically for the UX Features team. The wiki below will be kept more up to date than the attachment above.

==Release Assignments for FxOS UX Features Team==
<p>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th style="background:#efefef;"> Area
</th>
<th style="background:#efefef;"> Feature Group
</th>
<th style="background:#efefef;"> IxD Assignee
</th>
<th style="background:#efefef;"> VxD Assignee
</th></tr>
<tr>
<td> Communications</td>
<td> WebRTC</td>
<td> Maria </td>
<td> N/A</td>
</tr>
<tr>
<td> </td>
<td> DSDS</td>
<td> *Carrie</td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Dialer </td>
<td> *Carrie </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> Contacts </td>
<td> *Carrie </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> SMS/ MMS </td>
<td> *Omega </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> Cost Control App </td>
<td> TEF TBD </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> Media Recording </td>
<td> *Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Telephony- RIL </td>
<td> *Omega </td>
<td> Vicki </td>
</tr>
<tr>
<td> </td>
<td> Telephony- CDMA </td>
<td> *Juwei </td>
<td> Vicki </td>
</tr>
<tr>
<td> System Front End </td>
<td> FRE </td>
<td> Jacqueline* </td>
<td> Sabrina / Patryk </td>
</tr>
<tr>
<td> </td>
<td> No install model </td>
<td> Maria* </td>
<td> N/A </td>
</tr>
<tr>
<td> </td>
<td> Backpack </td>
<td> Maria* </td>
<td> N/A </td>
</tr>
<tr>
<td> </td>
<td> Sheets </td>
<td> Rob* </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Browser OS / Rocketbar </td>
<td> Francis* </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Task Manager </td>
<td> Francis* </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Download Manager </td>
<td> Francis* </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Offline Handling </td>
<td> Francis* </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Smart Data Consumption </td>
<td> Rob* </td>
<td> TBD </td>
</tr>
<tr>
<td> </td>
<td> e.me </td>
<td> Maria* </td>
<td> Patryk </td>
</tr>
<tr>
<td> </td>
<td> Replaceable Home / Lock Screen </td>
<td> Josh / Jacqueline / Maria </td>
<td> Peter* </td>
</tr>
<tr>
<td> </td>
<td> Status bar </td>
<td> Francis* </td>
<td> Eric </td>
</tr>
<tr>
<td> </td>
<td> Notifications </td>
<td> Rob* </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Building Blocks </td>
<td> Harly* </td>
<td> Przemek / Casey </td>
</tr>
<tr>
<td> </td>
<td> Flexible UI / SVG Icons </td>
<td> Harly / Omega </td>
<td> Patryk* </td>
</tr>
<tr>
<td> </td>
<td> Utility / System Tray </td>
<td> Francis* </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Datastore / Permissions </td>
<td> Rob </td>
<td> N/A </td>
</tr>
<tr>
<td> System Platform </td>
<td> Bluetooth </td>
<td> Omega* </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Keyboard </td>
<td> Carrie* / Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Settings </td>
<td> *Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Scaling Devices </td>
<td> N/A </td>
<td> Helen* </td>
</tr>
<tr>
<td> </td>
<td> NFC </td>
<td> *Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Hardware Related UI </td>
<td> *Omega </td>
<td> Patryk </td>
</tr>
<tr>
<td> Media </td>
<td> Music Player </td>
<td> Jacqueline </td>
<td> Hung* </td>
</tr>
<tr>
<td> </td>
<td> Gallery </td>
<td> Tiffanie* </td>
<td> Amy </td>
</tr>
<tr>
<td> </td>
<td> Audio Recording </td>
<td> Jacqueline </td>
<td> Hung* </td>
</tr>
<tr>
<td> </td>
<td> Camera </td>
<td> Tiffanie (1.5+)* / Rob (1.4)* </td>
<td> Amy </td>
</tr>
<tr>
<td> </td>
<td> Video Player </td>
<td> Tiffanie* </td>
<td> Amy </td>
</tr>
<tr>
<td> </td>
<td> FM Radio </td>
<td> Jacqueline </td>
<td> Hung* </td>
</tr>
<tr>
<td> </td>
<td> Media Playback Controls </td>
<td> Jacqueline* </td>
<td> Hung </td>
</tr>
<tr>
<td> </td>
<td> DRM </td>
<td> Tiffanie* </td>
<td> Hung </td>
</tr>
<tr>
<td> Visual Assets </td>
<td> Typeface </td>
<td> N/A </td>
<td> Patryk* </td>
</tr>
<tr>
<td> </td>
<td> Iconography </td>
<td> N/A </td>
<td> Peter* </td>
</tr>
<tr>
<td> </td>
<td> System Sound Design </td>
<td> N/A </td>
<td> Patryk (via Vendor)* </td>
</tr>
<tr>
<td> </td>
<td> Wallpapers </td>
<td> N/A </td>
<td> Patryk (via Contractor)* </td>
</tr>
<tr>
<td> Productivity </td>
<td> Email </td>
<td> *Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Calendar </td>
<td> *Harly </td>
<td> Peko </td>
</tr>
<tr>
<td> </td>
<td> Calculator </td>
<td> *Harly </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Clock </td>
<td> *Juwei </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Notes </td>
<td> *Juwei </td>
<td> Peko </td>
</tr>
<tr>
<td> Ringtones </td>
<td> </td>
<td> Tiffanie* </td>
<td> Carol </td>
</tr>
<tr>
<td> Fx Services </td>
<td> WMF </td>
<td> Jacqueline* </td>
<td> Peko </td>
</tr>
<tr>
<td> Graphics </td>
<td> </td>
<td> Casey* </td>
<td> </td>
</tr>
<tr>
<td> Performance </td>
<td> </td>
<td> Gordon* </td>
<td> </td>
</tr>
<tr>
<td> Partners </td>
<td> </td>
<td> Jaime* / Mike* </td>
<td> </td>
</tr>
<tr>
<td> BD </td>
<td> </td>
<td> Jaime* </td>
<td> </td>
</tr>
<tr>
<td> Localization </td>
<td> </td>
<td> Stephany </td>
<td> Amy </td>
</tr>
<tr>
<td> Tablet </td>
<td> </td>
<td> Mike </td>
<td> Carol </td>
</tr>
</table>

==UX Team Contact Information==
<table border="1" cellpadding="5" cellspacing="0">

<th style="background:#efefef;">Name</th>
<th style="background:#efefef;">Role</th>
<th style="background:#efefef;">Organization</th>
<th style="background:#efefef;">IRC</th>
<th style="background:#efefef;">Skype</th>
<th style="background:#efefef;">GitHub</th>
<th style="background:#efefef;">Email</th>

<tr>
<td>Jaime Chen</td>
<td>UX Manager & Design Strategy</td>
<td>Mozilla</td>
<td>jaime</td>
<td>jaimecchen</td>
<td></td>
<td>jachen@mozilla.com</td>
</tr>

<tr>
<td>Stephany Wilkes</td>
<td>Program Manager</td>
<td>Mozilla</td>
<td>swilkes</td>
<td></td>
<td>stephany</td>
<td>swilkes@mozilla.com</td>
</tr>

<tr>
<td>Rob MacDonald</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>robmac</td>
<td></td>
<td></td>
<td>rmacdonald@mozilla.com</td>
</tr>

<tr>
<td>Francis Djabri</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>fdjabri@mozilla.com</td>
</tr>

<tr>
<td>Jacqueline Savory</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>jsavory@mozilla.com</td>
</tr>

<tr>
<td>Tiffanie Shakespeare</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>tshakespeare@mozilla.com</td>
</tr>

<tr>
<td>Josh Carpenter</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>jcarpenter</td>
<td>joshuacarpenter</td>
<td>jcarpenter</td>
<td>jcarpenter@mozilla.com</td>
</tr>

<tr>
<td>Maria Sandberg</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>msandberg</td>
<td>maria.sandberg.mozilla</td>
<td></td>
<td>msandberg@mozilla.com</td>
</tr>

<tr>
<td>Casey Yee</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>cyee</td>
<td>kc_yee</td>
<td>caseyyee</td>
<td>cyee@mozilla.com</td>
</tr>

<tr>
<td>Gordon Brander</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>gordonb</td>
<td></td>
<td>gordonbrander</td>
<td>gbrander@mozilla.com</td>
</tr>

<tr>
<td>Rafael Rebolleda</td>
<td>UX Strategy</td>
<td>Telefonica</td>
<td></td>
<td>rafaelrebolleda</td>
<td></td>
<td>hello@rafaelrebolleda.com</td>
</tr>

<tr>
<td>Ayman Maat</td>
<td>Interaction</td>
<td>Telefonica</td>
<td></td>
<td>aymanmaat</td>
<td></td>
<td>aymanmaat@hotmail.com</td>
</tr>

<tr>
<td>Victoria Gerchinhoren</td>
<td>Visual</td>
<td>Telefonica</td>
<td></td>
<td>vixvixy</td>
<td></td>
<td>vpg@tid.es</td>
</tr>

<tr>
<td>Mike Tsai</td>
<td>UX Manager</td>
<td>Mozilla</td>
<td>GoodMike</td>
<td>yilungisme</td>
<td></td>
<td>mtasi@mozilla.com</td>
</tr>

<tr>
<td>Juwei Huang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>juwei</td>
<td>juwei.huang_mozilla</td>
<td></td>
<td>jhuang@mozilla.com</td>
</tr>

<tr>
<td>Carrie Wang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>CarrieW</td>
<td>carrie75521</td>
<td>CarrieWang</td>
<td>cawang@mozilla.com</td>
</tr>

<tr>
<td>Peko Chen</td>
<td>Visual</td>
<td>Mozilla</td>
<td>pekochen</td>
<td>peko chen</td>
<td></td>
<td>pchen@mozilla.com</td>
</tr>

<tr>
<td>Helen Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>HHuang</td>
<td>zilunhuang</td>
<td></td>
<td>hhuang@mozilla.com</td>
</tr>

<tr>
<td>Fang Shih</td>
<td>Visual</td>
<td>Mozilla</td>
<td>fang</td>
<td>fangshih09</td>
<td>fshih</td>
<td>fshih@mozilla.com</td>
</tr>

<tr>
<td>Patryk Adamczyk</td>
<td>Visual</td>
<td>Mozilla</td>
<td>patryk</td>
<td>twisted_x_design</td>
<td>patrykdesign</td>
<td>padamczyk@mozilla.com</td>
</tr>

<tr>
<td>Przemek Abratowski</td>
<td>Visual</td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>pabratowski@mozilla.com</td>
</tr>

<tr>
<td>Peter La</td>
<td>Visual</td>
<td>Mozilla</td>
<td>peterla</td>
<td>peterla.mozilla</td>
<td>PeterLa</td>
<td>pla@mozilla.com</td>
</tr>

<tr>
<td>Eric Pang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>epang</td>
<td>eric.pang7</td>
<td>epang</td>
<td>epang@mozilla.com</td>
</tr>

<tr>
<td>Pavel Ivanov</td>
<td>Visual Design Eng.</td>
<td>Mozilla</td>
<td>ivanovpavel</td>
<td>pivanov.com</td>
<td>pivanov</td>
<td>pivanov@mozilla.com</td>
</tr>

<tr>
<td>Harly Hsu</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>harly</td>
<td>harly21</td>
<td>harly21</td>
<td>hhsu@mozilla.com</td>
</tr>

<tr>
<td>Omega Feng</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>Omega</td>
<td>huskyomega</td>
<td>huskyomega</td>
<td>ofeng@mozilla.com</td>
</tr>

<tr>
<td>Carol Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>Carol</td>
<td>carol.h96</td>
<td></td>
<td>chuang@mozilla.com</td>
</tr>
<tr>
<td>Hung Nguyen</td>
<td>Visual</td>
<td>Mozilla</td>
<td>hnguyen</td>
<td></td>
<td></td>
<td>hnguyen@mozilla.com</td>
</tr>
<tr>
<td>Amy Lee</td>
<td>Visual</td>
<td>Mozilla</td>
<td>AmyLee</td>
<td></td>
<td></td>
<td>amlee@mozilla.com</td>
</tr>
<tr>
<td>Sabrina Smelko</td>
<td>Visual</td>
<td>Mozilla</td>
<td>Sabrina</td>
<td></td>
<td></td>
<td>ssmelko@mozilla.com</td>
</tr>
</table>

Gaia/UXTeam

2014-03-12T22:44:52Z

Robmac: /* UX Team Contact Information */

==UX Team Structure==
[[File:Team structure only-02.jpg]]

The FirefoxOS UX team has 4 components to the team:
* UX Strategy: identifies design strategy themes which have a long term benefit to the product
* UX Prototying: the entire team participates, but we have UX engineers who comprise the expertise on the team for prototyping
* UX Frameworks: a small group which manages design patterns, including but not limited to- visual refresh, interaction patterns (including Haida updates), motion patterns, style guides
* UX Features: maps to the functional teams and areas for the product (both Interaction or UX (IxD) and Visual Design (VxD)) and includes an internal design reviewer system to ensure design consistency and quality within the UX team.
** Please note- for uireview? flags, please refer to the list below for the various feature area UX and VxD owners (e.g. do not use our internal UX reviewers)

For assignments to all of the 4 components above, please refer to https://wiki.mozilla.org/images/a/aa/Team_structure_dec2013_e_1.4.pdf

Below you will find ONLY the LATEST 1.4 release assignments specifically for the UX Features team. The wiki below will be kept more up to date than the attachment above.

==1.4 Release Assignments for FxOS UX Features Team==
<p>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th style="background:#efefef;"> Area
</th>
<th style="background:#efefef;"> Feature Group
</th>
<th style="background:#efefef;"> IxD Assignee
</th>
<th style="background:#efefef;"> VxD Assignee
</th></tr>
<tr>
<td> Communications</td>
<td> WebRTC</td>
<td> Omega </td>
<td> N/A</td>
</tr>
<tr>
<td> </td>
<td> DSDS</td>
<td> Carrie</td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Dialer </td>
<td> Carrie </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> Contacts </td>
<td> Ayman (TEF) </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> SMS/ MMS </td>
<td> Ayman (TEF) </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> Media Recording </td>
<td> Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Telephony- RIL </td>
<td> Omega </td>
<td> N/A </td>
</tr>
<tr>
<td> </td>
<td> Telephony- CDMA </td>
<td> Juwei </td>
<td> N/A </td>
</tr>
<tr>
<td> System Front End </td>
<td> FRE </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> No install model </td>
<td> Maria </td>
<td> TBD </td>
</tr>
<tr>
<td> </td>
<td> Backpack </td>
<td> Maria </td>
<td> TBD </td>
</tr>
<tr>
<td> </td>
<td> Sheets </td>
<td> Rob </td>
<td> Amy/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Browser OS/ Rocketbar </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Task Manager </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Download Manager </td>
<td> Francis </td>
<td> Amy/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Offline </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> e.me </td>
<td> TBD </td>
<td> Patryk </td>
</tr>
<tr>
<td> </td>
<td> Replaceable Home/ Lock Screen </td>
<td> Rob </td>
<td> Peter/ Patryl </td>
</tr>
<tr>
<td> </td>
<td> Status bar </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Notifications </td>
<td> Rob </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Utility/ System Tray </td>
<td> Rob </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Datastore/ Permissions </td>
<td> Rob </td>
<td> N/A </td>
</tr>
<tr>
<td> System Platform </td>
<td> BT </td>
<td> Omega </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Keyboard </td>
<td> Carrie+Omega </td>
<td> Przemek/ (Helen for Chinese) </td>
</tr>
<tr>
<td> </td>
<td> Settings </td>
<td> Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Cost Control </td>
<td> Ayman (TEF) </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> Flex UI/ Multi Res/ Devices </td>
<td> N/A </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> NFC </td>
<td> Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Hardware Related UI </td>
<td> Harly </td>
<td> Patryk </td>
</tr>
<tr>
<td> Media </td>
<td> Music Player </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Gallery </td>
<td> Tiffanie </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Audio Recording </td>
<td> Jacqueline </td>
<td> TBD </td>
</tr>
<tr>
<td> </td>
<td> Camera </td>
<td> Tiffanie (1.5+) / Rob (1.4) </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Video Player </td>
<td> Tifanie </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> FM Radio </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> DRM </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> Visual Assets </td>
<td> Typeface </td>
<td> N/A </td>
<td> Patryk </td>
</tr>
<tr>
<td> </td>
<td> Iconography </td>
<td> N/A </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> System Sound Design </td>
<td> N/A </td>
<td> Patryk (via Vendor) </td>
</tr>
<tr>
<td> </td>
<td> Wallpapers </td>
<td> N/A </td>
<td> Patryk (via Contractor) </td>
</tr>
<tr>
<td> Productivity </td>
<td> Email </td>
<td> Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Calendar </td>
<td> Harly </td>
<td> Peko </td>
</tr>
<tr>
<td> </td>
<td> Calculator </td>
<td> Harly </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Clock </td>
<td> Juwei </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Notes </td>
<td> Juwei </td>
<td> Peko </td>
</tr>
<tr>
<td> Ringtones </td>
<td> </td>
<td> Tiffanie </td>
<td> Carol </td>
</tr>
<tr>
<td> Fx Services </td>
<td> WMF </td>
<td> Jacqueline </td>
<td> Peko </td>
</tr>
<tr>
<td> Graphics </td>
<td> </td>
<td> Casey </td>
<td> </td>
</tr>
<tr>
<td> Building Blocks </td>
<td> </td>
<td> Harly (lead), Casey </td>
<td> </td>
</tr>
<tr>
<td> Performance </td>
<td> </td>
<td> Gordon </td>
<td> </td>
</tr>
<tr>
<td> Partners </td>
<td> </td>
<td> Jaime/ Mike </td>
<td> </td>
</tr>
<tr>
<td> BD </td>
<td> </td>
<td> Jaime </td>
<td> </td>
</tr>
<tr>
<td> Localization </td>
<td> </td>
<td> Stephany </td>
<td> Amy </td>
</tr>
<tr>
<td> WebRTC </td>
<td> </td>
<td> Maria </td>
<td> TBD </td>
</tr>
</table>

==UX Team Contact Information==
<table border="1" cellpadding="5" cellspacing="0">

<th style="background:#efefef;">Name</th>
<th style="background:#efefef;">Role</th>
<th style="background:#efefef;">Organization</th>
<th style="background:#efefef;">IRC</th>
<th style="background:#efefef;">Skype</th>
<th style="background:#efefef;">GitHub</th>
<th style="background:#efefef;">Email</th>

<tr>
<td>Jaime Chen</td>
<td>UX Manager & Design Strategy</td>
<td>Mozilla</td>
<td>jaime</td>
<td>jaimecchen</td>
<td></td>
<td>jachen@mozilla.com</td>
</tr>

<tr>
<td>Stephany Wilkes</td>
<td>Program Manager</td>
<td>Mozilla</td>
<td>swilkes</td>
<td></td>
<td>stephany</td>
<td>swilkes@mozilla.com</td>
</tr>

<tr>
<td>Rob MacDonald</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>robmac</td>
<td></td>
<td></td>
<td>rmacdonald@mozilla.com</td>
</tr>

<tr>
<td>Francis Djabri</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>fdjabri@mozilla.com</td>
</tr>

<tr>
<td>Jacqueline Savory</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>jsavory@mozilla.com</td>
</tr>

<tr>
<td>Tiffanie Shakespeare</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>tshakespeare@mozilla.com</td>
</tr>

<tr>
<td>Josh Carpenter</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>jcarpenter</td>
<td>joshuacarpenter</td>
<td>jcarpenter</td>
<td>jcarpenter@mozilla.com</td>
</tr>

<tr>
<td>Maria Sandberg</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>msandberg</td>
<td>maria.sandberg.mozilla</td>
<td></td>
<td>msandberg@mozilla.com</td>
</tr>

<tr>
<td>Casey Yee</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>cyee</td>
<td>kc_yee</td>
<td>caseyyee</td>
<td>cyee@mozilla.com</td>
</tr>

<tr>
<td>Gordon Brander</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>gordonb</td>
<td></td>
<td>gordonbrander</td>
<td>gbrander@mozilla.com</td>
</tr>

<tr>
<td>Rafael Rebolleda</td>
<td>UX Strategy</td>
<td>Telefonica</td>
<td></td>
<td>rafaelrebolleda</td>
<td></td>
<td>hello@rafaelrebolleda.com</td>
</tr>

<tr>
<td>Ayman Maat</td>
<td>Interaction</td>
<td>Telefonica</td>
<td></td>
<td>aymanmaat</td>
<td></td>
<td>aymanmaat@hotmail.com</td>
</tr>

<tr>
<td>Victoria Gerchinhoren</td>
<td>Visual</td>
<td>Telefonica</td>
<td></td>
<td>vixvixy</td>
<td></td>
<td>vpg@tid.es</td>
</tr>

<tr>
<td>Mike Tsai</td>
<td>UX Manager</td>
<td>Mozilla</td>
<td>GoodMike</td>
<td>yilungisme</td>
<td></td>
<td>mtasi@mozilla.com</td>
</tr>

<tr>
<td>Juwei Huang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>juwei</td>
<td>juwei.huang_mozilla</td>
<td></td>
<td>jhuang@mozilla.com</td>
</tr>

<tr>
<td>Carrie Wang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>CarrieW</td>
<td>carrie75521</td>
<td>CarrieWang</td>
<td>cawang@mozilla.com</td>
</tr>

<tr>
<td>Peko Chen</td>
<td>Visual</td>
<td>Mozilla</td>
<td>pekochen</td>
<td>peko chen</td>
<td></td>
<td>pchen@mozilla.com</td>
</tr>

<tr>
<td>Helen Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>HHuang</td>
<td>zilunhuang</td>
<td></td>
<td>hhuang@mozilla.com</td>
</tr>

<tr>
<td>Fang Shih</td>
<td>Visual</td>
<td>Mozilla</td>
<td>fang</td>
<td>fangshih09</td>
<td>fshih</td>
<td>fshih@mozilla.com</td>
</tr>

<tr>
<td>Patryk Adamczyk</td>
<td>Visual</td>
<td>Mozilla</td>
<td>patryk</td>
<td>twisted_x_design</td>
<td>patrykdesign</td>
<td>padamczyk@mozilla.com</td>
</tr>

<tr>
<td>Przemek Abratowski</td>
<td>Visual</td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>pabratowski@mozilla.com</td>
</tr>

<tr>
<td>Peter La</td>
<td>Visual</td>
<td>Mozilla</td>
<td>peterla</td>
<td>peterla.mozilla</td>
<td>PeterLa</td>
<td>pla@mozilla.com</td>
</tr>

<tr>
<td>Eric Pang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>epang</td>
<td>eric.pang7</td>
<td>epang</td>
<td>epang@mozilla.com</td>
</tr>

<tr>
<td>Pavel Ivanov</td>
<td>Visual Design Eng.</td>
<td>Mozilla</td>
<td>ivanovpavel</td>
<td>pivanov.com</td>
<td>pivanov</td>
<td>pivanov@mozilla.com</td>
</tr>

<tr>
<td>Harly Hsu</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>harly</td>
<td>harly21</td>
<td>harly21</td>
<td>hhsu@mozilla.com</td>
</tr>

<tr>
<td>Omega Feng</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>Omega</td>
<td>huskyomega</td>
<td>huskyomega</td>
<td>ofeng@mozilla.com</td>
</tr>

<tr>
<td>Carol Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>Carol</td>
<td>carol.h96</td>
<td></td>
<td>chuang@mozilla.com</td>
</tr>

</table>

Gaia/UXTeam

2014-03-12T22:42:52Z

Robmac: /* 1.4 Release Assignments for FxOS UX Features Team */

==UX Team Structure==
[[File:Team structure only-02.jpg]]

The FirefoxOS UX team has 4 components to the team:
* UX Strategy: identifies design strategy themes which have a long term benefit to the product
* UX Prototying: the entire team participates, but we have UX engineers who comprise the expertise on the team for prototyping
* UX Frameworks: a small group which manages design patterns, including but not limited to- visual refresh, interaction patterns (including Haida updates), motion patterns, style guides
* UX Features: maps to the functional teams and areas for the product (both Interaction or UX (IxD) and Visual Design (VxD)) and includes an internal design reviewer system to ensure design consistency and quality within the UX team.
** Please note- for uireview? flags, please refer to the list below for the various feature area UX and VxD owners (e.g. do not use our internal UX reviewers)

For assignments to all of the 4 components above, please refer to https://wiki.mozilla.org/images/a/aa/Team_structure_dec2013_e_1.4.pdf

Below you will find ONLY the LATEST 1.4 release assignments specifically for the UX Features team. The wiki below will be kept more up to date than the attachment above.

==1.4 Release Assignments for FxOS UX Features Team==
<p>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th style="background:#efefef;"> Area
</th>
<th style="background:#efefef;"> Feature Group
</th>
<th style="background:#efefef;"> IxD Assignee
</th>
<th style="background:#efefef;"> VxD Assignee
</th></tr>
<tr>
<td> Communications</td>
<td> WebRTC</td>
<td> Omega </td>
<td> N/A</td>
</tr>
<tr>
<td> </td>
<td> DSDS</td>
<td> Carrie</td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Dialer </td>
<td> Carrie </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> Contacts </td>
<td> Ayman (TEF) </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> SMS/ MMS </td>
<td> Ayman (TEF) </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> Media Recording </td>
<td> Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Telephony- RIL </td>
<td> Omega </td>
<td> N/A </td>
</tr>
<tr>
<td> </td>
<td> Telephony- CDMA </td>
<td> Juwei </td>
<td> N/A </td>
</tr>
<tr>
<td> System Front End </td>
<td> FRE </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> No install model </td>
<td> Maria </td>
<td> TBD </td>
</tr>
<tr>
<td> </td>
<td> Backpack </td>
<td> Maria </td>
<td> TBD </td>
</tr>
<tr>
<td> </td>
<td> Sheets </td>
<td> Rob </td>
<td> Amy/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Browser OS/ Rocketbar </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Task Manager </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Download Manager </td>
<td> Francis </td>
<td> Amy/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Offline </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> e.me </td>
<td> TBD </td>
<td> Patryk </td>
</tr>
<tr>
<td> </td>
<td> Replaceable Home/ Lock Screen </td>
<td> Rob </td>
<td> Peter/ Patryl </td>
</tr>
<tr>
<td> </td>
<td> Status bar </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Notifications </td>
<td> Rob </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Utility/ System Tray </td>
<td> Rob </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Datastore/ Permissions </td>
<td> Rob </td>
<td> N/A </td>
</tr>
<tr>
<td> System Platform </td>
<td> BT </td>
<td> Omega </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Keyboard </td>
<td> Carrie+Omega </td>
<td> Przemek/ (Helen for Chinese) </td>
</tr>
<tr>
<td> </td>
<td> Settings </td>
<td> Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Cost Control </td>
<td> Ayman (TEF) </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> Flex UI/ Multi Res/ Devices </td>
<td> N/A </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> NFC </td>
<td> Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Hardware Related UI </td>
<td> Harly </td>
<td> Patryk </td>
</tr>
<tr>
<td> Media </td>
<td> Music Player </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Gallery </td>
<td> Tiffanie </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Audio Recording </td>
<td> Jacqueline </td>
<td> TBD </td>
</tr>
<tr>
<td> </td>
<td> Camera </td>
<td> Tiffanie (1.5+) / Rob (1.4) </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Video Player </td>
<td> Tifanie </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> FM Radio </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> DRM </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> Visual Assets </td>
<td> Typeface </td>
<td> N/A </td>
<td> Patryk </td>
</tr>
<tr>
<td> </td>
<td> Iconography </td>
<td> N/A </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> System Sound Design </td>
<td> N/A </td>
<td> Patryk (via Vendor) </td>
</tr>
<tr>
<td> </td>
<td> Wallpapers </td>
<td> N/A </td>
<td> Patryk (via Contractor) </td>
</tr>
<tr>
<td> Productivity </td>
<td> Email </td>
<td> Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Calendar </td>
<td> Harly </td>
<td> Peko </td>
</tr>
<tr>
<td> </td>
<td> Calculator </td>
<td> Harly </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Clock </td>
<td> Juwei </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Notes </td>
<td> Juwei </td>
<td> Peko </td>
</tr>
<tr>
<td> Ringtones </td>
<td> </td>
<td> Tiffanie </td>
<td> Carol </td>
</tr>
<tr>
<td> Fx Services </td>
<td> WMF </td>
<td> Jacqueline </td>
<td> Peko </td>
</tr>
<tr>
<td> Graphics </td>
<td> </td>
<td> Casey </td>
<td> </td>
</tr>
<tr>
<td> Building Blocks </td>
<td> </td>
<td> Harly (lead), Casey </td>
<td> </td>
</tr>
<tr>
<td> Performance </td>
<td> </td>
<td> Gordon </td>
<td> </td>
</tr>
<tr>
<td> Partners </td>
<td> </td>
<td> Jaime/ Mike </td>
<td> </td>
</tr>
<tr>
<td> BD </td>
<td> </td>
<td> Jaime </td>
<td> </td>
</tr>
<tr>
<td> Localization </td>
<td> </td>
<td> Stephany </td>
<td> Amy </td>
</tr>
<tr>
<td> WebRTC </td>
<td> </td>
<td> Maria </td>
<td> TBD </td>
</tr>
</table>

==UX Team Contact Information==
<table border="1" cellpadding="5" cellspacing="0">

<th style="background:#efefef;">Name</th>
<th style="background:#efefef;">Role</th>
<th style="background:#efefef;">Organization</th>
<th style="background:#efefef;">IRC</th>
<th style="background:#efefef;">Skype</th>
<th style="background:#efefef;">GitHub</th>
<th style="background:#efefef;">Email</th>

<tr>
<td>Jaime Chen</td>
<td>UX Manager & Design Strategy</td>
<td>Mozilla</td>
<td>jaime</td>
<td>jaimecchen</td>
<td></td>
<td>jachen@mozilla.com</td>
</tr>

<tr>
<td>Stephany Wilkes</td>
<td>Program Manager</td>
<td>Mozilla</td>
<td>swilkes</td>
<td></td>
<td>stephany</td>
<td>swilkes@mozilla.com</td>
</tr>

<tr>
<td>Rob MacDonald</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>robmac</td>
<td></td>
<td></td>
<td>rmacdonald@mozilla.com</td>
</tr>

<tr>
<td>Francis Djabri</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>fdjabri@mozilla.com</td>
</tr>

<tr>
<td>Jacqueline Savory</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>jsavory@mozilla.com</td>
</tr>

<tr>
<td>Josh Carpenter</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>jcarpenter</td>
<td>joshuacarpenter</td>
<td>jcarpenter</td>
<td>jcarpenter@mozilla.com</td>
</tr>

<tr>
<td>Maria Sandberg</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>msandberg</td>
<td>maria.sandberg.mozilla</td>
<td></td>
<td>msandberg@mozilla.com</td>
</tr>

<tr>
<td>Casey Yee</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>cyee</td>
<td>kc_yee</td>
<td>caseyyee</td>
<td>cyee@mozilla.com</td>
</tr>

<tr>
<td>Gordon Brander</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>gordonb</td>
<td></td>
<td>gordonbrander</td>
<td>gbrander@mozilla.com</td>
</tr>

<tr>
<td>Rafael Rebolleda</td>
<td>UX Strategy</td>
<td>Telefonica</td>
<td></td>
<td>rafaelrebolleda</td>
<td></td>
<td>hello@rafaelrebolleda.com</td>
</tr>

<tr>
<td>Ayman Maat</td>
<td>Interaction</td>
<td>Telefonica</td>
<td></td>
<td>aymanmaat</td>
<td></td>
<td>aymanmaat@hotmail.com</td>
</tr>

<tr>
<td>Victoria Gerchinhoren</td>
<td>Visual</td>
<td>Telefonica</td>
<td></td>
<td>vixvixy</td>
<td></td>
<td>vpg@tid.es</td>
</tr>

<tr>
<td>Mike Tsai</td>
<td>UX Manager</td>
<td>Mozilla</td>
<td>GoodMike</td>
<td>yilungisme</td>
<td></td>
<td>mtasi@mozilla.com</td>
</tr>

<tr>
<td>Juwei Huang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>juwei</td>
<td>juwei.huang_mozilla</td>
<td></td>
<td>jhuang@mozilla.com</td>
</tr>

<tr>
<td>Carrie Wang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>CarrieW</td>
<td>carrie75521</td>
<td>CarrieWang</td>
<td>cawang@mozilla.com</td>
</tr>

<tr>
<td>Peko Chen</td>
<td>Visual</td>
<td>Mozilla</td>
<td>pekochen</td>
<td>peko chen</td>
<td></td>
<td>pchen@mozilla.com</td>
</tr>

<tr>
<td>Helen Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>HHuang</td>
<td>zilunhuang</td>
<td></td>
<td>hhuang@mozilla.com</td>
</tr>

<tr>
<td>Fang Shih</td>
<td>Visual</td>
<td>Mozilla</td>
<td>fang</td>
<td>fangshih09</td>
<td>fshih</td>
<td>fshih@mozilla.com</td>
</tr>

<tr>
<td>Patryk Adamczyk</td>
<td>Visual</td>
<td>Mozilla</td>
<td>patryk</td>
<td>twisted_x_design</td>
<td>patrykdesign</td>
<td>padamczyk@mozilla.com</td>
</tr>

<tr>
<td>Przemek Abratowski</td>
<td>Visual</td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>pabratowski@mozilla.com</td>
</tr>

<tr>
<td>Peter La</td>
<td>Visual</td>
<td>Mozilla</td>
<td>peterla</td>
<td>peterla.mozilla</td>
<td>PeterLa</td>
<td>pla@mozilla.com</td>
</tr>

<tr>
<td>Eric Pang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>epang</td>
<td>eric.pang7</td>
<td>epang</td>
<td>epang@mozilla.com</td>
</tr>

<tr>
<td>Pavel Ivanov</td>
<td>Visual Design Eng.</td>
<td>Mozilla</td>
<td>ivanovpavel</td>
<td>pivanov.com</td>
<td>pivanov</td>
<td>pivanov@mozilla.com</td>
</tr>

<tr>
<td>Harly Hsu</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>harly</td>
<td>harly21</td>
<td>harly21</td>
<td>hhsu@mozilla.com</td>
</tr>

<tr>
<td>Omega Feng</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>Omega</td>
<td>huskyomega</td>
<td>huskyomega</td>
<td>ofeng@mozilla.com</td>
</tr>

<tr>
<td>Carol Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>Carol</td>
<td>carol.h96</td>
<td></td>
<td>chuang@mozilla.com</td>
</tr>

</table>

Gaia/UXTeam

2014-03-12T22:39:36Z

Robmac: /* 1.4 Release Assignments for FxOS UX Features Team */

==UX Team Structure==
[[File:Team structure only-02.jpg]]

The FirefoxOS UX team has 4 components to the team:
* UX Strategy: identifies design strategy themes which have a long term benefit to the product
* UX Prototying: the entire team participates, but we have UX engineers who comprise the expertise on the team for prototyping
* UX Frameworks: a small group which manages design patterns, including but not limited to- visual refresh, interaction patterns (including Haida updates), motion patterns, style guides
* UX Features: maps to the functional teams and areas for the product (both Interaction or UX (IxD) and Visual Design (VxD)) and includes an internal design reviewer system to ensure design consistency and quality within the UX team.
** Please note- for uireview? flags, please refer to the list below for the various feature area UX and VxD owners (e.g. do not use our internal UX reviewers)

For assignments to all of the 4 components above, please refer to https://wiki.mozilla.org/images/a/aa/Team_structure_dec2013_e_1.4.pdf

Below you will find ONLY the LATEST 1.4 release assignments specifically for the UX Features team. The wiki below will be kept more up to date than the attachment above.

==1.4 Release Assignments for FxOS UX Features Team==
<p>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th style="background:#efefef;"> Area
</th>
<th style="background:#efefef;"> Feature Group
</th>
<th style="background:#efefef;"> IxD Assignee
</th>
<th style="background:#efefef;"> VxD Assignee
</th></tr>
<tr>
<td> Communications</td>
<td> WebRTC</td>
<td> Omega </td>
<td> N/A</td>
</tr>
<tr>
<td> </td>
<td> DSDS</td>
<td> Carrie</td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Dialer </td>
<td> Carrie </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> Contacts </td>
<td> Ayman (TEF) </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> SMS/ MMS </td>
<td> Ayman (TEF) </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> Media Recording </td>
<td> Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Telephony- RIL </td>
<td> Omega </td>
<td> N/A </td>
</tr>
<tr>
<td> </td>
<td> Telephony- CDMA </td>
<td> Juwei </td>
<td> N/A </td>
</tr>
<tr>
<td> System Front End </td>
<td> FRE </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Sheets </td>
<td> Rob </td>
<td> Amy/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Browser OS/ Rocketbar </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Task Manager </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Download Manager </td>
<td> Francis </td>
<td> Amy/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Offline </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> e.me </td>
<td> TBD </td>
<td> Patryk </td>
</tr>
<tr>
<td> </td>
<td> Replaceable Home/ Lock Screen </td>
<td> Rob </td>
<td> Peter/ Patryl </td>
</tr>
<tr>
<td> </td>
<td> Status bar </td>
<td> Francis </td>
<td> Eric/ Przemek </td>
</tr>
<tr>
<td> </td>
<td> Notifications </td>
<td> Rob </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Utility/ System Tray </td>
<td> Rob </td>
<td> Przemek </td>
</tr>
<tr>
<td> </td>
<td> Datastore/ Permissions </td>
<td> Rob </td>
<td> N/A </td>
</tr>
<tr>
<td> System Platform </td>
<td> BT </td>
<td> Omega </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Keyboard </td>
<td> Carrie+Omega </td>
<td> Przemek/ (Helen for Chinese) </td>
</tr>
<tr>
<td> </td>
<td> Settings </td>
<td> Omega </td>
<td> Carol </td>
</tr>
<tr>
<td> </td>
<td> Cost Control </td>
<td> Ayman (TEF) </td>
<td> TEF </td>
</tr>
<tr>
<td> </td>
<td> Flex UI/ Multi Res/ Devices </td>
<td> N/A </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> NFC </td>
<td> Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Hardware Related UI </td>
<td> Harly </td>
<td> Patryk </td>
</tr>
<tr>
<td> Media </td>
<td> Music Player </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Gallery </td>
<td> Tiffanie </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Audio Recording </td>
<td> Jacqueline </td>
<td> TBD </td>
</tr>
<tr>
<td> </td>
<td> Camera </td>
<td> Tiffanie (1.5+) / Rob (1.4) </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> Video Player </td>
<td> Tifanie </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> FM Radio </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> DRM </td>
<td> Jacqueline </td>
<td> Peter </td>
</tr>
<tr>
<td> Visual Assets </td>
<td> Typeface </td>
<td> N/A </td>
<td> Patryk </td>
</tr>
<tr>
<td> </td>
<td> Iconography </td>
<td> N/A </td>
<td> Peter </td>
</tr>
<tr>
<td> </td>
<td> System Sound Design </td>
<td> N/A </td>
<td> Patryk (via Vendor) </td>
</tr>
<tr>
<td> </td>
<td> Wallpapers </td>
<td> N/A </td>
<td> Patryk (via Contractor) </td>
</tr>
<tr>
<td> Productivity </td>
<td> Email </td>
<td> Juwei </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Calendar </td>
<td> Harly </td>
<td> Peko </td>
</tr>
<tr>
<td> </td>
<td> Calculator </td>
<td> Harly </td>
<td> Fang </td>
</tr>
<tr>
<td> </td>
<td> Clock </td>
<td> Juwei </td>
<td> Helen </td>
</tr>
<tr>
<td> </td>
<td> Notes </td>
<td> Juwei </td>
<td> Peko </td>
</tr>
<tr>
<td> Ringtones </td>
<td> </td>
<td> Tiffanie </td>
<td> Carol </td>
</tr>
<tr>
<td> Fx Services </td>
<td> WMF </td>
<td> Jacqueline </td>
<td> Peko </td>
</tr>
<tr>
<td> Graphics </td>
<td> </td>
<td> Casey </td>
<td> </td>
</tr>
<tr>
<td> Building Blocks </td>
<td> </td>
<td> Harly (lead), Casey </td>
<td> </td>
</tr>
<tr>
<td> Performance </td>
<td> </td>
<td> Gordon </td>
<td> </td>
</tr>
<tr>
<td> Partners </td>
<td> </td>
<td> Jaime/ Mike </td>
<td> </td>
</tr>
<tr>
<td> BD </td>
<td> </td>
<td> Jaime </td>
<td> </td>
</tr>
<tr>
<td> Localization </td>
<td> </td>
<td> Stephany </td>
<td> Amy </td>
</tr>
</table>

==UX Team Contact Information==
<table border="1" cellpadding="5" cellspacing="0">

<th style="background:#efefef;">Name</th>
<th style="background:#efefef;">Role</th>
<th style="background:#efefef;">Organization</th>
<th style="background:#efefef;">IRC</th>
<th style="background:#efefef;">Skype</th>
<th style="background:#efefef;">GitHub</th>
<th style="background:#efefef;">Email</th>

<tr>
<td>Jaime Chen</td>
<td>UX Manager & Design Strategy</td>
<td>Mozilla</td>
<td>jaime</td>
<td>jaimecchen</td>
<td></td>
<td>jachen@mozilla.com</td>
</tr>

<tr>
<td>Stephany Wilkes</td>
<td>Program Manager</td>
<td>Mozilla</td>
<td>swilkes</td>
<td></td>
<td>stephany</td>
<td>swilkes@mozilla.com</td>
</tr>

<tr>
<td>Rob MacDonald</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>robmac</td>
<td></td>
<td></td>
<td>rmacdonald@mozilla.com</td>
</tr>

<tr>
<td>Francis Djabri</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>fdjabri@mozilla.com</td>
</tr>

<tr>
<td>Jacqueline Savory</td>
<td>Interaction </td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>jsavory@mozilla.com</td>
</tr>

<tr>
<td>Josh Carpenter</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>jcarpenter</td>
<td>joshuacarpenter</td>
<td>jcarpenter</td>
<td>jcarpenter@mozilla.com</td>
</tr>

<tr>
<td>Maria Sandberg</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>msandberg</td>
<td>maria.sandberg.mozilla</td>
<td></td>
<td>msandberg@mozilla.com</td>
</tr>

<tr>
<td>Casey Yee</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>cyee</td>
<td>kc_yee</td>
<td>caseyyee</td>
<td>cyee@mozilla.com</td>
</tr>

<tr>
<td>Gordon Brander</td>
<td>Design Engineer</td>
<td>Mozilla</td>
<td>gordonb</td>
<td></td>
<td>gordonbrander</td>
<td>gbrander@mozilla.com</td>
</tr>

<tr>
<td>Rafael Rebolleda</td>
<td>UX Strategy</td>
<td>Telefonica</td>
<td></td>
<td>rafaelrebolleda</td>
<td></td>
<td>hello@rafaelrebolleda.com</td>
</tr>

<tr>
<td>Ayman Maat</td>
<td>Interaction</td>
<td>Telefonica</td>
<td></td>
<td>aymanmaat</td>
<td></td>
<td>aymanmaat@hotmail.com</td>
</tr>

<tr>
<td>Victoria Gerchinhoren</td>
<td>Visual</td>
<td>Telefonica</td>
<td></td>
<td>vixvixy</td>
<td></td>
<td>vpg@tid.es</td>
</tr>

<tr>
<td>Mike Tsai</td>
<td>UX Manager</td>
<td>Mozilla</td>
<td>GoodMike</td>
<td>yilungisme</td>
<td></td>
<td>mtasi@mozilla.com</td>
</tr>

<tr>
<td>Juwei Huang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>juwei</td>
<td>juwei.huang_mozilla</td>
<td></td>
<td>jhuang@mozilla.com</td>
</tr>

<tr>
<td>Carrie Wang</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>CarrieW</td>
<td>carrie75521</td>
<td>CarrieWang</td>
<td>cawang@mozilla.com</td>
</tr>

<tr>
<td>Peko Chen</td>
<td>Visual</td>
<td>Mozilla</td>
<td>pekochen</td>
<td>peko chen</td>
<td></td>
<td>pchen@mozilla.com</td>
</tr>

<tr>
<td>Helen Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>HHuang</td>
<td>zilunhuang</td>
<td></td>
<td>hhuang@mozilla.com</td>
</tr>

<tr>
<td>Fang Shih</td>
<td>Visual</td>
<td>Mozilla</td>
<td>fang</td>
<td>fangshih09</td>
<td>fshih</td>
<td>fshih@mozilla.com</td>
</tr>

<tr>
<td>Patryk Adamczyk</td>
<td>Visual</td>
<td>Mozilla</td>
<td>patryk</td>
<td>twisted_x_design</td>
<td>patrykdesign</td>
<td>padamczyk@mozilla.com</td>
</tr>

<tr>
<td>Przemek Abratowski</td>
<td>Visual</td>
<td>Mozilla</td>
<td></td>
<td></td>
<td></td>
<td>pabratowski@mozilla.com</td>
</tr>

<tr>
<td>Peter La</td>
<td>Visual</td>
<td>Mozilla</td>
<td>peterla</td>
<td>peterla.mozilla</td>
<td>PeterLa</td>
<td>pla@mozilla.com</td>
</tr>

<tr>
<td>Eric Pang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>epang</td>
<td>eric.pang7</td>
<td>epang</td>
<td>epang@mozilla.com</td>
</tr>

<tr>
<td>Pavel Ivanov</td>
<td>Visual Design Eng.</td>
<td>Mozilla</td>
<td>ivanovpavel</td>
<td>pivanov.com</td>
<td>pivanov</td>
<td>pivanov@mozilla.com</td>
</tr>

<tr>
<td>Harly Hsu</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>harly</td>
<td>harly21</td>
<td>harly21</td>
<td>hhsu@mozilla.com</td>
</tr>

<tr>
<td>Omega Feng</td>
<td>Interaction</td>
<td>Mozilla</td>
<td>Omega</td>
<td>huskyomega</td>
<td>huskyomega</td>
<td>ofeng@mozilla.com</td>
</tr>

<tr>
<td>Carol Huang</td>
<td>Visual</td>
<td>Mozilla</td>
<td>Carol</td>
<td>carol.h96</td>
<td></td>
<td>chuang@mozilla.com</td>
</tr>

</table>

Firefox OS/Haida

2013-10-28T19:01:32Z

Robmac: /* UX Roadmap/ Specs */

=Overview=
Haida is a full concept that aims to propose a radically different user experience in line with the DNA of Mozilla: https://etherpad.mozilla.org/haida-summit. The concept is wide and has been divided in three versions.

The metabug to track tech side of Haida is {{bug|918790}}

The features Haida will introduce are:
*Sheets navigation
*Browser Integration into System
*Rocketbar
*Replaceable Homescreen
*Customizable Lockscreen
*Visual Design Refresh
*Updated Systems Tray and Notifications
*Updated Homescreen
*New Content Model (bookmarks, etc)

=Haida Phase 1=
==Dev Roadmap==
This version will introduce minor user faced changes and will starts major platform plumbing. The visible changes for the user are:
*Edge gestures (Apps into sheets)
*Browser Integration into System
*E.me homescreen integration
*[MWC anticipation] Part of new Visual design should be available at the end of the period.
With "Edge Gestures", the user will learn a new way to navigate between Apps. Apps will remain the same as well as in-app navigation.
The Browser will be elevated at System level. This will avoid code duplication and will open a new land for future improvement. E.me will carry on its integration into the homescreen.

Behind the scene, major work have started / will start
*on platform side
**Datastore API [should have landed]
**Shared workers[12 weeks - should be delivered early January 2014]
***Tracking is on {{bug|916204}}
***IDB in workers [24 weeks - should be delivered early March 2014]
**Replaceable Homescreen [should be delivered early January 2014]
**Customizable Lockscreen [not expected before phase 3]
**Graphics improvement
*on gaia side
**Facebook Contacts will move to Datastore
**Bookmarks and History will move to Datastore
==== Roadmap chart phase 1====
[[File:FxOS_1_3_dsc_2013_09_23.png|1100px|center|alt text]]

==UX Roadmap/ Specs==

Below you will find the proposals for phase 1 as of Oct 10th. We will be posted updated specs as revisions are available. PLEASE NOTE THESE SPECS ARE WORK IN PROGRESS and do not reflect a committed state for FC for 1.3:

*Drawer concept (Edge gesture prerequisite): https://mozilla.box.com/s/10ab2eoqoabvx6dhh82v (updated Oct 23 - Does not render properly in box.com viewer. Please download the file to view it.)
*Edge gestures (Apps into sheets): https://mozilla.box.com/s/cxsuctcrdsm4aou5983u (updated Oct 11)
*Browser Integration into System: https://mozilla.box.com/s/s3xx046zxhxyxci971ur (updated Oct 11)
*Download Manager/ Settings Tray: https://mozilla.box.com/s/jf4drimp2k21v45jwuqd (Oct 24)
*Updated App Drawer proposal: coming soon... (oct 22)
*Visual Refresh: [meta] https://bugzilla.mozilla.org/show_bug.cgi?id=925925
**Depends on:
***[Building Blocks] Update headers BB visual design https://bugzilla.mozilla.org/show_bug.cgi?id=925929
***[Building Blocks] Update toggle switch BB visual design https://bugzilla.mozilla.org/show_bug.cgi?id=925933
***[Building Blocks] Update range slider visual design https://bugzilla.mozilla.org/show_bug.cgi?id=925945
***[Status bar] Color changing status bar https://bugzilla.mozilla.org/show_bug.cgi?id=925930

In addition, please refer to the UX team's breakdown of features, which is meant to be a matching pair to the technical roadmap above: https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0At7p7w52w1tOdC1rQzRJdHUyMWROVTZTZ1dNQ2NoLXc&usp=sharing#gid=0

=Haida Phase 2=

==Dev Roadmap==
'''''Nota bene:''' MWC will take place during this period. UI, UX and dev work may occur.''

This version will introduce the Rocketbar and a new Homescreen.
*Rocketbar (phase 1) will provide Datastores search (among user's bookmarks, history and facebook contacts) and hopefully Marketplace and E.me search
*Homescreen will take advantage of the work done for replaceable Homescreen.

Behind the scene
*Apps will be refactored to take advantage of the sheets model for in-apps navigation.
*Mail and Calendar move to Datastore use

====Roadmap chart phase 2====

[[File:FxOS_1_4_dsc_20130924.png|1100px|center|alt text]]

==UX Roadmap/ Specs==

Working specifications for phase 2 to date (again, work in progress as of Oct 10th):
* Rocket Bar: https://mozilla.box.com/s/oiahvxjubsd7h6kgtkc2
* Updated Content Model: coming soon...

=Haida Phase 3=
This version will activate the full Haida concept.
*Boosted Rocketbar
**Search into e.me and Marketplace
**Search among exposed Datastores
**Opensearch
*In-apps navigation with sheets
*Replaceable Homescreen
*Customizable Lockscreen
*New UI

====Roadmap chart phase 3====

[[File:FxOS_1_5_dsc_20130924.png|1100px|center|alt text]]

Firefox OS/Haida

2013-10-24T16:33:32Z

Robmac: /* UX Roadmap/ Specs */

=Overview=
Haida is a full concept that aims to propose a radically different user experience in line with the DNA of Mozilla: https://etherpad.mozilla.org/haida-summit. The concept is wide and has been divided in three versions.

The metabug to track tech side of Haida is {{bug|918790}}

The features Haida will introduce are:
*Sheets navigation
*Browser Integration into System
*Rocketbar
*Replaceable Homescreen
*Customizable Lockscreen
*Visual Design Refresh
*Updated Systems Tray and Notifications
*Updated Homescreen
*New Content Model (bookmarks, etc)

=Haida Phase 1=
==Dev Roadmap==
This version will introduce minor user faced changes and will starts major platform plumbing. The visible changes for the user are:
*Edge gestures (Apps into sheets)
*Browser Integration into System
*E.me homescreen integration
*[MWC anticipation] Part of new Visual design should be available at the end of the period.
With "Edge Gestures", the user will learn a new way to navigate between Apps. Apps will remain the same as well as in-app navigation.
The Browser will be elevated at System level. This will avoid code duplication and will open a new land for future improvement. E.me will carry on its integration into the homescreen.

Behind the scene, major work have started / will start
*on platform side
**Datastore API [should have landed]
**Shared workers[12 weeks - should be delivered early January 2014]
***Tracking is on {{bug|916204}}
***IDB in workers [24 weeks - should be delivered early March 2014]
**Replaceable Homescreen [should be delivered early January 2014]
**Customizable Lockscreen [not expected before phase 3]
**Graphics improvement
*on gaia side
**Facebook Contacts will move to Datastore
**Bookmarks and History will move to Datastore
==== Roadmap chart phase 1====
[[File:FxOS_1_3_dsc_2013_09_23.png|1100px|center|alt text]]

==UX Roadmap/ Specs==

Below you will find the proposals for phase 1 as of Oct 10th. We will be posted updated specs as revisions are available. PLEASE NOTE THESE SPECS ARE WORK IN PROGRESS and do not reflect a committed state for FC for 1.3:

*Drawer concept (Edge gesture prerequisite): https://mozilla.box.com/s/dlvjpadeu233ou7nyb94 (updated Oct 23)
*Edge gestures (Apps into sheets): https://mozilla.box.com/s/cxsuctcrdsm4aou5983u (updated Oct 11)
*Browser Integration into System: https://mozilla.box.com/s/s3xx046zxhxyxci971ur (updated Oct 11)
*Download Manager/ Settings Tray: https://mozilla.box.com/s/6odbxmjvbquihp347yno (Oct 22)
*Updated App Drawer proposal: coming soon... (oct 22)
*Visual Refresh: [meta] https://bugzilla.mozilla.org/show_bug.cgi?id=925925
**Depends on:
***[Building Blocks] Update headers BB visual design https://bugzilla.mozilla.org/show_bug.cgi?id=925929
***[Building Blocks] Update toggle switch BB visual design https://bugzilla.mozilla.org/show_bug.cgi?id=925933
***[Building Blocks] Update range slider visual design https://bugzilla.mozilla.org/show_bug.cgi?id=925945
***[Status bar] Color changing status bar https://bugzilla.mozilla.org/show_bug.cgi?id=925930

In addition, please refer to the UX team's breakdown of features, which is meant to be a matching pair to the technical roadmap above: https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0At7p7w52w1tOdC1rQzRJdHUyMWROVTZTZ1dNQ2NoLXc&usp=sharing#gid=0

=Haida Phase 2=

==Dev Roadmap==
'''''Nota bene:''' MWC will take place during this period. UI, UX and dev work may occur.''

This version will introduce the Rocketbar and a new Homescreen.
*Rocketbar (phase 1) will provide Datastores search (among user's bookmarks, history and facebook contacts) and hopefully Marketplace and E.me search
*Homescreen will take advantage of the work done for replaceable Homescreen.

Behind the scene
*Apps will be refactored to take advantage of the sheets model for in-apps navigation.
*Mail and Calendar move to Datastore use

====Roadmap chart phase 2====

[[File:FxOS_1_4_dsc_20130924.png|1100px|center|alt text]]

==UX Roadmap/ Specs==

Working specifications for phase 2 to date (again, work in progress as of Oct 10th):
* Rocket Bar: https://mozilla.box.com/s/oiahvxjubsd7h6kgtkc2
* Updated Content Model: coming soon...

=Haida Phase 3=
This version will activate the full Haida concept.
*Boosted Rocketbar
**Search into e.me and Marketplace
**Search among exposed Datastores
**Opensearch
*In-apps navigation with sheets
*Replaceable Homescreen
*Customizable Lockscreen
*New UI

====Roadmap chart phase 3====

[[File:FxOS_1_5_dsc_20130924.png|1100px|center|alt text]]

Gaia/UXTeam

2013-03-07T00:18:20Z

Robmac:

<h2> Gaia UX Team </h2>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th style="background:#efefef;"> Name
</th>
<th style="background:#efefef;"> Role
</th>
<th style="background:#efefef;"> Organization
</th>
<th style="background:#efefef;"> IRC
</th>
<th style="background:#efefef;"> Skype
</th>
<th style="background:#efefef;"> GitHub
</th>
<th style="background:#efefef;"> Email
</th></tr>
<tr>
<td> Arun Balachandran Ganesan
</td>
<td> Interaction
</td>
<td> Mozilla
</td>
<td> abc
</td>
<td> arunbganesan4
</td>
<td>
</td>
<td> abc@mozilla.com
</td></tr>
<tr>
<td> Ayman Maat
</td>
<td> Interaction
</td>
<td> Telefonica
</td>
<td>
</td>
<td> aymanmaat
</td>
<td>
</td>
<td> aymanmaat@hotmail.com
</td></tr>
<tr>
<td> Casey Yee
</td>
<td> Design Engineer
</td>
<td> Mozilla
</td>
<td> cyee
</td>
<td> kc_yee
</td>
<td> caseyyee
</td>
<td> cyee@mozilla.com
</td></tr>
<tr>
<td> Carlo Bernoulli
</td>
<td> Interaction
</td>
<td> Telefonica
</td>
<td>
</td>
<td> cybernoulli
</td>
<td>
</td>
<td> carlo@designzeug.net
</td></tr>
<tr>
<td> Dan Gavie
</td>
<td> Interaction
</td>
<td> Fjord
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td> dan.gavie@fjord.es
</td></tr>
<tr>
<td> Erik Ziegler
</td>
<td> Visual
</td>
<td> Telefonica
</td>
<td>
</td>
<td> erikziegler_skype
</td>
<td>
</td>
<td> erik.ziegler@fjord.es
</td></tr>
<tr>
<td> Josh Carpenter
</td>
<td> Interaction
</td>
<td> Mozilla
</td>
<td> jcarpenter
</td>
<td> joshuacarpenter
</td>
<td> jcarpenter
</td>
<td> jcarpenter@mozilla.com
</td></tr>
<tr>
<td> Larissa Co
</td>
<td> Interaction
</td>
<td> Mozilla
</td>
<td> lco
</td>
<td> larissa.co
</td>
<td> lco
</td>
<td> lco@mozilla.com
</td></tr>
<tr>
<td> Marco Cimatti
</td>
<td> Interaction
</td>
<td> Telefonica
</td>
<td>
</td>
<td> mcimatti
</td>
<td>
</td>
<td> marcoc@tid.es
</td></tr>
<tr>
<td> Maria Sandberg
</td>
<td> Interaction
</td>
<td> Mozilla
</td>
<td> msandberg
</td>
<td> maria.sandberg.mozilla
</td>
<td>
</td>
<td> msandberg@mozilla.com
</td></tr>
<tr>
<td> Patryk Adamczyk
</td>
<td> Visual
</td>
<td> Mozilla
</td>
<td> patryk
</td>
<td> twisted_x_design
</td>
<td> patrykdesign
</td>
<td> padamczyk@mozilla.com
</td></tr>
<tr>
<td> Pavel Ivanov
</td>
<td> Visual Implementation
</td>
<td> Mozilla
</td>
<td> ivanovpavel
</td>
<td> pivanov.com
</td>
<td> pivanov
</td>
<td> pivanov@mozilla.com
</td></tr>

<tr>
<td> Peter La
</td>
<td> Visual
</td>
<td> Mozilla
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td> pla@mozilla.com
</td></tr>
<tr>
<td> Rafael Rebolleda
</td>
<td> Interaction
</td>
<td> Telefonica
</td>
<td>
</td>
<td> rafaelrebolleda
</td>
<td>
</td>
<td> hello@rafaelrebolleda.com
</td></tr>
<tr>
<td> Ricardo Marquez
</td>
<td> Interaction
</td>
<td> Telefonica
</td>
<td>
</td>
<td> marquez.ricardo
</td>
<td>
</td>
<td> marquez@tid.es
</td></tr>

<tr>
<td> Rob MacDonald
</td>
<td> Interaction
</td>
<td> Mozilla
</td>
<td>robmac
</td>
<td>
</td>
<td>
</td>
<td> rmacdonald@mozilla.com
</td></tr>

<tr>
<td> Sawyer Hollenshead
</td>
<td> Visual
</td>
<td> Mozilla
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td> shollenshead@mozilla.com
</td></tr>
<tr>
<td> Sergio Villa
</td>
<td> Visual
</td>
<td> Telefonica
</td>
<td>
</td>
<td> srg.vila
</td>
<td>
</td>
<td> sergiov@tid.es
</td></tr>
<tr>
<td> Silvia Latzer
</td>
<td> Visual
</td>
<td> Telefonica
</td>
<td>
</td>
<td> silvia0108
</td>
<td>
</td>
<td> silvia@designgirl.at
</td></tr>
<tr>
<td> Steve Pettengell
</td>
<td> Visual
</td>
<td> Telefonica
</td>
<td>
</td>
<td> authoritaire
</td>
<td>
</td>
<td> steve@pettengell.com
</td></tr>
<tr>
<td> Victoria Gerchinhoren
</td>
<td> Visual
</td>
<td> Telefonica
</td>
<td>
</td>
<td> vixvixy
</td>
<td>
</td>
<td> vpg@tid.es
</td></tr>
<tr>
<td> Jaime Chen
</td>
<td> UX Strategy
</td>
<td> Mozilla
</td>
<td> jaime
</td>
<td> jaimecchen
</td>
<td>
</td>
<td> jachen@mozilla.com
</td></tr>
</table>

Gaia/Design/BuildingBlocks

2013-02-06T22:13:41Z

Robmac: fixed broken link to media icons

===Common Controls===

* [https://www.dropbox.com/s/23uzpn655j1p21b/CommonControls_130201.psd Source PSD in Dropbox] [Contains PSD of all controls in one file]

{|
|[[Image:CommonControls 121005.jpg|Common Controls|thumbnail|left|400px]]
|}

* [https://www.dropbox.com/s/wiwvwqqtgib2s0x/IconsMedia_20130122.psd Media Icons] [Contains PSD of all media icons in one file]

===Overlay Menus===

====Action Menu====
'''Used for:'''

* Presenting a list of actions related to the App content.

'''Characteristics:'''

* Are opened from buttons within App content. These buttons are often inside Toolbars (eg: Browser's "Share" button).
* Contain 1 or more items.
* Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
* Title strings are optional.
* Are closed by:
** Selecting one of the actions.
** Pressing "Cancel" button (verbiage TBD)

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/iuqxa1crzwmygm1/OWD_00_ActionMenu.psd Source PSD in Dropbox]
{|
|[[Image:OWD 00 ActionMenu.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ActionMenu_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_ActionMenu_2.jpg|Interaction|thumbnail|left]]
|}

==== Object Menu ====

'''Used for:'''

* Directly manipulating objects without having to open them and navigate deeper into the hierarchy. eg:
** Deleting a photo by selecting it's thumbnail, instead of having to open the full image.
** Flag an email by selecting it's preview, instead of having to open the full email.
** Call a Contact by selecting their name, instead of having to open their detailed information.

'''Characteristics:'''

* Accessed by user press-and-hold on selectable object (eg: list row, phone number, URL, etc)
* Menu appears after X seconds.
* Contain 1 or more items
* Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
* Title strings are not included (unlike Action Menus)
* Are closed by pressing "Cancel" button.
* Reuse the Action Menu interface.
* Future (v2):
** Menu will explicitly tie itself to selected element by opening immediately above or below, shifting to fit into the available screen real estate.
** Selected object element will be highlighted (e.g.: darken surrounding content?)
** Explicit "Cancel" input may be removed in favor of pressing on empty screen real estate to close.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/uzw0ftpqcn6fc7w/OWD_00_ObjectMenu.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 ObjectMenu.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ObjectMenu_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_ActionMenu_2.jpg|Interaction|thumbnail|left]]
|}

== Banner ==

'''Used for:'''

* Relay information to the user. eg:
** Confirm a user action
** Alert to a system event

'''Characteristics:'''

* Most common used after Multi-Select edit, to confirm user action, and optional provide "Undo" input. eg:
** Deleting multiple photos from (Gallery)
** Deleting multiple emails (Email)
** Moving multiple emails (Email)
* Are positioned at the bottom of screen, covering underlying content.
* Appear for X seconds then automatically disappear.
* Can include an input, eg: "Undo" (optional)
* Can include an image (optional)
* Can either be part of an App (eg: a "photos deleted" Banner is associated with the Gallery app) or the System (eg: a "Low Battery" alert).
* Ideally would be designed to prevent two Banner appearing simultaneously (eg: If two Banner appear at same time, newer replaces older).

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/status.css Link to CSS in Github]
* [https://www.dropbox.com/s/1l0vsabud5cv224/OWD_00_Banner.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 00 Banner.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_Banner_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_Banner_2.jpg|Interaction|thumbnail|left]]
|}

==Buttons==

'''Used for:'''

* Buttons allow users to perform an action when tapped. The action is communicated using text and/or an icon.

'''Characteristics:'''

* Have two components: visual target and hit target. The hit target is always larger to assist users in hitting the target.
* States:
** Normal
** Pressed
** Disabled
* Types:
** <b>Action buttons</b> - used when there are only a few actions and a list is not required. The main action button uses a highlight colour.
** <b>List buttons</b> - used when displaying a list of actions or to trigger the display of a value selector
** <b>Input field buttons</b> - used to perform actions with input fields
** <b>Special / custom buttons</b> - used for specific actions including recording, dialing, and others.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/buttons.css Link to CSS in Github ]
* [https://www.dropbox.com/s/5ae1lmbai91e9js/OWD_Buttons.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 01 Buttons.jpg|Visuals|thumbnail|left|600px]]
|}

== Confirm ==

'''Used for:'''

* Prompts user to take action. eg:
** Confirm a deletion
** Respond to a system event (eg: restart device after a SIM card swap)
** Grant or deny a permission

'''Characteristics:'''

* Modal: occupies the screen and requires user input to clear.
* Consists: of
** Title
** Body (optional)
** Icon (optional)
** Input: Confirmation.
*** Can customize label string
** Input: Cancel (optional).
*** Can customize label string

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/confirm.css Link to CSS in Github ]
* [https://www.dropbox.com/s/6jzbsazcpp53n0t/OWD_00_Confirm.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Confirm.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_Prompt_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_Prompt_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_Prompt_3.jpg|Interaction|thumbnail|left]]
|}

== Drawer ==

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/drawer/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/poucmy9r9l9eluk/OWD_00_Drawer.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Drawer.jpg|Visuals|thumbnail|left|600px]]
|}

== Filters ==

'''Used for:'''

* Secondary Navigation
** Filters can provide a second set of tabs, where tabs are already present.
* Data Filter
** Filters can be used to enable the user to view a single set of data in a different lens.
** eg: in Calendar, the filters they allow user to view time in different scales, from Day to Month).

'''Characteristics:'''

* Horizontal sequence of buttons.
* Only one button is Focused at a time.
* Best practice is to place filters within Toolbars, so they do not flow with the content.
* Left, Middle and Right buttons can be styled uniquely.
* Width: variable, depending on number of filters required within a single set (see Numbering). Should establish a maximum width, however.
* Numbering: minimum 2, maximum 5.
* Can be populated with icons or text, but not both. Because of the smaller height of a filter (versus a tab), text is the best practice.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/filters.html Link to CSS in Github]
* [https://www.dropbox.com/s/g64iolxhrm7d8bg/OWD_01_Filters.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 01 Filters.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Filters.png|Interaction|thumbnail|left]]
|}

==Headers==

'''Used for:'''

* Labeling the active view.
* Providing top-level navigation and inputs for the active view.

'''Characteristics:'''

* Horizontal full width bar that appears at top of screen in most apps
* Floats above content, with option to flow with content in some rare cases (eg: Browser).
* Heading text provides name of current view.
* Optional: heading text string can include text (eg: current unread email count)
* Present in most applications

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/headers.css Link to "Headers" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/edit_mode.css Link to "Edit Mode" CSS in Github]
* [https://www.dropbox.com/s/0ro1rb8tg41ynuv/OWD_03_Headers.psd Link to Source PSD in Dropbox ]

{|
|[[Image:OWD 03 Headers.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Header_1.png|Interaction|thumbnail|left]]
|}

==Lists==

'''Used for:'''

* Displaying an enumeration of a set of items

'''Characteristics:'''

* Varying heights (1—3 rows)
* Varying contents (from text only to image + text + button)
* Are composed of rows, and section headers
* Types:
** Action row (click anywhere to trigger input)
** Status indicator row
** Button row
** Link row

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/lists/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/bz314lc8a0bltla/OWD_01_Lists.psd Link to Source PSD in Dropbox]

{|
|[[Image:OWD 01 Lists.jpg|Visuals|thumbnail|left|600px]]
|}

==Progress & Activity Indicators==

'''Used for:'''

* Providing user with visual feedback that a process is active.

'''Characteristics:'''

* May include an animated visual element, a text label, or some combination of the two. The progress and activity indicators may be used in modal windows or Inline, together with content or next to it.

'''Modal:''' They're used when the phone cannot be interrupted while loading data.
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded.
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
* '''Spinner:''' Used when data is being sent.
'''Non-Modal:''' Displays a looping animation, communicating to the user that the process is active.
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded. Note that the activiy bas is background sensitive and there is an option for light screens and another for the dark ones.
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
* '''Inline Spinner:''' Used when data is being sent.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/progress_activity/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/2qotj7s9plhnqa0/01_OWD_Progress_Activity.psd Link to Source PSD in Dropbox]

{|
|[[Image:11_OWD_Progress_Activity_Components.jpg|Visual Components|thumbnail|left|600px]]
|}
{|
|[[Image:09_OWD_Progress_Modal_Sample.jpg|Visuals - Modal|thumbnail|left|600px]]
|}
{|
|[[Image:10_OWD_Progress_Inline_Sample.jpg|Visuals - Inline|thumbnail|left|600px]]
|}

==Scrolling==

'''Used for:'''

* Vertically slide text, images and/or video across the device's display.

'''Characteristics:'''

* Types:
** Scrollbar
** Index scrolling

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/000zmogs44e6cwf/OWD_00_Scroll_Index.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Scroll Index.jpg|Visuals|thumbnail|left|600px]]
|}

==Seek Bars==

'''Used for:'''

* Scroll through content (i.e. a song or video)

'''Characteristics:'''

* Consists of track and knob (button w/ normal and pressed states)
* Optional images for left and right values
* Can be horizontal or vertical

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/mdp3oxxw8j0qeo2/OWD_00_SeekBars.psd Link to Source PSD in Github]

{|
|[[Image:OWD 00 SeekBars.jpg|Visuals|thumbnail|left|600px]]
|}

==Switches==

'''Used for:'''

* Activates/Deactivates a given item. It's also used to select an element within a list.

'''Characteristics:'''

* Presents two mutually exclusive choices or states (used in table views only).
* Types:
** On/Off toggle
** Radio
** Checkbox

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/switches.css Link to CSS in Github]
* [https://www.dropbox.com/s/00t8x2905jl7vpu/OWD_00_Switches.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Switches.jpg|Visuals|thumbnail|left|600px]]
|}

==Tabs==

'''Used for:'''

* Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views.

'''Characteristics:'''

* Fill the full horizontal width.
* Number between 3—5.
* Positioned at bottom of screen.
* Can contain various elements (buttons, filters, indicators, etc).
* Versions:
** Text + icon
** Icon-only

'''States:'''

* Normal
* Pressed
* Active
* Disabled

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/filters.html Link to CSS in Github]
* [https://www.dropbox.com/s/9l6g3mb0870m64o/OWD_02_Tabs.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 03 Tabs.jpg |Visuals|thumbnail|left|600px]]
|}

==Tool Bars==

'''Used for:'''

* Contains actions, indicators, and navigation associated with the current view. eg:
** Delete selected items (button)
** Refresh content (button)
** Enter “Edit” mode (filter)
** View “Favorite” contacts only (filter)

'''Characteristics:'''

* 100% width. Fixed height.
* Does not scroll with content. Floats above.
* Should be positioned at the bottom of the screen unless Tabs are also present. In that case, should be positioned at the top.
* Can contain various elements (buttons, filters, progress/activity indicators, etc).

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/toolbars/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/r68hc5nfu9nqava/OWD_00_Toolbars.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Toolbars.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Toolbars_1.png|Interaction|thumbnail|left]] || [[Image:Gaia_BB_Toolbars_2.png|Interaction|thumbnail|left]]
|}

== Value Selector==

'''Used for:'''

* Provides a way for the user to select one of more values, usually from a Form interface.
* Most commonly associated with forms (eg: Setting up a Calendar event).

'''Characteristics:'''

* Can include Title (optional)
* Types:
** Date
** Time
** Single-select list
** Multiple-select list

* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/date_picker.css Link to "Date Picker" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/time_picker.css Link to "Time Picker" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/value_selector.css Link to "Single/Multiple" CSS in Github]
* [https://www.dropbox.com/s/26v3043xs2hhzou/OWD_00_ValueSelector.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 ValueSelector.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ValueSel_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_ValueSel_3.jpg|Interaction|thumbnail|left]] || [[Image:BB_ValueSel_1.jpg|Interaction|thumbnail|left]]
|}

== Input Areas ==

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/input_areas.css Links to CSS in Github]
* [https://www.dropbox.com/s/9pcmukgbwsmdmo3/OWD_00_InputAreas.psd Link to Source PSD in Dropbox ]

{|
|[[Image:OWD 00 InputAreas.jpg|Visuals|thumbnail|left|600px]]
|}

Gaia/Design/BuildingBlocks

2013-02-06T22:09:10Z

Robmac: fixed broken link to common controls.

===Common Controls===

* [https://www.dropbox.com/s/23uzpn655j1p21b/CommonControls_130201.psd Source PSD in Dropbox] [Contains PSD of all controls in one file]

{|
|[[Image:CommonControls 121005.jpg|Common Controls|thumbnail|left|400px]]
|}

* [https://www.dropbox.com/s/eaidrw8kjw89mt1/IconsMedia_20130107.psd Media Icons] [Contains PSD of all media icons in one file]

===Overlay Menus===

====Action Menu====
'''Used for:'''

* Presenting a list of actions related to the App content.

'''Characteristics:'''

* Are opened from buttons within App content. These buttons are often inside Toolbars (eg: Browser's "Share" button).
* Contain 1 or more items.
* Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
* Title strings are optional.
* Are closed by:
** Selecting one of the actions.
** Pressing "Cancel" button (verbiage TBD)

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/iuqxa1crzwmygm1/OWD_00_ActionMenu.psd Source PSD in Dropbox]
{|
|[[Image:OWD 00 ActionMenu.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ActionMenu_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_ActionMenu_2.jpg|Interaction|thumbnail|left]]
|}

==== Object Menu ====

'''Used for:'''

* Directly manipulating objects without having to open them and navigate deeper into the hierarchy. eg:
** Deleting a photo by selecting it's thumbnail, instead of having to open the full image.
** Flag an email by selecting it's preview, instead of having to open the full email.
** Call a Contact by selecting their name, instead of having to open their detailed information.

'''Characteristics:'''

* Accessed by user press-and-hold on selectable object (eg: list row, phone number, URL, etc)
* Menu appears after X seconds.
* Contain 1 or more items
* Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
* Title strings are not included (unlike Action Menus)
* Are closed by pressing "Cancel" button.
* Reuse the Action Menu interface.
* Future (v2):
** Menu will explicitly tie itself to selected element by opening immediately above or below, shifting to fit into the available screen real estate.
** Selected object element will be highlighted (e.g.: darken surrounding content?)
** Explicit "Cancel" input may be removed in favor of pressing on empty screen real estate to close.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/uzw0ftpqcn6fc7w/OWD_00_ObjectMenu.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 ObjectMenu.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ObjectMenu_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_ActionMenu_2.jpg|Interaction|thumbnail|left]]
|}

== Banner ==

'''Used for:'''

* Relay information to the user. eg:
** Confirm a user action
** Alert to a system event

'''Characteristics:'''

* Most common used after Multi-Select edit, to confirm user action, and optional provide "Undo" input. eg:
** Deleting multiple photos from (Gallery)
** Deleting multiple emails (Email)
** Moving multiple emails (Email)
* Are positioned at the bottom of screen, covering underlying content.
* Appear for X seconds then automatically disappear.
* Can include an input, eg: "Undo" (optional)
* Can include an image (optional)
* Can either be part of an App (eg: a "photos deleted" Banner is associated with the Gallery app) or the System (eg: a "Low Battery" alert).
* Ideally would be designed to prevent two Banner appearing simultaneously (eg: If two Banner appear at same time, newer replaces older).

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/status.css Link to CSS in Github]
* [https://www.dropbox.com/s/1l0vsabud5cv224/OWD_00_Banner.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 00 Banner.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_Banner_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_Banner_2.jpg|Interaction|thumbnail|left]]
|}

==Buttons==

'''Used for:'''

* Buttons allow users to perform an action when tapped. The action is communicated using text and/or an icon.

'''Characteristics:'''

* Have two components: visual target and hit target. The hit target is always larger to assist users in hitting the target.
* States:
** Normal
** Pressed
** Disabled
* Types:
** <b>Action buttons</b> - used when there are only a few actions and a list is not required. The main action button uses a highlight colour.
** <b>List buttons</b> - used when displaying a list of actions or to trigger the display of a value selector
** <b>Input field buttons</b> - used to perform actions with input fields
** <b>Special / custom buttons</b> - used for specific actions including recording, dialing, and others.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/buttons.css Link to CSS in Github ]
* [https://www.dropbox.com/s/5ae1lmbai91e9js/OWD_Buttons.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 01 Buttons.jpg|Visuals|thumbnail|left|600px]]
|}

== Confirm ==

'''Used for:'''

* Prompts user to take action. eg:
** Confirm a deletion
** Respond to a system event (eg: restart device after a SIM card swap)
** Grant or deny a permission

'''Characteristics:'''

* Modal: occupies the screen and requires user input to clear.
* Consists: of
** Title
** Body (optional)
** Icon (optional)
** Input: Confirmation.
*** Can customize label string
** Input: Cancel (optional).
*** Can customize label string

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/confirm.css Link to CSS in Github ]
* [https://www.dropbox.com/s/6jzbsazcpp53n0t/OWD_00_Confirm.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Confirm.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_Prompt_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_Prompt_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_Prompt_3.jpg|Interaction|thumbnail|left]]
|}

== Drawer ==

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/drawer/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/poucmy9r9l9eluk/OWD_00_Drawer.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Drawer.jpg|Visuals|thumbnail|left|600px]]
|}

== Filters ==

'''Used for:'''

* Secondary Navigation
** Filters can provide a second set of tabs, where tabs are already present.
* Data Filter
** Filters can be used to enable the user to view a single set of data in a different lens.
** eg: in Calendar, the filters they allow user to view time in different scales, from Day to Month).

'''Characteristics:'''

* Horizontal sequence of buttons.
* Only one button is Focused at a time.
* Best practice is to place filters within Toolbars, so they do not flow with the content.
* Left, Middle and Right buttons can be styled uniquely.
* Width: variable, depending on number of filters required within a single set (see Numbering). Should establish a maximum width, however.
* Numbering: minimum 2, maximum 5.
* Can be populated with icons or text, but not both. Because of the smaller height of a filter (versus a tab), text is the best practice.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/filters.html Link to CSS in Github]
* [https://www.dropbox.com/s/g64iolxhrm7d8bg/OWD_01_Filters.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 01 Filters.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Filters.png|Interaction|thumbnail|left]]
|}

==Headers==

'''Used for:'''

* Labeling the active view.
* Providing top-level navigation and inputs for the active view.

'''Characteristics:'''

* Horizontal full width bar that appears at top of screen in most apps
* Floats above content, with option to flow with content in some rare cases (eg: Browser).
* Heading text provides name of current view.
* Optional: heading text string can include text (eg: current unread email count)
* Present in most applications

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/headers.css Link to "Headers" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/edit_mode.css Link to "Edit Mode" CSS in Github]
* [https://www.dropbox.com/s/0ro1rb8tg41ynuv/OWD_03_Headers.psd Link to Source PSD in Dropbox ]

{|
|[[Image:OWD 03 Headers.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Header_1.png|Interaction|thumbnail|left]]
|}

==Lists==

'''Used for:'''

* Displaying an enumeration of a set of items

'''Characteristics:'''

* Varying heights (1—3 rows)
* Varying contents (from text only to image + text + button)
* Are composed of rows, and section headers
* Types:
** Action row (click anywhere to trigger input)
** Status indicator row
** Button row
** Link row

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/lists/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/bz314lc8a0bltla/OWD_01_Lists.psd Link to Source PSD in Dropbox]

{|
|[[Image:OWD 01 Lists.jpg|Visuals|thumbnail|left|600px]]
|}

==Progress & Activity Indicators==

'''Used for:'''

* Providing user with visual feedback that a process is active.

'''Characteristics:'''

* May include an animated visual element, a text label, or some combination of the two. The progress and activity indicators may be used in modal windows or Inline, together with content or next to it.

'''Modal:''' They're used when the phone cannot be interrupted while loading data.
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded.
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
* '''Spinner:''' Used when data is being sent.
'''Non-Modal:''' Displays a looping animation, communicating to the user that the process is active.
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded. Note that the activiy bas is background sensitive and there is an option for light screens and another for the dark ones.
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
* '''Inline Spinner:''' Used when data is being sent.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/progress_activity/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/2qotj7s9plhnqa0/01_OWD_Progress_Activity.psd Link to Source PSD in Dropbox]

{|
|[[Image:11_OWD_Progress_Activity_Components.jpg|Visual Components|thumbnail|left|600px]]
|}
{|
|[[Image:09_OWD_Progress_Modal_Sample.jpg|Visuals - Modal|thumbnail|left|600px]]
|}
{|
|[[Image:10_OWD_Progress_Inline_Sample.jpg|Visuals - Inline|thumbnail|left|600px]]
|}

==Scrolling==

'''Used for:'''

* Vertically slide text, images and/or video across the device's display.

'''Characteristics:'''

* Types:
** Scrollbar
** Index scrolling

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/000zmogs44e6cwf/OWD_00_Scroll_Index.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Scroll Index.jpg|Visuals|thumbnail|left|600px]]
|}

==Seek Bars==

'''Used for:'''

* Scroll through content (i.e. a song or video)

'''Characteristics:'''

* Consists of track and knob (button w/ normal and pressed states)
* Optional images for left and right values
* Can be horizontal or vertical

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/mdp3oxxw8j0qeo2/OWD_00_SeekBars.psd Link to Source PSD in Github]

{|
|[[Image:OWD 00 SeekBars.jpg|Visuals|thumbnail|left|600px]]
|}

==Switches==

'''Used for:'''

* Activates/Deactivates a given item. It's also used to select an element within a list.

'''Characteristics:'''

* Presents two mutually exclusive choices or states (used in table views only).
* Types:
** On/Off toggle
** Radio
** Checkbox

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/switches.css Link to CSS in Github]
* [https://www.dropbox.com/s/00t8x2905jl7vpu/OWD_00_Switches.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Switches.jpg|Visuals|thumbnail|left|600px]]
|}

==Tabs==

'''Used for:'''

* Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views.

'''Characteristics:'''

* Fill the full horizontal width.
* Number between 3—5.
* Positioned at bottom of screen.
* Can contain various elements (buttons, filters, indicators, etc).
* Versions:
** Text + icon
** Icon-only

'''States:'''

* Normal
* Pressed
* Active
* Disabled

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/filters.html Link to CSS in Github]
* [https://www.dropbox.com/s/9l6g3mb0870m64o/OWD_02_Tabs.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 03 Tabs.jpg |Visuals|thumbnail|left|600px]]
|}

==Tool Bars==

'''Used for:'''

* Contains actions, indicators, and navigation associated with the current view. eg:
** Delete selected items (button)
** Refresh content (button)
** Enter “Edit” mode (filter)
** View “Favorite” contacts only (filter)

'''Characteristics:'''

* 100% width. Fixed height.
* Does not scroll with content. Floats above.
* Should be positioned at the bottom of the screen unless Tabs are also present. In that case, should be positioned at the top.
* Can contain various elements (buttons, filters, progress/activity indicators, etc).

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/toolbars/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/r68hc5nfu9nqava/OWD_00_Toolbars.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Toolbars.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Toolbars_1.png|Interaction|thumbnail|left]] || [[Image:Gaia_BB_Toolbars_2.png|Interaction|thumbnail|left]]
|}

== Value Selector==

'''Used for:'''

* Provides a way for the user to select one of more values, usually from a Form interface.
* Most commonly associated with forms (eg: Setting up a Calendar event).

'''Characteristics:'''

* Can include Title (optional)
* Types:
** Date
** Time
** Single-select list
** Multiple-select list

* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/date_picker.css Link to "Date Picker" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/time_picker.css Link to "Time Picker" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/value_selector.css Link to "Single/Multiple" CSS in Github]
* [https://www.dropbox.com/s/26v3043xs2hhzou/OWD_00_ValueSelector.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 ValueSelector.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ValueSel_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_ValueSel_3.jpg|Interaction|thumbnail|left]] || [[Image:BB_ValueSel_1.jpg|Interaction|thumbnail|left]]
|}

== Input Areas ==

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/input_areas.css Links to CSS in Github]
* [https://www.dropbox.com/s/9pcmukgbwsmdmo3/OWD_00_InputAreas.psd Link to Source PSD in Dropbox ]

{|
|[[Image:OWD 00 InputAreas.jpg|Visuals|thumbnail|left|600px]]
|}

Gaia/Design/Patterns

2013-01-24T23:40:36Z

Robmac: Fixed minor formatting issues

Design Patterns are core sets of interactions that are used repeatedly throughout the UX.

== Drawer ==

'''Used for:'''

* Providing access to top level navigation links that may be too numerous for a Tabs pattern, or user-generated, (eg: Tabs, user accounts etc).

'''Characteristics:'''

* Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser).
* Is also a great place to tuck secondary or power-user features, such as links to app Settings.
* Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser).
* Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser).
* Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel.
* Traditionally visually depicted as being one layer below the primary interface, and sliding in from the side via animation.
* Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible.

{|
|[[Image:Gaia_BB_Drawer.png|thumb|left|650px|Drawer 1]]
|}

== Entry Sheet ==

'''Used for:'''

* Editing a single setting that:
* Contains a large number of possible values. eg: Text entry forms, long lists,
* [or] Requires multipe inputs or selections eg: WiFi network connection process.

'''Characteristics:'''

* Occupies the full screen
* User should be given impression that they are on the same page, and that the Entry Sheet is merely a temporary modal overlay. They have not navigated one level deeper in the hierarchy.
** To reinforce this...
** Valid animations could include slide in from top, from bottom, cross fade, scale in, etc.
** “Cancel” buttons are used instead of “Back”.
* Every element within the Entry Sheet must be related to adjusting the single setting; Settings Panels should not contain links to other pages or lists.
* Closing:
** “Cancel”
** Varies: “Done”, “Join”, “Send”, etc.
{|
|[[Image:Gaia_BB_DialogueEntrySheets.png|thumb|left|650px|Dialogue: Entry Sheet 1]]
|}

{|
|[[Image:Gaia_BB_ContactsBrowser_1.png|thumb|left|650px|Contacts Browser 1]]
|}

== Input Areas ==

{|
|[[Image:gaia_bb-inputareas-10.png|thumb|left|650px|Input Areas]]
|}

==Multi-Select==

'''Used for:'''

* Enables user to perform “bulk actions”, such as deleting 6 emails from a roll of 20, or selecting 3 photos to email to a friend.
* Is used on lists of items (eg: vertical list of emails in Inbox, or grid of photos in Gallery)

'''Characteristics:'''

* Is entered by...
* Is a “mode”, not a section. Animation and visual design should give user the impression that they are in a temporary mode within the original view, not that there are in a differerent view.
Can be called “Edit” or “Select” mode, depending on the use case.
Header text should indicate action being taken (eg: “Select photos”). Once an item has been selected, text should update to “X selected”, where X = quantity of selected items.
* Closes once the user:
** ...completes one of the available actions (eg: “Delete”).
** ...or taps “Cancel” button.
* Closing resturns user to the previous view.
* If user has taken action (eg: delete 3 message threads), a Toast should appear, confirming the action.

'''States'''

* Normal
* Focused
* Disabled

{|
|[[Image:Gaia_BB_MultiSelect_1.png|thumb|left|650px|MultiSelect 1]]
|}

== Search ==

'''Used for:'''

* An app can determine which content types are shown in the search results, whether they be within the app itself or online. Search can also be used to filter long lists, such as contacts (shown below).

'''Characteristics:'''

* The virtual keyboard is activated when the user taps on the search input box.
* Tapping on the (x) icon to the right of the search term clears the input box but retains the virtual keyboard
* When using search to filter lists, the search input box is typically at the top of the list and scrolls with the list items.

{|
|[[Image:Gaia_search1.png|thumb|left|650px|Search in Contacts app]]
|}

==Settings==

(in progress)

==System Overlays==

(in progress)

Gaia/Design/Patterns

2013-01-24T23:33:57Z

Robmac: consolidated input areas into single graphic

Design Patterns are core sets of interactions that are used repeatedly throughout the UX.

== Drawer ==

'''Used for:'''

* Providing access to top level navigation links that may be too numerous for a Tabs pattern, or user-generated, (eg: Tabs, user accounts etc).

'''Characteristics:'''

* Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser).
* Is also a great place to tuck secondary or power-user features, such as links to app Settings.
* Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser).
* Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser).
* Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel.
* Traditionally visually depicted as being one layer below the primary interface, and sliding in from the side via animation.
* Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible.

[[Image:Gaia_BB_Drawer.png|thumb|left|650px|Drawer 1]]

== Entry Sheet ==

'''Used for:'''

* Editing a single setting that:
* Contains a large number of possible values. eg: Text entry forms, long lists,
* [or] Requires multipe inputs or selections eg: WiFi network connection process.

'''Characteristics:'''

* Occupies the full screen
* User should be given impression that they are on the same page, and that the Entry Sheet is merely a temporary modal overlay. They have not navigated one level deeper in the hierarchy.
** To reinforce this...
** Valid animations could include slide in from top, from bottom, cross fade, scale in, etc.
** “Cancel” buttons are used instead of “Back”.
* Every element within the Entry Sheet must be related to adjusting the single setting; Settings Panels should not contain links to other pages or lists.
* Closing:
** “Cancel”
** Varies: “Done”, “Join”, “Send”, etc.

[[Image:Gaia_BB_DialogueEntrySheets.png|thumb|left|650px|Dialogue: Entry Sheet 1]]
[[Image:Gaia_BB_ContactsBrowser_1.png|thumb|left|650px|Contacts Browser 1]]

== Input Areas ==

[[Image:gaia_bb-inputareas-10.png|thumb|left|650px|Input Areas]]

==Multi-Select==

'''Used for:'''

* Enables user to perform “bulk actions”, such as deleting 6 emails from a roll of 20, or selecting 3 photos to email to a friend.
* Is used on lists of items (eg: vertical list of emails in Inbox, or grid of photos in Gallery)

'''Characteristics:'''

* Is entered by...
* Is a “mode”, not a section. Animation and visual design should give user the impression that they are in a temporary mode within the original view, not that there are in a differerent view.
Can be called “Edit” or “Select” mode, depending on the use case.
Header text should indicate action being taken (eg: “Select photos”). Once an item has been selected, text should update to “X selected”, where X = quantity of selected items.
* Closes once the user:
** ...completes one of the available actions (eg: “Delete”).
** ...or taps “Cancel” button.
* Closing resturns user to the previous view.
* If user has taken action (eg: delete 3 message threads), a Toast should appear, confirming the action.

'''States'''

* Normal
* Focused
* Disabled

[[Image:Gaia_BB_MultiSelect_1.png|thumb|left|650px|MultiSelect 1]]

== Search ==

'''Used for:'''

* An app can determine which content types are shown in the search results, whether they be within the app itself or online. Search can also be used to filter long lists, such as contacts (shown below).

'''Characteristics:'''

* The virtual keyboard is activated when the user taps on the search input box.
* Tapping on the (x) icon to the right of the search term clears the input box but retains the virtual keyboard
* When using search to filter lists, the search input box is typically at the top of the list and scrolls with the list items.

[[Image:Gaia_search1.png|thumb|left|650px|Search in Contacts app]]

==Settings==

(in progress)

==System Overlays==

(in progress)

File:Gaia bb-inputareas-10.png

2013-01-24T23:29:20Z

Robmac: Consolidated diagram of input areas.

Consolidated diagram of input areas.

Gaia/Design/Patterns

2013-01-24T23:16:05Z

Robmac: Added search characteristics

Design Patterns are core sets of interactions that are used repeatedly throughout the UX.

== Drawer ==

'''Used for:'''

* Providing access to top level navigation links that may be too numerous for a Tabs pattern, or user-generated, (eg: Tabs, user accounts etc).

'''Characteristics:'''

* Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser).
* Is also a great place to tuck secondary or power-user features, such as links to app Settings.
* Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser).
* Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser).
* Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel.
* Traditionally visually depicted as being one layer below the primary interface, and sliding in from the side via animation.
* Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible.

[[Image:Gaia_BB_Drawer.png|thumb|left|650px|Drawer 1]]

== Entry Sheet ==

'''Used for:'''

* Editing a single setting that:
* Contains a large number of possible values. eg: Text entry forms, long lists,
* [or] Requires multipe inputs or selections eg: WiFi network connection process.

'''Characteristics:'''

* Occupies the full screen
* User should be given impression that they are on the same page, and that the Entry Sheet is merely a temporary modal overlay. They have not navigated one level deeper in the hierarchy.
** To reinforce this...
** Valid animations could include slide in from top, from bottom, cross fade, scale in, etc.
** “Cancel” buttons are used instead of “Back”.
* Every element within the Entry Sheet must be related to adjusting the single setting; Settings Panels should not contain links to other pages or lists.
* Closing:
** “Cancel”
** Varies: “Done”, “Join”, “Send”, etc.

[[Image:Gaia_BB_DialogueEntrySheets.png|thumb|left|650px|Dialogue: Entry Sheet 1]]
[[Image:Gaia_BB_ContactsBrowser_1.png|thumb|left|650px|Contacts Browser 1]]

== Input Areas ==

[[Image:Gaia_BB_InputAreas_1.png|thumb|left|650px|Input Areas 1]]

[[Image:Gaia_BB_InputAreas_2.png|thumb|left|650px|Input Areas 2]]

[[Image:Gaia_BB_InputAreas_3.png|thumb|left|650px|Input Areas 3]]

[[Image:Gaia_BB_InputAreas_4.png|thumb|left|650px|Input Areas 4]]

[[Image:Gaia_BB_InputAreas_5.png|thumb|left|650px|Input Areas 5]]

[[Image:Gaia_BB_InputAreas_6.png|thumb|left|650px|Input Areas 6]]

==Multi-Select==

'''Used for:'''

* Enables user to perform “bulk actions”, such as deleting 6 emails from a roll of 20, or selecting 3 photos to email to a friend.
* Is used on lists of items (eg: vertical list of emails in Inbox, or grid of photos in Gallery)

'''Characteristics:'''

* Is entered by...
* Is a “mode”, not a section. Animation and visual design should give user the impression that they are in a temporary mode within the original view, not that there are in a differerent view.
Can be called “Edit” or “Select” mode, depending on the use case.
Header text should indicate action being taken (eg: “Select photos”). Once an item has been selected, text should update to “X selected”, where X = quantity of selected items.
* Closes once the user:
** ...completes one of the available actions (eg: “Delete”).
** ...or taps “Cancel” button.
* Closing resturns user to the previous view.
* If user has taken action (eg: delete 3 message threads), a Toast should appear, confirming the action.

'''States'''

* Normal
* Focused
* Disabled

[[Image:Gaia_BB_MultiSelect_1.png|thumb|left|650px|MultiSelect 1]]

== Search ==

'''Used for:'''

* An app can determine which content types are shown in the search results, whether they be within the app itself or online. Search can also be used to filter long lists, such as contacts (shown below).

'''Characteristics:'''

* The virtual keyboard is activated when the user taps on the search input box.
* Tapping on the (x) icon to the right of the search term clears the input box but retains the virtual keyboard
* When using search to filter lists, the search input box is typically at the top of the list and scrolls with the list items.

[[Image:Gaia_search1.png|thumb|left|650px|Search in Contacts app]]

==Settings==

(in progress)

==System Overlays==

(in progress)

Gaia/Design/Patterns

2013-01-24T17:37:10Z

Robmac: created thumbnails for large graphics

Design Patterns are core sets of interactions that are used repeatedly throughout the UX.

== Drawer ==

'''Used for:'''

* Providing access to top level navigation links that may be too numerous for a Tabs pattern, or user-generated, (eg: Tabs, user accounts etc).

'''Characteristics:'''

* Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser).
* Is also a great place to tuck secondary or power-user features, such as links to app Settings.
* Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser).
* Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser).
* Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel.
* Traditionally visually depicted as being one layer below the primary interface, and sliding in from the side via animation.
* Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible.

[[Image:Gaia_BB_Drawer.png|thumb|left|650px|Drawer 1]]

== Entry Sheet ==

'''Used for:'''

* Editing a single setting that:
* Contains a large number of possible values. eg: Text entry forms, long lists,
* [or] Requires multipe inputs or selections eg: WiFi network connection process.

'''Characteristics:'''

* Occupies the full screen
* User should be given impression that they are on the same page, and that the Entry Sheet is merely a temporary modal overlay. They have not navigated one level deeper in the hierarchy.
** To reinforce this...
** Valid animations could include slide in from top, from bottom, cross fade, scale in, etc.
** “Cancel” buttons are used instead of “Back”.
* Every element within the Entry Sheet must be related to adjusting the single setting; Settings Panels should not contain links to other pages or lists.
* Closing:
** “Cancel”
** Varies: “Done”, “Join”, “Send”, etc.

[[Image:Gaia_BB_DialogueEntrySheets.png|thumb|left|650px|Dialogue: Entry Sheet 1]]
[[Image:Gaia_BB_ContactsBrowser_1.png|thumb|left|650px|Contacts Browser 1]]

== Input Areas ==

'''Used for:'''

* ...

'''Characteristics:'''

* ...

[[Image:Gaia_BB_InputAreas_1.png|thumb|left|650px|Input Areas 1]]

[[Image:Gaia_BB_InputAreas_2.png|thumb|left|650px|Input Areas 2]]

[[Image:Gaia_BB_InputAreas_3.png|thumb|left|650px|Input Areas 3]]

[[Image:Gaia_BB_InputAreas_4.png|thumb|left|650px|Input Areas 4]]

[[Image:Gaia_BB_InputAreas_5.png|thumb|left|650px|Input Areas 5]]

[[Image:Gaia_BB_InputAreas_6.png|thumb|left|650px|Input Areas 6]]

==Multi-Select==

'''Used for:'''

* Enables user to perform “bulk actions”, such as deleting 6 emails from a roll of 20, or selecting 3 photos to email to a friend.
* Is used on lists of items (eg: vertical list of emails in Inbox, or grid of photos in Gallery)

'''Characteristics:'''

* Is entered by...
* Is a “mode”, not a section. Animation and visual design should give user the impression that they are in a temporary mode within the original view, not that there are in a differerent view.
Can be called “Edit” or “Select” mode, depending on the use case.
Header text should indicate action being taken (eg: “Select photos”). Once an item has been selected, text should update to “X selected”, where X = quantity of selected items.
* Closes once the user:
** ...completes one of the available actions (eg: “Delete”).
** ...or taps “Cancel” button.
* Closing resturns user to the previous view.
* If user has taken action (eg: delete 3 message threads), a Toast should appear, confirming the action.

'''States'''

* Normal
* Focused
* Disabled

[[Image:Gaia_BB_MultiSelect_1.png|thumb|left|650px|MultiSelect 1]]

== Search ==

[[Image:Gaia_search1.png|thumb|left|650px|Search in Contacts app]]

==Settings==

'''Used for:'''

* ...

'''Characteristics:'''

* ...

==System Overlays==

'''Used for:'''

* ...

'''Characteristics:'''

* ...

Gaia/Design/Patterns

2013-01-24T06:28:01Z

Robmac: Added sample search pattern

Design Patterns are core sets of interactions that are used repeatedly throughout the UX.

== Drawer ==

'''Used for:'''

* Providing access to top level navigation links that may be too numerous for a Tabs pattern, or user-generated, (eg: Tabs, user accounts etc).

'''Characteristics:'''

* Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser).
* Is also a great place to tuck secondary or power-user features, such as links to app Settings.
* Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser).
* Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser).
* Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel.
* Traditionally visually depicted as being one layer below the primary interface, and sliding in from the side via animation.
* Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible.

[[Image:Gaia_BB_Drawer.png|Drawer 1]]

== Entry Sheet ==

'''Used for:'''

* Editing a single setting that:
* Contains a large number of possible values. eg: Text entry forms, long lists,
* [or] Requires multipe inputs or selections eg: WiFi network connection process.

'''Characteristics:'''

* Occupies the full screen
* User should be given impression that they are on the same page, and that the Entry Sheet is merely a temporary modal overlay. They have not navigated one level deeper in the hierarchy.
** To reinforce this...
** Valid animations could include slide in from top, from bottom, cross fade, scale in, etc.
** “Cancel” buttons are used instead of “Back”.
* Every element within the Entry Sheet must be related to adjusting the single setting; Settings Panels should not contain links to other pages or lists.
* Closing:
** “Cancel”
** Varies: “Done”, “Join”, “Send”, etc.

[[Image:Gaia_BB_DialogueEntrySheets.png|Dialogue: Entry Sheet 1]]
[[Image:Gaia_BB_ContactsBrowser_1.png|Contacts Browser 1]]

== Input Areas ==

'''Used for:'''

* ...

'''Characteristics:'''

* ...

[[Image:Gaia_BB_InputAreas_1.png|Input Areas 1]]
[[Image:Gaia_BB_InputAreas_2.png|Input Areas 2]]
[[Image:Gaia_BB_InputAreas_3.png|Input Areas 3]]
[[Image:Gaia_BB_InputAreas_4.png|Input Areas 4]]
[[Image:Gaia_BB_InputAreas_5.png|Input Areas 5]]
[[Image:Gaia_BB_InputAreas_6.png|Input Areas 6]]

==Multi-Select==

'''Used for:'''

* Enables user to perform “bulk actions”, such as deleting 6 emails from a roll of 20, or selecting 3 photos to email to a friend.
* Is used on lists of items (eg: vertical list of emails in Inbox, or grid of photos in Gallery)

'''Characteristics:'''

* Is entered by...
* Is a “mode”, not a section. Animation and visual design should give user the impression that they are in a temporary mode within the original view, not that there are in a differerent view.
Can be called “Edit” or “Select” mode, depending on the use case.
Header text should indicate action being taken (eg: “Select photos”). Once an item has been selected, text should update to “X selected”, where X = quantity of selected items.
* Closes once the user:
** ...completes one of the available actions (eg: “Delete”).
** ...or taps “Cancel” button.
* Closing resturns user to the previous view.
* If user has taken action (eg: delete 3 message threads), a Toast should appear, confirming the action.

'''States'''

* Normal
* Focused
* Disabled

[[Image:Gaia_BB_MultiSelect_1.png|MultiSelect 1]]

== Search ==

[[Image:Gaia_search1.png|Search in Contacts app|thumbnail|left|650px]]

==Settings==

'''Used for:'''

* ...

'''Characteristics:'''

* ...

==System Overlays==

'''Used for:'''

* ...

'''Characteristics:'''

* ...

File:Gaia search1.png

2013-01-24T06:01:28Z

Robmac: Search pattern in Contacts application.

Search pattern in Contacts application.

Gaia/Design/BuildingBlocks

2013-01-24T00:05:40Z

Robmac: re-ordered a section

===Common Controls===

* [https://www.dropbox.com/s/fm7tme7xsmz073w/CommonControls_130118.psd Source PSD in Dropbox] [Contains PSD of all controls in one file]

{|
|[[Image:CommonControls 121005.jpg|Common Controls|thumbnail|left|400px]]
|}

* [https://www.dropbox.com/s/eaidrw8kjw89mt1/IconsMedia_20130107.psd Media Icons] [Contains PSD of all media icons in one file]

===Overlay Menus===

====Action Menu====
'''Used for:'''

* Presenting a list of actions related to the App content.

'''Characteristics:'''

* Are opened from buttons within App content. These buttons are often inside Toolbars (eg: Browser's "Share" button).
* Contain 1 or more items.
* Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
* Title strings are optional.
* Are closed by:
** Selecting one of the actions.
** Pressing "Cancel" button (verbiage TBD)

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/iuqxa1crzwmygm1/OWD_00_ActionMenu.psd Source PSD in Dropbox]
{|
|[[Image:OWD 00 ActionMenu.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ActionMenu_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_ActionMenu_2.jpg|Interaction|thumbnail|left]]
|}

==== Object Menu ====

'''Used for:'''

* Directly manipulating objects without having to open them and navigate deeper into the hierarchy. eg:
** Deleting a photo by selecting it's thumbnail, instead of having to open the full image.
** Flag an email by selecting it's preview, instead of having to open the full email.
** Call a Contact by selecting their name, instead of having to open their detailed information.

'''Characteristics:'''

* Accessed by user press-and-hold on selectable object (eg: list row, phone number, URL, etc)
* Menu appears after X seconds.
* Contain 1 or more items
* Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
* Title strings are not included (unlike Action Menus)
* Are closed by pressing "Cancel" button.
* Reuse the Action Menu interface.
* Future (v2):
** Menu will explicitly tie itself to selected element by opening immediately above or below, shifting to fit into the available screen real estate.
** Selected object element will be highlighted (e.g.: darken surrounding content?)
** Explicit "Cancel" input may be removed in favor of pressing on empty screen real estate to close.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/uzw0ftpqcn6fc7w/OWD_00_ObjectMenu.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 ObjectMenu.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ObjectMenu_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_ActionMenu_2.jpg|Interaction|thumbnail|left]]
|}

== Banner ==

'''Used for:'''

* Relay information to the user. eg:
** Confirm a user action
** Alert to a system event

'''Characteristics:'''

* Most common used after Multi-Select edit, to confirm user action, and optional provide "Undo" input. eg:
** Deleting multiple photos from (Gallery)
** Deleting multiple emails (Email)
** Moving multiple emails (Email)
* Are positioned at the bottom of screen, covering underlying content.
* Appear for X seconds then automatically disappear.
* Can include an input, eg: "Undo" (optional)
* Can include an image (optional)
* Can either be part of an App (eg: a "photos deleted" Banner is associated with the Gallery app) or the System (eg: a "Low Battery" alert).
* Ideally would be designed to prevent two Banner appearing simultaneously (eg: If two Banner appear at same time, newer replaces older).

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/status.css Link to CSS in Github]
* [https://www.dropbox.com/s/1l0vsabud5cv224/OWD_00_Banner.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 00 Banner.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_Banner_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_Banner_2.jpg|Interaction|thumbnail|left]]
|}

==Buttons==

'''Used for:'''

* Buttons allow users to perform an action when tapped. The action is communicated using text and/or an icon.

'''Characteristics:'''

* Have two components: visual target and hit target. The hit target is always larger to assist users in hitting the target.
* States:
** Normal
** Pressed
** Disabled
* Types:
** <b>Action buttons</b> - used when there are only a few actions and a list is not required. The main action button uses a highlight colour.
** <b>List buttons</b> - used when displaying a list of actions or to trigger the display of a value selector
** <b>Input field buttons</b> - used to perform actions with input fields
** <b>Special / custom buttons</b> - used for specific actions including recording, dialing, and others.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/buttons.css Link to CSS in Github ]
* [https://www.dropbox.com/s/5ae1lmbai91e9js/OWD_Buttons.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 01 Buttons.jpg|Visuals|thumbnail|left|600px]]
|}

== Confirm ==

'''Used for:'''

* Prompts user to take action. eg:
** Confirm a deletion
** Respond to a system event (eg: restart device after a SIM card swap)
** Grant or deny a permission

'''Characteristics:'''

* Modal: occupies the screen and requires user input to clear.
* Consists: of
** Title
** Body (optional)
** Icon (optional)
** Input: Confirmation.
*** Can customize label string
** Input: Cancel (optional).
*** Can customize label string

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/confirm.css Link to CSS in Github ]
* [https://www.dropbox.com/s/6jzbsazcpp53n0t/OWD_00_Confirm.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Confirm.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_Prompt_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_Prompt_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_Prompt_3.jpg|Interaction|thumbnail|left]]
|}

== Drawer ==

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/drawer/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/poucmy9r9l9eluk/OWD_00_Drawer.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Drawer.jpg|Visuals|thumbnail|left|600px]]
|}

== Filters ==

'''Used for:'''

* Secondary Navigation
** Filters can provide a second set of tabs, where tabs are already present.
* Data Filter
** Filters can be used to enable the user to view a single set of data in a different lens.
** eg: in Calendar, the filters they allow user to view time in different scales, from Day to Month).

'''Characteristics:'''

* Horizontal sequence of buttons.
* Only one button is Focused at a time.
* Best practice is to place filters within Toolbars, so they do not flow with the content.
* Left, Middle and Right buttons can be styled uniquely.
* Width: variable, depending on number of filters required within a single set (see Numbering). Should establish a maximum width, however.
* Numbering: minimum 2, maximum 5.
* Can be populated with icons or text, but not both. Because of the smaller height of a filter (versus a tab), text is the best practice.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/filters.html Link to CSS in Github]
* [https://www.dropbox.com/s/g64iolxhrm7d8bg/OWD_01_Filters.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 01 Filters.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Filters.png|Interaction|thumbnail|left]]
|}

==Headers==

'''Used for:'''

* Labeling the active view.
* Providing top-level navigation and inputs for the active view.

'''Characteristics:'''

* Horizontal full width bar that appears at top of screen in most apps
* Floats above content, with option to flow with content in some rare cases (eg: Browser).
* Heading text provides name of current view.
* Optional: heading text string can include text (eg: current unread email count)
* Present in most applications

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/headers.css Link to "Headers" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/edit_mode.css Link to "Edit Mode" CSS in Github]
* [https://www.dropbox.com/s/0ro1rb8tg41ynuv/OWD_03_Headers.psd Link to Source PSD in Dropbox ]

{|
|[[Image:OWD 03 Headers.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Header_1.png|Interaction|thumbnail|left]]
|}

==Lists==

'''Used for:'''

* Displaying an enumeration of a set of items

'''Characteristics:'''

* Varying heights (1—3 rows)
* Varying contents (from text only to image + text + button)
* Are composed of rows, and section headers
* Types:
** Action row (click anywhere to trigger input)
** Status indicator row
** Button row
** Link row

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/lists/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/bz314lc8a0bltla/OWD_01_Lists.psd Link to Source PSD in Dropbox]

{|
|[[Image:OWD 01 Lists.jpg|Visuals|thumbnail|left|600px]]
|}

==Progress & Activity Indicators==

'''Used for:'''

* Providing user with visual feedback that a process is active.

'''Characteristics:'''

* May include an animated visual element, a text label, or some combination of the two. The progress and activity indicators may be used in modal windows or Inline, together with content or next to it.

'''Modal:''' They're used when the phone cannot be interrupted while loading data.
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded.
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
* '''Spinner:''' Used when data is being sent.
'''Non-Modal:''' Displays a looping animation, communicating to the user that the process is active.
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded. Note that the activiy bas is background sensitive and there is an option for light screens and another for the dark ones.
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
* '''Inline Spinner:''' Used when data is being sent.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/progress_activity/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/2qotj7s9plhnqa0/01_OWD_Progress_Activity.psd Link to Source PSD in Dropbox]

{|
|[[Image:11_OWD_Progress_Activity_Components.jpg|Visual Components|thumbnail|left|600px]]
|}
{|
|[[Image:09_OWD_Progress_Modal_Sample.jpg|Visuals - Modal|thumbnail|left|600px]]
|}
{|
|[[Image:10_OWD_Progress_Inline_Sample.jpg|Visuals - Inline|thumbnail|left|600px]]
|}

==Scrolling==

'''Used for:'''

* Vertically slide text, images and/or video across the device's display.

'''Characteristics:'''

* Types:
** Scrollbar
** Index scrolling

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/000zmogs44e6cwf/OWD_00_Scroll_Index.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Scroll Index.jpg|Visuals|thumbnail|left|600px]]
|}

==Seek Bars==

'''Used for:'''

* Scroll through content (i.e. a song or video)

'''Characteristics:'''

* Consists of track and knob (button w/ normal and pressed states)
* Optional images for left and right values
* Can be horizontal or vertical

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/mdp3oxxw8j0qeo2/OWD_00_SeekBars.psd Link to Source PSD in Github]

{|
|[[Image:OWD 00 SeekBars.jpg|Visuals|thumbnail|left|600px]]
|}

==Switches==

'''Used for:'''

* Activates/Deactivates a given item. It's also used to select an element within a list.

'''Characteristics:'''

* Presents two mutually exclusive choices or states (used in table views only).
* Types:
** On/Off toggle
** Radio
** Checkbox

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/switches.css Link to CSS in Github]
* [https://www.dropbox.com/s/00t8x2905jl7vpu/OWD_00_Switches.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Switches.jpg|Visuals|thumbnail|left|600px]]
|}

==Tabs==

'''Used for:'''

* Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views.

'''Characteristics:'''

* Fill the full horizontal width.
* Number between 3—5.
* Positioned at bottom of screen.
* Can contain various elements (buttons, filters, indicators, etc).
* Versions:
** Text + icon
** Icon-only

'''States:'''

* Normal
* Pressed
* Active
* Disabled

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/filters.html Link to CSS in Github]
* [https://www.dropbox.com/s/9l6g3mb0870m64o/OWD_02_Tabs.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 03 Tabs.jpg |Visuals|thumbnail|left|600px]]
|}

==Tool Bars==

'''Used for:'''

* Contains actions, indicators, and navigation associated with the current view. eg:
** Delete selected items (button)
** Refresh content (button)
** Enter “Edit” mode (filter)
** View “Favorite” contacts only (filter)

'''Characteristics:'''

* 100% width. Fixed height.
* Does not scroll with content. Floats above.
* Should be positioned at the bottom of the screen unless Tabs are also present. In that case, should be positioned at the top.
* Can contain various elements (buttons, filters, progress/activity indicators, etc).

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/toolbars/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/r68hc5nfu9nqava/OWD_00_Toolbars.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Toolbars.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Toolbars_1.png|Interaction|thumbnail|left]] || [[Image:Gaia_BB_Toolbars_2.png|Interaction|thumbnail|left]]
|}

== Value Selector==

'''Used for:'''

* Provides a way for the user to select one of more values, usually from a Form interface.
* Most commonly associated with forms (eg: Setting up a Calendar event).

'''Characteristics:'''

* Can include Title (optional)
* Types:
** Date
** Time
** Single-select list
** Multiple-select list

* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/date_picker.css Link to "Date Picker" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/time_picker.css Link to "Time Picker" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/value_selector.css Link to "Single/Multiple" CSS in Github]
* [https://www.dropbox.com/s/26v3043xs2hhzou/OWD_00_ValueSelector.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 ValueSelector.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ValueSel_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_ValueSel_3.jpg|Interaction|thumbnail|left]] || [[Image:BB_ValueSel_1.jpg|Interaction|thumbnail|left]]
|}

== Input Areas ==

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/input_areas.css Links to CSS in Github]
* [https://www.dropbox.com/s/9pcmukgbwsmdmo3/OWD_00_InputAreas.psd Link to Source PSD in Dropbox ]

{|
|[[Image:OWD 00 InputAreas.jpg|Visuals|thumbnail|left|600px]]
|}

Gaia/Design/BuildingBlocks

2013-01-23T23:56:14Z

Robmac: minor additions to buttons section

===Common Controls===

* [https://www.dropbox.com/s/fm7tme7xsmz073w/CommonControls_130118.psd Source PSD in Dropbox] [Contains PSD of all controls in one file]

{|
|[[Image:CommonControls 121005.jpg|Common Controls|thumbnail|left|400px]]
|}

* [https://www.dropbox.com/s/eaidrw8kjw89mt1/IconsMedia_20130107.psd Media Icons] [Contains PSD of all media icons in one file]

===Overlay Menus===

====Action Menu====
'''Used for:'''

* Presenting a list of actions related to the App content.

'''Characteristics:'''

* Are opened from buttons within App content. These buttons are often inside Toolbars (eg: Browser's "Share" button).
* Contain 1 or more items.
* Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
* Title strings are optional.
* Are closed by:
** Selecting one of the actions.
** Pressing "Cancel" button (verbiage TBD)

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/iuqxa1crzwmygm1/OWD_00_ActionMenu.psd Source PSD in Dropbox]
{|
|[[Image:OWD 00 ActionMenu.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ActionMenu_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_ActionMenu_2.jpg|Interaction|thumbnail|left]]
|}

==== Object Menu ====

'''Used for:'''

* Directly manipulating objects without having to open them and navigate deeper into the hierarchy. eg:
** Deleting a photo by selecting it's thumbnail, instead of having to open the full image.
** Flag an email by selecting it's preview, instead of having to open the full email.
** Call a Contact by selecting their name, instead of having to open their detailed information.

'''Characteristics:'''

* Accessed by user press-and-hold on selectable object (eg: list row, phone number, URL, etc)
* Menu appears after X seconds.
* Contain 1 or more items
* Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
* Title strings are not included (unlike Action Menus)
* Are closed by pressing "Cancel" button.
* Reuse the Action Menu interface.
* Future (v2):
** Menu will explicitly tie itself to selected element by opening immediately above or below, shifting to fit into the available screen real estate.
** Selected object element will be highlighted (e.g.: darken surrounding content?)
** Explicit "Cancel" input may be removed in favor of pressing on empty screen real estate to close.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/uzw0ftpqcn6fc7w/OWD_00_ObjectMenu.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 ObjectMenu.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ObjectMenu_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_ActionMenu_2.jpg|Interaction|thumbnail|left]]
|}

== Banner ==

'''Used for:'''

* Relay information to the user. eg:
** Confirm a user action
** Alert to a system event

'''Characteristics:'''

* Most common used after Multi-Select edit, to confirm user action, and optional provide "Undo" input. eg:
** Deleting multiple photos from (Gallery)
** Deleting multiple emails (Email)
** Moving multiple emails (Email)
* Are positioned at the bottom of screen, covering underlying content.
* Appear for X seconds then automatically disappear.
* Can include an input, eg: "Undo" (optional)
* Can include an image (optional)
* Can either be part of an App (eg: a "photos deleted" Banner is associated with the Gallery app) or the System (eg: a "Low Battery" alert).
* Ideally would be designed to prevent two Banner appearing simultaneously (eg: If two Banner appear at same time, newer replaces older).

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/status.css Link to CSS in Github]
* [https://www.dropbox.com/s/1l0vsabud5cv224/OWD_00_Banner.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 00 Banner.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_Banner_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_Banner_2.jpg|Interaction|thumbnail|left]]
|}

==Buttons==

'''Used for:'''

* Buttons allow users to perform an action when tapped. The action is communicated using text and/or an icon.

'''Characteristics:'''

* Have two components: visual target and hit target. The hit target is always larger to assist users in hitting the target.
* States:
** Normal
** Pressed
** Disabled
* Types:
** <b>Action buttons</b> - used when there are only a few actions and a list is not required. The main action button uses a highlight colour.
** <b>List buttons</b> - used when displaying a list of actions or to trigger the display of a value selector
** <b>Input field buttons</b> - used to perform actions with input fields
** <b>Special / custom buttons</b> - used for specific actions including recording, dialing, and others.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/buttons.css Link to CSS in Github ]
* [https://www.dropbox.com/s/5ae1lmbai91e9js/OWD_Buttons.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 01 Buttons.jpg|Visuals|thumbnail|left|600px]]
|}

== Drawer ==

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/drawer/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/poucmy9r9l9eluk/OWD_00_Drawer.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Drawer.jpg|Visuals|thumbnail|left|600px]]
|}

== Filters ==

'''Used for:'''

* Secondary Navigation
** Filters can provide a second set of tabs, where tabs are already present.
* Data Filter
** Filters can be used to enable the user to view a single set of data in a different lens.
** eg: in Calendar, the filters they allow user to view time in different scales, from Day to Month).

'''Characteristics:'''

* Horizontal sequence of buttons.
* Only one button is Focused at a time.
* Best practice is to place filters within Toolbars, so they do not flow with the content.
* Left, Middle and Right buttons can be styled uniquely.
* Width: variable, depending on number of filters required within a single set (see Numbering). Should establish a maximum width, however.
* Numbering: minimum 2, maximum 5.
* Can be populated with icons or text, but not both. Because of the smaller height of a filter (versus a tab), text is the best practice.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/filters.html Link to CSS in Github]
* [https://www.dropbox.com/s/g64iolxhrm7d8bg/OWD_01_Filters.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 01 Filters.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Filters.png|Interaction|thumbnail|left]]
|}

==Headers==

'''Used for:'''

* Labeling the active view.
* Providing top-level navigation and inputs for the active view.

'''Characteristics:'''

* Horizontal full width bar that appears at top of screen in most apps
* Floats above content, with option to flow with content in some rare cases (eg: Browser).
* Heading text provides name of current view.
* Optional: heading text string can include text (eg: current unread email count)
* Present in most applications

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/headers.css Link to "Headers" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/edit_mode.css Link to "Edit Mode" CSS in Github]
* [https://www.dropbox.com/s/0ro1rb8tg41ynuv/OWD_03_Headers.psd Link to Source PSD in Dropbox ]

{|
|[[Image:OWD 03 Headers.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Header_1.png|Interaction|thumbnail|left]]
|}

==Lists==

'''Used for:'''

* Displaying an enumeration of a set of items

'''Characteristics:'''

* Varying heights (1—3 rows)
* Varying contents (from text only to image + text + button)
* Are composed of rows, and section headers
* Types:
** Action row (click anywhere to trigger input)
** Status indicator row
** Button row
** Link row

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/lists/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/bz314lc8a0bltla/OWD_01_Lists.psd Link to Source PSD in Dropbox]

{|
|[[Image:OWD 01 Lists.jpg|Visuals|thumbnail|left|600px]]
|}

==Progress & Activity Indicators==

'''Used for:'''

* Providing user with visual feedback that a process is active.

'''Characteristics:'''

* May include an animated visual element, a text label, or some combination of the two. The progress and activity indicators may be used in modal windows or Inline, together with content or next to it.

'''Modal:''' They're used when the phone cannot be interrupted while loading data.
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded.
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
* '''Spinner:''' Used when data is being sent.
'''Non-Modal:''' Displays a looping animation, communicating to the user that the process is active.
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded. Note that the activiy bas is background sensitive and there is an option for light screens and another for the dark ones.
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
* '''Inline Spinner:''' Used when data is being sent.

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/progress_activity/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/2qotj7s9plhnqa0/01_OWD_Progress_Activity.psd Link to Source PSD in Dropbox]

{|
|[[Image:11_OWD_Progress_Activity_Components.jpg|Visual Components|thumbnail|left|600px]]
|}
{|
|[[Image:09_OWD_Progress_Modal_Sample.jpg|Visuals - Modal|thumbnail|left|600px]]
|}
{|
|[[Image:10_OWD_Progress_Inline_Sample.jpg|Visuals - Inline|thumbnail|left|600px]]
|}

== Confirm ==

'''Used for:'''

* Prompts user to take action. eg:
** Confirm a deletion
** Respond to a system event (eg: restart device after a SIM card swap)
** Grant or deny a permission

'''Characteristics:'''

* Modal: occupies the screen and requires user input to clear.
* Consists: of
** Title
** Body (optional)
** Icon (optional)
** Input: Confirmation.
*** Can customize label string
** Input: Cancel (optional).
*** Can customize label string

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/confirm.css Link to CSS in Github ]
* [https://www.dropbox.com/s/6jzbsazcpp53n0t/OWD_00_Confirm.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Confirm.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_Prompt_1.jpg|Interaction|thumbnail|left]] || [[Image:BB_Prompt_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_Prompt_3.jpg|Interaction|thumbnail|left]]
|}

==Scrolling==

'''Used for:'''

* Vertically slide text, images and/or video across the device's display.

'''Characteristics:'''

* Types:
** Scrollbar
** Index scrolling

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/000zmogs44e6cwf/OWD_00_Scroll_Index.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Scroll Index.jpg|Visuals|thumbnail|left|600px]]
|}

==Seek Bars==

'''Used for:'''

* Scroll through content (i.e. a song or video)

'''Characteristics:'''

* Consists of track and knob (button w/ normal and pressed states)
* Optional images for left and right values
* Can be horizontal or vertical

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/scrolling/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/mdp3oxxw8j0qeo2/OWD_00_SeekBars.psd Link to Source PSD in Github]

{|
|[[Image:OWD 00 SeekBars.jpg|Visuals|thumbnail|left|600px]]
|}

==Switches==

'''Used for:'''

* Activates/Deactivates a given item. It's also used to select an element within a list.

'''Characteristics:'''

* Presents two mutually exclusive choices or states (used in table views only).
* Types:
** On/Off toggle
** Radio
** Checkbox

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/switches.css Link to CSS in Github]
* [https://www.dropbox.com/s/00t8x2905jl7vpu/OWD_00_Switches.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Switches.jpg|Visuals|thumbnail|left|600px]]
|}

==Tabs==

'''Used for:'''

* Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views.

'''Characteristics:'''

* Fill the full horizontal width.
* Number between 3—5.
* Positioned at bottom of screen.
* Can contain various elements (buttons, filters, indicators, etc).
* Versions:
** Text + icon
** Icon-only

'''States:'''

* Normal
* Pressed
* Active
* Disabled

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/filters.html Link to CSS in Github]
* [https://www.dropbox.com/s/9l6g3mb0870m64o/OWD_02_Tabs.psd Link to source PSD in Dropbox ]

{|
|[[Image:OWD 03 Tabs.jpg |Visuals|thumbnail|left|600px]]
|}

==Tool Bars==

'''Used for:'''

* Contains actions, indicators, and navigation associated with the current view. eg:
** Delete selected items (button)
** Refresh content (button)
** Enter “Edit” mode (filter)
** View “Favorite” contacts only (filter)

'''Characteristics:'''

* 100% width. Fixed height.
* Does not scroll with content. Floats above.
* Should be positioned at the bottom of the screen unless Tabs are also present. In that case, should be positioned at the top.
* Can contain various elements (buttons, filters, progress/activity indicators, etc).

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/toolbars/index.html Link to CSS in Github]
* [https://www.dropbox.com/s/r68hc5nfu9nqava/OWD_00_Toolbars.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 Toolbars.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:Gaia_BB_Toolbars_1.png|Interaction|thumbnail|left]] || [[Image:Gaia_BB_Toolbars_2.png|Interaction|thumbnail|left]]
|}

== Value Selector==

'''Used for:'''

* Provides a way for the user to select one of more values, usually from a Form interface.
* Most commonly associated with forms (eg: Setting up a Calendar event).

'''Characteristics:'''

* Can include Title (optional)
* Types:
** Date
** Time
** Single-select list
** Multiple-select list

* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/date_picker.css Link to "Date Picker" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/time_picker.css Link to "Time Picker" CSS in Github]
* [https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/value_selector/value_selector.css Link to "Single/Multiple" CSS in Github]
* [https://www.dropbox.com/s/26v3043xs2hhzou/OWD_00_ValueSelector.psd Link to source PSD in Dropbox]

{|
|[[Image:OWD 00 ValueSelector.jpg|Visuals|thumbnail|left|600px]]
|}
{|
|[[Image:BB_ValueSel_2.jpg|Interaction|thumbnail|left]] || [[Image:BB_ValueSel_3.jpg|Interaction|thumbnail|left]] || [[Image:BB_ValueSel_1.jpg|Interaction|thumbnail|left]]
|}

== Input Areas ==

* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/input_areas.css Links to CSS in Github]
* [https://www.dropbox.com/s/9pcmukgbwsmdmo3/OWD_00_InputAreas.psd Link to Source PSD in Dropbox ]

{|
|[[Image:OWD 00 InputAreas.jpg|Visuals|thumbnail|left|600px]]
|}

Gaia/Design/Visual

2013-01-23T20:49:18Z

Robmac: fixed minor typo

=== Overview ===
This is your place for all the latest visual designs and tracking documents. Email me (padamczyk@mozilla.com or patryk on IRC) for editing permissions or PSD source versions of the assets.

=== Design Rational Documents ===
Coming Soon.

=== Mockups ===

* [https://www.dropbox.com/sh/pjr6ebjxci8cty4/pyVPeRROlI Master visual design Dropbox] (includes all System pieces and Apps)

=== Creating Firefox OS App Icons ===
* [http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/ Firefox OS app icon guidelines and templates]

=== Tracking Documents ===
* [https://docs.google.com/spreadsheet/ccc?key=0AvIV2XTLJx6ldEJLWWx1Q21oTEIwZEZ2T0dPTi1mN2c Visual Design Status, Icon & Common Control Tracking Document]

=== Asset Specs (Click on image for full size)===
[https://wiki.mozilla.org/File:B2G_Grid.pdf Grid PDF], this is the working grid document, this will be converted to the building blocks.<br><br>
Media grid layout<br>
[[Image:Vsd_spec_media_layout.jpg|1024px| Media grid layout]]

Gaia/Design/Visual

2013-01-23T20:48:41Z

Robmac: Added link to app icon guidelines

=== Overview ===
This is your place for all the latest visual designs and tracking documents. Email me (padamczyk@mozilla.com or patryk on IRC) for editing permissions or PSD source versions of the assets.

=== Design Rational Documents ===
Coming Soon.

=== Mockups ===

* [https://www.dropbox.com/sh/pjr6ebjxci8cty4/pyVPeRROlI Master visual design Dropbox] (includes all System pieces and Apps)

=== Creating Firefox OS App Icons ===
* [http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/ Firefox OS app icon guidelines, and templates]

=== Tracking Documents ===
* [https://docs.google.com/spreadsheet/ccc?key=0AvIV2XTLJx6ldEJLWWx1Q21oTEIwZEZ2T0dPTi1mN2c Visual Design Status, Icon & Common Control Tracking Document]

=== Asset Specs (Click on image for full size)===
[https://wiki.mozilla.org/File:B2G_Grid.pdf Grid PDF], this is the working grid document, this will be converted to the building blocks.<br><br>
Media grid layout<br>
[[Image:Vsd_spec_media_layout.jpg|1024px| Media grid layout]]