Blake Wilton

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>Blake Wilton</title>
	<link>https://blakewilton.com</link>
	<description>Blake Wilton</description>
	<pubDate>Mon, 29 Apr 2024 18:08:57 +0000</pubDate>
	<generator>https://blakewilton.com</generator>
	<language>en</language>
	
		
	<item>
		<title>Slideshow</title>
				
		<link>https://blakewilton.com/Slideshow</link>

		<pubDate>Mon, 11 Dec 2017 21:08:19 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/Slideshow</guid>

		<description>
	
	Blake Wilton


Design Systems,Product, Illustration.︎


</description>
		
	</item>
		
		
	<item>
		<title>Featured Projects</title>
				
		<link>https://blakewilton.com/Featured-Projects</link>

		<pubDate>Mon, 11 Dec 2017 21:08:20 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/Featured-Projects</guid>

		<description>
	
	Featured case studies&#38;nbsp;︎

	&#60;img width="1280" height="840" width_o="1280" height_o="840" data-src="https://freight.cargo.site/t/original/i/9342eb33f2dbd0e2691474606035b67ebf2707143947da2adaf9c3512e7d2ae1/Home_Hexagon.png" data-mid="209866391" border="0"  src="https://freight.cargo.site/w/1000/i/9342eb33f2dbd0e2691474606035b67ebf2707143947da2adaf9c3512e7d2ae1/Home_Hexagon.png" /&#62;
Hexagon design systemDesign Systems / UX / UI

&#60;img width="1280" height="840" width_o="1280" height_o="840" data-src="https://freight.cargo.site/t/original/i/9fe96b1c4353da79f3cbd8c193e5a1dd7bc2c5d19f76fc62e59eff9f9a5a36c2/Group_Ordering_Hero_thumbnail.jpg" data-mid="14068522" border="0"  src="https://freight.cargo.site/w/1000/i/9fe96b1c4353da79f3cbd8c193e5a1dd7bc2c5d19f76fc62e59eff9f9a5a36c2/Group_Ordering_Hero_thumbnail.jpg" /&#62;
Cava Group Ordering Feature
UX / UI / Visual Design

&#60;img width="1280" height="840" width_o="1280" height_o="840" data-src="https://freight.cargo.site/t/original/i/0375ac84ed39ef44f9be2bcc9e10200523626946d4b178aa336a7b0751eff803/Design-System-Thumbnail.jpg" data-mid="20220161" border="0"  src="https://freight.cargo.site/w/1000/i/0375ac84ed39ef44f9be2bcc9e10200523626946d4b178aa336a7b0751eff803/Design-System-Thumbnail.jpg" /&#62;
Cava Design SystemDesign Systems / UX / UI

	&#60;img width="1280" height="840" width_o="1280" height_o="840" data-src="https://freight.cargo.site/t/original/i/24f82af57ba03e489b84a84be49cfbe6d7035c75f475dfc55d0c769c7fe974b0/AIML_Thumb_l.png" data-mid="210529754" border="0"  src="https://freight.cargo.site/w/1000/i/24f82af57ba03e489b84a84be49cfbe6d7035c75f475dfc55d0c769c7fe974b0/AIML_Thumb_l.png" /&#62;
AI/ML design system and UX enhancementsDesign Systems / UX / UI

&#60;img width="1280" height="840" width_o="1280" height_o="840" data-src="https://freight.cargo.site/t/original/i/a2aa080be7754421ad5eb2ff8778e63a1ce311c285a140367de42bed5c1c6585/Cava_homepage_hero.jpg" data-mid="14064762" border="0"  src="https://freight.cargo.site/w/1000/i/a2aa080be7754421ad5eb2ff8778e63a1ce311c285a140367de42bed5c1c6585/Cava_homepage_hero.jpg" /&#62;Cava Website Redesign

UX / UI / Visual Design
&#60;img width="1279" height="840" width_o="1279" height_o="840" data-src="https://freight.cargo.site/t/original/i/57574be5cc4800363836b6c920572869f36da9f9ffa4280579e6d98bf1f0d184/TrackMaven_Redesign_Hero2.jpg" data-mid="8617031" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/57574be5cc4800363836b6c920572869f36da9f9ffa4280579e6d98bf1f0d184/TrackMaven_Redesign_Hero2.jpg" /&#62;TrackMaven Site Redesign
UI / Visual Design


	More Projects ︎
</description>
		
	</item>
		
		
	<item>
		<title>Information</title>
				
		<link>https://blakewilton.com/Information</link>

		<pubDate>Mon, 11 Dec 2017 21:08:29 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/Information</guid>

		<description>
	
&#60;img width="3467" height="3467" width_o="3467" height_o="3467" data-src="https://freight.cargo.site/t/original/i/a3a180c5e75109a59e576e286a0adea4643566930b92842ead3666ed8f411c43/Headshot_square.jpg" data-mid="7899393" border="0" data-scale="90" src="https://freight.cargo.site/w/1000/i/a3a180c5e75109a59e576e286a0adea4643566930b92842ead3666ed8f411c43/Headshot_square.jpg" /&#62;
	Blake Wilton︎

Hello, great to meet you!I’m a design systems and product designer based in Seattle, Washington and looking to join my next great team. 

I thrive off of positivity, actionable feedback, delicious coffee, and high fives. 

Let’s make awesome work together.
Get in touch︎


Download resume&#38;nbsp;︎︎︎
</description>
		
	</item>
		
		
	<item>
		<title>All Projects</title>
				
		<link>https://blakewilton.com/All-Projects</link>

		<pubDate>Tue, 02 Jan 2018 16:00:03 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/All-Projects</guid>

		<description>Projects
2012 — Present&#38;nbsp;
</description>
		
	</item>
		
		
	<item>
		<title>Human in the Loop</title>
				
		<link>https://blakewilton.com/Human-in-the-Loop</link>

		<pubDate>Mon, 29 Apr 2024 18:08:57 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/Human-in-the-Loop</guid>

		<description>
	AI/ML Design System &#38;amp; UX Enhancements&#38;nbsp;
AWS Sagemaker Ground Truth Plus
&#60;img width="1969" height="960" width_o="1969" height_o="960" data-src="https://freight.cargo.site/t/original/i/34675905ab58398e421e3b8249261fd8af72a5305097ad216918ef739897324c/AIML_Header_Image.png" data-mid="210487669" border="0"  src="https://freight.cargo.site/w/1000/i/34675905ab58398e421e3b8249261fd8af72a5305097ad216918ef739897324c/AIML_Header_Image.png" /&#62;


	Team:Sr. Designer: Blake (me)My client stakeholder/ design manager
Scope: 5 months
	Background

Provide design consulting support for the AWS AI/ML org, with a focus on annotation tooling.&#38;nbsp;
	The challenge
A fast moving org with limited design support for product tooling which had all been built ad-hoc without any unified standards.&#38;nbsp;&#38;nbsp;
	Project goal
Establish a design system to allow AI/ML product designers to work more efficiently while improving&#38;nbsp;

	
	Limitations and gaps
As a suite of tools within AWS, the choice to leverage Cloudscape, an open-source design system managed by AWS was easy because using Cloudscape would allow the annotation tools to have a matching look and feel to other experiences within the AWS ecosystem, reinforcing customer trust. &#38;nbsp;

However, I learned from exploring the current state that as a suite of productivity tools for annotation, the AI/ML library needed to support two essential modes by default so that designers in the org could build with these modes in their mocks.
Dark modeCompact mode
First, the challenge was that Cloudscape was designed to support the AWS console experience, which by default uses a light palette with lots of whitespace. These design choices are at odds with the dense UI needed for complex annotation tooling. 

Although both dark mode and compact mode were available in the code, neither are common scenarios for AWS console designers, so the Cloudscape design system team never prioritized support for them in Figma libraries. Mode specs are also rarely documented. 
	Identifying gaps
In addition to lack of mode support there were multiple components that Cloudscape did not have and would need to be designed from the ground up for the AI/ML component library. To understand what coverage we would get from Cloudscape out of the box I assembled a component inventory of &#38;nbsp;AI/ML tooling use cases and compared my findings against existing cloudscape components. Out of the roughly 28 component types I found across the annotation tools that I looked at, only 17 could be covered by Cloudscape.

	&#60;img width="1267" height="372" width_o="1267" height_o="372" data-src="https://freight.cargo.site/t/original/i/bc4c3c379f9afb397a3fe26683e9f33cae5e1a8701b9571691cecf446d54d4bd/Cloudscape-inventory.png" data-mid="210119328" border="0"  src="https://freight.cargo.site/w/1000/i/bc4c3c379f9afb397a3fe26683e9f33cae5e1a8701b9571691cecf446d54d4bd/Cloudscape-inventory.png" /&#62;

	As another part of my gap analysis, I conducted a similar inventory of icons being used across the annotation tools, finding 54 different icons with only 22 matching icons available in Cloudscape. Later in the project I redrew many of these icons to match Cloudscape’s icon style.
	&#60;img width="1792" height="1518" width_o="1792" height_o="1518" data-src="https://freight.cargo.site/t/original/i/0bd62d6d58841d1fe14b195d235a130066def4bb5ccafc2d376ad7220e5244f4/Icon-Analysis.png" data-mid="210118225" border="0"  src="https://freight.cargo.site/w/1000/i/0bd62d6d58841d1fe14b195d235a130066def4bb5ccafc2d376ad7220e5244f4/Icon-Analysis.png" /&#62;


	Building the library

	Early challenges
Based on the component needs I discovered in my inventory, I got started building out dark mode and compact versions of Cloudscape components. The core challenge I had was that in order to accomplish this I had to reverse engineer components, relying substantially on inspecting the code on implemented components scattered across demo pages.&#38;nbsp;The benefit of this level of component deep dive was uncovering gaps in the documentation as well as the start of a library that’s built closer to that of the live implementation of components.&#38;nbsp;
	&#60;img width="1081" height="913" width_o="1081" height_o="913" data-src="https://freight.cargo.site/t/original/i/ec2c7670c81403bca5aaa511590f1be5ef51be485315cce1bf294d76b2df746a/Tab-spacing-analysis.png" data-mid="210471849" border="0"  src="https://freight.cargo.site/w/1000/i/ec2c7670c81403bca5aaa511590f1be5ef51be485315cce1bf294d76b2df746a/Tab-spacing-analysis.png" /&#62;

	Variables!
Just as I was finishing re-building the Cloudscape library to support both Dark Mode and Compact with variants, Figma launched Variables. By leveraging Variables I was able to reduce the number of variants per component by 3/4ths. 

	&#60;img width="1670" height="998" width_o="1670" height_o="998" data-src="https://freight.cargo.site/t/original/i/e9335a60a8819d4a435cdc5ea3c6f35bc17b7e7c76735d8be3fe5a7ee2eecaf4/Input_Simplification.png" data-mid="210470499" border="0"  src="https://freight.cargo.site/w/1000/i/e9335a60a8819d4a435cdc5ea3c6f35bc17b7e7c76735d8be3fe5a7ee2eecaf4/Input_Simplification.png" /&#62;For example, with complex components such as the input field, I could reduce its total number of variants from 152 to 38, a far more manageable and maintainable number, while improving the library's overall usability.


	New componentsA collection of components and made for the AI/ML design library.


