Crossing Over: My Experience with Web Development

Amy Lee


As a visual designer working on Firefox OS, I thought it would be beneficial to learn more about the technical aspect of building a web-based OS and so I decided to take a 12 week front-end web development course.

The course was intensive with each week covering topics such as tools and workflow, HTML fundamentals, CSS3 animations, JavaScript and jQuery. I had learned some HTML and CSS years ago in university but the landscape of mark-up language has definitely changed since then.

Some of the things I learned in the course has helped me become more in-tune with the type of tasks involved when building a web-based OS. My ultimate goal wasn’t to become a front-end developer, but to develop empathy and to foster a more cohesive working relationship with developers on the team. By being able to ask the right questions and to understand the technical aspects of web development, we can experience a stronger connection between disciplines.

There are developers who treat UX and design as a means to build code. However, I have also noticed that there are some developers who are very passionate about UX and design. I always appreciate developers who care about design and understand the importance of an optimal text size and is willing to go that extra distance in refining UI elements. I think the same should be applied to designers, to have a basic understanding of the technology in which they are designing for.

From an efficiency standpoint, it is an essential skill for designers working with web technologies to know how to edit a CSS file. For Firefox OS, I am able to make edits directly to the device through WebIDE — a browser-based tool that allows you to create, edit, run, and debug web apps. This allows me to test out fonts sizes and weights, fine-tune an animation, or explore colours, without relying on the aid of a developer.


Editing CSS through WebIDE

Editing CSS through WebIDE

In WebIDE you can see your edits directly on the device

There are many people that believe designers should know how to implement their own designs. While designer/developer unicorns can exist, oftentimes these individuals end up having a strong expertise in only one of those disciplines. I don’t think designers should be limited by their technical abilities to implement a design and developers shouldn’t be limited by their knowledge of design tools. To have a designer who understands the intricacies of web development and a developer who appreciates typography would ultimately lead to stronger teams and products.

Smashing Conference Barcelona

Hung Nguyen


Please note all photos are taken by me unless otherwise stated.

During the last week of October, I was fortunate enough to attend the Smashing Conference in the beautiful city of Barcelona, Spain. The conference was held at the breathtaking venue, Palau de la Música Catalana and covered a wide range of design topics ranging from the more practical to the truly inspirational.

In this blog post, I would like to share some the highlights.

Event Highlights

Before getting into the talks, I wanted to share with you the fantastic job the organizers did with the event.

The Venue

I honestly can’t say this enough but everything about the Palau de la Música Catalana was absolutely stunning. The building is rich in history and I constantly found myself getting lost in the details during the talks.

Even with so many architectural moments, the one that stood out the most for me was the skylight situated in the center of the concert hall. This was simply mesmerizing to behold with how intricate the design was. This is definitely something I will never forget.

Barcelona_2015-3 Barcelona_2015-5Barcelona_2015-7






The Fun Details

What fun is a design conference without a chocolate fountain? Yes, there was really a chocolate fountain there which was very popular with the attendees. Aside from the great selection of snacks, there was also a party held at the Estrella Brewery and a typography photo walk to cap off the conference.

Barcelona_2015-85 Barcelona_2015-74 Barcelona_2015-42






Talk Highlights

Although all the talks were great in their own way, two of them really resonated with me. Jina Bolton’s talk on “Living Design Systems” and Andrew Tider & Jeff Greenspan’s “We’ll teach you everything we don’t know”.

Living Design Systems

This talk hit especially close to home since it was directly related to working on Firefox OS. When creating an operating system, one of the biggest issues is maintaining consistency across all applications and components. A lot of the times. you’ll find graphical discrepancies because a specification wasn’t followed or there is simply a lack of documentation or support.

What the Jina and her team at Salesforce did was create a living design system that provided a cross platform approach to handling graphical components in a modular manner. This made updates to the design instant to all parties using it.

The talk provided some great examples and I hope to integrate some of it into the Firefox OS work being done. There so much more to it then what I’m sharing so please check out her blog post here for more info.



We’ll teach you everything we don’t know

On the other end of the spectrum was a much more emotionally inspirational talk by Andrew Tider and Jeff Greenspan. These two designers turned activists created some of the most eye opening projects that help bring to light topics that were generally swept under the rug.

They spoke about their unconventional approach to tackling problems (which in many cases really paid off with a bit a drama) and to always traveling the road less taken.

You can check out their talk here.




