Tiffanie Shakespeare

a picture of me!
Busting bad design & making the world a better place...

With more than a decade of design experience, I am well versed in the methodologies of design and research. Most recently, I have been working in Mozilla's Connected Devices group. During this time I have created IA and wireframes, conducted and participated in research, collaborated with cross-functional teams, and learned about IoT and the unique issues they present to people.

It's been a wild ride taking on many different roles and hats!

If I were to sum up my strengths and contributions I can bring to a team - it would be that I am able to take a step back and see the bigger picture. I take the time needed to understand the full scope of a project and ask questions. I'm not shy about getting into implementation details and technical aspects if needed. I'm also able to identify gaps within processes and work to fill them.

Check out my work and drop me a line - you won't regret it!


Various - Connected Devices, Mozilla

In addition to the projects mentioned below, I participated in or led many more activities. These included:

  • I participated in a research project on IoT developers. I was invited because of the contributions I could bring to the project which involved defining research goals and forumlating questions. I provided input throughout the project.
  • I wanted to increase the UX team's visibilty so since the Orlando All Hands, I've led efforts to ensure we had a presence at our Work Weeks. Hawaii was the most successful and I wrote a blog post about it.
  • A few members of the UX team got together and pitched our own idea to the Product Innovation Board, Project Walnut - helping pets get reunited, which got approved.


Project Lighthouse - Connected Devices, Mozilla

Project Lighthouse had the goal of helping visually impaired people become more independent. We wanted to provide people the ability to recognize any object by taking a photo of it. Our proof of concept was to build out an app that would identify kitchen and pantry goods. People could add new items and voice tag them or use the app to identify recognized items.

My Role

I brought my expertise in IA to the project and was able to help the team identify some key questions in the user flow. I was only on the project a short time before it was cancelled.

Design Challenges

This was my first endeavour into designs solely focused around accessability. To get a better sense of what it would be like, a co-designer and I ventured to the grocery store to try a prototype where I was a blindfolded shopper. Using this experience as a starting point, we were able to iterate on the IA and make good first guesses on an ideal flow. Our nexts steps was to iterate on the prototype and do testing on our target audience.


Project SensorWeb - Connected Devices, Mozilla

This project was about creating a community around showing hyper-local air quality in Taipei. The project encompassed an outdoor hardware sensor and a companion website/app that would provide air quality information at a micro-level.

My Role

My involvement in this project was mostly contributing interaction design expertise. When I joined, the team was very executional and focused on building the product. Initially I did competitive analysis on other air quality sensors - both on the physical hardware as well on the UI. This analysis informed our setup designs, which was rated very high during usability testing. I was also responsible for designing the IA for the app/website. Another UX designer and I worked together on designing and iterating on the wireframes which was based on the IA. We were also responsible for providing guidance on the interaction of the hardware. I also worked very closely with our research team and provided research goals for a study conducted in Taipei.

Design Challenges

SensorWeb had a lot of moving parts and it was challenging keeping everything in sync. Because of the very tight deadlines, the team had to do a lot of tasks in parallel and I was taking on a variety of roles. While designing the app/website I was also working with research on test plans. I was also responsible for reviewing external contracting work for both visual and industrial design.

Another challenge was creating a product aimed at the Taipei market. We made sure to get lots of feedback from people in Taipei through studies as well as utilize co-workers in our Taipei office.


Project Magnet - Connected Devices, Mozilla

This project was centered around beacons and finding useful ways to use the technology. We started our focus on conferences as it was an area where we could control content to provide an optimal experience and have access to attendees for follow up.

My Role

My role was to help the team come up with a product and test hypotheses around that idea. I first came up with a research plan to interview conference presenters to get a sense of any potential gaps that we could address. This research ended up providing insights into some needs conference goers in general had. Based on these insights and questions, I came up with a series of experiments for Mozilla’s London All Hands to test some new hypotheses. I actually wrote a bit about that experience on the Connected Devices blog. I also got the team set up to run another experiment at the View Source conference in Berlin. It was around then that I transitioned off the team.

