Animated gif owl used to help liven up Workday internal training e-blasts

Animated gif owl used to help liven up Workday internal training e-blasts

Workday

Everyone at Fluxx was all for making "more user-centric" and "better" applications, but nobody had any clue what we should do in practice to get there. By building the Fluxx Design system, I was able to foster cross-team trust and collaboration while increasing our pace of design and development.

Though the system itself is still in its infancy, it has already been an important factor in establishing a source of truth for an organization that craves consistency because of its history of heading in disparate directions with each product or campaign.

Contents

 

touchpoints-header.png

Mapping the Workday product suite with Workday Touchpoints

Workday has an expansive suite of products, and business development teams at Workday needed to pitch both new and existing clients on the benefits of expanding their product selections.

My primary task on the Workday Touchpoints project was to take existing diagrams and give them a modern, softer look, whilst also adding the concept of functional areas to individual SKUs. In addition, I worked with the Director of Education Content and VP of Education to provide an demonstration of an interactive mobile concept for Workday Touchpoints to present to the leadership team.

  Old Payroll Touchpoints:  One of many original diagrams I was given to start from, showing just the base level Touchpoints, but not the functional areas of the product SKUs.

Old Payroll Touchpoints: One of many original diagrams I was given to start from, showing just the base level Touchpoints, but not the functional areas of the product SKUs.

More than just a face-lift for the Touchpoints diagrams

Workday Touchpoints already included a variety of diagrams for an assortment of various core products in Workday, but Workday was strategically organizing the individual product SKUs into areas groups to aid with the sales process. This provided an interesting challenge with a few must-have restrictions:

  • Each product must fit into a single infographic that could be embedded on webpages
  • All existing "connections" needed to be kept (and in some cases more added)
  • Graphics needed to show SKUs (individual bubbles), functional areas (only in the new redesign), and also sales areas (color codes)
  • Because some areas of Touchpoints were not to be touched, there needed to be a certain degree of parity between the old Touchpoints Kit and the new redesign
 
 The same diagram shown above, after I redesigned it with the functional areas included

The same diagram shown above, after I redesigned it with the functional areas included

Contour bias and becoming best friends with the pen tool

One of the key differences between the prior Touchpoints Kit diagrams and the redesign is the heavy use of curves in the diagrams. The rigid, straight lines in the original diagrams and the sharp angles created at each point disrupted the flow of the eye going between the various SKUs.

I set out to make the diagrams more "approachable and friendly" to viewers, as well as more aesthetically intriguing, and the principles of continuity and contour bias were crucial to achieving that goal. I added a slight curve to each line to give them a sense of motion, and feel almost like a spiral. The functional areas were represented similarly to a planet with the individual SKUs orbiting them, layered in front of and behind the functional area itself to add a sense of depth. Finally, I extended lines wherever possible and drew them toward one another to strengthen the notion of the different pieces all connecting to one another, even though there aren't necessarily connections between two SKUs that share a common connection.

 
 A few of the many Touchpoints infographics, each done by hand in Illustrator.

A few of the many Touchpoints infographics, each done by hand in Illustrator.

Animating with Pixate to convey a continuous journey 

While this Touchpoints infographics project was ongoing, I also designed and prototyped an interaction that was to meld the Touchpoints Kit infographics I had as a starting point with the existing Workday application for an independent application. Although the leadership team ultimately decided the use-case for Touchpoints as a standalone application was not large enough to allocate the resources necessary to build it, the prototype I designed with Pixate was presented at the executive level to articulate the idea.

I mimicked the interaction of the actual Workday flagship application, which would highlight any icons you clicked from the homescreen by filling the canvas with the background color and showcase that icon for a brief time period. This transition then allowed users to switch to the more journey-focused screens where users could see all of the connections for any given SKU. The "secret sauce" of that screen was that users could theoretically jump to any SKU and endlessly flow through the different Touchpoints maps based on what they were interested in.

In hindsight, the design would be difficult to scale as the product suite expanded the ever-growing number of Touchpoints, and would also be difficult to implement. However, the actual navigation interaction was very well-received internally and justified the argument for an interactive experience in a different medium, such as Adobe Captivate, which Workday Education was using for interactive desktop e-learning.

 

Breaking down info-heavy content into "elevator-pitch" style mobile executive briefings

 By 2015, Workday had not yet unified its brand standards. As such, marketing materials like the two videos on the right drew on the official logo colors of orange and royal blue, while the web and native UX teams followed a modified, brighter palette and even a modified logo mark.

By 2015, Workday had not yet unified its brand standards. As such, marketing materials like the two videos on the right drew on the official logo colors of orange and royal blue, while the web and native UX teams followed a modified, brighter palette and even a modified logo mark.

Coming soon


Increasing email engagement with custom HTML e-blasts

Coming soon