Overall the conference was a fantastic experience and I would highly recommend it to anyone who is interested.

Before I sigh off, I just wanted to say that if you ever get the opportunity to visit Barcelona, do not hesitate. It was truly a memorable experience that I will never forget.

Now I leave you with some of my favorite photos!


Barcelona_2015-11 Barcelona_2015-13 Barcelona_2015-24 Barcelona_2015-45 Barcelona_2015-109 Barcelona_2015-111










My Adobe MAX adventure

Carol Huang


Hello from Taipei, I want to share with you my recent experience at a design conference. Being an a smallish island, Taiwan has limited design learning opportunities, but thanks to Mozilla’s training program I was able to attend the Adobe Max conference, in Los Angeles. It was a great experience to venture into a different culture and to meet designers from different fields at once.

Adobe MAX is a creativity conference held in Los Angeles in October 2015. More than 7,000 people from all over the world gather together. The conference runs for three full days. It’s like a designers’ candy land because it’s full with inspirational and iconic speakers (such as Maira Kalman, Baz Luhrmann, Elle Luna, Brandon Stanton), various sessions, labs, creative workshop and the MAX keynotes! This was my first time attending this design conference. I was super excited to join the conference where I can learn about new products, technology and industry trends.

One of the keynote’s major announcement was the debut of Adobe’s new user experience and user interface design application, currently being developed under the codename Project Comet. It allows you to design and build interactive prototypes in a vector environment. It lets you takes your UX designs from start to finish with the cross-platform app — wireframing, visual design, interaction design, prototyping, previewing and sharing. As a UX designer, one of our challenges right now is that we’re looking for a easy-to-use tool to create prototypes in order to do user testings. Then we can tweak our design and repeat the process. One of Project Comet’s features is that it could import, repeat, and mask multiple images in a single step. This feature would really help us reduce the repetitive and time-consuming work needed to build the prototype so, we could have more time to refine our design. After watching Project Comet demo, I was really looking forward to the actual product. It’s very easy for designers to use and I was impressed by the performance and quality when they showed dozens of artboards in a single Project Comet document. If you’re interested in this project, you could sign up to their mailing list for the latest Project Comet updates.

At Adobe MAX 2015, Creative Sync was a common theme in many of the demos. Creative Sync is the technology that synchronizes assets saved to your Creative Cloud account, across many of the Adobe applications. The advantage is having the ability to store the assets in a central location so that designers can reuse them across our entire design project, which is a key benefit for us, a globally distributed team.

And for those that couldn’t be there, you can now watch MAX 2015 keynotes and conference sessions on demand here.

Overall, it was such a wonderful experience to see the graphic works made by the creatives from all over the world, meeting so many creatives and the inspiring speakers. It was exciting for me to be part of Adobe MAX. Collectively, they are bringing together the world’s best creativity, experience and product innovations.

Lastly, I want to share a quote from Baz Luhrmann when he gave his talk at Adobe MAX. I feel so lucky I get to see him in person in the conference. He is one of my favorite filmmaker who directed Romeo + Juliet (1996) and Moulin Rouge! (2001). Personally, I love the visual impact he brought to the audience in Romeo + Juliet. Luhrmann used his own style to tell a modern version of Shakespeare’s story. He attracts the audience with cinematic style with intense pace of the confrontation between two families with drastic soundtrack of contemporary music. I was fascinated by his unique way of storytelling.

Here’s his quote:

“Get it out! Make something! Don’t wait for permission!!”  ― Baz Luhrmann


My conference badge!

My conference badge!

LA convention center

Graphics made by Dave Kinsey.

Graphics made by Dave Kinsey.

Over 7000 creative minds gathering in LA.

Over 7000 creative minds gathering in LA.

image souce: Project Comet - Adobe

image souce: Project Comet – Adobe

Baz Luhrmann walked on to the stage.

Baz Luhrmann walked on to the stage.

A long journey: from partner to Mozillian

Victoria Gerchinhoren

Hi! I am Victoria, a UX Visual Designer who recently joined Mozilla to work on Firefox OS, with Patryk Adamczyk and the rest of the amazing UX team. But to be honest, it feels funny coming to the Toronto office for my first day at Mozilla, my “new hire” introductions went more like “Hi, how have you been doing since the all hands a few months ago?”

