A Browser for Teens by Teens

Larissa

2

Last summer, UX-ers Lindsay, Cori, and I had the opportunity to co-design a browser for teenagers with twins Grace and Aliyah, and their dad, Jay. The girls were interested in learning about User Experience, so we invited them in for an ideation and concept sketching session to help us understand what a browser designed specifically for teens might look like.

Below, the twins talk about their experience in the workshop and some of the great, insightful ideas they came up with.

Sketching

Sketching out browser layouts based on the ideas we came up with on sticky notes

Grace

This summer I went to Mozilla and worked with the team that designs Firefox. I went with my sister and my father. Going to Mozilla was one of the most fun things I did all summer. I really enjoyed the experience, and would gladly do it again. The Mozilla team was really fun to work with. Design is something I am really into so that was my favorite part of the day.

When we sat down to work with the design team they told us we would be working to answer a few basic questions.

  • How can we make Firefox easier for its users?

  • What changes can we make to our home page?

  • What changes would teenagers like to see Firefox make?

  • Is there anything else we would like to see Firefox do that it does not?

My sister, my dad and I along with the Mozilla team did a brainstorm on all these ideas. Everyone put sticky notes on the board and we all had to choose the three ideas that were the most important to us. Here are some of the ideas we came up with:

We suggested that to make Firefox easier, Mozilla should set up a way for every user to design their own homepage, containing all the things they do the most on the Internet. This covered the answer to the first and second question. I said my perfect homepage would have a chat box, all my favorite websites and email.

More Sharing

Presenting ideas to one of the Mozilla designers

As to what changes teenagers would like to see happen to Firefox this is my answer: a chat box to use on my home page. A way to erase history without parents knowing, for example a code word that would erase history. We also suggested revisiting the parental controls. If any of you have ever had parental controls like I have,  (I don’t have them anymore) then you would know they can be a pain sometimes. Parental controls are designed for little kids and for some teenagers whose parents want them on there; it can be frustrating for the parents and the kids. The controls are so restrictive that the kid can do almost nothing without a password, and this is very annoying for the parents who get interrupted every other minute. So I am sure there are many families out there who would like to see a new version, that’s a more teen-friendly version of parental controls.

After we wrote and talked about all our ideas, each of us presented what our home page would look like, then answered questions about our ideas. Our day at Mozilla was very fun, I hope we get to go there again.

Sketching ideas

Building on each other’s ideas on the fly

Aliyah

Over the summer my dad told my sister and I that we were going to get to go to Mozilla. I wasn’t quite sure what we would be doing, all I knew is that we would get a tour and do some kind of activity. What we did was one of the best things I did this summer.

The team we worked with at Mozilla asked us to imagine that we were designing a start page for Firefox, and what it would look like for teenagers. We started brainstorming ideas. All of us were given a pad of sticky notes and asked to categorize all of our ideas. Everybody then voted on three things that we felt were the most important to us.

My three biggest priorities were: First, being able to chat with my friends easily and post pictures. Teenagers in general are very social. Being able to hang out and chat with their friends is very important to them. Secondly, having the privacy I need while maintaining a balance that my parents and I are both comfortable with. Parents want their kids to be safe on the Internet, and to watch and listen to appropriate media. But most parental controls are made for little kids. Having parental controls when you’re over the age of of about eleven becomes so hard that the parents end up taking the controls off. However, if we could come up with controls that, for example can limit certain sites, so only a select few things are inaccessible to the kids, the controls would work out a lot better. Lastly, being able to customize my start page with things that suits my personality. For example being able to customize: colors, pictures, words, and media preferences.

Idea share-out

They then gave us paper with a picture of a blank start page on it, and asked us to customize it like we would want our start page to look like. Mine had a search box in the middle with a few tabs and links at the top that I put there. At the bottom, a list of selected media subjects that I’ll get notifications about if there is any new news. For example, if I put a book series, I would get a notification if the title of the next book came out. Then on the right, a box for posting pictures and being able to chat.

After everybody finished their drawings, we all presented and discussed our ideas.

What I really liked about the activity was the design process and being able to brainstorm then create what I talked about. I also liked that my ideas might be used to help design something.