&#60;img width="3452" height="1172" width_o="3452" height_o="1172" data-src="https://freight.cargo.site/t/original/i/18e7e7b0a0a48acc5c83c3e69a2ed7e4a0dcd971bfdcf9c4598899e79ce9037a/Annotation-token.png" data-mid="210484334" border="0"  src="https://freight.cargo.site/w/1000/i/18e7e7b0a0a48acc5c83c3e69a2ed7e4a0dcd971bfdcf9c4598899e79ce9037a/Annotation-token.png" /&#62;
&#60;img width="3632" height="1892" width_o="3632" height_o="1892" data-src="https://freight.cargo.site/t/original/i/e82c5146b2d5425219524f42f7a0ee1089f4e82b7fd15e11676fa8d6d8a5adb8/Command-Bar.png" data-mid="210485288" border="0"  src="https://freight.cargo.site/w/1000/i/e82c5146b2d5425219524f42f7a0ee1089f4e82b7fd15e11676fa8d6d8a5adb8/Command-Bar.png" /&#62;
&#60;img width="3206" height="1952" width_o="3206" height_o="1952" data-src="https://freight.cargo.site/t/original/i/c532fcfb059bc4f6bb961bab6aa6a5a973884155e82464def7477e68a87e658c/Slider.png" data-mid="210483684" border="0"  src="https://freight.cargo.site/w/1000/i/c532fcfb059bc4f6bb961bab6aa6a5a973884155e82464def7477e68a87e658c/Slider.png" /&#62;
&#60;img width="2902" height="1308" width_o="2902" height_o="1308" data-src="https://freight.cargo.site/t/original/i/f442461dfd87ed451662edf902576a149c28f50e5396c570cab6e4166cd84221/Text-annotation.png" data-mid="210484336" border="0"  src="https://freight.cargo.site/w/1000/i/f442461dfd87ed451662edf902576a149c28f50e5396c570cab6e4166cd84221/Text-annotation.png" /&#62;
&#60;img width="3134" height="1926" width_o="3134" height_o="1926" data-src="https://freight.cargo.site/t/original/i/6a13abff5ad4c4a1bacf4e82137adcaee6bfa4f50048fae058bd0a44f5a7287c/Toast.png" data-mid="210483682" border="0"  src="https://freight.cargo.site/w/1000/i/6a13abff5ad4c4a1bacf4e82137adcaee6bfa4f50048fae058bd0a44f5a7287c/Toast.png" /&#62;


	UX enhancements
 To Exploration of new functional UX based complex tooling use cases including


	The shellBecause many of the annotation tools were built ad-hoc, there were differences in how they were laid out. To simplify, it was important to establish common layout patterns for the tools to be based on. 


&#60;img width="8535" height="4559" width_o="8535" height_o="4559" data-src="https://freight.cargo.site/t/original/i/28e949a6a746c4a32c7436228512747d35fa30366168940c4e033c99f2b162c4/Shell-Analysis.png" data-mid="210462803" border="0" alt="Analysis of 7 annotation use case layouts across 19 different tools. " data-caption="Analysis of 7 annotation use case layouts across 19 different tools. " src="https://freight.cargo.site/w/1000/i/28e949a6a746c4a32c7436228512747d35fa30366168940c4e033c99f2b162c4/Shell-Analysis.png" /&#62;


	Of the 19 tools I examined across 7 use cases, each could be unified under 4 layout types.
	
&#60;img width="2323" height="1442" width_o="2323" height_o="1442" data-src="https://freight.cargo.site/t/original/i/451f67312536a157942b83b789d0f07c611a45add074895c769c0708d1644806/Layout.png" data-mid="210466651" border="0"  src="https://freight.cargo.site/w/1000/i/451f67312536a157942b83b789d0f07c611a45add074895c769c0708d1644806/Layout.png" /&#62;
&#60;img width="2016" height="1335" width_o="2016" height_o="1335" data-src="https://freight.cargo.site/t/original/i/e4c4c81748788b4152dada999d6e1cec15f114a680a2fb25c5de3a072fdb8f46/Layout-1.png" data-mid="210466650" border="0"  src="https://freight.cargo.site/w/1000/i/e4c4c81748788b4152dada999d6e1cec15f114a680a2fb25c5de3a072fdb8f46/Layout-1.png" /&#62;


	Unified UI and page templates
With layouts defined, I created page templates using my new navigation, command bar, and side panel components, which I built using slot components to make components as configurable and flexible for users as possible.
	&#60;img width="1512" height="982" width_o="1512" height_o="982" data-src="https://freight.cargo.site/t/original/i/74f34dfd31cb8ab3dd65d39c108f783adb5431835a1218d741de4e3fc61732b0/Layout-example.png" data-mid="210474609" border="0"  src="https://freight.cargo.site/w/1000/i/74f34dfd31cb8ab3dd65d39c108f783adb5431835a1218d741de4e3fc61732b0/Layout-example.png" /&#62;

	
	Product recommendations: GA launch
Driving impact
Leading up to a large conference and product launch, towards the end of my project, I had the opportunity to re-imagine the experience and interfaces of several AI/ML annotation tools using the system I had been working on.&#38;nbsp;
 
&#60;img width="1442" height="858" width_o="1442" height_o="858" data-src="https://freight.cargo.site/t/original/i/1b6d44f98a13804f2d47cd1459ca89370a8de56409fc4e7c5a9b9c9514367252/Image.png" data-mid="209970831" border="0"  src="https://freight.cargo.site/w/1000/i/1b6d44f98a13804f2d47cd1459ca89370a8de56409fc4e7c5a9b9c9514367252/Image.png" /&#62;
&#60;img width="1442" height="858" width_o="1442" height_o="858" data-src="https://freight.cargo.site/t/original/i/26df44b09bdd0b3808898bb746e8ce4d6357e156770146cbc0b10e8995f2368d/Q_and_A_4.png" data-mid="209970832" border="0"  src="https://freight.cargo.site/w/1000/i/26df44b09bdd0b3808898bb746e8ce4d6357e156770146cbc0b10e8995f2368d/Q_and_A_4.png" /&#62;
&#60;img width="1442" height="858" width_o="1442" height_o="858" data-src="https://freight.cargo.site/t/original/i/f023e9d68886d18eba5d0e725f2eeaf1eb88d3395078b55d92792a43e2d09847/Ranking.png" data-mid="209970833" border="0"  src="https://freight.cargo.site/w/1000/i/f023e9d68886d18eba5d0e725f2eeaf1eb88d3395078b55d92792a43e2d09847/Ranking.png" /&#62;
&#60;img width="1480" height="873" width_o="1480" height_o="873" data-src="https://freight.cargo.site/t/original/i/7d6ccf26ddd7c1a8c2b3edc37e963911f91028ca6c74a4b8d9dd542831069eac/Video.png" data-mid="209970834" border="0"  src="https://freight.cargo.site/w/1000/i/7d6ccf26ddd7c1a8c2b3edc37e963911f91028ca6c74a4b8d9dd542831069eac/Video.png" /&#62;

&#38;nbsp;
	The reimagined UI I worked on was included in the product’s GA launch presentation at the conference and in a corresponding blog post.

&#60;img width="1684" height="1490" width_o="1684" height_o="1490" data-src="https://freight.cargo.site/t/original/i/c94aca62e61d860390ee261b0afb943573e9af939d28395b3125a6c6a8a02146/image-1.png" data-mid="209969070" border="0"  src="https://freight.cargo.site/w/1000/i/c94aca62e61d860390ee261b0afb943573e9af939d28395b3125a6c6a8a02146/image-1.png" /&#62;
	
&#60;img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/8da74ffbc503328786c0eeb6218b3b1461c41fde9c422863834c2086cef51b13/image-4.jpg" data-mid="209969081" border="0"  src="https://freight.cargo.site/w/1000/i/8da74ffbc503328786c0eeb6218b3b1461c41fde9c422863834c2086cef51b13/image-4.jpg" /&#62;
&#60;img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/f791cd3bfc0d22a152e67870cb8837fd23cd8bbd7c8d8154a0e0138429aacaaf/image-2.jpg" data-mid="209969074" border="0"  src="https://freight.cargo.site/w/1000/i/f791cd3bfc0d22a152e67870cb8837fd23cd8bbd7c8d8154a0e0138429aacaaf/image-2.jpg" /&#62;
&#60;img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/7923d903727d08fb4f034cff5f578975259314a56c6848da8c4183f9f1c840ad/image-3.jpg" data-mid="209969078" border="0"  src="https://freight.cargo.site/w/1000/i/7923d903727d08fb4f034cff5f578975259314a56c6848da8c4183f9f1c840ad/image-3.jpg" /&#62;


	Product recommendations: Going further

	In the final stage of my project I re-imagined the UI of other annotation use cases, &#38;nbsp;including the first four UIs I worked on to improve their usability and accessibility as examples for higher leadership to demonstrate what their org’s products could look like with focused design support, and adoption and investment into the system I had started.

	Text&#38;nbsp;annotation


My focus with the text annotation tools was improving color accessibility as well as the information hierarchy.&#38;nbsp;


	Before
&#60;img width="1921" height="977" width_o="1921" height_o="977" data-src="https://freight.cargo.site/t/original/i/d1a410e9cbd08aaabe235cd64bd058b9bc94206396e521d91665c2953eb3e0cf/NER-Before.png" data-mid="209981566" border="0"  src="https://freight.cargo.site/w/1000/i/d1a410e9cbd08aaabe235cd64bd058b9bc94206396e521d91665c2953eb3e0cf/NER-Before.png" /&#62;
	After
&#60;img width="1440" height="1037" width_o="1440" height_o="1037" data-src="https://freight.cargo.site/t/original/i/b2b00ac9dc9a1fee7b437c606277a82a7dbf624adbb2825d3c97a0f6b3787ce8/NER-After.png" data-mid="209981570" border="0"  src="https://freight.cargo.site/w/1000/i/b2b00ac9dc9a1fee7b437c606277a82a7dbf624adbb2825d3c97a0f6b3787ce8/NER-After.png" /&#62;


	Geospatial labeling


Using the shell I designed earlier, the drawing tools needed for geospatial labeling became far easier for users to find and use with a clearer path for editing labels that have been applied.&#38;nbsp;


	Before
&#60;img width="1954" height="878" width_o="1954" height_o="878" data-src="https://freight.cargo.site/t/original/i/1124701e055c8ce1d6b9ecaa2cef2ea633b6906e7986d678657c80c85f76f733/Geo-Before.png" data-mid="209981568" border="0"  src="https://freight.cargo.site/w/1000/i/1124701e055c8ce1d6b9ecaa2cef2ea633b6906e7986d678657c80c85f76f733/Geo-Before.png" /&#62;
	After
&#60;img width="1881" height="975" width_o="1881" height_o="975" data-src="https://freight.cargo.site/t/original/i/e7bc2c2b7b88dbf6e67f1f53b99d1b6f4fb183f3324fd6708116d55c8f9b5a04/Geo-After.png" data-mid="209981569" border="0"  src="https://freight.cargo.site/w/1000/i/e7bc2c2b7b88dbf6e67f1f53b99d1b6f4fb183f3324fd6708116d55c8f9b5a04/Geo-After.png" /&#62;

	Object tracking


An essential improvement to the object tracking UI was pulling the video controls from the command bar and moving them into a dedicated video player pattern. When the video controls were in the command bar, they were disconnected from where users would expect them to be and took up much-needed real estate in the command bar in more complex versions of the use case.&#38;nbsp;


	Before
&#60;img width="1920" height="976" width_o="1920" height_o="976" data-src="https://freight.cargo.site/t/original/i/b6acdaa1ce93d94aa282df0fc3ab587575ab29432c66f3eb225bf0bf468f2711/Object-Before.png" data-mid="209981574" border="0"  src="https://freight.cargo.site/w/1000/i/b6acdaa1ce93d94aa282df0fc3ab587575ab29432c66f3eb225bf0bf468f2711/Object-Before.png" /&#62;
	After
&#60;img width="1881" height="975" width_o="1881" height_o="975" data-src="https://freight.cargo.site/t/original/i/c02ebe08dafac0de354dc9d756ee6e7bae65a5d2a469a6f4b317623fdc37595d/Object-After.png" data-mid="209981575" border="0"  src="https://freight.cargo.site/w/1000/i/c02ebe08dafac0de354dc9d756ee6e7bae65a5d2a469a6f4b317623fdc37595d/Object-After.png" /&#62;
Improvements to initial UIs
A few examples of improvements to the original UIs included making the image and video caption tools dark by default to help users focus on the imagery, and the response-based question and answer UI would use horizontal rows instead of columns to improve the readability of longer text blocks. 