To tell you a bit of the story, I worked at Telefónica R&D for over 6.5 years where I had the chance to be involved in wide variety of projects from health to entertainment to communications services. Working in R&D ensured that all my projects were always exciting as they were on the cutting edge of technology. It’s the R&D side of Telefónica that made it possible to envision development of a web based mobile OS.

This resulted in working with Mozilla from a partner standpoint at the dawn of the FIrefox OS project. The story begins with Telefónica and Mozilla realizing that joining forces was wiser than duplicating effort in the challenging endeavour of creating a new mobile OS based on web technologies. This partnership benefited from the very best the each company had to offer, Mozilla’s knowledge of the open web and Telefónica’s knowledge of communication services.

Both companies respected the strengths of one another, allowing for a natural collaboration based on trust. The working environment allowed for our team to grow a strong bond even thought we were all spread out across the world.

Before I joined the project, the Telefónica UX team already began to set the core foundations of the navigation model and visual design, however it was clear that the task was too great for the small team we had. A decision was made to join the UX efforts, recruit more designers, and focus on one UX direction by joining the efforts of both UX teams (which cut the work load in half), even with this approach the first year of Firefox OS development was some of the more intense time of my life.

Forming the teams was a very interesting experience for all of us, working across different cultures, sharing knowledge, tools and processes between every imaginable time zone. We would gather every few months to enhance the inter-team collaboration before a major milestone in some of the world’s most exciting cities which happened to host our partners or company offices: Barcelona, Berlin, London, Oslo, Madrid, Mountain View, Paris, Portland, San Francisco, San Diego, Sao Paulo, Taipei, and Whistler. Getting to know each other in person, discussing the project face to face, sharing meals and a beer here and there were key for bonding, and helped the future conversations over Vidyo, Hangouts, Skype or even the Bugzilla.

Overtime as we shaped and improved our processes, meetings became a regular part of life: daily stand ups for the members of each team (systems front end or communications in my case) and weekly updates outlining the most important outcomes either by discipline (Q&A, UX team, Visual Design, Interaction Design, Front end, Back end, Product) or by component area. We would share our planning and milestones over the Mozilla’s wiki or Google docs. We would reach each other directly to sort out the day-to-day work and document all the implementation through Bugzilla, with frequent bug triage, as designers, we would review the implementation on the device and raise bugs if what they saw was not aligned with the proposed designs.

Mixing every imaginable culture, background and experiences helped us also understand how different people work and perceive things, it is by far the most interesting and diverse team I have worked with.

I have never thought I would be living with a project for so long, but an OS is like a child, you see it being born and then you are there to guide it in its development. Release after release we have improved our ways to make it better.

I am here to continue the evolution of Firefox OS, now just from another side.

I would love to hear from you all. Reach out to me through the following channels, I am always happy to chat!


IRC: vicky_

skype @vixvixy


And now for some photos from the early days…

Firefox OS Emoji

Patryk Adamczyk

In Spring of 2014, we embarked on the Firefox Emoji project with the main purpose to add a little more whimsy into the Firefox OS Messaging (SMS/MMS) app and we wanted to give the community more choice when it came to free, high quality yet open source emojis.

The project was perfect for our freelance illustrator, Sabrina Smelko. The art direction focused on creating a sense of familiarity to our users while maintaining a style that speaks to our brand, Mozilla. At first we thought about using a single mascot (perhaps the fox) for all the smileys, human and animal figures but in the end we believed that focusing on creating distinction in shape (silhouettes), colour and form among the different emojis was more important due to the potential of limitless types of emojis to be added to the spec.

Our final set includes two types of character designs; one for the emotions in the form of smileys, the other one for everything else in the form of real world human figures and animals.

The smileys use a flatter shading reflecting the Firefox OS visual design. However we departed from the expected all yellow colour scheme as we wanted to accentuate certain feelings and moods further with unique colour.

The figures are based off the smiley but with more subtle facial features while still maintaining the fun, casual and approachable feel already established. These themes are carried onto the animal figures like the cat (now the fox) and monkey, drawn with large facial features similar to the smileys. We kept racial diversity in mind, and have designed all our emojis using SVG, allowing for skin tone modifiers to be applied in an upcoming release.

We are hoping this first set of emojis (Unicode 6.0 spec) will land in the next release of Firefox OS thanks to the hard development work of Pavel Ivanov and Reza Akhavan as well as the support of our visual designer Amy Lee and our font guru Jonathan Kew.

A Selection of the Emojis