Sticky: an open source Firefox OS sticker app

Aaron

1

Sticky app - StickersHere’s a new Firefox OS app called Sticky.  You can take a photo of someone’s face, then select a sticker, and place it on top of the face. You can place multiple stickers on the face, and then you can save the image to your Gallery app on your Firefox OS phone and send it to your friends.

The larger idea behind Sticky is to create an app where designers can contribute their work directly to an app. We want designers to create new stickers and submit them to this app. Maureen and I are trying to do the same thing with the Firefox OS app Drawl, where we want designers to add new brushes, colors, etc. to the app. Contributing code to an app is easy with GitHub, but how do you do the same with design work?Sticky - Face

As an experiment, if you’d like to add your own stickers to this app, just make a 300x300px transparent png image. You can then create a new Issue in the GitHub repo and attach your sticker image to the Issue, or submit a Pull Request to the repository. Here’s a link to the GitHub repo to get started.

Additionally, the Firefox OS app can be installed here: https://marketplace.firefox.com/app/sticky/

Now go forth and make some more stickers!

The All-new Home on Firefox for Android Beta

ibarlow

4

To date, Firefox for Android has provided a number of convenient ways to quickly start browsing the web. Firefox Home offers “top sites” thumbnails that make for a great visual representation of the places you visit the most, and the awesome Search screen helps you easily browse your most visited sites, history and bookmarks, along with offering a great search experience.

Our users love all of this, and they’ve been asking us to make these features even more powerful and easier to access. And with that in mind, we’ve been working on a unified user interface that actually combines the convenience of the home page with the power of the search screen.

Home-phones

All your stuff, together at last

Starting today, the all-new Home offers the best of everything: quick and easy access to your browsing data (Top sites, History, Bookmarks, and Reading List), and a powerful search experience whenever you need it. In the new design, your Top sites, History, Bookmarks, and Reading List are displayed in a simple set of swipeable panels which provide a much more fluid way to navigate your data — making it easier to find a  bookmark, or a site you accessed a week ago, or an article you saved for reading later.

Amazingly easy access

Firefox Home shows up right away when you open Firefox for Android Beta, and can still be easily accessed later by tapping on the URL bar or by creating a new tab. This means you can access all your browsing data through a unified experience at any time, with a single tap.

Available today

This feature is available in Firefox for Android Beta, which is ready for download and testing now. Give it a try, and let us know what you think!

Firefox Home - Tablets

 

Mozilla Summit 2013: Designing for our users, not for ourselves

Dominik Strohmeier

1

Co-written with Gemma Petrie, User Experience Researcher

Mozilla Summit

Mozilla Summit 2013

Build. Empower. Teach. Shape. When Mitchell Baker defined the Nature of Mozilla in her keynote at this year’s Mozilla Summit, she highlighted these activities to be our main responsibilities as Mozillians.

The User Research team is dedicated to understanding who our users are and how to build products that will meet their needs. Earlier this year we completed the Firefox User Types study as part of this effort. This research has already been used by internal Mozilla teams to think about different features and design solutions for Firefox, and the Summit gave the User Research team the opportunity to share this work with the entire Mozillia community.  Our session, “Designing for our users, not for ourselves,” was facilitated by Mozilla User Research team members in all three Summit locations: Toronto (Cori Schauer & Gregg Lind), Santa Clara (Bill Selman & Lindsay Kenzig), and Brussels (Gemma Petrie and Dominik Strohmeier). Special thanks to our amazing UR and UX colleagues for their support at each session!

User Type Pins

Enamel pins depicting six user types.

Getting Mozillians Excited about User Research

The summit was an awesome experience with more than 1,800 Mozillians across three locations. We were excited to share our work during our UR/UX breakout sessions, but with so many concurrent tracks, we knew not everyone would be able to to attend. In order to convey our enthusiasm for our research, spread the word about our sessions, and get the community talking about who our users are, we created and distributed enamel user type pins to all of the Mozillians in attendance.

User Type Pins

The user type pins were distributed just before the Saturday morning keynote talk.