&#60;img width="1440" height="856" width_o="1440" height_o="856" data-src="https://freight.cargo.site/t/original/i/9f82ee235c6563735e8e7524ebdf1e2d0def8a396adcf65bca9b2fc48aa2bb64/Image.png" data-mid="210046850" border="0"  src="https://freight.cargo.site/w/1000/i/9f82ee235c6563735e8e7524ebdf1e2d0def8a396adcf65bca9b2fc48aa2bb64/Image.png" /&#62;
&#60;img width="1440" height="856" width_o="1440" height_o="856" data-src="https://freight.cargo.site/t/original/i/1f2c2950248aefb8db20738969a4b806120a324e125602845d753fc8b22c6006/Video.png" data-mid="210046853" border="0"  src="https://freight.cargo.site/w/1000/i/1f2c2950248aefb8db20738969a4b806120a324e125602845d753fc8b22c6006/Video.png" /&#62;
&#60;img width="1440" height="856" width_o="1440" height_o="856" data-src="https://freight.cargo.site/t/original/i/5ead62608454fbff9890bb8cada6a8011829cd5a0070dae415405881aeeac299/Q_and_A_4.png" data-mid="210046851" border="0"  src="https://freight.cargo.site/w/1000/i/5ead62608454fbff9890bb8cada6a8011829cd5a0070dae415405881aeeac299/Q_and_A_4.png" /&#62;
&#60;img width="1440" height="856" width_o="1440" height_o="856" data-src="https://freight.cargo.site/t/original/i/b5ed4f5b2a3de1a3ea9dee80b224b554912e238953cef45e2026ab64f45a00ec/Ranking.png" data-mid="210046852" border="0"  src="https://freight.cargo.site/w/1000/i/b5ed4f5b2a3de1a3ea9dee80b224b554912e238953cef45e2026ab64f45a00ec/Ranking.png" /&#62;
</description>
		
	</item>
		
		
	<item>
		<title>Hexagon Design System</title>
				
		<link>https://blakewilton.com/Hexagon-Design-System</link>

		<pubDate>Wed, 17 Apr 2024 18:09:35 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/Hexagon-Design-System</guid>

		<description>
	&#38;nbsp; Building a scalable multi-product design systemHexagon design system


	&#60;img width="3814" height="1316" width_o="3814" height_o="1316" data-src="https://freight.cargo.site/t/original/i/6fadaad3ef09d9931aa2cacd936c5cacc957160b4743e7251e7935fc102babcb/Components_Button.png" data-mid="209760243" border="0"  src="https://freight.cargo.site/w/1000/i/6fadaad3ef09d9931aa2cacd936c5cacc957160b4743e7251e7935fc102babcb/Components_Button.png" /&#62;

	Internal team:Sr. Designers: Blake (me), Claudia
Design lead: Rayn

Art director: KerriePM: Lisa
Original scope: 4 months
Total engagement: 1.25 years

	Background
A team within AWS is working on a suite of tools for building custom apps. At the time, consisting of a core, legacy product and two newer supporting products, each managed by its own product team.
	The challengeThe client’s design system had become unmaintained. It was unused by the client’s recently hired younger designers, causing chaos and friction between their design and dev teams and putting the product the system was initially supposed to support at risk.

	Project goalReplace the old system with a flexible, scalable, multi-product design system supported by the formation of a dedicated design systems team, doc site, and governance model.

	
	Getting started: Discovery phase


	The discovery phase involved multiple methods in order to establish a well rounded understanding of the product org and it’s challenges.


	Technical gaps working sessions
Meetings with client engineers and design stakeholders about the current doc site to understand their goals and to find alignment on a path towards a doc site and source of truth that would support both engineering and design users of the design system.


	Process working sessions and demosThe internal team and I conducted working sessions with org leaders and client subject matter experts to understand the different product verticals the new system would need to support and the teams' workflows to create a journey map of their current process.

	User interviewsTo understand the client’s challenges with their existing system, the internal team and I conducted 20 interviews with members of the organization’s design, engineering, and product teams.
 
	Affinitizing insightsArmed with our notes and transcripts, the internal team and I used an affinity diagram to identify common themes, patterns, and pain points among the combined insights from our interviews.

	
&#60;img width="1092" height="792" width_o="1092" height_o="792" data-src="https://freight.cargo.site/t/original/i/7346da43575443df2b3cca880a79dd1e52e8f006b15fb8439268fb7b8fdb48ac/Interview_callout.png" data-mid="209521666" border="0" alt="The first product designer we interviewed summed up the state of current affairs perfectly..." data-caption="The first product designer we interviewed summed up the state of current affairs perfectly..." src="https://freight.cargo.site/w/1000/i/7346da43575443df2b3cca880a79dd1e52e8f006b15fb8439268fb7b8fdb48ac/Interview_callout.png" /&#62;
&#60;img width="2236" height="1376" width_o="2236" height_o="1376" data-src="https://freight.cargo.site/t/original/i/c29d38155b8117f75e589acceb8748f98ac61aaecff772c6efe5a9ff5021a458/Affinity_Diagram.png" data-mid="209519366" border="0"  src="https://freight.cargo.site/w/1000/i/c29d38155b8117f75e589acceb8748f98ac61aaecff772c6efe5a9ff5021a458/Affinity_Diagram.png" /&#62;


	UI and systems auditI audited the core product, the existing design system, and emerging patterns from in-progress design files to understand the current system’s usage and gaps from an implementation standpoint. One of the key outcomes of this part of the process was learning and documenting what this org’s components and properties were named so that the new system could be built using existing, accepted terminology.


	Audit global summary
&#60;img width="1450" height="998" width_o="1450" height_o="998" data-src="https://freight.cargo.site/t/original/i/332ff87bae9cc4e9656c8a9437f4035dac2af3b6beb5e9565cb46db54337ca4b/Audit_Global-summary.png" data-mid="209742649" border="0"  src="https://freight.cargo.site/w/1000/i/332ff87bae9cc4e9656c8a9437f4035dac2af3b6beb5e9565cb46db54337ca4b/Audit_Global-summary.png" /&#62;

	Styles support design vs code
&#60;img width="1238" height="1030" width_o="1238" height_o="1030" data-src="https://freight.cargo.site/t/original/i/4e8f9451220d74d76239388ee60a2b40a2490d019627b40f2619827fa14c136a/Audit_Styles.png" data-mid="209504017" border="0"  src="https://freight.cargo.site/w/1000/i/4e8f9451220d74d76239388ee60a2b40a2490d019627b40f2619827fa14c136a/Audit_Styles.png" /&#62;

	Existing design system audit
&#60;img width="2880" height="1436" width_o="2880" height_o="1436" data-src="https://freight.cargo.site/t/original/i/1565bef9c7165e213774c50a724e7abea4353722f8f6892fbd441249fed5aa61/Component-audit.png" data-mid="209503806" border="0"  src="https://freight.cargo.site/w/1000/i/1565bef9c7165e213774c50a724e7abea4353722f8f6892fbd441249fed5aa61/Component-audit.png" /&#62;Cross-product analysis of component usage in the current system in code vs future.&#38;nbsp;


	UI current state
&#60;img width="2854" height="1648" width_o="2854" height_o="1648" data-src="https://freight.cargo.site/t/original/i/c484fceb29b1dad156a1a1773eeef497434d5d03a11c6989a841f3c377f1b348/UI_Current-state.png" data-mid="209504816" border="0"  src="https://freight.cargo.site/w/1000/i/c484fceb29b1dad156a1a1773eeef497434d5d03a11c6989a841f3c377f1b348/UI_Current-state.png" /&#62;
Auditing the core product's current state revealed many stylistic inconsistencies, including treatments, behaviors, and misaligned elements. 
	Emerging patterns
&#60;img width="2878" height="1672" width_o="2878" height_o="1672" data-src="https://freight.cargo.site/t/original/i/d020d38bac0233eb5ef246635fb9a36b678f31c5ddab11d3faa964dc541f6803/Emerging-patterns.png" data-mid="209504815" border="0"  src="https://freight.cargo.site/w/1000/i/d020d38bac0233eb5ef246635fb9a36b678f31c5ddab11d3faa964dc541f6803/Emerging-patterns.png" /&#62;When looking at active design files, designers across the different products were using completely different visual styles from each other and not the existing design system.&#38;nbsp;
	Component inventory
&#60;img width="1544" height="888" width_o="1544" height_o="888" data-src="https://freight.cargo.site/t/original/i/e1de25f708cc112f5000df7f58ac618c4de680a816feaf92a6c657ca64fb71f2/Component-inventory.png" data-mid="209591160" border="0"  src="https://freight.cargo.site/w/1000/i/e1de25f708cc112f5000df7f58ac618c4de680a816feaf92a6c657ca64fb71f2/Component-inventory.png" /&#62;
Informed by my combined audits, I assembled an inventory of all components that would be carried forward into the new design system, arranged them by which products would use them, and estimated their priority and effort.


	What we learned in our discovery phase was:

	1
The organization had three products, each with their own brand and UI.&#38;nbsp;Plus, we needed full themability to support the customer’s custom apps.


	2
Like many teams within AWS, this org was moving FAST, and it was causing problems.
	3
The product teams had no established delivery processes. 
	4
The project did not have the support of the engineering leaders up front. There was no one to build our components!
	
5
Strong opinions about doc site technology ultimately caused significant delays in having a doc site in time for launch.

	
	Forming our recommendation

	Strategy writing
To conclude the project’s discovery phase while taking into account the reading culture of our client, the internal team and I assembled summeries of our findings and synthisized them into 16+ pages of of strategy documents and reccomendations to get buy in from top level stakeholders. Documents I took responsibility for during this phase included:&#38;nbsp;How design tokens could be utialized in conjunction with the Figma Token Studio plugin to acheive the project vision of a flexible, themable design system based on a single core component libraryA rollout strategy.A collection of well documented Figma best practices&#38;nbsp;A strategy for how Figma capabilities could be leveraged to acheive a more sustainable and connected library ecosystem.
	&#60;img width="1077" height="823" width_o="1077" height_o="823" data-src="https://freight.cargo.site/t/original/i/a1cf2c832bbebd4b57ae8a76bf1ee5bb9d6edd2dbe0c78d57986edf0f72c576e/Recomondations.png" data-mid="209510062" border="0"  src="https://freight.cargo.site/w/1000/i/a1cf2c832bbebd4b57ae8a76bf1ee5bb9d6edd2dbe0c78d57986edf0f72c576e/Recomondations.png" /&#62;

	On managing multi-brand design systems
To illustrate why the need for a theme-able library was critical to the success of the design system, it was essential to highlight the risks the team would accept if we did not build a tokenized library. To communicate this, I presented a hypothetical scenario with the steps needed to make a simple change to medium-button-sized buttons if the systems team were required to maintain three entirely separate component libraries for each of the three products vs. a single central library built with design tokens.&#38;nbsp;With the design tokens approach, the design system team can operate more efficiently, maintain consistency, and have a much lower risk of introducing breaking changes and inconsistencies.


&#60;img width="3678" height="1942" width_o="3678" height_o="1942" data-src="https://freight.cargo.site/t/original/i/5e695964f8ecf975603f45dcf1587b2b36ca998d9ba36923f90488fc0297821c/Managing-Multi-brand-design-systems.png" data-mid="209520581" border="0" alt="A slide from an internal project share-out summarizing a humorous take on multi-brand design system management." data-caption="A slide from an internal project share-out summarizing a humorous take on multi-brand design system management." src="https://freight.cargo.site/w/1000/i/5e695964f8ecf975603f45dcf1587b2b36ca998d9ba36923f90488fc0297821c/Managing-Multi-brand-design-systems.png" /&#62;
&#60;img width="6176" height="5184" width_o="6176" height_o="5184" data-src="https://freight.cargo.site/t/original/i/8f5e1163916a50e885cad1ccd761823e0f13598a6bda1d33b20d3093ab5a9aaa/Honeycode-design-system-Ecosystem-18668.png" data-mid="209595755" border="0" alt="Early example of the way that designer&#38;rsquo;s files, shared libraries, UI kits, tokens, documentation, etc would be interconnected." data-caption="Early example of the way that designer’s files, shared libraries, UI kits, tokens, documentation, etc would be interconnected." src="https://freight.cargo.site/w/1000/i/8f5e1163916a50e885cad1ccd761823e0f13598a6bda1d33b20d3093ab5a9aaa/Honeycode-design-system-Ecosystem-18668.png" /&#62;


	Building components from the ground up: Design phase


	Prioritization workshop
Pulling the component checklist created at the end of the discovery phase into a Figjam board with a quick library, I pulled together with custom voting stickers; I ran a workshop with stakeholders from the client’s design and engineering teams so that they could vote on the order that foundations and components should be designed and handed off. At the end of this workshop, we had a prioritized list of 105+ components and the team’s first glimpse of our design system roadmap. 