Design Challenges

The challenge with project was being the only UX designer and needing to do several rounds of research and experiments in a very short amount of time. To help with efficiency, I coached the team on how to conduct interviews. I then reviewed those recordings with the help of another UX team member to create affinity diagrams for insights. For the experiments, I worked to come up with a plan and distribute tasks to other team members. Since the whole cross-functional team worked together, we were able to get these activities finished faster.


Project Vaani - Connected Devices, Mozilla

This project was a carryover from the Firefox OS group. The team started building an SDK before pivoting to a consumer product, Vaani Local. An organizational change moved the group from a project based team to contributing to the IoT platform. Eventually, the group moved to a different organization - Emerging Technology.

My Role

When we became part of Connected Devices, the team was initially focused on building demos for the company’s next work week. I was able to bring the conversation back to building an SDK and come up with a plan to do so starting with research.

While building Vaani Local, I worked with the research team to test a prototype. I also did competitive analysis on similar products. When the team moved into Platform work, I transferred to another project.

Design Challenges

The big challenge here came from applying UCD principles to an SDK project. I laid out a plan for where to start. With the Product Manager, I identified other voice SDKs and asked for developer resources to evaluate them. In conjugation, I participated in the creation of the IoT Developer research questions to gain insights into that audiences’s needs. I also did my own research into the developer forums and communities to uncover common questions and problems.


FirefoxOS - Mozilla

While on FxOS, I worked on a variety of different projects. When I first started, I was repsonsible for our Media apps like Camera and Gallery. Later on, I was responsible for a couple of security/privacy type features like Control Center and Private Browser. Towards the end of the FxOS project, I worked on Vaani, the voice experience of the mobile phone; this project carried over to Connected Devices.

My Role

As the lead designer on my projects, I was repsonsible for the overall experience and made sure it fit cohesively into the FxOS interaction models. I worked with visual designers, engineers, and QA throughout the release cycles.

Design Challenges

Still in progress - more coming!


Contractor - Various Clients via Plural Designs

I spent about a year as a contractor working with various clients such as GoPro, LG, and Mozilla.

My Role

I did a wide vareity of tasks from IA to wireframes to prototypes and even redline specs. At GoPro, I worked on the Session camera. I designed and prototyped various interaction models for the camera and recommendations based on this work. At Mozilla, I worked with the FirefoxOS design team on browser related features.

Design Challenges

The challenges varied as much as the work! I learned and grew a lot during this time. It's hard to say more without getting into specifics of the clients' projects. Ping if you're curious to hear more!


Good Vault on Android & iOS

Provide the ability for SMIME users to access their Exchange account using their smart cards or micoSD cards.

My Role

The main goal of this stand-alone app was to access a user's SMIME certificates stored on a hard token (smart card or microSD). Unlike Good's other apps, this required external hardware (the card and the sleeve) to be present in order to use this app. I fully designed the iOS version; for Android, I supervised a contractor as he went through and 'Androidified' my iOS designs.

Design Challenges

This was honestly the most difficult project I have ever worked on. The sheer amount of technical knowledge I had to learn and understand was overwhelming, and to keep all this straight in my mind while designing an uber simplistic UI was downright hard. The number of error cases and things that could 'go wrong' far outweighed the UI required for the basic app. It took many iterations and lots of reviews with the dev team before getting the UI right.

  • Part of the unlock flow for the app.
  • Sketch of the main app UI
  • Notification to help user get external hardware connected properly on iPhone
  • About screen in the Android version of Good Vault

SMIME Soft Tokens on iOS

Allow users to change their SMIME soft token password after intalling their certificate(s) on their device.

My Role

Some of our customers were required to use extremely lengthy passwords for their SMIME certificates when transferring the soft token. While using Good, this password is required periodically; the user needed the ability to change the longer password with something more easily remembered. I designed a quick, two-step process that involved first installing the certifcate and then changing the password; the process could easily be adapted to allow the installation of multiple certificates.

