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 greater 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 and paired 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 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 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 which would automatically list all projects tagged as “touchapps” within the wikispace.
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 documented. Each section had both a brief description of the logic for each state of the patterns as well as examples of each possible state (non-application specific). These examples were provided as both .ai and .psd files so that any of the 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 the use of 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 being an "all hands on deck" week prior to Apple releasing 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.
Periodically the core team would surf the wiki and add tags as needed.
Impact
Through improved cross-team communication, the creation of assets and patterns which 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.