&#60;img width="4902" height="9920" width_o="4902" height_o="9920" data-src="https://freight.cargo.site/t/original/i/44345e4c43129bd6ab9bb1672cfd71f99b023bd729d0eef97868c2629ea8b9d1/Instructions_Component-prioritization.png" data-mid="209597122" border="0" alt="Workshop instructions with personalized voting stickers." data-caption="Workshop instructions with personalized voting stickers." src="https://freight.cargo.site/w/1000/i/44345e4c43129bd6ab9bb1672cfd71f99b023bd729d0eef97868c2629ea8b9d1/Instructions_Component-prioritization.png" /&#62;
&#60;img width="3354" height="1620" width_o="3354" height_o="1620" data-src="https://freight.cargo.site/t/original/i/ef44c5a67f292328f0733ec08918b8ad4e02ae41cd990486403c6f02988f713f/Component-prioritization-17515.png" data-mid="209597126" border="0" alt="Making the prioritization workshop interactive and fun for my clients helped build additional trust and got the teams excited about entering the next phase of the project. The stickers were an esspecially a big hit." data-caption="Making the prioritization workshop interactive and fun for my clients helped build additional trust and got the teams excited about entering the next phase of the project. The stickers were an esspecially a big hit." src="https://freight.cargo.site/w/1000/i/ef44c5a67f292328f0733ec08918b8ad4e02ae41cd990486403c6f02988f713f/Component-prioritization-17515.png" /&#62;


	Backlog creation
After finalizing the priority of components, the table was reformatted to have the information we wanted to include on a design ticket. With my PM and a lot of trial and error we succussfully bulk upload the entire prioritized list of components into SIM, Amazon’s internal sprint planning tool, establishing the design system team’s backlog.

	&#60;img width="2290" height="1208" width_o="2290" height_o="1208" data-src="https://freight.cargo.site/t/original/i/1c00e8acc9ca32f684f0c951d437d819873f96714d6137098c91f4e27449d5a4/SIM_Format.png" data-mid="209598645" border="0"  src="https://freight.cargo.site/w/1000/i/1c00e8acc9ca32f684f0c951d437d819873f96714d6137098c91f4e27449d5a4/SIM_Format.png" /&#62;

	File organization
Not only was the team building a design system from the ground up, we were building a design system team from the ground up. Sure, we needed to build out styles and components, but where would we keep them?! What I researched and successfully made a case to design stakeholders was that the design system team and the files it creates and maintains should be kept in a dedicated team within Figma rather than spread out across other product teams within our figma org. Interestingly, best practices on where and how design sytems&#38;nbsp; should be stored in Figma and why is not well documented or discussed.


&#60;img width="3698" height="920" width_o="3698" height_o="920" data-src="https://freight.cargo.site/t/original/i/1dee226583d11945a9609f46d69307f4d5a1ac066d713aadfa073eca3fdfb3a6/Dedicated-Library-teams.png" data-mid="209678808" border="0" alt="Showing precedent for creating a dedicated team within Figma for storing library files. " data-caption="Showing precedent for creating a dedicated team within Figma for storing library files. " src="https://freight.cargo.site/w/1000/i/1dee226583d11945a9609f46d69307f4d5a1ac066d713aadfa073eca3fdfb3a6/Dedicated-Library-teams.png" /&#62;


	Setting a strong foundtion
To ensure foundations could be themeable, it was important from a naming perspective that our accessible colors, text styles, spacing units, etc., were generically named so that values could be changed to anything without causing a breaking change. To support this, I ensured that styles for a given product would be stored in dedicated library files.&#38;nbsp;


&#60;img width="3792" height="1184" width_o="3792" height_o="1184" data-src="https://freight.cargo.site/t/original/i/e2b0ea284ef69fd7be61b235618ef3ce2047d4a1c542793ddccff6d8a2c60268/Screen-Shot-2024-04-24-at-1.42.28-PM.png" data-mid="209681169" border="0"  src="https://freight.cargo.site/w/1000/i/e2b0ea284ef69fd7be61b235618ef3ce2047d4a1c542793ddccff6d8a2c60268/Screen-Shot-2024-04-24-at-1.42.28-PM.png" /&#62;
&#60;img width="1492" height="1280" width_o="1492" height_o="1280" data-src="https://freight.cargo.site/t/original/i/46d8549fd2a774494a6db2dff71de8cdd8aeef2b4415e72ff6e6c5ebaa727b83/Screen-Shot-2024-04-24-at-1.43.57-PM.png" data-mid="209681172" border="0"  src="https://freight.cargo.site/w/1000/i/46d8549fd2a774494a6db2dff71de8cdd8aeef2b4415e72ff6e6c5ebaa727b83/Screen-Shot-2024-04-24-at-1.43.57-PM.png" /&#62;
&#60;img width="1774" height="1112" width_o="1774" height_o="1112" data-src="https://freight.cargo.site/t/original/i/1f0d69e1cd45a9f55a249dbf71fadebbb6521eac4043e31cde8a19adb64e8524/Screen-Shot-2024-04-24-at-1.44.29-PM.png" data-mid="209681173" border="0"  src="https://freight.cargo.site/w/1000/i/1f0d69e1cd45a9f55a249dbf71fadebbb6521eac4043e31cde8a19adb64e8524/Screen-Shot-2024-04-24-at-1.44.29-PM.png" /&#62;
&#60;img width="1821" height="637" width_o="1821" height_o="637" data-src="https://freight.cargo.site/t/original/i/55dcfec1b2b412cd946d2f1fdf3875b09750c65a3698fa8f586137616559eba7/Grids.png" data-mid="209742306" border="0"  src="https://freight.cargo.site/w/1000/i/55dcfec1b2b412cd946d2f1fdf3875b09750c65a3698fa8f586137616559eba7/Grids.png" /&#62;
&#60;img width="723" height="502" width_o="723" height_o="502" data-src="https://freight.cargo.site/t/original/i/42ab1878300d3fe83108147173ad8499863d96eb993ef9ebdec38747c91af5ea/Typescale.png" data-mid="209741453" border="0"  src="https://freight.cargo.site/w/723/i/42ab1878300d3fe83108147173ad8499863d96eb993ef9ebdec38747c91af5ea/Typescale.png" /&#62;
&#60;img width="857" height="556" width_o="857" height_o="556" data-src="https://freight.cargo.site/t/original/i/8433a49641dd553a2034e059c18adb88fc56dcc11f02de926c027e9fa7b950ae/Type-Styles.png" data-mid="209741456" border="0"  src="https://freight.cargo.site/w/857/i/8433a49641dd553a2034e059c18adb88fc56dcc11f02de926c027e9fa7b950ae/Type-Styles.png" /&#62;
&#60;img width="731" height="534" width_o="731" height_o="534" data-src="https://freight.cargo.site/t/original/i/c2820d3e141f341de08a6c2dd488026e4cb2851bdcf18c8b88b2fafdea43d202/Links.png" data-mid="209742662" border="0"  src="https://freight.cargo.site/w/731/i/c2820d3e141f341de08a6c2dd488026e4cb2851bdcf18c8b88b2fafdea43d202/Links.png" /&#62;
&#60;img width="956" height="602" width_o="956" height_o="602" data-src="https://freight.cargo.site/t/original/i/d25e6299ee92e620b9c9d4795a1b9f35af127a946f76532adf9c09840f8c603d/Elevations.png" data-mid="209743177" border="0"  src="https://freight.cargo.site/w/956/i/d25e6299ee92e620b9c9d4795a1b9f35af127a946f76532adf9c09840f8c603d/Elevations.png" /&#62;

Documentation pages from one of the product’s style guide libraries


	Building components
Parallel to the discovery work our team was conducting, Kerrie, our Art Director, had been collaborating with the client’s Creative Director on establishing the new look and feel of the core product. We then used these visual explorations as a jumping-off point for building the new component library. 

To keep our progress with building components on track, I regularly reviewed our process for opportunities to improve. Here are a few process improvements I advised on to help us stay on track.


	1
Playing to our strengthsQuickly pivoting to moving Kerrie, our Art Director, a sprint ahead of the systems designers for a visual design pass on new components before handing off to Claudia and me to build out flexible components with variants and states.

	2
Organization is keyKeeping a complex, fast-moving design system from getting messy requires close attention. To address this, I introduced a staging file to create a clear separation between in-progress design and where completed components are migrated into the main library file at the end of each sprint, reducing confusion during handoff.

	3
Still no docsite 
With the docsite well behind when the library needed to be published, the design systems team had to adapt and build all documentation directly into the Figma library.&#38;nbsp;
	4
Addapting new capabilitiesFigma's Component Property features were released in the middle of building the core library. To take advantage of these new, powerful features, I got a task created for me in the backlog to refactor and simplify existing Figma components over a few sprints so that users of our system would have the best possible experience at launch.
Shout out to our design intern Ethan who was super helpful in this effort.

	
&#60;img width="1666" height="804" width_o="1666" height_o="804" data-src="https://freight.cargo.site/t/original/i/110dca9a7df84d164fac0452353fac2cbfae686ca7de721e7c053f54dd317210/Components_Table.png" data-mid="209760245" border="0" alt="Table component and documentation" data-caption="Table component and documentation" src="https://freight.cargo.site/w/1000/i/110dca9a7df84d164fac0452353fac2cbfae686ca7de721e7c053f54dd317210/Components_Table.png" /&#62;

One of the reasons I recommended the component library be organized with components on their own dedicated pages was so that the library file itself mirrored a docsite-like experience for users of our system. This meant adding frames with component descriptions, states, do’s and don’ts, spacing guidelines, and other documentation. It also meant adding pages to the library containing usage guidelines for complex components and concepts that may not exactly have had components of their own but existed in code, like forms and autosuggest.


&#60;img width="3816" height="2032" width_o="3816" height_o="2032" data-src="https://freight.cargo.site/t/original/i/b1251ed825249cb86d08a8531586ee3fca221da4e1aaf48f3879cdb78889ab09/Components_Forms.png" data-mid="209760244" border="0" alt="Form guidance and documentation" data-caption="Form guidance and documentation" src="https://freight.cargo.site/w/1000/i/b1251ed825249cb86d08a8531586ee3fca221da4e1aaf48f3879cdb78889ab09/Components_Forms.png" /&#62;


	Built-in support and documentationBased on our user interviews, we knew that many of our users were primarily early in their design careers and still learning Figma. To help improve the system's usability and adoption, I provided resources like where to download fonts, how to enable libraries, and, at the component level, short descriptions and links to documentation pages within the core library.
 
&#60;img width="1678" height="351" width_o="1678" height_o="351" data-src="https://freight.cargo.site/t/original/i/22ec39e51ac8cc99d2616bd725b2a9c9cff77fe5758d6e12b2994d6fcfd167ba/Getting-started.png" data-mid="209763708" border="0"  src="https://freight.cargo.site/w/1000/i/22ec39e51ac8cc99d2616bd725b2a9c9cff77fe5758d6e12b2994d6fcfd167ba/Getting-started.png" /&#62;


	Another way we supported users through documentation was with my idea for adding informational “Figma tip” frames to component pages. These tips helped design users learn how certain components could be configured to show a specific interaction in their comps and the best way to set up auto layout to make a custom layout for their use case.
 &#38;nbsp;&#38;nbsp;

&#60;img width="2894" height="882" width_o="2894" height_o="882" data-src="https://freight.cargo.site/t/original/i/310975d77d730af7b28d21a9b180b154b2109efafdc8b6921f50f35c748df286/Figma-Tip.png" data-mid="209764766" border="0" alt="Examples of &#38;quot;Figma tips&#38;quot; included on some of the documentation pages for components." data-caption="Examples of &#38;quot;Figma tips&#38;quot; included on some of the documentation pages for components." src="https://freight.cargo.site/w/1000/i/310975d77d730af7b28d21a9b180b154b2109efafdc8b6921f50f35c748df286/Figma-Tip.png" /&#62;


	Roll out


	After months of intensive component building, the MVP for the new design system was ready to be rolled out to the users in the product org in the early fall of 2022. 


	Pre launch design-ops
Before we hit publish on the libraries, I organized a design-ops working session with design stakeholders in the org to facilitate setting up support systems and communication channels to ensure smooth adoption by our users and long-term success. Because I was a consultant, I recommended that I not be the owner of many of these systems because of the disruption that would be caused when the engagement ended. This included the standing invites to the office hours meeting, for example.

	&#60;img width="3142" height="1708" width_o="3142" height_o="1708" data-src="https://freight.cargo.site/t/original/i/11b21b5a10c6bb231b45a8e4ca7852c1847df29fabb727b9ac5b47b70b45b9b0/Support-systems-inventory.png" data-mid="209767531" border="0"  src="https://freight.cargo.site/w/1000/i/11b21b5a10c6bb231b45a8e4ca7852c1847df29fabb727b9ac5b47b70b45b9b0/Support-systems-inventory.png" /&#62;

	Lauching the system