The pins were a hit and within minutes the keynote auditorium was full of Mozillians trying to trade with one another for their favorite user type. Nearly half of our community members fall into the “Wizard” category of users, but in our research this user type only represents 1% of North American Firefox users. We deliberately distributed only a few “Wizard” pins at the Summit in order to get people talking, and did it ever! As people frantically searched for these elusive pins, it gave us the opportunity to discuss the theme of our talk, “Designing for our users, not for ourselves.” (Thanks to Zhenshuo Fang for her lovely user types artwork and to Madhava Enros for the pin idea!)

Toronto User Types

“Wizard” work in Toronto.

Teaching the Community about User Types

The word was out about User Types, and more than 60 Mozillians came to the session in Brussels, 35 in Toronto and 30 in Santa Clara to learn more. During the presentation, we introduced everybody to the concept of having user types to guide our design and product development process. We also introduced each of the user types and their specific characteristics. We then split the room into six groups and each group received a short user profile, a collection of photos, pens, paper, and two exercises:

  1. Review the representative profile – you are now that person. Finish this sentence “To me, the Internet is…” using the photos. Feel free to draw, annotate, or whatever you need to finish the sentence. Once you are done, choose three words that best describe the Internet to you [as the user type].
  2. Now that you know how your user type thinks & feels about the Internet, spend time with your group brainstorming what your user type wishes Firefox could do for them. When done, choose the top three ideas your user type came up with and tell us “I wish Firefox would…”
Santa Clara Summit

User Types work in progress in Santa Clara.

After finishing the exercises, each group presented their results to the other teams. The goal of our session was to make people start thinking like one of our user types and we were incredibly impressed with the thoughtful ideas each group shared. The presentations highlighted an important constraint our designers work with every day: There are very different ideas about the Web and what Firefox could offer each of the user types, however we only develop one Firefox Desktop which needs to serve all of our users. You can view some of the participant posters, which include some awesome ideas for supporting the needs of the user types, in the images at the end of this post. (Click on the image to see a larger version.)

User Types Session

The “Stalwart” presentation in Brussels at the “Designing for our users, not ourselves” session.

Thanks to all the Mozillians in the different Summit locations who joined our session. In Brussels, we especially enjoyed the long discussion that followed after the official session ended. We hope that these discussions will continue and that we will all keep the user types in mind when working on future products so that we are better able to build the Internet the world needs. (Special thanks to Cori Schauer for her work preparing this session!)

Drawl: A simple Firefox OS drawing app

Aaron

4

Drawl is a simple drawing application for your Firefox OS phone. Users can use different brush styles, sizes and colors to draw on the canvas. They can then save the drawing to their Firefox OS Gallery app and share it with their friends.

Maureen Hanratty and I created the app through a simple collaboration process.

At first we came up with an idea for a collaborative drawing game. Stepping back we realized that, if we built a really solid drawing app it could be the foundation not only for our app but for tons of other cool drawing web apps. Maureen downloaded a bunch of apps and got a sense of what features and interactions worked well for drawing on a mobile phone. Through a series of sketches she honed in on a simple, straightforward UI for the app. To understand how the animations would work, she made a prototype in Keynote.

Maureen handed off the Keynote prototype, and I started to build the mobile web app. At first, I thought it would be great to build one app that could work across all mobile devices. But that became difficult because there are different hardware and design patterns across iOS, Android and Firefox OS. I decided to build the app just for Firefox OS. The app’s template is based off of Robert Nyman’s Boilerplate app.

After building the baseline template for Drawl, I started to create the artwork and icons for the app. I looked at the aesthetic and iconography for other drawing apps for reference. We wanted the canvas to be the focal interaction point for the user, so I made the artwork and icons stark and simple to allow the user to focus in on what they are drawing.

We want to build other apps on top of this drawing app. For instance, an Exquisite Corpse game, which you can play with friends could be great to build. We also want to get community members involved to build apps based on Drawl, submitting new brushes, color palettes, and of course taking our source code and building their own drawing based apps!

To download the app on your Firefox OS device, go here.

And if you’d like to contribute to the app (such as building apps using the drawing feature or adding new brush sets), go to the GitHub repo here and submit a Pull Request.

Happy Drawling!