Design Challenges

It took a few iterations to get the process short and clear enough for the end user. There were also a few scenarios that were uncovered during implementation that required me to go back and make modifications to the designs.

  • Flow to set a new password for the installed certificate
  • Initial sketch to install all certifcates at one time
  • Alert dialogue when the user has new certificates to install
  • The user can change the password after installing the certificate

Domino Encrypted Mail on iOS

Provide Domino Encrypted Mail (DEM) users the ability to read and send encrypted messages within the Good app.

My Role

Up until this point, our DEM users were forced to read their encrypted email on their computers; they were also unable to send encrypted email. I had to take a very complex idea and make it dead simple for the users, which in the end consisted of a password field and several error messages which were as explicit as possible to direct the user how to solve the issue.

Design Challenges

The hardest part about designing this solution was having to learn about encryption and how Domino implements this on their servers. There were also several limitations development encountered where I insisted on finding workarounds as the overall experience would have been greatly impacted.

  • Error paths when the user doesn't have a Notes ID or correct password
  • Wireframe of popover on the iPad to enter the Notes password
  • Encrypted email message prompting user for their Notes ID password
  • Notification shown when email recipents do not have encryption certificates

Good on Windows Phone 7

Create the Good app using the panorama and pivot view paradigms for WP7.

My Role

The focus of the first version was to get the basics of our core applets designed and implemented - calendar, contacts, and email. I took on a new role for this project, acting as lead for the high-level architecture, then supervising a contractor while he did the high-fidelity mockups and spec. I also interacted with the Microsoft team to address their concerns over our designs.

Design Challenges

Initally, management was looking to replicate the exisiting UI on iOS and Android instead of adapting to the pano and pivot paradigms; it took a lot of persuasion to convince management to depart from mantaining this 'consistent' UI approach across all our platforms. Our customers were thrilled that we adhered to the platform guidelines, which was a huge reward after pushing hard for that design direction.

  • Whiteboarding the panorama of the calendar on WP7
  • Whiteboarding the pivot view of the calendar on WP7
  • GFE lockscreen on WP7
  • Calendar invitation on WP7

File Repository on Android & iOS

Design a file repository applet for Good to store saved email attachments and files imported from other apps.

My Role

While the first version was bare-bones, simply allowing users to save, send, and delete files; I designed a comprehensive solution that included future features that will also allow the user to save photos, search, and do more file management tasks such as renaming files and viewing file details.

Design Challenges

The biggest challenge for this project was designing for both Android and iOS at the exact same time; I had to ensure that the designs were tailored to the individual platforms' specific paradigms while keeping the overall flow and feature set consistent between the two platforms.

  • Task flow for sending an attachment
  • Initial sketch of the file repository
  • GFR file list for Android
  • GFR file list for iPhone

Good on iPad

Combine the expected iPhone behaviour of our product with iPad's interaction models to better use screen real estate while maintaining a familiar feel and flow.

My Role

Due to user studies I conducted, I made two enhancements to the client to improve the usability of email while in portrait. Instead of using a popover to navigate the email list, I designed a control to expand/collapse the list view allowing the user to have more control. To allow faster and easier navigation between emails, I moved the forward/back navigational buttons to a transparent overlay in the bottom left corner.

Design Challenges

The most difficult part about this project was convincing upper management to take the time to properly implement an iPad specific app that took advantage of the larger screen size instead of just making everything bigger. Fortunately, I was able to persusade management of the benefits despite adding significant time to the project; we ended up with some very happy users.

  • Task flow for the iPad app
  • Sketch of inbox
  • In portrait, collapse the email to list have a wider view
  • Button in the bottom right all the user to easily navigate between emails

Good Mobile Browser on Android & iPhone

Design a browser applet for Good that allows users to access their company's intranet from their device.

My Role