After establishing all the support channels, we were ready to hit publish and open the design system’s libraries up for the entire org. That same week, the design systems team met with the product teams, formally introducing the system and the designers and developers managing it. This meeting included an overview of the new process and delivery improvements to remedy the challenges uncovered by the systems team in the discovery phase and how, as design system users, they can receive help from the systems team.
&#38;nbsp;


&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/2fe3ebfa7ed38ab75a17a563ad74ccc09ed90c6130aeb5268f6e35dd3fb21575/Overview--5.png" data-mid="209773336" border="0" alt="Cross product collaboration with the design systems team" data-caption="Cross product collaboration with the design systems team" src="https://freight.cargo.site/w/1000/i/2fe3ebfa7ed38ab75a17a563ad74ccc09ed90c6130aeb5268f6e35dd3fb21575/Overview--5.png" /&#62;
&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/b56d89791c5c01698916f9b32836df1c36a76a06e67ec6f68286a7f8176087fa/Overview--6.png" data-mid="209773337" border="0" alt="Credit to Nathan Curtis for the format of this slide" data-caption="Credit to Nathan Curtis for the format of this slide" src="https://freight.cargo.site/w/1000/i/b56d89791c5c01698916f9b32836df1c36a76a06e67ec6f68286a7f8176087fa/Overview--6.png" /&#62;
&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/72f84c6ca4b7f4180cc5a5c095c2ae98d754d4b409114bf14a39ce8a9da6ce43/Process--8.png" data-mid="209773339" border="0" alt="Watching our system's adoption gain steady growth in the first weeks of making it available was an exciting feeling." data-caption="Watching our system's adoption gain steady growth in the first weeks of making it available was an exciting feeling." src="https://freight.cargo.site/w/1000/i/72f84c6ca4b7f4180cc5a5c095c2ae98d754d4b409114bf14a39ce8a9da6ce43/Process--8.png" /&#62;

 
The systems team grows
When the system launched, a few changes happened on the systems team. What had been a small, tight-knit team of four advanced-level design consultants + our client-side design system stakeholder had become an ultra-efficient, component-building machine became three advanced-level design consultants + our design system stakeholder, and three new designers with varying systems experience from the client side. For the team's continued success, I had to adapt quickly by shifting from a very hands-on contributor role into a more strategic design ops role. Although this meant building fewer components, I was now able to document previously unwritten processes, create templates to speed up workflows, and ramp up the new designers on the team while shaping new processes for bug fixes, handoff, preventing breaking changes, deprecating components, and supporting the product side designers adopt and learn the system. 


	Preventing breaking changes
With the design system published and in active adoption, the team’s new responsibility was not to break anything for our users. To prevent this, I needed to quickly find ways to ensure that changes to existing components could be done safely and that new components were not being published to the library without being fully signed off. My first steps were documenting best practices and introducing guardrails by segmenting workflows into specific locations, including the staging file, dedicated developer handoff files, and peer-reviewed branches, before merging new components or updates into the core library.


&#60;img width="2264" height="1462" width_o="2264" height_o="1462" data-src="https://freight.cargo.site/t/original/i/00c0bbb5fb7bf85b8969a3fb101b810f38ac5c5fdb26cb2d54e7eb77ad9cca50/Breakjing-changes.png" data-mid="209824932" border="0"  src="https://freight.cargo.site/w/1000/i/00c0bbb5fb7bf85b8969a3fb101b810f38ac5c5fdb26cb2d54e7eb77ad9cca50/Breakjing-changes.png" /&#62;
&#60;img width="3238" height="1970" width_o="3238" height_o="1970" data-src="https://freight.cargo.site/t/original/i/3dddce11fb6078273d3c68e1c877a685cce899933f2f5002d084796e295670e1/Migration.png" data-mid="209824934" border="0"  src="https://freight.cargo.site/w/1000/i/3dddce11fb6078273d3c68e1c877a685cce899933f2f5002d084796e295670e1/Migration.png" /&#62;
&#60;img width="2454" height="1754" width_o="2454" height_o="1754" data-src="https://freight.cargo.site/t/original/i/d93e44e293518d9f6473f16d363c987211431bebadce5d9238299f9cf5ed0ced/Branch.png" data-mid="209824931" border="0"  src="https://freight.cargo.site/w/1000/i/d93e44e293518d9f6473f16d363c987211431bebadce5d9238299f9cf5ed0ced/Branch.png" /&#62;
&#60;img width="3840" height="1940" width_o="3840" height_o="1940" data-src="https://freight.cargo.site/t/original/i/738c4f9f5a6d6b6790d9db785b914fc297103f4dc9060768515266aca5b12ccc/Dev_Handoff.png" data-mid="209824933" border="0"  src="https://freight.cargo.site/w/1000/i/738c4f9f5a6d6b6790d9db785b914fc297103f4dc9060768515266aca5b12ccc/Dev_Handoff.png" /&#62;


Standardizing a unified approach to component building
At the beginning of the project, when the team was smaller, we could build new components together with a clear alignment on how they should be built&#38;nbsp;and collaboratively finetuned our approach as we raced towards the target launch date. When the systems team grew post-launch, there was a pressing need to align the new system designers with our methodology for building components so that the quality of the components in the library remained consistent with our standards. Additionally, a bigger team and many more pieces in motion meant I was reviewing many more designers’ work and started to feel increasing strain the longer I had to QA a component that was not yet ready for review. My approach to addressing this challenge was two-fold. 
 

	1.
I wrote set of design tenets for the systems team to align the team’s thinking at the conceptual level.


&#60;img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/a0369bec91ce30040395b8e928ac6e4b131d8a9fd1a0411698f5a4e03872a0a5/1.-Componants-are-built-as-flat-as-possible.png" data-mid="209815418" border="0"  src="https://freight.cargo.site/w/1000/i/a0369bec91ce30040395b8e928ac6e4b131d8a9fd1a0411698f5a4e03872a0a5/1.-Componants-are-built-as-flat-as-possible.png" /&#62;
&#60;img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/ce373df2e7623ee00653c22b79a95e709d12de96f6386b36578018910b80da14/2.-Componants-are-flexible.png" data-mid="209815419" border="0"  src="https://freight.cargo.site/w/1000/i/ce373df2e7623ee00653c22b79a95e709d12de96f6386b36578018910b80da14/2.-Componants-are-flexible.png" /&#62;
&#60;img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/5344b832e71dd89e85339ac435830bceaa59615a219fc0846bf05d599baf3d13/3.-Components-use-linked-colors-and-styles.png" data-mid="209815420" border="0"  src="https://freight.cargo.site/w/1000/i/5344b832e71dd89e85339ac435830bceaa59615a219fc0846bf05d599baf3d13/3.-Components-use-linked-colors-and-styles.png" /&#62;
&#60;img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/d91263339d878c56f9d9ad3b2f36d56394603e83a27b0967ab443cf62f8a1d6c/4.-Components--layers--and-properties-are-clearly-named.png" data-mid="209815421" border="0"  src="https://freight.cargo.site/w/1000/i/d91263339d878c56f9d9ad3b2f36d56394603e83a27b0967ab443cf62f8a1d6c/4.-Components--layers--and-properties-are-clearly-named.png" /&#62;
&#60;img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/5de25c512cecc4c140baf7f409827d7403b078102a6cec7fa16f9b6d216c6916/5.-Configuring-an-instance-is-efficient-and-intuitive-to-users.png" data-mid="209815422" border="0"  src="https://freight.cargo.site/w/1000/i/5de25c512cecc4c140baf7f409827d7403b078102a6cec7fa16f9b6d216c6916/5.-Configuring-an-instance-is-efficient-and-intuitive-to-users.png" /&#62;
&#60;img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/6a37aa3da9e766d15652568581ac10703fb2f543cc6e45f82b399f0280b62f3b/6.-Components-are-discoverable.png" data-mid="209815423" border="0"  src="https://freight.cargo.site/w/1000/i/6a37aa3da9e766d15652568581ac10703fb2f543cc6e45f82b399f0280b62f3b/6.-Components-are-discoverable.png" /&#62;

	2.Wrote a QA process for “Builders” and “Reviewers” with a supporting checklist component for designer’s artboards.

&#60;img width="1871" height="1098" width_o="1871" height_o="1098" data-src="https://freight.cargo.site/t/original/i/88957daba47833217e407b6e22464ce92823920453e0fd45df1b877fdc3b2de3/Component-QA.png" data-mid="209818146" border="0" data-scale="94" src="https://freight.cargo.site/w/1000/i/88957daba47833217e407b6e22464ce92823920453e0fd45df1b877fdc3b2de3/Component-QA.png" /&#62;


	Theming and design tokens

	It is a conventionally known fact that anything involving design tokens is challenging. Our team encountered plenty of&#38;nbsp;limitations, hurdles, and challenges in this part of the project. For example:
 &#38;nbsp;
Limitation: AppSec&#38;nbsp;An unanticipated limitation to the fundamental keystone of realizing our proposal for building a themable, multi-brand design system was what would happen if AppSec did not allow our team to use the Figma Token Studio plugin, the only solution for this scenario before Figma Variables. For months, our design system&#38;nbsp;stakeholder&#38;nbsp;had been tirelessly working behind the scenes to get AppSec approval to use the Token Studio plugin but&#38;nbsp;to no avail, resulting in a substantial delay in investment&#38;nbsp;into&#38;nbsp;getting started on theming. 

In the final months of the engagement, our design system stakeholder finally escalated our ticket high enough within AppSec that we were able to get started using a version of the plugin. This meant a hard piviot&#38;nbsp;for me, from managing and authoring the component library to running as far and fast as possible on design tokens to set the team up for success before the project’s budget for consultants expired. 


	Once we started writing tokens, I discovered that for some component types where icons and text were together, each was slightly different in color; although intentional, they needed to be consistent. In my exploration, these inconsistencies could be addressed with a prominence scale to ensure that tokens remained reusable while keeping the components aligned with the original visual design. 
	
&#60;img width="2764" height="1716" width_o="2764" height_o="1716" data-src="https://freight.cargo.site/t/original/i/034c1bebb1fadcf31e4cfa6759c6c0c29116e8936a7f97ee4c196c794eec6051/Analysis.png" data-mid="209835131" border="0"  src="https://freight.cargo.site/w/1000/i/034c1bebb1fadcf31e4cfa6759c6c0c29116e8936a7f97ee4c196c794eec6051/Analysis.png" /&#62;


	Hurdle: A reluctent engineering teamOne of the main hurdles we faced moving forward with theming initially was some differing thoughts on how theming could be accomplished by our engineering partners. However, the gap where non-developers could create new themes and see them in their design files remained. The good news is within a few meetings, the value of design tokens and my recommendation were ultimately accepted, unblocking the team and allowing us to move forward. (Except for a funny conversation I had with one of the devs who further validated my approach when he asked an AI for a token model, and it repeated back what I’d been saying the whole time.)

Challenge: Explaining tokens and theming to a non technical audience
Part of the vision for theming was that any designer in the org could switch between branded product tokens and create a new theme and see it applied to their design. Token Studio, although powerful, has a pretty decent learning curve. This is not only in how it's built but also requires a baseline understanding of design token logic and structure. 


&#60;img width="3796" height="1838" width_o="3796" height_o="1838" data-src="https://freight.cargo.site/t/original/i/71ad42cf64d736ee22002eee54dbbbc9f8bf141d74be5b4a59976cd851a6d8d3/Understanding-tokens.png" data-mid="209850546" border="0"  src="https://freight.cargo.site/w/1000/i/71ad42cf64d736ee22002eee54dbbbc9f8bf141d74be5b4a59976cd851a6d8d3/Understanding-tokens.png" /&#62;With the consulting budget almost ending at this point, I taught the most senior of the client's system designers a crash course in design tokens, then shifted my focus once again, this time from writing tokens to documenting as many core concepts as I could to explain design tokens to non-developers and transition plan.

&#60;img width="3810" height="1254" width_o="3810" height_o="1254" data-src="https://freight.cargo.site/t/original/i/1556245a076e2166bee230bca90ab6a48ed4693d4ed26c255cc5aadaa9dd2516/Understanding-token-studio.png" data-mid="209850548" border="0"  src="https://freight.cargo.site/w/1000/i/1556245a076e2166bee230bca90ab6a48ed4693d4ed26c255cc5aadaa9dd2516/Understanding-token-studio.png" /&#62;


	In conclusion


	TakeawaysTo say that I learned so much on this project is an understatement. Most of all,&#38;nbsp;this project&#38;nbsp;allowed me to improve my ability to build and scale collaborative processes, context switch, mentor designers across my team and larger&#38;nbsp;org, and affirm that I love building design systems and am good at it. 


	Kudos
