Your first Hello.
Last week, with the Firefox 35 update, we launched ‘Hello’. Hello is the easiest way to have a video conversation with anyone, anywhere. You can now have a video conversation directly in your browser. If you have Firefox, you can invite anyone with a WebRTC enabled browser (like Chrome and Opera) to join you. So while Hello is a feature in Firefox, you can start a conversation with your friends who might use another browser. Since having a video conversation in your browser is a new concept for most, we’ve taken extra care in stepping users through creating their first conversation.
First Time Use Experience - How does it work?
When you click on the Hello icon for the first time and select "Get Started", you’ll notice that a web page opens and a few tips will follow you through the creation of your first Hello conversation, ending with a page of helpful links if you need them. This experience might seem like your average tool tips pointing out something in a product. What might surprise you is that the messages pointing to parts of Hello in the Firefox browser are actually being triggered and populated by the web page.
To introduce users to our new Australis browser design last year, I designed a concept for collaborative interaction between a (secure, whitelisted) webpage and the browser chrome of Firefox. Think of the web and what is called the “browser chrome” as 2 different pieces. We are used to a web browser asking a web page to do things like load a specific URL, but it’s usually a very one-sided conversation where the browser just tells the web what to do. What we can do now is make this more of a conversation between the browser chrome and web. Thanks to our Firefox and web engineers, the web can now request the browser to do things too, like highlight an icon or open a menu. This technology, our “Tour API”, is what makes this concept possible. See it in action in the video, below.
There are 2 key benefits for using the web as a platform for this interaction vs. building and controlling everything in the product itself:
Quicker iterations. It’s much faster to make updates in the web. Firefox follows a 6 week development cycle and updates to the browser are first made (with some exceptions) in Nightly, then move to Beta, then to the General Release browser that most people use. That means that most updates take 12 weeks to reach general use. We can push updates to the web much quicker. If we get feedback from our users that something we’ve designed in the experience isn’t working as well as we intended, we can react quickly with improvements. If we need to launch in just a few languages now and add more as they are available, the web allows us to easily do this and not have translations be a blocker. We can also respond quickly as a feature’s design may change close to the implementation and release date.
The web is a key user touchpoint. Webpages are a key way that users digest and share information. We can trigger a web page when a browser is installed, updated, or in collaboration with a specific user action. They’re easy to trigger at key points in a user’s interaction with the browser. This also means that they are both easy for us (creators of web pages and your browser) to abuse and even easier for users to ignore. So it’s in our best interest to use this medium sparingly and where it presents the most value to those on the receiving end.
Our toughest challenges when building an experience like this are what also make Firefox my favorite browser. You can make Firefox your own by customizing nearly everything you see in the browser chrome. Don’t like the search field? Move or remove it. Want to see only your favorite tools in the toolbar? It’s easy to customize. Since we want to highlight and expand messages to icons that may or may not be visible in the user’s browser, or may be moved into an unexpected place, we have to be ready for anything. We do our best to design both for the best and worst case as well as large and small viewport sizes. Sometimes this limits our design (how a web page is laid out, so that menus don’t obscure content, where we can attach the tips you see in Hello, etc.), but the limits given to us as designers also challenge us to be more creative.
Hello product page and a few fun facts about L10n
To learn more about Hello, check out the product page that we built. You may not know that Mozilla has an amazing localization (L10n) team comprised of volunteers from around the world. They make it possible for us to translate our products and web pages with very quick deadlines. More than half of all Firefox users speak a language other than English, so making sure we can communicate with all of our users is extremely important to us. For instance, if you’re in Indonesia the Hello product page would look like this. We also need to keep our global community in mind when we create videos and animations. You’ll notice that we created one animation for the product page that works across all locales, but our video at the bottom of the page has certain screens of text that have been translated. Also, across Mozilla.org web pages, if we detect that you are viewing a page in a language that differs from your browser’s language settings we ask if you’d like to change the language of the page.
- Interested in contributing to our L10n team at Mozilla?
- Hello Promo Video
- Hello Product Page
- How do I mock up this kind of UI? After discussing possible requirements with our engineers and doing some sketches of my own, I do a mockup like this in Sketch and move quickly to code.
- Here are 2 additional in-product concepts that we considered, but did not implement.
- Watch a video of the First Time Use Experience