I went through several iterations to find the best way to mimic the native browser's toolbar while maintaining easy navigation within our own app. I also designed quick ways to hide toolbars, giving a full screen view to the user while they viewed the site's content.

Design Challenges

It was really hard to design a solution which had both a toolbar and a tab bar, which is the app's main navigation, in the same screen. I'm not satisfied with the final design, but due to time constraints, I had to stop iterating and go with the best option which ended up nixing the tab bar and using a back button to exit out of browser mode.

  • Initial sketch with the toolbar directly under the URL
  • The browser ported to Android
  • Access intranet sites
  • Full screen mode

Carbon on Android

Create a new product for Android devices that combine both personal and work related email, contacts, and events.

My Role

I designed the Information Architecture for the various screen types needed within the app. Acting as lead designer, I worked closely with the product owner to uncover requirements, other designers as those features were created, and engineers while they implemented the designs. I maintained wiki pages detailing the interactions of features I worked on such as signature settings and email.

Design Challenges

This was the first time I worked with a mostly remote team; the product ower was in the UK and other designers were also distributed. It was challenging learning how to find the right level of communication and how to keep everyone on the same page when we weren't all awake at the same time.

  • Signature setup wireframe
  • Navigation interaction
  • Applying more context to emails
  • Writing emails

Good on webOS

Become the webOS design guru - teach others about platform guidelines while designing a webOS version of our Good app.

My Role

I was the lead interaction designer in charge of creating the Good app on the webOS platform. I created mockups and icons that were in line with what a user would expect from a webOS app. Working in the Agile methodology of sprints, I worked closely with engineers to implement designs and the product owner to prioritize the backlog. I also developed a style guide document for other designers within Good who would be designing for the webOS platform.

Design Challenges

This was my first exposure to Agile methodologies; it took a little getting used to attending daily standups and the short iterations. Despite the intial hurddles, I throughly enjoyed working closely with the enginnering and QA teams as they implemented the designs.

  • Initial sketches of the day view
  • Initial sketches of calendar notifications
  • calendar week view
  • email list view

Calendar on MOTOBLUR

Design the calendar appliction for Motorola's Android-based platform, MOTOBLUR.

My Role

For MOTOBLUR versions 1.0 and 1.5, I was responsible for creating the calendar app which combined all of the user's Google calendars and Exchange calendar into one view. I also designed features typically found in calendars such as event creation and responding to events. For this project, I created specs with high-fidelity mockups and worked with the engineering team during implementation. I also designed widgets for the home screen and aided with the usability testing of those concepts.

Design Challenges

This project was the first where I was assigned my own visual designer that I worked with to deliver the final mockups. Our relationship in the beginning was pretty rocky, we struggled to work collaboratively together and there was a bit of passively butting heads. I think a good part of it was being remote and not having an established relationship built on trust. With time and after a few site vists, our working relationship developed such that we could collaborate and push each other to do better work; we ended up getting along very well and became friends.

  • agenda card from the homescreen chip
  • homescreen widget

Contacts Utility on MOTOBLUR

Help customers in China sync their contacts with MOTOBLUR.

My Role

I designed a phone utility to allow our customers in China to manually backup and restore their address book in lieu of the ability to sync. Working with many different groups, I was able to understand the technical requirements to accomplish this task and phone limitations. Using this knowledge, I was able to create a simple and easy process for the end user.

Design Challenges

There were a lot of constraints and technical concepts that I had to understand and work within to create these designs. It took several iterations before finalizing on an accpetable design solution that fit within those constraints.

  • backup progress indication
  • finish dialogue for the restore process

Customer Service Representative Website

Help Motorola customer service center representitives be more efficient.

My Role

To aid in efficiency, I created low-fidelity wireframes to improve the website portal used by both carrier and Motorola representatives when helping customers with their MOTOBLUR service. After learning the work flow of representatives, I was able to redesign the portal's navigation and layout to be more role-centric, aiding in the work flow of what the representative was trying to accomplish.

Design Challenges