At the begining of every new sprint, the the engineers, designers, and PM of the design systems team would meet together for a retro of the previous sprint. Here is a collection of some of the shoutouts I recieved over the course of the entire project.&#38;nbsp;
	&#60;img width="1429" height="922" width_o="1429" height_o="922" data-src="https://freight.cargo.site/t/original/i/afe782d957760f88836d32d81e3251bfd354617e1139d97cc6f82c744381c985/Kudos.png" data-mid="209865731" border="0"  src="https://freight.cargo.site/w/1000/i/afe782d957760f88836d32d81e3251bfd354617e1139d97cc6f82c744381c985/Kudos.png" /&#62;
</description>
		
	</item>
		
		
	<item>
		<title>Cava Digital Ordering</title>
				
		<link>https://blakewilton.com/Cava-Digital-Ordering</link>

		<pubDate>Tue, 02 Jan 2018 14:28:07 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/Cava-Digital-Ordering</guid>

		<description>Cava Digital Product&#38;nbsp; Group Ordering Feature DesignUX/UI, Product Design, User Testing

	&#60;img width="1280" height="960" width_o="1280" height_o="960" data-src="https://freight.cargo.site/t/original/i/9ac3cf80e7eaadb7dad8d08262ba7e24f469e99f15a2665db7d18c92660bcf47/Group_Ordering_Hero.jpg" data-mid="17683691" border="0"  src="https://freight.cargo.site/w/1000/i/9ac3cf80e7eaadb7dad8d08262ba7e24f469e99f15a2665db7d18c92660bcf47/Group_Ordering_Hero.jpg" /&#62;

	Team:

Nikki and Josh, Product Owners
Blake, Product Designer

Eli, iOS Engineer

Corey, Fullstack Engineer
Brandon, Front-end Engineer


	Background︎Group Ordering is a feature that allows people to order a meal together that I designed for Cava’s digital product, a platform that provides ways for customers to order their meal online for pickup or delivery. A third party agency had built the original version of the app before I started and the Group Ordering side of it was failing on a number of levels to the point that the CEO asked that the feature to be turned off until my team was able to fix it. The original feature seemed to be mainly failing because of how it was initially designed. This lead to confusion about the difference between a regular digital order and a group order, what actions a group leader needs to perform to send a group order as well as system being generally unstable and doing strange things like locking customers out of their order making it a massive headache for the customer experience team.  The Challenge︎
One of the main things that had to be solved for first was creating a clear distinction between the role of a group leader and the group members they invite while considering a significant business rule where pickup times are in the system are throttled which drives the digital ordering system and how orders are sent to restaurant locations which means a set number of digital orders can be submitted for any given pickup time. Moreover, because a group order can be a variable size, the whole system needed to be fully dynamic. &#38;nbsp;
	

	&#60;img width="1000" height="1000" width_o="1000" height_o="1000" data-src="https://freight.cargo.site/t/original/i/a66d50c0ca8e3c96824b1c978467870f5b51c6bfbb6ef1bfa41ee3e1a699fdf8/Group-bag_Sketch.jpg" data-mid="8771274" border="0" data-scale="100" alt="Sketch for redesigning the group leader's bag" data-caption="Sketch for redesigning the group leader's bag" src="https://freight.cargo.site/w/1000/i/a66d50c0ca8e3c96824b1c978467870f5b51c6bfbb6ef1bfa41ee3e1a699fdf8/Group-bag_Sketch.jpg" /&#62;Sketch for redesigning the group leader's bag

	The Timer︎Because wrangling any number of people to complete a specific task in a set amount of time is like herding cats, this is something that needed to be solved for. An idea I pitched was that if a Cava customer is ordering their lunch via a web or mobile app then with a high degree of certainty, that customer has an above average technological literacy and may have also ordered concert tickets, bought a plane ticket online or maybe is even a member of a daily deals site. What all of those experiences have in common is a timer, and what if Group Ordering had one? The hypothesis we wanted to test in our first prototype was that customers would have enough familiarity with timers as a way of driving action that we would be able to instill a sense of urgency with group members to complete their orders and not loose their pickup time.&#38;nbsp;
	

&#60;img width="1440" height="1486" width_o="1440" height_o="1486" data-src="https://freight.cargo.site/t/original/i/e45547de0744d1a07240ec776e5b669dc1b56f054e00953939600af44f9f7138/06b-Moderator-Bag---expanded-member.jpg" data-mid="8696195" border="0" alt="View of a customer&#38;rsquo;s &#38;ldquo;bag&#38;rdquo; of a rather full group order showing the expand and collapse functionality of group member order cards." data-caption="View of a customer’s “bag” of a rather full group order showing the expand and collapse functionality of group member order cards." src="https://freight.cargo.site/w/1000/i/e45547de0744d1a07240ec776e5b669dc1b56f054e00953939600af44f9f7138/06b-Moderator-Bag---expanded-member.jpg" /&#62;

The redesign of a group leader’s “bag” view highlighting 
an expanded group member’s order

	Testing process︎

To stay on the right track, the project was broken down into design sprints. In the early part of the week, the team and myself would create a hypothesis for what we wanted to test. From there, I would design, and create a prototype (using Sketch and InVision) in the middle of the week, followed by peer review of the prototype on Thursday, and then on Friday I would lead a full day of user-testing.

	User Testing – Round 1︎In our first prototype to test how customers would react to a timer, I used the existing digital ordering flow as a jumping off point with some essential modifications including a new “bag” view where the group’s orders are collected and managed by the group leader before checkout. For the “bag” re-design I made group member’s orders display as cards to make the experience easier to scan and to be more personal and manageable for larger group sizes. In our test customers responded positively to the timer in the prototype like we hypothesized, however following the same user flow as the existing digital ordering was not going to work.
What we learned︎What was learned from this test was that having customers choose their pick-up time at the end of the process like digital ordering as an individual, a group leader would not know if their desired pick-up was available until checkout. Because pickup times are throttled, it is possible that because of a group’s size their desired pickup time may be unavailable when they reach the checkout phase. If this were to happen all of the customers we spoke to told us they would abandon their order and go somewhere else.&#38;nbsp;
	

	User Testing – Round 2︎Taking everything that was learned from our first user test, the prototype’s user flow had to be completely rethought where the time slot selection was moved the beginning of the ordering experience as well as making it easier for the custom URL that allows group members to join a group order to be sent.&#38;nbsp;

	
	&#60;img width="2532" height="938" width_o="2532" height_o="938" data-src="https://freight.cargo.site/t/original/i/287ea1c4208d902fc8b42faddae44e287781eec800e13389efc76def9718a01f/go_user_flow.jpg" data-mid="8676284" border="0" data-scale="100" alt="An early user flow visualizing how a group leader might set up and complete their order while taking into account hiccups that might happen along the way." data-caption="An early user flow visualizing how a group leader might set up and complete their order while taking into account hiccups that might happen along the way." src="https://freight.cargo.site/w/1000/i/287ea1c4208d902fc8b42faddae44e287781eec800e13389efc76def9718a01f/go_user_flow.jpg" /&#62;Re-thinking how a group leader might set up and complete their order and thinking through where an error might happen that a group leader would need to address along the way.


&#60;img width="1440" height="960" width_o="1440" height_o="960" data-src="https://freight.cargo.site/t/original/i/371e3652138ce29af1d0173001007c271ddd6b8eb6f9caa76a5f0f81c50bdb26/04b-Choose-time-slot-Copy.png" data-mid="8676280" border="0" alt="Step 1 &#38;amp; 2: Selecting group size and choosing pick up time" data-caption="Step 1 &#38;amp; 2: Selecting group size and choosing pick up time" src="https://freight.cargo.site/w/1000/i/371e3652138ce29af1d0173001007c271ddd6b8eb6f9caa76a5f0f81c50bdb26/04b-Choose-time-slot-Copy.png" /&#62;
&#60;img width="1440" height="960" width_o="1440" height_o="960" data-src="https://freight.cargo.site/t/original/i/723c98374ead7f427e0fbe9955a1db090681c150a843b67e9a1bfdf4cee40514/04d-Choose-Time-Slot.png" data-mid="8676282" border="0" alt="Step 3: Copy join links and begin order" data-caption="Step 3: Copy join links and begin order" src="https://freight.cargo.site/w/1000/i/723c98374ead7f427e0fbe9955a1db090681c150a843b67e9a1bfdf4cee40514/04d-Choose-Time-Slot.png" /&#62;


	What we learned︎What we learned from our second round of testing was that we had hit upon a user flow and design that customers were responding really positively to and were completing everything we were testing for in the prototype with out any major confusion. Mission accomplished? Not quite yet.
	

&#60;img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/9fcd44891e505d9f59e3378b07391b998fbc20c94eb897ccde27229aee9e5d7a/IMG_7788.JPG" data-mid="8676279" border="0" alt="User flow of selecting a new time/ adding more members to the group" data-caption="User flow of selecting a new time/ adding more members to the group" src="https://freight.cargo.site/w/1000/i/9fcd44891e505d9f59e3378b07391b998fbc20c94eb897ccde27229aee9e5d7a/IMG_7788.JPG" /&#62;
&#60;img width="948" height="734" width_o="948" height_o="734" data-src="https://freight.cargo.site/t/original/i/44825484cebdc1c9676f8ba1018c722c36a50e1b5b95f08ba6ef98277403b05c/Screen-Shot-2018-01-01-at-8.07.15-PM.png" data-mid="8676281" border="0" alt="The model customers receive when their timer expires" data-caption="The model customers receive when their timer expires" src="https://freight.cargo.site/w/948/i/44825484cebdc1c9676f8ba1018c722c36a50e1b5b95f08ba6ef98277403b05c/Screen-Shot-2018-01-01-at-8.07.15-PM.png" /&#62;


	Final details︎Now that we had a prototype that was testing well, a challenge that still needed to be worked out was what happens when the timer runs out. Surely not delete a customer’s entire order, (which of course is a choice we would want to give but not make for a customer) but provide a painless way to get the order going again with a new pickup time should the customer wish to continue. The solution I worked out was when the timer expires; the customer gets the above model that would either cancel their order or return them to the order set-up page. If the timer has expired and there was a change of order size, by returning to the order set-up page the customer would be able to select a new pick-up time or if they needed to add a more people to their group order and send them some join links. Conversely, if the group saw members drop out for any reason, the group leader could choose to select a smaller group size which might open up more pick up-time options that were previously unavailable.

Conclusion︎
In conclusion designing and prototyping Group Ordering, a feature that is incredibly important to the growth of the business in a highly competitive space was a terrific and challenging experience that will help Cava’s customers in new ways. Group Ordering is now in production and will be relaunching in the Cava digital ordering app in 2018.
Want to see more? Play with the prototype! ︎
	︎
As the only Product Designer on this project, all design and prototyping were done by me, while collaborating closely with key stakeholders and engineers. User testing was led by myself, with the help of our head of Brand, who selected our testing candidates, and engineering team who all helped record feedback and test my prototype. Being the only designer on this project was a unique challenge and I’m lucky to have worked with such an insightful, and supportive team. I couldn’t have done it without them.


</description>
		
	</item>
		
		
	<item>
		<title>Cava Website Redesign</title>
				
		<link>https://blakewilton.com/Cava-Website-Redesign-1</link>

		<pubDate>Sat, 30 Dec 2017 20:10:53 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/Cava-Website-Redesign-1</guid>

		<description> 

Cava Website Redesign
UX/UI, Visual Design&#60;img width="1440" height="1080" width_o="1440" height_o="1080" data-src="https://freight.cargo.site/t/original/i/683568c2bb7114643620b9832e188576ea86966f4a94cc552590d30e8b82edbe/Cava_homepage_hero_1440.jpg" data-mid="8966414" border="0"  src="https://freight.cargo.site/w/1000/i/683568c2bb7114643620b9832e188576ea86966f4a94cc552590d30e8b82edbe/Cava_homepage_hero_1440.jpg" /&#62;
Homepage designProject Background︎In early 2017 the Cava brand team and I began the process of redesigning Cava’s website. As Cava’s only digital designer at the time my responsibilities included creating the new user experience, visual design and presenting my concepts and progress to stakeholders.This was a tremendous undertaking but an incredible opportunity to help shape the future of the brand and how to create an experience that puts customers first. 

