ADOBE PATTERN LIBRARY
Description
Moving from boxed products (with their traditional 18-month lifecycle) to a cloud-based recurring revenue model came with an expectation of much more frequent updates. This, coupled with the ability of a customer to unsubscribe at any time, was the driving force behind making our products work more consistently and release more frequently.
By creating a component architecture, we hoped to drive both of these things, but beyond just ensuring consistency of design and speeding time to market, it would allow the individual product designers to concentrate on innovation within their particular domain.
We chose to start with the (then) nascent touch space, as there was a more significant opportunity to effect change. We hoped that success in this area would also bring learnings we could use to roll out this approach across a greater range of products and services.
My Role
I was the user experience lead and acting project manager for this initiative, partnering with designers, product managers, and other key stakeholders from around the world. I also partnered with a local engineering scrum team to deliver these as reusable code.
I began with an audit of the existing body of work and interviewed each of the key stakeholders to get a better understanding of the problem space and their hopes and concerns.
Also, realizing that the adoption of these components would, in part, be driven by my ability to build consensus, I began a series of recurring meetings with a core team to review existing work, work in progress, and the desired functionality of future releases. This, in turn, created a prioritized list of potential components...which was then reviewed with the extended teams (6 offices across 4 countries). Feedback was collected, and designs were iterated.
The results of this initiative were a set of guiding principles, patterns, components (asset sheets), a guide to consistent use of gestures, icons, and an aggregator page that would automatically list all projects tagged as "touch apps" within the wiki space.
To improve ease of adoption, a Getting Started Guide was created as a starting point for new designers to the touch space. It included:
-
the overall goals of the initiative
-
a set of 6 guiding principles for Adobe Touch design,
-
links to a distilled version of both the Android and iOS HIGs
-
a simplified version of our globalization rules (worked on as a collaboration with the localization team)
Established patterns were grouped by affinity and behaviors were documented. Each section had a brief description of the logic for each state of the patterns and examples of each possible state (non-application specific). These examples were provided as both .ai and .psd files so that any designers could use them as a starting point for their designs.
While the patterns were a good starting point for any design, it was through a consistent library of components that designers could still innovate while maintaining the "look and feel" of the Adobe Touch brand.
Asset sheets were created for both Android and iOS in both .psd and .ai format (this was a collaboration with a visual designer on our team, with my giving general direction and feedback as requested). Each OS had its own nuance while maintaining a generally consistent look and feel (while being good citizens of the OS)
I also acted as a liaison with our icon team (located in Germany). I would meet with them weekly to provide feedback on our existing body of icon work and to communicate a prioritized list of our "asks" from the designers. The Icon team would then, in turn, create and maintain the icons within this page. (the exception to this process was an "all hands on deck" the week before Apple released the retina displays...during which every designer on the team was responsible for producing their @2x assets)
Improving cross-team communication became another top goal. (we had teams working on projects in two offices in California, Seattle Washington, Ottawa Canada, Bern Switzerland, Hamburg Germany and Bangalore India)
I created a single reference where any designer could quickly look through the work of their peers, ask questions, and provide feedback.
Through the use of tagging, projects would automatically be added to this page.
The core team would periodically surf the wiki and add tags as needed.
Impact
Through improved cross-team communication, the creation of assets and patterns that could be used as the starting point for any projects, and most importantly, improved communication between all those involved, we were able to effectively improve time to market by a factor of twofold while also maintaining a consistent brand/product experience.
Beyond this, as designers weren't reinventing the wheel (e.g., we no longer would have three designers spending time designing a sign-in experience), we had more time to innovate, resulting in a record number of patent applications for the period following this implementation of this process.
This process was repeated for several other domains based on the success of this initiative, including Web, Professional Products, Enterprise Services (later led by myself), and Consumer Products.