This was my first foray into the world of customer support. It was very interesting to learn about their types of problems and what they needed to get their job done. I wish we could have done some more user-testing on the designs, but there wasn't enough time.

  • customer service representative website home page
  • customer list page

Calendar on Droid

Integrate an Exchange calendar into native Android calendar.

My Role

I worked on the calendar app, making improvements to the native Android UI to enable the ability to add an Exchange calendar while maintaining Google's visual style and interaction model. Specs and mockups were created as documentation. I also created an interactive flash-based prototype for Motorola's Board of Directors.

Design Challenges

A big challenge on the project with integrating myself into Motorola's internal design group, which not only used different tools than the Good Technology group, but also had very different processes. It was quite difficult to get quickly up-to-speed on tools and processes, like a new hire would, but at the same team being a fully involved team member working on the calendar app designs.

  • calendar day view
  • calendar event create

Social Networking on iPhone

Aggregate social network updates into one app.

My Role

I was the lead interaction designer on a social networking app for the iPhone that would aggregate updates from sources such as Facebook, Twitter, and Flickr. I put together a focus group to gather information from our target audience to help guide the designs. Based on feedback from the group and Apple's HIG guidelines, I created high-fidelity mockups for the engineering team to implement an interactive demo to show company-wide.

Design Challenges

The iPhone!! The iPhone was just released and completely blew up everything I thought I had known about mobile design. It was a really fun challenge to explore this new piece of technology; the Apple HIG was a very valuable rescource for me as I designed my first app.

  • list of social network updates
  • chat with a contact

Good on Nokia

Port the Good application to Nokia devices to expand our customer base.

My Role

To port our existing enterprise application to Symbian based Nokia phones, I went through our current Good application to determine what needed to be changed to mirror Symbian's interaction models, layouts, and visual styling. I created mockups and specs that detailed the end result of the application and highlighted the deltas that needed to be addressed.

Design Challenges

This was a very detail oriented project as rather than designing from scratch, I was tasked with finding what needed to be changed from the Windows Mobile version. Since the two platforms were very different, everything needed to be reviewed and determined whether it should remain the same or be designed differently. In the days before Apple, HIGs were not nearly as useful, if available at all.

  • alert stylized for symbian
  • news application

Good on Windows Mobile

Design new features for the next release of Good.

My Role

In the next revolution of Good's enterprise application, I was responsible for three features: a VPN solution allowing customers access to their intranet sites via their mobile phone, various settings to aid in battery conservation and data usage, and a quick way to add new contacts. All these features were documented in specs which were revisited as implementation ran into snafus or usability issues were uncovered.

Design Challenges

My first foray into the exciting world of mobile. The biggest challenge was doing design for such a tiny device.

  • login error for good mobile connect
  • battery conservation preferences

Heart Monitor

Create the next generation of portable heart monitor for Welch Allyn.

My Role

To create this new device, interviews were conducted with hospital personnel, air medics, and combat medics regarding the usage of the current products. From these interviews, requirements were uncovered that dictated the design. Group sessions were held with all stakeholders to discuss form and function as well as some preliminary designs associated with the requirements.

Design Challenges

This project required a lot of travel, at least 75%, to cover the wide range of users and enviroments the new product was targeting. It was fun, but at times the travel got pretty tiring - fortunately, I had good company.

  • propaq monitor
  • encore monitor

Defibrillator

Make design recommendations to improve defibrillators for Welch Allyn.

My Role

The designs were based on research conducted in facility observations and focus groups. After the initial research, I created paper prototypes of the new defibrillator designs to conduct usability testing on the EMTs who would be using the device. The results validated the designs and final recommendations were made to the product team for changes to be implemented for the next release.

Design Challenges

An entirely new field - medical - full of regulations, equipment, and jargon; there was a lot to learn in a short amount of time. I connected with several internal employees who were able to provide many crash courses so that I could learn as much as possible before going into the field and talking with users.

  • vital signs display
  • interface to administer an electrical shock

Designed, created, & even coded by: tiffanie