The Main Navigation︎Designing the main navigation for the new Cava site was a unique challenge. One of those challenges was navigating an ever-evolving list of content requirements that added a new menu item every few weeks or so. The second challenge was how can I design a mobile navigation without using the word “Menu” as that is already one of the navigation options and a significant one at that. I knew I did not want to use a hamburger nav as research shows they perform incredibly poorly with users. Where I landed was something akin to hamburger navigation but styled in a way that suggests the movement of the menu overlay from the bottom of the screen with the menu navigation items ordered in order of importance from bottom to top to optimize for easy access on larger devices.


	&#60;img width="491" height="700" width_o="491" height_o="700" data-src="https://freight.cargo.site/t/original/i/7a48c0e40f6266b7b634afa28280e7ee6000eeb3f993e289484b18f87ae975dc/Slide-out-menu.jpg" data-mid="19987592" border="0" data-scale="100" src="https://freight.cargo.site/w/491/i/7a48c0e40f6266b7b634afa28280e7ee6000eeb3f993e289484b18f87ae975dc/Slide-out-menu.jpg" /&#62;One of my ideas for&#38;nbsp; accommodating the large amount of menu items was to have the mobile menu slide out from the side while having an easily accessible button for online orders.

	&#60;img width="413" height="800" width_o="413" height_o="800" data-src="https://freight.cargo.site/t/original/i/a63a40f29c507f94aefbbe1161da13ee646c71fb1970eddcda44107277711643/Cava-mobile-menu-animation-reduced-size.gif" data-mid="19987594" border="0"  src="https://freight.cargo.site/w/413/i/a63a40f29c507f94aefbbe1161da13ee646c71fb1970eddcda44107277711643/Cava-mobile-menu-animation-reduced-size.gif" /&#62;
Mobile navigation design that reorders the menu items from left to right to top to bottom in order of importance to the user.
	&#60;img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/f0be6018edc9bea893df3a58b776d0370d8bdebcdc25f0e9b8fd32cf5c5bbb47/Cava_homepage_Desktop.jpg" data-mid="19987858" border="0"  src="https://freight.cargo.site/w/1000/i/f0be6018edc9bea893df3a58b776d0370d8bdebcdc25f0e9b8fd32cf5c5bbb47/Cava_homepage_Desktop.jpg" /&#62;
A goal for the main navigation was to create something clean and user friendly. The original version of the site used white text without a background which made it very hard to read in many places on the site. Putting the main navigation on a solid background was something I knew I wanted to do very early on in the project.

	
	Building a Better Menu Page︎Cava is a restaurant company, so the menu page is one of the most important on the site. Based on customer feedback we knew that the previous design was overwhelming and with all it’s, allergen, nutritional, and sourcing information spread across multiple static subpages it was confusing as well. My vision for this page was making the menu more approachable and combining all the dietary and nutritional data into a single interactive tool that would allow a customer to dynamically filter the menu based on their individual needs while creating an experience a customer would have in one of Cava’s restaurants.
	

&#60;img width="1000" height="1000" width_o="1000" height_o="1000" data-src="https://freight.cargo.site/t/original/i/bf3008dddb89c404ad496203a5d638035bf5cbbd85165305d0b91f9f9e7cc81c/Cava_Menu_Filter_Sketch_2.jpg" data-mid="8758327" border="0"  src="https://freight.cargo.site/w/1000/i/bf3008dddb89c404ad496203a5d638035bf5cbbd85165305d0b91f9f9e7cc81c/Cava_Menu_Filter_Sketch_2.jpg" /&#62;
&#60;img width="4006" height="2443" width_o="4006" height_o="2443" data-src="https://freight.cargo.site/t/original/i/fe69858f9596bf6253d8f5996f11b556dde0ff732903d9a42a8107ff42634975/Cava_Menu_Filter_Sketch.jpg" data-mid="8758328" border="0"  src="https://freight.cargo.site/w/1000/i/fe69858f9596bf6253d8f5996f11b556dde0ff732903d9a42a8107ff42634975/Cava_Menu_Filter_Sketch.jpg" /&#62;
&#60;img width="1000" height="673" width_o="1000" height_o="673" data-src="https://freight.cargo.site/t/original/i/c6e0b2a3ab0d21deff9f953d97e32624f5caec22e409bcd6bb3f49aecf96be05/Early_Menu_Filter_1.jpg" data-mid="8765897" border="0"  src="https://freight.cargo.site/w/1000/i/c6e0b2a3ab0d21deff9f953d97e32624f5caec22e409bcd6bb3f49aecf96be05/Early_Menu_Filter_1.jpg" /&#62;
&#60;img width="1000" height="673" width_o="1000" height_o="673" data-src="https://freight.cargo.site/t/original/i/eaea04467374a724d539a3beb3c39bc5666a9a5c3d1fbcbf9353df30ad4745c0/Early_Menu_Filter_2.jpg" data-mid="8765896" border="0" alt="Top row: sketches for dynamic menu filtering. Bottom row: filtering wireframes." data-caption="Top row: sketches for dynamic menu filtering. Bottom row: filtering wireframes." src="https://freight.cargo.site/w/1000/i/eaea04467374a724d539a3beb3c39bc5666a9a5c3d1fbcbf9353df30ad4745c0/Early_Menu_Filter_2.jpg" /&#62;

	
	Sketching and Prototyping the Menu︎

After learning more about customer pain-points with the existing design that I learned from the Customer Experience team, I started sketching ways this tool could work. Initially, my idea was to make the design conversational through text inputs. The challenge here is that it might be challenging to communicate what a customer was supposed to do, so I shifted my design to a tag-based filtering system to take some of the guesswork out for customers by making all the filtering options visible to customers at the same time. The benefit of this approach is that additional tags could be added to filter the menu in new ways such as adding tags for trendy diets like Paleo or Whole Thirty.&#38;nbsp;
	

&#60;img width="750" height="1334" width_o="750" height_o="1334" data-src="https://freight.cargo.site/t/original/i/e6fabc2479947faf8e5ba6bebe44e14ca7f5a261614a6f886085aaa32fd86290/Cava_Menu_Mobile.jpg" data-mid="17685515" border="0" alt="In the menu view on mobile, the nutritional calculator is simplified into a sticky icon that pulses as items are added to it." data-caption="In the menu view on mobile, the nutritional calculator is simplified into a sticky icon that pulses as items are added to it." src="https://freight.cargo.site/w/750/i/e6fabc2479947faf8e5ba6bebe44e14ca7f5a261614a6f886085aaa32fd86290/Cava_Menu_Mobile.jpg" /&#62;
&#60;img width="750" height="1334" width_o="750" height_o="1334" data-src="https://freight.cargo.site/t/original/i/6442cf28cbff1fcecc71a7975d097a6094c010acf1d1546203204d62792079ee/iPhone-8-Copy-2.jpg" data-mid="9444846" border="0" alt="Mobile Nutritional Calculator Popover" data-caption="Mobile Nutritional Calculator Popover" src="https://freight.cargo.site/w/750/i/6442cf28cbff1fcecc71a7975d097a6094c010acf1d1546203204d62792079ee/iPhone-8-Copy-2.jpg" /&#62;
&#60;img width="1280" height="1660" width_o="1280" height_o="1660" data-src="https://freight.cargo.site/t/original/i/04a35be8dc4e1623eff543f6895eb2fe89b673daae5dd2cd06df05751bbf31fc/Cava_Menu_Block.jpg" data-mid="17685511" border="0" alt="Desktop Menu view highlighting an applied filter and calculated items in the nutritional calculator." data-caption="Desktop Menu view highlighting an applied filter and calculated items in the nutritional calculator." src="https://freight.cargo.site/w/1000/i/04a35be8dc4e1623eff543f6895eb2fe89b673daae5dd2cd06df05751bbf31fc/Cava_Menu_Block.jpg" /&#62;


	The Contact Page︎Collaborating with the Customer Experience team, the key goals we set for the contact page was to reduce the volume of commonly submitted customer questions by encouraging customers to self-help via an overhauled FAQ section without adding friction for customers who need to talk to that team.&#38;nbsp;
	

&#60;img width="1280" height="1015" width_o="1280" height_o="1015" data-src="https://freight.cargo.site/t/original/i/7b3530895945a4e534cedc8021f24e6dd4c2fe99a676a59765950afccc52d65f/Cava_Contact_1.jpg" data-mid="8832594" border="0" alt="The design of the contact form added new information input types to improve the ability of the customer experience team of helping Cava Customers" data-caption="The design of the contact form added new information input types to improve the ability of the customer experience team of helping Cava Customers" src="https://freight.cargo.site/w/1000/i/7b3530895945a4e534cedc8021f24e6dd4c2fe99a676a59765950afccc52d65f/Cava_Contact_1.jpg" /&#62;
&#60;img width="1280" height="1015" width_o="1280" height_o="1015" data-src="https://freight.cargo.site/t/original/i/ac873c2be3c399b22fc169385a05e166595332492d57dafccc8de5487d63de90/Cava_Contact_2.jpg" data-mid="8832595" border="0" alt="A big question that had to be answered was what happens after a message is sent. The direction I went in was to use a semi transparent overlay to communicate a gentile sense of finality to the interaction while not giving the impression that the customer who wrote the message was now closed off like if the module was covered completely." data-caption="A big question that had to be answered was what happens after a message is sent. The direction I went in was to use a semi transparent overlay to communicate a gentile sense of finality to the interaction while not giving the impression that the customer who wrote the message was now closed off like if the module was covered completely." src="https://freight.cargo.site/w/1000/i/ac873c2be3c399b22fc169385a05e166595332492d57dafccc8de5487d63de90/Cava_Contact_2.jpg" /&#62;


	&#60;img width="2880" height="2039" width_o="2880" height_o="2039" data-src="https://freight.cargo.site/t/original/i/7b19739d29b22a585f1d29b5e5b7804f0f1bcc7d52db075806b63ceb055b8dfd/FAQ_Desktop.jpg" data-mid="19942619" border="0" data-scale="84" alt="Desktop FAQ section highlighting an expanded help topic." data-caption="Desktop FAQ section highlighting an expanded help topic." src="https://freight.cargo.site/w/1000/i/7b19739d29b22a585f1d29b5e5b7804f0f1bcc7d52db075806b63ceb055b8dfd/FAQ_Desktop.jpg" /&#62;

	
	Background︎

A big part of the Cava culture is giving back to the community. One of the ways way Cava does this is through a profit-sharing program where customers can host a fundraiser at a Cava store for a set amount of time, after which, Cava donates a percentage of the store’s profits to the customer’s organization or cause.
	Food as a Force for Good︎
To kick off this part of the redesign first thing I needed to do was understand how fundraisers are setting up at a Cava location. What I learned was that it’s a really labor and time intensive process for both customers and the customer experience team requiring a lot of emailing back and forth. The solution I worked up was to design a web app that walks customers through the reservation process step by step. 

	
	&#38;nbsp;
	
	&#60;img width="1440" height="815" width_o="1440" height_o="815" data-src="https://freight.cargo.site/t/original/i/59c4fa005e28304b439eb36e6004bac305333be45fd91e92d7653c7b75504e28/Cava_Fundraiser_Tool_Whiteboard-Sketch_Cropped.JPG" data-mid="8762598" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/59c4fa005e28304b439eb36e6004bac305333be45fd91e92d7653c7b75504e28/Cava_Fundraiser_Tool_Whiteboard-Sketch_Cropped.JPG" /&#62;Process︎


To understand how this process works from the Customer Experience team’s perspective I led a white-boarding session where all the pieces of information collected from customers for a fundraiser were mapped and then grouped to create steps a customer would take in the new design. From here I made a prototype that I tested with everyone on the Customer Experience team to collect input and to make sure that the prototype was going to meet their needs as well as those of our customers as well as those of our customers while emphasizing ease of use and clarity of information.
	

