top of page
TopNav-adobe

Adobe UX & Plugin

DESIGN DIRECTION, UX/UI DESIGN, STRATEGY & EDUCATION

Adobe and Microsoft started a partnership in 2016 based around Azure and other core areas, since then the partnership has continued to grow throughout products and groups within both companies. Here are a few examples of areas that I helped facilitate while at Microsoft.

Project_articleImage_XD.jpg

Bringing XD to Windows 10 was the first opportunity to carve out a leading position for Microsoft in the eyes of designers as XD had only been available on Mac. The XD team was looking to create a custom UWP experience for creators within the Windows 10 Environment which could highlight the unique capabilities of Windows like dial, pen and cross devices, as well as Cortana. They also wanted to leverage the newly introduced Fluent design language system, toolkits and thinking, to ensure that XD was the poster child for all other product teams within Adobe to reference when bringing products to Windows 10.

​

I was asked to lead the work with the XD design team and provide guidance and feedback on their app XD as it was built and launched for Windows 10.

.

adobe-xd-main-1280x720.jpg

The Engagement

The Adobe engagement was a special relationship between Microsoft and Adobe. It involved a two-part partnership, one that was with Azure and one between the two company’s Design teams. The relationship goal between the teams was to work on enhancing and creating signature experiences between Adobe and Microsoft.

(c)Wakely713225.jpg
IMG_3306.jpeg

I directly worked with the designers and management within Adobe and Microsoft to coordinate numerous Onsite events and cross company meetings in order to define strategies and define the scope of work for the many design partnership endeavors.


​

I also, worked with numerous designers and management within Adobe across their entire suite of products helping them on things like: how best to design for Windows 10, design considerations and also what additional enhancements and features could be exposed and how to make Adobe products work best for Windows.

 

A few of the key Windows 10 app launches with adobe included Photoshop Express, Lightroom, and XD. In addition, I helped with the incubation strategies around Adobe acrobat & future concept opportunities.

.

IMG_3303.HEIC
BHmssH17p-700x525.jpg
bottom-padding.png

The XD Plug-in

The Adobe XD Plugin, “Text translator” was conceptualized during a 3day XD Dev Days hackathon hosted at Adobe. It was an invite only event which was intended to help Adobe develop and test out plug-in ideas for its up and coming release of the feature and showcase at Adobe Max Conference. 

 

The Dev team and I from Microsoft worked on possible prototyping plugins concepts for XD that Adobe could show during the Adobe MAX conference as hero examples. We spent the first half of Day One brainstorming on ideas and vetted out a few key ideas. From there it was conquered and divide. I would along with one other developer worked on the concept of text translation in XD for designers. I defined the plug-in definition to be as simple as possible.

Adobe_Plugin.jpg

Text Translator

A plugin to allow designers to select text elements on the screen and use the Azure Cognitive Services API to provide translations and resource files for UWP applications.

       UX
adobe_wireFlow.jpg

The plugin was designed to be as simple and straightforward as possible. Once a designer was done designing their app and wanted to ensure that their design would adapt for multi-languages, a designer would highlight the text that they wanted translated, go to the Adobe plugin panel, select text translator and launch the plug-in. From the first screen in the plug-in a designer could choose the language to translate to, if they wanted the text to be exported to xml and where, and choose the font color for the new ‘overlayed’ language in the design file.

 

The designer was also given an option to push the xml file to Github in the designer’s repository allowing the designer and developer to work more seamlessly together on assets.

 

The plug-in also gave the benefit to see were ideal truncation was wanted and were a designer might need to adjust to maximize the design for all needed languages.

       UX
Screen0.PNG
Screen1.PNG
Screen2.0.PNG
Screen2.PNG
Screen2.1.PNG
Screen2.2.PNG
Screen4.PNG
bottom of page