https://www.derekdietrich-muller.com/home daily 0.75 2021-04-16 https://www.derekdietrich-muller.com/0101-visual-language daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e37be3a74e5c52b9d6d8d93/1580894114216/visualDesign05_0001_02.png 0101 visual language https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e37be228d7df649e7d2e00c/1580894114211/visualDesign05_0000_01.png 0101 visual language https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e37be59cd5a0d43541bbcfa/1580894114220/visualDesign05_0002_03.png 0101 visual language https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e37be67999500620921a766/1580894114224/visualDesign05_0003_04.png 0101 visual language https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e37ce203e87613dac172e13/1580894114234/visualDesign05_0006_07.png 0101 visual language https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e37ce3aced5384d70e0c195/1580894114237/visualDesign05_0007_08.png 0101 visual language https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e37cd412eda975271649023/1580894114227/visualDesign05_0004_05.png 0101 visual language https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e37cd5c3e87613dac171d52/1580894114231/visualDesign05_0005_06.png 0101 visual language https://www.derekdietrich-muller.com/0301-claims daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bb91bf70d700b8aec96ce/1580974667279/visualDesign05_0013_14.png 0301 claims https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bb8df688b3b6f9b29ba78/1580974667270/visualDesign05_0015_15.png 0301 claims https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bb8f9d8a1594e75c75903/1580974667273/visualDesign05_0014_15.png 0301 claims https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bb90c0f9637163378595b/1580974667276/visualDesign05_0016_16.png 0301 claims https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3a882c5657b711db019d23/1580974667285/visualDesign05_0012_13.png 0301 claims https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3a87dc0e012b78db466e14/1580974667282/visualDesign05_0009_10.png 0301 claims https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3a885c835c71275a72080d/1580974667290/visualDesign05_0011_12.png 0301 claims https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3a88fff6fde46a483db284/1580974667287/visualDesign05_0010_11.png 0301 claims https://www.derekdietrich-muller.com/0302-medicine-cabinet daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bce76688b3b6f9b2bf6bd/1581221047050/visualDesign05_0023_23.png 0302 Medicine Cabinet https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bcd9806cec622509db0fd/1581221047047/visualDesign05_0024_24.png 0302 Medicine Cabinet https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bcd72d8a1594e75c97f7a/1581221047043/visualDesign05_0021_21.png 0302 Medicine Cabinet https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bce9d46f3815e4f8d7d56/1581221047040/visualDesign05_0022_22.png 0302 Medicine Cabinet https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bcf0506cec622509dcf0d/1581221047053/visualDesign05_0017_17.png 0302 Medicine Cabinet https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bcf1706cec622509dd0de/1581221047057/visualDesign05_0019_19.png 0302 Medicine Cabinet https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bcf2a0f963716337aae34/1581221047060/visualDesign05_0018_18.png 0302 Medicine Cabinet https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3bcf3a8f6bab74a4c9d2dc/1581221047063/visualDesign05_0020_20.png 0302 Medicine Cabinet https://www.derekdietrich-muller.com/0303-accums daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc2122ed8a6567238e63c/1581236758817/visualDesign05_0000_accums-1.png 0303 Accums https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc21dc0b9914844193785/1581236771817/visualDesign05_0001_accums-2.png 0303 Accums https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc1f52c1d2d736818e008/1581236730634/visualDesign05_0002_accums-3.png 0303 Accums https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc2012c320258132a91f5/1581236742801/visualDesign05_0003_accums-4.png 0303 Accums https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc2dff875f52b56755a0c/1581236964082/visualDesign05_0007_accums-8.png 0303 Accums https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc22fe14ad269a8f707e3/1581236788465/visualDesign05_0006_accums-7.png 0303 Accums https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc244fbfe4d4e87880af7/1581236809204/visualDesign05_0004_accums-5.png 0303 Accums https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc2eac0b99148441945fe/1581236976466/visualDesign05_0005_accums-6.png 0303 Accums https://www.derekdietrich-muller.com/0304-ps daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc329bab6ba3cfa31437b/1581237038671/visualDesign05_0002_PS-3.png 0304 PS https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc312ff19c478900abc59/1581237014643/visualDesign05_0000_PS-1.png 0304 PS https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc31fc0b9914844194a78/1581237027010/visualDesign05_0003_PS-4.png 0304 PS https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc3092c320258132aa970/1581237003955/visualDesign05_0001_PS-2.png 0304 PS https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc492f875f52b56757d86/1581237407318/visualDesign05_0004_PS-5.png 0304 PS https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc4c2ff19c478900ae76f/1581237447881/visualDesign05_0006_PS-7.png 0304 PS https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc4a7e14ad269a8f73cc5/1581237421229/visualDesign05_0005_PS-6.png 0304 PS https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc4b42e50ae04a9a06d8d/1581237433829/visualDesign05_0007_PS-8.png 0304 PS https://www.derekdietrich-muller.com/0401-ec daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc523120d25193d619cfc/1581237544553/visualDesign05_0003_EC-4.png 0401 EC https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc5012c1d2d7368191e8c/1581237513919/visualDesign05_0000_EC-1.png 0401 EC https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc50fea5b49472355d575/1581237524114/visualDesign05_0001_EC-2.png 0401 EC https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc51aff19c478900aeff7/1581237534187/visualDesign05_0002_EC-3.png 0401 EC https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc576d8d2da072e744674/1581237627609/visualDesign05_0005_EC-6.png 0401 EC https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc58f2c320258132adf63/1581237652385/visualDesign05_0007_EC-8.png 0401 EC https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc56cc0b9914844198a9f/1581237617052/visualDesign05_0004_EC-5.png 0401 EC https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc582c0b9914844198c1d/1581237640624/visualDesign05_0006_EC-7.png 0401 EC https://www.derekdietrich-muller.com/0402-eh daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc60fff19c478900b00b6/1581487729679/visualDesign05_0001_EH-2.png 0402 EH https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc61a2c320258132aeb29/1581487729682/visualDesign05_0002_EH-3.png 0402 EH https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc623120d25193d61b212/1581487729685/visualDesign05_0003_EH-4.png 0402 EH https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc604f875f52b56759c10/1581487729675/visualDesign05_0000_EH-1.png 0402 EH https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc637ea5b49472355f6ce/1581487729689/visualDesign05_0006_EH-7.png 0402 EH https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc646d8d2da072e745807/1581487729692/visualDesign05_0005_EH-6.png 0402 EH https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc6622e50ae04a9a0912a/1581487729698/visualDesign05_0007_EH-8.png 0402 EH https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e3fc6582c1d2d7368193c2f/1581487729695/visualDesign05_0004_EH-5.png 0402 EH https://www.derekdietrich-muller.com/0501-scout-interaction daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e4650983331b018a8db0272/1582238538417/visualDesign05_0000_SI-01.png 0501 Scout Interaction Shows how suggested utterances should animate into chat https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e4650b9ba064718d723e578/1582238538424/visualDesign05_0002_SI-03.png 0501 Scout Interaction Shows where bot prompts should snap to as the conversation moves https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e4650c7f95e7200aa697df3/1582238538430/visualDesign05_0004_SI-05.png 0501 Scout Interaction Shows how text inputs grow as user types https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e4f101a96b20a3ebf151e96/1582242352790/visualDesign05_0006_SI-07.png 0501 Scout Interaction Shows float label and input masking behavior https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e4650dfa4ec9a28e79167d5/1582238538438/visualDesign05_0005_SI-06.png 0501 Scout Interaction Shows text input animating into chat https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e4650d63331b018a8db0954/1582238538434/visualDesign05_0003_SI-04.png 0501 Scout Interaction Shows side horizontal scroll behavior and selection https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e4650f03331b018a8db0a53/1582238538441/visualDesign05_0001_SI-02.png 0501 Scout Interaction Shows inline error appearing https://www.derekdietrich-muller.com/0601-sprint-planning daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e50c6d0576c4c1eab44b54c/1583109429024/G1IdeaSheet2.jpg 0601 sprint planning Templates were one of the best suggestions we got. It forced us to shape the activities, it kept the sprinters focused, and made referencing the work after the sprint very easy. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e653d71b6faeb732c15ce5d/1583693189483/Deck01.png 0601 sprint planning Slides that remind sprinters of a how an activity works take of the bulk of your sprint deck. Being able to edit your slides on the fly during activities allows you to flex your schedule. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e50c8ec643db018c85d372c/1583109429027/IMG_9523.JPG 0601 sprint planning Presentations aren’t just a chance to give and get feedback, it also gives the facilitators a chance to pivot focus and adjust to the direction of their sprinters. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e50c3086dd0756fb8c407aa/1583109429018/planning02.jpg 0601 sprint planning Completing the sprint challenge unlocked so much of the activity planning: what subject matter experts needed to be there, and what the outcome would be. We wasted a few days planning not being able to answer simple questions about our goal because we didn’t have a challenge to reference. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e50ca51976c87268cda49ac/1583109429029/iPhone+X+Body+White.png 0601 sprint planning Using a phone shell template, we had sprinters do a paper prototype to illustrate their concept screen by screen. These were a vital reference as we began to sketch flows and wires. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e50cabd2bf5dc55cce89ecb/1583109429032/G1TestPlan.jpg 0601 sprint planning Since our timeline didn’t allow us to test, on the suggestion from a colleague, we had each team fill out a test plan. https://www.derekdietrich-muller.com/0701-vision-work daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e57517a99c7be2480e6354b/1582781144332/visualDesignVW_04.png 0701 Vision Work Shows how text input grows as user types https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e575166fbd70e218a5615f9/1582781121550/visualDesignVW_02.png 0701 Vision Work Shows float label and input masking behavior https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e57516fed27505ea097c476/1582781128807/visualDesignVW_03.png 0701 Vision Work Shows movement of conversation for maximum legibility https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e5750cbdb844f0ca13be773/1582781114969/visualDesignVW_01.png 0701 Vision Work Shows how suggested utterances should animate into chat https://www.derekdietrich-muller.com/0801-characters daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e6b301d6738445292e329e4/1585377621052/InclusiveCharacterHeads_01-01.png 0801 Characters https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e62166e4ef6804b47e7826c/1585109136714/InclusiveGif1.gif 0801 Characters The characters became central to the “unidendity”. They gave life to the inclusive concepts. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e6b0328a49df074387dd3ac/1585109136711/peopleEvolution_02-01.png 0801 Characters I saw a need for a character redesign. The characters were used to show humans in different contexts and with different ways of being. I looked to Microsoft iconography and the Noun Project for inspiration. I settled on a thick line style that could handle a wide variety of variation, while still making an strong visual impression. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e6b0b479871a94a7bd4919b/1585109136716/CharactersUpdated_V01-01.png 0801 Characters Like any lived in brand, we started to get feedback. For a process claiming to be inclusive, people pointed out our figures lacked representation. I immediately got to work on a 2nd batch mixing different heads with different bodies to multiply the variety and give other designers options using them. After I left, I was happy to see the character designs pushed even further. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e6b35d919bb1f4bdbca0cdd/1585377596364/CharacterInContext_01-01.png 0801 Characters https://www.derekdietrich-muller.com/1301-presentations daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e61f8cbe9907017060ac81f/1583652957280/visualDesign05_0001_02.png 1301 Presentations An example of a slide a facilitator would leave up during an activity to help keep sprinters focused on their activity. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e61f8e542ec135c9837bf6a/1583652957283/visualDesign05_0002_03.png 1301 Presentations Visuals that support abstract concepts the presenter is speaking about. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e61fca3b34895680bc575a4/1583652957292/visualDesign05_0004_05.png 1301 Presentations Giving examples sets rails for a workshop activity while also providing inspiration. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e61f92342ec135c9837c45f/1583652957287/visualDesign05_0007_08.png 1301 Presentations Slides can be a point of rest and don’t have to double what the presenter is saying. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e61f8752b642f3820bf9f5e/1583652957276/visualDesign05_0009_10.png 1301 Presentations Caring for the visuals lends credibility to what is being communicated and allows the assets to scale from sprints to c-level presentations. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e61f95c9ee3b425dc42c844/1583652957289/visualDesign05_0010_11.png 1301 Presentations Every slide might be something an audience member might want to snap a photo of, so it’s worth considering each template. https://www.derekdietrich-muller.com/1001-booklet daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e64a2c2190266288c4b34a1/1583888563527/AsDesigners1.png 1001 Booklet Where there was room to exercise visual creativity, it was still done with restraint——pulling the the bleed of the photography onto the other page of the spread, and finding opportunities to mix inspirational photography when appropriate. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e64a15fad7cab40b9ba9d7e/1583888563512/Sometimes2.png 1001 Booklet # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e64a0b6a29cd069c4c5fb91/1583888563499/Spine4.png 1001 Booklet https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e64a0f6b6faeb732c050ed9/1583888563505/Beauty1.png 1001 Booklet The task was to make updates to the Inclusive Design manual. It can be tempting to leave your mark on your work, and this is where practicing restraint comes with benefits. Through a series of simple typographic and visual edits, the manual gained a pleasant simplicity. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e64a1e14f3cd622ab6c2827/1583888563517/PersonaNetwork1.png 1001 Booklet The manual had sparse pacing, and was very intentional with how much content was on each spread. Spreads like this gave the opportunity to make use orientation and negative space. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e64a1b1e2671908cff109d6/1583888563514/PersonaSpectrum1.png 1001 Booklet # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e64a250f244c97e61792949/1583888563520/FromSeeing1.png 1001 Booklet https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e64a134e2671908cff0fe44/1583888563502/Mismatch1.png 1001 Booklet # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e7c213f155a067a8bb59138/1585193296180/WhoWeDesign3.png 1001 Booklet The diagrams were the work of the authors, so my contribution was maximizing their fidelity and brining all of the diagrams into visual harmony. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e64a28b1f4bbe1201d3e9e2/1583888563524/Validating3.png 1001 Booklet https://www.derekdietrich-muller.com/0901-toolkit daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e683a8feb036c345d8b4542/1583889065063/Card1.png 0901 Toolkit https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e683b65eb036c345d8b6935/1583889466887/Card11.png 0901 Toolkit https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e683b1d284ae20ceb1ea6a6/1583889203459/Card6.png 0901 Toolkit # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e683ae5339aa17c27749711/1583889162573/Card4.png 0901 Toolkit As an example, Social Context is an abstract concept that a sprinter might not be familiar with, so this card illustrates a few scenarios. I didn’t generate the idea of these cards, but I loved collaborating on them and developing the examples. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e683a64419da729fd3692ca/1583890246994/Mismatch1.png 0901 Toolkit For the toolkit we broke from our black and white rule when representing which design phase each activity fell into. To keep everything as accessible as possible, we paired colors with patterns. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e683b397947e57caa8cff34/1583889244402/Card8.png 0901 Toolkit # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e6838f8284ae20ceb1e46ea/1583890064906/TollkitCover5.png 0901 Toolkit A set of cards with sprint activities organized by the different phases in the design sprint and cards that provide context for the activities. https://www.derekdietrich-muller.com/0802-visual-language daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e7c22270078cb0966a7401f/1585193785153/HumanLed2.png 0802 visual language When speaking with the stakeholders, there was a consensus there should no brand. Inclusive was a practice the team was teaching and helping to develop, but it was not their property, and did not want it to be seen that way. So the initial work on the visual language was a tune-up of the manual. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e7c4e361625f074a7ae32b2/1585204904296/Laptop_01.png 0802 visual language We created swag to generate excitement, and eventually it could be seen around the campus. We had created a bit of a brand while trying to avoid one. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e7c4e8580df206aff8e15b9/1585204876985/visualDesign05_0006_07.png 0802 visual language The black and white style was in part because we wanted the sprinters’ work to stand out an our diagrams to be in the background. The line style and growing avoidance to grayscale kept everything high-contrast. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e7ef37d14477f68e71e4dc1/1585378195463/WorkshopMaterials12.png 0802 visual language Templates for workshop were one of our main visual outputs, so clarity and minimalism became the underpinnings of the system. https://www.derekdietrich-muller.com/1601-burger-king daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e842ed769e4ca6706402687/1586157953386/JellyFishRoundup_01.png 1601 Burger King Our games were simple and based on familiar mechanics. The trick was to hint at the theme of the property featured that month without directly incorporating the characters. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8c11e66287ed2803296b51/1586237931411/ 1601 Burger King Over time our title cards were increasingly inspired from classic cartoons. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ab7c9a4e68d6067496a0f/1586157953417/BKRelay_01.png 1601 Burger King This food ordering game we had to translate our illustration style into forced perspective. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ab817bdeecc11b7930f5c/1586157953397/ZhuZhu_01.png 1601 Burger King An example of a character sheet showing the separated parts, movement, angles, and effects. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ab7921b981f2a96d9122c/1586157953381/SpellArena_02.png 1601 Burger King https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ab7e71b981f2a96d91958/1586157953376/SB_Catch_01.png 1601 Burger King # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ab844842fcc315ccd75be/1586157953409/ZhuZhu_02.png 1601 Burger King https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ab8797de63058bf584c24/1586157953425/BKRelay_02.png 1601 Burger King Often our animation UI ideas were communicated with static imagery and we’d verbally communicate our motion ideas to our animators. This allowed for shared ownership where both parties could lean into their strengths. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad23685dd3a1f81b64f14/1586157953439/Flashlight_01.png 1601 Burger King I didn’t know it at the time, but creating heads-up-displays was an implementation of the heuristics system status and feedback. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad2b879e6836f5fdbe653/1586157953445/SquareDown_01.png 1601 Burger King https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad20d1249b622795c8029/1586157953432/BKRelay_03.png 1601 Burger King Over the course of the project, Game instructions went from text on isolated screens with bits of branding to directing overlying the instructions over examples of gameplay. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad2695ad45054031efa0d/1586157953461/Flashlight_02.png 1601 Burger King https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad4139b6208253a8fbfea/1586157953468/Coastline_01.png 1601 Burger King As we added more games to the site, we needed more places to launch them from. This is an example of a staging area. We would add these to parts of our world. Users could teleport to them directly from our mall or get there on foot. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad3f294f18a0652810ca0/1586157953475/BoatInterior_01.png 1601 Burger King https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad4ece37ead7fc5951f8b/1586157953495/StagingArea_01.png 1601 Burger King https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad4a0959bb658fc3c797d/1586157953534/ObstacleCourse_02.png 1601 Burger King For this level, I wanted to capture metropolitan Europe—specifically Paris. So, I went on Google Street View taking screenshots of the buildings. In 2009 this felt revolutionary. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad52e5ad45054031f2647/1586157953514/WalkingPath_01.png 1601 Burger King The illustration lessons I learned up remain indispensable. This is a sample of a walking path. It has to visually stand out from the rest of the art and also be repeatable to speed up the illustration process. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad44468e1057e9c50a9c1/1586157953519/JumpArc_01.png 1601 Burger King This example is a template I would use when creating a level. It shows how much of the art the user can see and how far they can jump. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad5133d751119c54be01f/1586157953506/TradingPost_01.png 1601 Burger King This trading post would randomly show up in different parts of the world. Kids could swap items they didn’t want for new stuff. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad426e8170a5ffa498b29/1586157953485/Flashlight_03.png 1601 Burger King https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad588842fcc315cd04366/1586157953551/Animals_01.png 1601 Burger King The construction of these pets will mess with your head depending on how much a stickler you are for animal anatomy. We had to keep our proportions and mechanics more or less universal. That’s why they all sit like cats. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad624fcc46f5d093c43cb/1586157953581/Outfits_01.png 1601 Burger King We evolved the idea of outfits into entire suits that would layer over their avatars. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad5e95ad45054031f31e6/1586157953540/Characters_01.png 1601 Burger King https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad5ac68e1057e9c50c010/1586157953565/CarBuild_01.png 1601 Burger King Exploded view of what it looks like going from isometric wireframe to completed illustration—_accounting for all of the pieces that need to animate. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad60506e7117ae53c9dee/1586157953557/Items_01.png 1601 Burger King A sample of decorations a user could buy for their room. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8ad635d84e09477e1d54c5/1586157953570/ThorItems_01.png 1601 Burger King https://www.derekdietrich-muller.com/1401-ui-work daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8c03fc09dbf467b60a653f/1586411387625/Dwyer_1850px_0001_Sensor---list-view.png 1401 UI work # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8c040991435e1c78d33085/1586234386583/Dwyer_1850px_0002_Sensor---Gauge-View.png 1401 UI work https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8c043075d8876f727ac458/1586411375705/Dwyer_1850px_0000_gallery-splash.png 1401 UI work # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8c04227a32914c276a0253/1586234409630/Dwyer_1850px_0005_Log-Statistics.png 1401 UI work https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8adc9d85dd3a1f81b74077/1586158754875/ 1401 UI work https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8adacca75db676523ffea3/1586412977336/Wowzers_01.png 1401 UI work # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8adae19b6208253a904c25/1586411875214/Wowzers_02.png 1401 UI work # https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8c0268ae195d45f85d8c93/1586234037122/Wowzers_03.png 1401 UI work https://www.derekdietrich-muller.com/1501-ux daily 0.75 2021-01-09 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8adc48842fcc315cd0b690/1586158674671/JellyVision_04.png 1501 UX The UI design, game board, and background setting were my responsibility. Merging the aesthetics from the company branding and the illustration style we picked resulted in an interesting harmony. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8adbe7e37ead7fc595be58/1586158586982/JellyVision_01.png 1501 UX This is what it looks like when a visual designer starts to make the transition to UX artifacts. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8adc30a4e68d60674cb813/1586158653047/JellyVision_03.png 1501 UX https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8adc10138b9761efcce440/1586418155343/JellyVision_02.gif 1501 UX We brought in an illustrator for the character and room art, but I had to find a lightweight way to put the animated GIFs together. https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5e8adc5e8c5a9226d7fcec66/1586417256412/JellyVision_05.png 1501 UX https://www.derekdietrich-muller.com/test-project-page daily 0.75 2021-01-08 https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5ff7e76ebcceef54c6206272/1580894114224/visualDesign05_0003_04.png Test project page https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5ff7e76ebcceef54c6206269/1580894114211/visualDesign05_0000_01.png Test project page https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5ff7e76ebcceef54c620626c/1580894114216/visualDesign05_0001_02.png Test project page https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5ff7e76ebcceef54c620626f/1580894114220/visualDesign05_0002_03.png Test project page https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5ff7e76ebcceef54c620627b/1580894114234/visualDesign05_0006_07.png Test project page https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5ff7e76ebcceef54c620627e/1580894114237/visualDesign05_0007_08.png Test project page https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5ff7e76ebcceef54c6206278/1580894114231/visualDesign05_0005_06.png Test project page https://static1.squarespace.com/static/5e2cb1f7ebb04f51a029031b/t/5ff7e76ebcceef54c6206275/1580894114227/visualDesign05_0004_05.png Test project page https://www.derekdietrich-muller.com/home-new daily 1.0 2021-04-28