&#60;img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/cf2c56c70e5af8b4c1a080323e4569ebd288cd9c6c9e957ec08c7ac2acce27e9/Fundraiser_A.jpg" data-mid="8955625" border="0"  src="https://freight.cargo.site/w/1000/i/cf2c56c70e5af8b4c1a080323e4569ebd288cd9c6c9e957ec08c7ac2acce27e9/Fundraiser_A.jpg" /&#62;
&#60;img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/50bc4992858ba2c414967adca7809ea27c1540c0cf6c243897a721c6a4c5cd6b/Fundraiser_A_2.jpg" data-mid="8955624" border="0"  src="https://freight.cargo.site/w/1000/i/50bc4992858ba2c414967adca7809ea27c1540c0cf6c243897a721c6a4c5cd6b/Fundraiser_A_2.jpg" /&#62;
&#60;img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/d276d1f7d320c81d43f2d89ae3a3db60975862dd7b931856662aa9526add4f8b/Fundraiser_b.jpg" data-mid="8955626" border="0"  src="https://freight.cargo.site/w/1000/i/d276d1f7d320c81d43f2d89ae3a3db60975862dd7b931856662aa9526add4f8b/Fundraiser_b.jpg" /&#62;
&#60;img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/ad05486fba7c2054ddaae6423db093965a478ad6adadabf4f1c42088b8a64b21/Fundraiser_c.3.jpg" data-mid="19844606" border="0"  src="https://freight.cargo.site/w/1000/i/ad05486fba7c2054ddaae6423db093965a478ad6adadabf4f1c42088b8a64b21/Fundraiser_c.3.jpg" /&#62;
&#60;img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/aae6b01c551027f909fa2d800947bbe29de0192e01699a2a1dbb570e72d85c3c/Fundraiser_D.jpg" data-mid="8955629" border="0"  src="https://freight.cargo.site/w/1000/i/aae6b01c551027f909fa2d800947bbe29de0192e01699a2a1dbb570e72d85c3c/Fundraiser_D.jpg" /&#62;
&#60;img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/67425bcb682241585d8b4699f8b686c771b7741eaa556e15b06813c6332e594b/Fundraiser_D-Copy.jpg" data-mid="8955628" border="0"  src="https://freight.cargo.site/w/1000/i/67425bcb682241585d8b4699f8b686c771b7741eaa556e15b06813c6332e594b/Fundraiser_D-Copy.jpg" /&#62;

</description>
		
	</item>
		
		
	<item>
		<title>Cava Design System</title>
				
		<link>https://blakewilton.com/Cava-Design-System</link>

		<pubDate>Mon, 09 Jul 2018 20:26:57 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/Cava-Design-System</guid>

		<description>
	Cava Design System
UI, UX, Visual Design

	&#60;img width="1280" height="840" width_o="1280" height_o="840" data-src="https://freight.cargo.site/t/original/i/23ff348c3d0a5cf2a4216df8a46936b07e4b7c14ccde9d45a01152fde49fa4a9/Design-System-Thumbnail.jpg" data-mid="20483241" border="0"  src="https://freight.cargo.site/w/1000/i/23ff348c3d0a5cf2a4216df8a46936b07e4b7c14ccde9d45a01152fde49fa4a9/Design-System-Thumbnail.jpg" /&#62;

	
	Designing Cava’s Design System from the Ground Up︎


The establishment of Cava’s design system began as a project I took on prior to the major kickoff of the project Group Ordering, (which I write in further detail about here.) After the initial meeting about the Group Ordering project it was decided that the key to the project’s success was going to be through a lot of rapid prototyping and user testing. I was still new to the team and was still learning what product assets existed. The question I had was if there was a design system in place or at least a library of components that could be drawn from for prototyping to make that process more productive. There was not, and the only design files for the product were the original Sketch files from the product agency that had developed the original app. The idea I pitched to my team lead was if prototyping could be put on hold for two weeks so I could collect all the styles used across the design files we had, create nested symbols and in turn establish a foundation for the continued success of the product. They agreed that this was a good idea, so I started immediately.

	
&#60;img width="1024" height="500" width_o="1024" height_o="500" data-src="https://freight.cargo.site/t/original/i/018f6338d582399773320a96f0dd7b9605b9c06f74aecb1ac19da56788aaf293/Logos.png" data-mid="20137919" border="0"  src="https://freight.cargo.site/w/1000/i/018f6338d582399773320a96f0dd7b9605b9c06f74aecb1ac19da56788aaf293/Logos.png" /&#62;
&#60;img width="1024" height="555" width_o="1024" height_o="555" data-src="https://freight.cargo.site/t/original/i/2e1572b1b49804e068089dc766494de2d8cace756fa9542aa84e3b216bb69ee4/Colors.png" data-mid="20137924" border="0"  src="https://freight.cargo.site/w/1000/i/2e1572b1b49804e068089dc766494de2d8cace756fa9542aa84e3b216bb69ee4/Colors.png" /&#62;

	The First Hurdles︎I started work on the Design System by auditing everything that was available in the Brand folder on the shared drive. The Brand team, which is separate from Product, had not finished their brand guidelines document yet so my first challenge pulling together an initial source of truth for the brand colors used across the product. Through this audit, I discovered that every logo that included the Cava Orange the hex value for it was off ever so slightly. Fixing the colors in all of the logo files and getting those into Sketch felt like the first little win. A big question that remained was where will this system live and how would it be maintained. It’s a question I think remains a challenge for nearly every one I’ve talked to about it. 


&#60;img width="1024" height="500" width_o="1024" height_o="500" data-src="https://freight.cargo.site/t/original/i/0e997a1420676134b023764ab861528b13c0455b696679e8ef2207355e4d95cb/Butons.png" data-mid="20151459" border="0"  src="https://freight.cargo.site/w/1000/i/0e997a1420676134b023764ab861528b13c0455b696679e8ef2207355e4d95cb/Butons.png" /&#62;
&#60;img width="1024" height="500" width_o="1024" height_o="500" data-src="https://freight.cargo.site/t/original/i/1bb390f15cd6bfa11f39d2b9d8a6c5a06dafc2206754572e501f99b5c747b084/Text.png" data-mid="20220597" border="0"  src="https://freight.cargo.site/w/1000/i/1bb390f15cd6bfa11f39d2b9d8a6c5a06dafc2206754572e501f99b5c747b084/Text.png" /&#62;

	Buttons and Typography︎
Having returned from Smashing Conference in NYC where I had seen Nathan Curti’s talk about designing buttons in design systems around this time, I was especially excited about getting to the stage where I could do this for Cava. One of the things I wanted to be sure to build into the system early on was being mindful of accessibility and using solid buttons vs. outlined buttons which don't provide enough contrast for users to see in some cases. Moreover, with all of the brand colors now in Sketch and saved as mix-ins, I had a lot of fun adapting colors used by the Brand Team and re contextualizing their use in interactive elements within the digital product including both the “warning” and “positive” button states.&#38;nbsp;


&#60;img width="1024" height="500" width_o="1024" height_o="500" data-src="https://freight.cargo.site/t/original/i/1cb59b82e993d5191de46d936361c808f05aa8703cda0def4516713191a2e5f4/Feilds.png" data-mid="20151481" border="0"  src="https://freight.cargo.site/w/1000/i/1cb59b82e993d5191de46d936361c808f05aa8703cda0def4516713191a2e5f4/Feilds.png" /&#62;
&#60;img width="1024" height="326" width_o="1024" height_o="326" data-src="https://freight.cargo.site/t/original/i/fd87cf5126630c5ffc11f2047c98019e535e23c15206518625685791dbc2322a/Icons.png" data-mid="20212540" border="0"  src="https://freight.cargo.site/w/1000/i/fd87cf5126630c5ffc11f2047c98019e535e23c15206518625685791dbc2322a/Icons.png" /&#62;

	Form Fields &#38;amp; Icons︎
Forms


With branding and button styles in a good place I turned my attention to designing fields. This phase included some of the more complex nested symbols I had created for Cava as there were many instances in which a field was being used though out the product so flexibility was key. One of the decisions I made was building in a line of micro copy into the symbol to create more opportunities for stronger UX writing throughout the product. &#38;nbsp;
Icons
Icons within the product were one of the bigger challenges I had to manage with this project. The original product agency had created a handful of custom icons in a line based style, however because all the original icons had been outlined and resized at some point it was nearly impossible to create a new icon and be able match the stroke width in whole pixels; moreover I felt the original icons had a lot of unnecessary complexity that made them look really busy at small sizes and made it that much harder to expand on the system replicate the original style consistently. &#38;nbsp;

	&#60;img width="1024" height="1852" width_o="1024" height_o="1852" data-src="https://freight.cargo.site/t/original/i/3dfb7945bf4e4faf654f6f78590bb3b06cf49c09e2d6e8b7183cfaebf58c4d62/Components.jpg" data-mid="20483012" border="0"  src="https://freight.cargo.site/w/1000/i/3dfb7945bf4e4faf654f6f78590bb3b06cf49c09e2d6e8b7183cfaebf58c4d62/Components.jpg" /&#62;
	Assembling Components
︎
After the initial two weeks I worked to audit the existing design materials and build out the essential elements of the product to create a baseline for a scalable system, the benefit of my efforts were clear almost immediately once prototyping for the feature design project started as design was able to be dropped directly into place to design the flows rather than repeatedly coping and pasting from other documents. As new design was created, vetted and approved by the team these new patterns and components could be documented and added to this section helping the system continue to mature which was really exciting.Lessons Learned︎
&#38;nbsp;
The system I pulled together in that short period was far from perfect but as I continued to design new pieces of the product, the system continued to take shape. A big jump happened when the team was able to add a new designer for me to collaborate with, and later a product manager to help with documentation, who, while we were interviewing they practically jumped for joy when she heard we had a design system in place. Two of my biggest lessons learned was helping me take a broader look at all the pieces that make up a digital product and taking the time to understand what they do, what their place is within the experience and how each piece can be used to help the customer meet their goals. The second lesson was finding ways to communicate the value of my design system to stakeholders. A reoccurring conversation with one stakeholder, in particular, revolved around a notion that projects have a start and an end vs. a design system that is a continually growing organism that requires maintenance and care to be successful but continues to mature over time. Trying to convey the concept that&#38;nbsp;the concept that a design system is never “done” was one of my main challenges especially as the only designer on the team made it hard to feel like I was being supported. Despite this, I am proud of the work that I did and for defending the creation of something that is going to help the success of the product and team into the future.


</description>
		
	</item>
		
		
	<item>
		<title>Axa Equitable Redesign</title>
				
		<link>https://blakewilton.com/Axa-Equitable-Redesign</link>

		<pubDate>Thu, 06 Feb 2014 16:53:28 +0000</pubDate>

		<dc:creator>Blake Wilton</dc:creator>

		<guid isPermaLink="true">https://blakewilton.com/Axa-Equitable-Redesign</guid>

		<description>Axa equitable
UI, Visual Design
The AXA project was an entire site redesign and brand pivot for the international life insurance agency AXA Equitable. 
Working closely with the project's art director I created numerous page concepts in the project's discovery phase through an interative process those templates would become the final design.


&#60;img width="1024" height="874" width_o="1024" height_o="874" data-src="https://freight.cargo.site/t/original/i/1c78a9fb40012b6914bed80c0f0279772241998363ab1c297966695617a89c4f/Axa_GoalPage_o.jpg" data-mid="7899882" border="0" alt="Topic landing page" data-caption="Topic landing page" src="https://freight.cargo.site/w/1000/i/1c78a9fb40012b6914bed80c0f0279772241998363ab1c297966695617a89c4f/Axa_GoalPage_o.jpg" /&#62;
&#60;img width="1024" height="874" width_o="1024" height_o="874" data-src="https://freight.cargo.site/t/original/i/b19b00e1d6190d482016a7a30a056385b5454652b0ffc5d3087c98546f3ff87e/Axa_ArticlePage_o.jpg" data-mid="7899880" border="0" alt="Article Page" data-caption="Article Page" src="https://freight.cargo.site/w/1000/i/b19b00e1d6190d482016a7a30a056385b5454652b0ffc5d3087c98546f3ff87e/Axa_ArticlePage_o.jpg" /&#62;
&#60;img width="1428" height="924" width_o="1428" height_o="924" data-src="https://freight.cargo.site/t/original/i/cf314801a25541019bb7664f80c0a63aa51f6de0efb2739dc5c84b4f773276c8/BlakeWilton_OffTheBooks_Portfolio_Page_20.jpg" data-mid="7899883" border="0" alt="An early homepage concept emphasizing discovery through interacting with the image overlays" data-caption="An early homepage concept emphasizing discovery through interacting with the image overlays" src="https://freight.cargo.site/w/1000/i/cf314801a25541019bb7664f80c0a63aa51f6de0efb2739dc5c84b4f773276c8/BlakeWilton_OffTheBooks_Portfolio_Page_20.jpg" /&#62;
</description>
		
	</item>
		
	</channel>
</rss>