http://www.katreilly.design/cardboard-joe-game-concept-in-process daily 0.75 2014-12-15 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418626676380-AQPPJQ9PIID8F3N4SICD/IMG_0818-min.jpg Cardboard Joe Character Models - Early main character designs https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418626676380-AQPPJQ9PIID8F3N4SICD/IMG_0818-min.jpg Cardboard Joe Character Models - Early main character designs https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418626988781-LVPAWYS6QR82AYAJTB9A/IMG_0822-min.jpg Cardboard Joe Character Models - Game mechanics sketches and notes https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418627111833-SR7WUEQP3SKQ5YCU3Z55/IMG_0819-min.jpg Cardboard Joe Character Models - Initial sketches for "Joe" http://www.katreilly.design/your-vlr daily 0.75 2014-12-03 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417593311524-99I6E9Y8UMDQWUJD7NUK/image-asset.jpeg Your Virtual Living Room (2011) - Parsons M.F.A. Thesis Presentation My presentation of YourVLR to the 2011 Thesis Committee at Parsons the New School for Design. (Due to SOPA compliance, I had to take down the final prototype. I do hope to revisit this concept one day.) https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417593279840-LIV5TSDIX77OP14RQHK7/YourVLR-Surveys.png Your Virtual Living Room (2011) - Interviews & Surveys Interviews and surveys were essential in refining the initial concept. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417593277707-BKHMH1V2T8AI95QT44QT/YourVLR-Prototypes.png Your Virtual Living Room (2011) - Finding the Experience I primarily used paper prototypes and streaming services like Hulu to simulate the desired experience of YourVLR. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417593277157-1PMJ3C1Y6M16L9KCK046/YourVLR-Flows.png Your Virtual Living Room (2011) With the help of some developer friends, I created an initial flow of the system that I could share with potential collaborators. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417593245639-NYNL5C659WHNT61YWMCW/YourVLR-Thumbnail.png Your Virtual Living Room (2011) http://www.katreilly.design/recent-work daily 0.75 2014-12-02 http://www.katreilly.design/princess-dress-up daily 0.75 2015-11-26 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417592021893-N7FM7JG1QVNTXI3KAPQX/Dress-Up-Field_Research.png Disney Princess Dress Up (2013) - Field Research can be Magical Disneyland's Bippity-Boppity Boutique served as the primary inspiration for our Dress Up app.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417590595518-6DGITGFYEOWE2WH9MOYT/Dress-Up-User_Flow.png Disney Princess Dress Up (2013) - Mapping the User Flow Since they speak to product, design, and development teams, I find flowcharts to be one of the most useful UX documents.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417590692600-VR518MRQ5NDNWX79HV2J/image-asset.jpeg Disney Princess Dress Up (2013) - Interactive Prototype I made a series of interactive click-throughs to test our concepts early and communicate with teammates. This one was made using Keynote, long before the plethora of protoyping tools available now. Adding playful likenesses of the Princesses helped testers connect with our low-fidelity prototypes.   Watch the Prototype Demo https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417590998250-VL1KP4O5MGVBYL1KOWT6/wire_princesses.png Disney Princess Dress Up (2013) - Vector Princesses These illustration exercises became useful tools for many of my Disney UX projects.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417590584246-4XJ7TFGK0519DIFZHN6H/Dress-Up-Intro.png Disney Princess Dress Up (2013) - Launch Day The final Disney Princess Dress-Up experience, launched on January 2013. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417590478938-4DBXFTKIDWPY7FA4CBIQ/Dress-Up-Thumbnail.png Disney Princess Dress Up (2013) http://www.katreilly.design/cinderella daily 0.75 2015-05-28 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418622649463-DQGBYTVF54PO8QI4F8ER/IMG_0800-min.jpg Cinderella - A full shot of the piece far https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418622207935-SZ5Z1TJE8FJBONJE371P/IMG_0806-min.jpg Cinderella https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418622200625-97FGB2SXGWR3WVDWNMVC/IMG_0804-min.jpg Cinderella https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418622219311-J5NS22LA2RZLUMSUCG5S/IMG_0702-min.jpg Cinderella - The source of Cindy's hair https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418622282278-3KC8ED88KFXTVH0SVZ2V/2014-11-24+09.54.03.jpg Cinderella - The painted paper So far, I've used over 6 feet of painted paper to create Cindy's scene. This project is particularly fun due to my first-time use of metallic and pearl paints. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418622274778-4H2MO4GXR9FQRFAJCO8M/2014-11-23+14.04.06.jpg Cinderella - The original sketch with notes https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418622857829-P074EDZGM9RX2AFTC2AW/IMG_0799-min.jpg Cinderella http://www.katreilly.design/muppets-of-the-caribbean daily 0.75 2014-12-03 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417595843495-T938I4MPL1JA3PZR3PEJ/image-asset.jpeg Muppets of the Caribbean (2009) - Muppets of the Caribbean A trailer mash-up of Pirates of the Caribbean 3: At World's End and Muppet Treasure Island. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417595966622-NDQYWI3UXN5BS95DR8H8/image-asset.jpeg Muppets of the Caribbean (2009) - Henson's 11 (2009) I initially made this mash-up for an editing class. When a Disney producer found it on YouTube, I was invited to create more videos for the company. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417595343282-YH7IUVRVJP2GHOOT3L7Y/MOTC-Thumbnail.png Muppets of the Caribbean (2009) http://www.katreilly.design/motc daily 0.75 2014-12-03 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417596408783-5VBN8CE8S2TX6NCNT9Y5/image-asset.jpeg Muppets of the Caribbean (2009) - Muppets of the Caribbean A trailer mash-up of Pirates of the Caribbean 3: At World's End and Muppet Treasure Island.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417596465991-Y4X5YYQMA3QULT1BX48J/image-asset.jpeg Muppets of the Caribbean (2009) - Henson's 11 I initially made this mash-up for an editing class. When a Disney producer found it on YouTube, I was invited to create more videos for the company. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417596373259-TRMAJA8U5R3MVGER1KGP/MOTC-Thumbnail.png Muppets of the Caribbean (2009) http://www.katreilly.design/thank-you-san-dimas-high-2 daily 0.75 2014-12-15 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418619085906-MMSW2C8UHL7JXFDNDWVL/IMG_0652.JPG "Thank You, San Dimas High!" - The final product https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418619124866-DWCA89531BTCRMLJCIFR/IMG_0653.JPG "Thank You, San Dimas High!" - A side view https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418619195936-280FIS2VHNFOOJUTU71O/IMG_0658.JPG "Thank You, San Dimas High!" - A close-up of our heroes https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418621052253-N6B5WYWRYV6UYMDYSQHA/BandT_inProcess.png "Thank You, San Dimas High!" - Process snapshot Bill and Ted from the front and back. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418620586821-N6SUGEBIJKOAKHKG1678/IMG_0652-min.jpg "Thank You, San Dimas High!" http://www.katreilly.design/prototype-archive daily 0.75 2015-09-15 http://www.katreilly.design/journal daily 0.75 2017-02-07 http://www.katreilly.design/journal/2015/10/20/my-square-cash-ui-kit-is-now-available monthly 0.5 2015-10-20 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1445318429841-KB8QH1WLK963AFK62MBZ/image-asset.jpeg Design Journal - My Square Cash UI Kit is Now Available http://www.katreilly.design/journal/2015/10/19/redesigning-my-website monthly 0.5 2015-10-19 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1445233428700-0L0S6N82MOHHJVUJN9DL/image-asset.png Design Journal - Redesigning My Website https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1445232914608-UV530HDG2U6391CQLS0M/image-asset.jpeg Design Journal - Redesigning My Website http://www.katreilly.design/journal/2015/10/24/disneylife-has-been-announced monthly 0.5 2015-10-25 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1445731670652-CVQZD0N6XC6418CCI049/image-asset.png Design Journal - DisneyLife Has Been Announced http://www.katreilly.design/journal/2015/5/28/an-elegant-form-detail-found-on-invision monthly 0.5 2015-06-01 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1433125104856-OPOLBIADNW6BAHQM6VXS/invision-signup-01 Design Journal - Invision's Wonderful Solution for Form Labels   Labels appear within the text field upon first load, allowing Invision's designers to keep the sign up form condensed and focused. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1433125263774-BFQX2XX9WESB56S2U15R/invision-signup-02 Design Journal - Invision's Wonderful Solution for Form Labels   When the user clicks on the text field, the primary label disappears, creating room for the user's information. A secondary state of the label then slides in from the side to reinforce intent. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1433125585235-WYAL6T0GF3TVP71XJN0H/invision-signup-03 Design Journal - Invision's Wonderful Solution for Form Labels   Once the user has completed the task, the secondary label persists. This serves a courtesy reminder when the user reviews the provided information. http://www.katreilly.design/journal/2015/2/23/a-beginning monthly 0.5 2015-06-01 http://www.katreilly.design/journal/2015/12/9/designing-an-alarm-app-part-2 monthly 0.5 2015-12-10 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1449717809716-HBK0RL8Z66HFKGCVLTUI/image-asset.png Design Journal - 'Early' Concept Maps Version 1 Concept Map for "Early" https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1449718507326-0L8KW1FRLUGW9ZG0PC7R/image-asset.png Design Journal - 'Early' Concept Maps Version 1 WireMap for "Early" http://www.katreilly.design/journal/2015/12/9/disneylife-has-launched monthly 0.5 2015-12-10 http://www.katreilly.design/journal/2015/5/31/alarm-app-01 monthly 0.5 2015-10-19 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1433226134837-2GDWZYLV5RRPZPCPL83N/app-alarm-conceptboard Design Journal - Designing an Alarm App: Part 1 I performed an exercise to form initial questions and personas. I also documented the unique features of competing alarm clock apps. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1433226819456-CV88DH1N8C155EWUCQ47/alarm-app-post-it-phone Design Journal - Designing an Alarm App: Part 1 These notes are yesterday's helpful reminders for waking. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1433226217483-D8II2TRECOQELNNUTKAP/alarm-app-concepts Design Journal - Designing an Alarm App: Part 1 The exercise yielded three potential approaches to the problem. Due to its focus and level of achievability, I chose to pursue a concept that reminds users of their reasons for waking up. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1433226510033-Z89GQI1ZU3EUI3E14EBQ/alarm-app-paper-wires Design Journal - Designing an Alarm App: Part 1 I further refined the flow through paper prototypes. In these beginning stages, I find paper inspires a variety of different ideas and allows for delightful discoverability. I also appreciate the feeling of tangibly crafting the product from the start. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1433226557206-DLSMU6W4H03VJGG772KL/alarm-app-sketches Design Journal - Designing an Alarm App: Part 1 Once settled on the concept, I sketched out a user's flow of actions within the app. My first sketches used verbs only. I integrated visuals into later iterations. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1433226582482-8AMXQWPLKJ18FQMQHXF8/alarm-app-paperwires-ergo Design Journal - Designing an Alarm App: Part 1 Quickly testing a layout's ergonomics is another advantage of paper prototyping. These artifacts will prove useful as I move into the digital renderings of the product. http://www.katreilly.design/journal/2015/10/12/trying-the-ux-ninja-exercise monthly 0.5 2015-10-19 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1444667014276-BXFYDZEPDPA80W5OAG1H/image-asset.jpeg Design Journal - Trying the UX Ninja Exercise   A snapshot of the design exercise done in my sketchbook. Doing all of this work in 20 minutes removes any intimidation. I can now use this work as a base for breaking the remainder of the project into bite-sized action items. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1444667257987-W1KNHC82WCWJUPFMK3W3/2015-10-05+22.46.18.jpg Design Journal - Trying the UX Ninja Exercise   These wireframe sketches represent the general flow of the alarm app. It's not perfect, but it's certainly a start. http://www.katreilly.design/journal/2016/4/28/learning-framer-js-02-whise monthly 0.5 2016-07-03 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1467519268548-F20TZAX3DUFJQG8R3LY5/image-asset.jpeg Design Journal - Learning Framer 02: Whise Other visualizations of "Whise," which I originally dubbed "10 Hours of White Noise." Man, that's a lot of white noise.... https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1467519063628-1M3NCBA3T2TMQ7WBR1Z0/2016-07-02+21.04.54.jpg Design Journal - Learning Framer 02: Whise Sketching helped me narrow down the symbols I'd use in the prototype. http://www.katreilly.design/journal/2016/4/15/learning-framer-01-alphabits monthly 0.5 2016-07-03 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1460735664869-SB8YUPJ8MGD1WBBETGQI/image-asset.jpeg Design Journal - Learning Framer 01: AlphaBits A quick sketch to capture thoughts on how the prototype should function. http://www.katreilly.design/journal/2016/8/24/prototyping-exercise-tinycards-card-flip monthly 0.5 2016-08-25 http://www.katreilly.design/journal/2016/10/14/reigns-card-interaction monthly 0.5 2016-10-14 http://www.katreilly.design/journal/2016/7/10/learning-framer-03-joel-on-demand monthly 0.5 2016-07-11 http://www.katreilly.design/journal/2017/2/7/design-exercise-recreating-pbs-kids-video-app monthly 0.5 2017-02-08 http://www.katreilly.design/journal/2017/2/7/a-feedback-lesson-from-toca-boca monthly 0.5 2017-02-08 http://www.katreilly.design/journal/category/UX monthly 0.5 http://www.katreilly.design/journal/category/UI+Kits monthly 0.5 http://www.katreilly.design/journal/category/Disney monthly 0.5 http://www.katreilly.design/journal/category/KatReilly.com monthly 0.5 http://www.katreilly.design/journal/category/Framer+JS monthly 0.5 http://www.katreilly.design/journal/category/UI+Kit monthly 0.5 http://www.katreilly.design/journal/category/Prototyping monthly 0.5 http://www.katreilly.design/journal/category/Playful+Things monthly 0.5 http://www.katreilly.design/journal/category/DisneyLife monthly 0.5 http://www.katreilly.design/journal/category/Early+Alarm+Clock monthly 0.5 http://www.katreilly.design/journal/tag/play monthly 0.5 http://www.katreilly.design/journal/tag/square+cash monthly 0.5 http://www.katreilly.design/journal/tag/motion+design monthly 0.5 http://www.katreilly.design/journal/tag/concept+map monthly 0.5 http://www.katreilly.design/journal/tag/personas monthly 0.5 http://www.katreilly.design/journal/tag/prototype monthly 0.5 http://www.katreilly.design/journal/tag/framer+js monthly 0.5 http://www.katreilly.design/journal/tag/feedback monthly 0.5 http://www.katreilly.design/journal/tag/usability monthly 0.5 http://www.katreilly.design/journal/tag/ui+kit monthly 0.5 http://www.katreilly.design/journal/tag/toca+house monthly 0.5 http://www.katreilly.design/journal/tag/disney monthly 0.5 http://www.katreilly.design/journal/tag/toca+boca monthly 0.5 http://www.katreilly.design/journal/tag/kids+design monthly 0.5 http://www.katreilly.design/journal/tag/ui+design monthly 0.5 http://www.katreilly.design/journal/tag/form+design monthly 0.5 http://www.katreilly.design/journal/tag/disneylife monthly 0.5 http://www.katreilly.design/journal/tag/interaction+design monthly 0.5 http://www.katreilly.design/journal/tag/strategy monthly 0.5 http://www.katreilly.design/journal/tag/sketch monthly 0.5 http://www.katreilly.design/journal/tag/announcement monthly 0.5 http://www.katreilly.design/journal/tag/kids monthly 0.5 http://www.katreilly.design/your-virtual-living-room daily 0.75 2015-09-13 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417593969546-OID32QSZD0EE66ZZO5ZF/YourVLR-Surveys.png Your Virtual Living Room (2011) - Starting with a Conversation Primary interviews were documented through surveys and user narratives to validate the initial concept.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417593967424-H34NHCNA3LMTRXO5932B/YourVLR-Prototypes.png Your Virtual Living Room (2011) - Finding the Experience I primarily used streaming services like Hulu to find the heart of concept and paper prototypes refine it.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417593967065-B22TBJB3S3I84G9CF4W5/YourVLR-Flows.png Your Virtual Living Room (2011) - User & System Flows Thanks to the help of some developer friends, I created a system flow of the system I could share with future collaborators.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417593751703-LOG6Z4UNGMMV0KPBTBBK/YourVLR-Thumbnail.png Your Virtual Living Room (2011) http://www.katreilly.design/archive daily 0.75 2015-08-16 http://www.katreilly.design/allez-vous-en daily 0.75 2014-12-03 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417600180665-FKHLCYCM6278PH7E3ON3/image-asset.jpeg Allez Vous-en (2009) - Allez Vous En (Go) https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1417601789623-9O5K360XS4UQTX6WHI0S/Screenshot+2014-12-03+02.15.29.png Allez Vous-en (2009) http://www.katreilly.design/disney-junior daily 0.75 2016-12-06 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442108851474-WNPR3X5BJYPH9RNPNQNU/Junior-FirstSteps.png Disney Junior - Collaborative Ideation We collected all of our ideas through several sessions with our stakeholders. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442108851474-WNPR3X5BJYPH9RNPNQNU/Junior-FirstSteps.png Disney Junior - Collaborative Ideation We collected all of our ideas through several sessions with our stakeholders. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1481006426007-EPBXM7W9ZX8C1CUXLSKQ/junior_pageFlow2.jpg Disney Junior - Information Architecture Keeping the structure simple felt important for our young audience. This early user flow map emphasizes the content experience for kids (shown within the gray box). Illustrating this kept us focused on nailing the core experience first. It also encouraged us to remove layers and find even simpler navigation methods. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1481004649247-VXLOHFD82QMITVP7UU8P/2013-05-16+16.23.03.jpg Disney Junior - Paper Prototyping To begin the design process, my UX team channeled our inner kids. Armed with post-its and markers, we created the entire app and invited our colleagues to quickly test it. This approach made it easier to dismiss ideas that weren't working and efficiently iterate on ideas that did. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442108472873-DPOPWND246VFJGVDWDJ1/image-asset.jpeg Disney Junior - Digital Prototypes Making digital, interactive prototypes helped us test our early ideas at a higher fidelity. These were particularly helpful in communicating complex design concepts to the larger team. This example—done in Keynote— aimed to illustrate a visual navigation concept aimed at our young audience. It was also tested with a few of our colleague's children.   Watch the Prototype Demo https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1481004551851-FX7GJYI5ZCFAJ52J0JF7/Screen+Shot+2014-01-11+at+11.05.49+PM+1.png Disney Junior - User Testing Testing with our core demographic—kids aged 3 to 6—was crucial to our design process. We relied on user testing sessions to determine which aspects of our design succeeded and failed in resonating with our Guests. These sessions were exceptionally helpful in showcasing user behavior to our product stakeholders. Viewing and discussing these sessions together motivated us all to find an effective balance between the needs of the business and those of our Guests. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442108191028-6RF64KHSPXVYD5E9Q87U/Junior-ResponsiveWires.png Disney Junior - Responsive Wireframing Designing a consistent experience for all devices was one of our key product priorities. A "mobile-first" design approach allowed me to determine which elements were the most important to our young Guests and display them first. The team viewed larger displays as a playground, where we could infuse additional elements that brought play and magic to the experience. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1481004659186-929T84Q5IDRR2PRI992I/2013-05-16+14.30.18.png Disney Junior - Dynamic Wireframing To validate our responsive layouts, my UX team coded our approved wireframes. Working with the front-end technology helped us empathize with our developers and resolve any friction our design may cause them. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442107346967-CPTJB0PY3WZ08I86X031/Junior-Intro-Image.png Disney Junior - Launch Day 2013 The new, responsive DisneyJunior.com when it launched in August 2013. http://www.katreilly.design/home-sofia daily 1.0 2024-03-06 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/c77ae771-19d8-47fc-9b22-9edaf3092d4b/KatReilly_aboutMe_v2_2023.png Welcome - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/e138fee4-e0c3-413c-a2a6-275d4e137067/DisneyLife%401.5.png Welcome Collaborating with stakeholders & engineers to architect the robust signup systems & UI libraries for the proof of concept for Disney+. View Project → https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/b8b60fa3-4e14-42f1-b8e1-86c27a2d785d/Disney.com.png Welcome Spearheaded UX that brought Disney's vast collection of content & branded experiences to the mobile generation. View Project→ https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/df38ea85-a62f-458f-acdc-f7d167aa7a8c/Seesaw-messages-v1_solid.png Welcome Leading the redesign of Seesaw's messaging system, which addressed critical communication pain points for educators. View Project → https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/901fb869-c1d8-4b5c-9727-4668397223bf/Messenger+Kids_withcopyright.png Welcome Leading Meta's first kid communication app to reach 7M users globally through engaging features & games that taught social & emotional learning skills. View Project → https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695776989263-99HNJX1HA4UI8TI91UPE/KReilly_WhatHeldHerUp_FullView.jpg Welcome https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695777029232-VBE90RSOW08OU1IRLSHO/KatReilly-Ascending+Through+Stories+Interior-+Acrylic+cut+paper+and+cardboard+-+25+x+18+x+14+cm.jpg Welcome https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695777024909-XNFE0753UIIASJMED1WV/Kat+Reilly+-+Happy+Mind%2C+Empty+Bathtub+-+Acrylic%2C+cut+paper+and+cardboard+-18+x+13+x+9+cm.jpeg Welcome https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695777006024-HAT3QS5RIRHUB637W76C/Kat+Reilly+-+A+Secret+Door+Begins+an+Adventure+-+Acryclic%2C+cut+cardboard+and+paper+-+18+x+15+x+1+cm.jpg Welcome https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695777019316-F5248ND0OPASHVVINJJZ/Kat+Reilly+-+Absent+-+Acrylic%2C+cut+paper+and+cardboard+-+13+x+10+x+10+cm.jpg Welcome https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695777028174-FKP44VWGRS2LWCIDGBQV/KatReilly-Ascending+Through+Stories+-+Exterior-+Acrylic+cut+paper+and+cardboard+-+25+x+18+x+14+cm.jpg Welcome http://www.katreilly.design/about daily 0.75 2022-07-12 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1636827656300-VSTASWW6I7J8NG64I8TI/6C96EA82-426A-4B43-B511-D71BFE9D2EC1+%281%29.jpg About Me http://www.katreilly.design/toca-hair-salon daily 0.75 2016-04-29 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418618139885-1T87PLJT7C67S2PGDHW4/toca-hair-salon-flow.jpg Case Study: Toca Hair Salon 2 A snippet of the user flow for Toca Hair Salon 2. See the full documet here. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1418624528826-N8ZMSV7L8KXB6EJ7X554/toca-hair-screenshots Case Study: Toca Hair Salon 2 Screenshots from Toca Hair Salon http://www.katreilly.design/disney-junior-redesign daily 0.75 2016-12-06 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442106859444-84PKE3GTSNUW77TEI2M5/DisneyJunior-Banner.png Disney Junior Site Redesign http://www.katreilly.design/allez-vous-en-go daily 0.75 2015-09-13 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442122174985-LK8OWE9CJJCML5DYCJFZ/Allez-Banner.png Allez Vous-En (Go) http://www.katreilly.design/square-cash-sketch-ui-kit daily 0.75 2016-04-29 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1443843526945-85ZUUG9PK7MKS7I0E0OO/image-asset.png Square Cash Sketch UI Kit http://www.katreilly.design/home daily 0.75 2023-09-25 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1636827656300-VSTASWW6I7J8NG64I8TI/6C96EA82-426A-4B43-B511-D71BFE9D2EC1+%281%29.jpg Portfolio - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1531459213228-UPIB8F1W1K8EHT0LQGN9/Feature+Graphic.png Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1461905928754-LSBNMDKRPHS01AKGK2QJ/image-asset.png Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695083278598-5ZFN0FBTV05LIB06E8XT/KReilly_WritersAttic-night.png Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695083264857-IZA57Q64MKAGE8BOEDBY/KatReilly-Ascending+Through+Stories+Interior-+Acrylic+cut+paper+and+cardboard+-+25+x+18+x+14+cm.jpg Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695083262901-UGAX491S1YCPYNFT08GZ/KatReilly-Ascending+Through+Stories+-+Exterior-+Acrylic+cut+paper+and+cardboard+-+25+x+18+x+14+cm.jpg Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695083265729-1JJZGTPTN8D5UQZ8G06Z/KReilly_WhatHeldHerUpII_Closeup.jpg Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695083260676-3LQBKP5GCF1TJ7GF7MIR/Kat+Reilly+-+Happy+Mind%2C+Empty+Bathtub+-+Acrylic%2C+cut+paper+and+cardboard+-18+x+13+x+9+cm.jpeg Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695083263953-UV5ZHXYQJGES8UTEA7K2/KReilly_WhatHeldHerUp_FullView.jpg Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695083239388-8R3AOIQ9MR07ZSXDKC2D/Kat+Reilly+-+A+Secret+Door+Begins+an+Adventure+-+Acryclic%2C+cut+cardboard+and+paper+-+18+x+15+x+1+cm.jpg Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1695083254786-T5UDJ5ICX3V8ICHU9H56/Kat+Reilly+-+Absent+-+Acrylic%2C+cut+paper+and+cardboard+-+13+x+10+x+10+cm.jpg Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473224981729-P08EBE45UZYBC9X72VJ1/Disney-Life-Thumbnail Portfolio https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1636828015502-Y532D6ZKH2TFJ76OVHE6/Seesaw.png Portfolio - Make it stand out Whatever it is, the way you tell your story online can make all the difference. http://www.katreilly.design/disney-princess-dress-up daily 0.75 2015-11-26 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442119388586-YL7F125B4AL16O6MYK0X/DisneyPrincess-Banner.png Disney Princess Dress Up http://www.katreilly.design/come-back-soon daily 0.75 2015-10-25 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1445747148644-6X9WGDGH1LHQJZ857GX5/image-asset.png Come Back Soon! https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1441664184863-MK5Y6YTH2LKN2WOS6IIO/StayTuned.jpg Come Back Soon! A sample from a mind-mapping exercise. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1441664837600-5K66S32FQZIXNGJB4K3V/Post-It-Wires.jpg Come Back Soon! I've roughly plotted out the beats of my website's narrative. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1441664991178-13SUJQ2FUZA06B969H3F/StayTuned-Sharpie.jpg Come Back Soon! Stay tuned for new updates! https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1445741041289-C2NEREUSJS8BL30PQEBF/StayTuned.jpg Come Back Soon! http://www.katreilly.design/your-virtual-living-room-1 daily 0.75 2015-11-26 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442121190869-1RK76HSDIUORMD4WI3R8/YourVLR-Banner.png Your Virtual Living Room http://www.katreilly.design/snatch-it daily 0.75 2016-04-29 http://www.katreilly.design/plants daily 0.75 2016-07-19 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468895236678-K6DUDLFZMHE99JZULEIM/image-asset.jpeg Plants https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468895718700-BV0912HFMJK6X200HMOY/image-asset.jpeg Plants https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468895424910-NQBPPH6N8GP1AGQDXJ3R/UIResponsiveness01.jpg Plants https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468894879645-PFBU1DT3FJIMO1D4QR6O/image-asset.jpeg Plants https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468894716613-GDCW83ZPJBYOJ33JOIMU/PlantView-HandbookTieIn.jpg Plants https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468840830053-OLDV7KIFF0C2HU7UER1F/2016-07-18+01.00.27.png Plants http://www.katreilly.design/parent-dashboard daily 0.75 2016-07-19 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468896409748-C6UK9DJWMGQVRX0WK29G/image-asset.jpeg Parent Dashboard https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468850014671-YT87X93859OLKGGWU05L/List+Information+Example.jpg Parent Dashboard https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468896058082-H3MZJVWPYWV8WTGI9AYV/image-asset.jpeg Parent Dashboard https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1468896460476-84YRFP9MEVVGMGK4SZH3/2016-07-18+05.57.45.png Parent Dashboard http://www.katreilly.design/disneylife daily 0.75 2016-12-06 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473138758403-QRDOV9B1DTYAACZTVGIF/DisneyLife_ExperienceMap_TouchPoints DisneyLife An overview of the Guest journey for DisneyLife. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473224613467-GSB1XMDYD57N2COGMN1N/image-asset.jpeg DisneyLife Some early customer reviews from the App Store. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473136780475-YN3PFH1XGASFOMV203XX/DisneyLife_PersonaOverview DisneyLife An overview of our primary and secondary user personas for DisneyLife.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473146571794-TUG304MX93ZG4AJ5PUFT/image-asset.jpeg DisneyLife A list of the ten prototyping tools we tried in 2014-2015.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473139671203-QFW17EB31SII5LXW6DW7/image-asset.jpeg DisneyLife Shot of whiteboard session to gather and organize insights for the experience map.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473143762052-4GAPXK390JA19OJL7COC/image-asset.jpeg DisneyLife Shot of a "Wellbeing North Star" exercise to discuss improvements to our sign up process. This exercise helped us collect a range of ideas from the whole team, and then decide together what were the most important problems to tackle.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473143696597-CVEMJR0U6GJ8YVNPXRRQ/DisneyLife_CardSorting.png DisneyLife Shot of card-sorting and other exercises with stakeholders to decide hierarchy of our navigation. Minutes into the meeting, we realized there were many different opinions on this, and it was important to iron it out there. These conversations were very effective, allowing each participant to order the items to their preference and offer their reasoning.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473228660855-20TPECRWRV8NOR4NRKMS/image-asset.jpeg DisneyLife Sketching exercise to imagine our personas within the user scenarios of a feature.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473145019232-ZXRO0CUKCNTPR4Z2CX33/image-asset.jpeg DisneyLife Storyboards of mockups were preferred by our product team. These documents were easy to read and could be pitched to business partners with minimal explanation.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473135917769-8SWOARYJMPOLQ9F1ZDJY/DisneyLife_VisionPoster DisneyLife The initial vision poster for DisneyLife (a.k.a. "Project Horizon"). https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1481001681683-2HM0FK1UTHONRM4N50GO/image-asset.jpeg DisneyLife The navigation schema we ultimately built. The bottom tab bar allows our most valuable feature—content—to be visible and accessible to Guests at all times while they are browsing. This was especially important for our younger Guests, who may not be able to find features in a hidden menu easily. Features that resonated with older kids or adults (favorites, downloads, settings, etc) were made accessible on a drop-down menu. Embedding it within the Guest's avatar indicates the features' secondary hierarchy as well as their ability to empower the Guest to personalize his or her experience. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473213870485-EXA6A4NPWB0WSZYVEXIW/image-asset.jpeg DisneyLife The UI components section of our DisneyLife style guide and an example of its implementation. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473145058367-J25OCYVCAU1L9CGTEDXI/image-asset.jpeg DisneyLife User flow diagrams helped the engineers anticipate the various edge cases for complex features.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473138732058-35BUKPZLC21SFH534GCM/ExperienceMap_Touchpoints_Clickthrough.jpg DisneyLife An outline of the service's touchpoints, their opportunities and challenges. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473139619341-I3BBH2KM7UAJ7JPU379R/image-asset.jpeg DisneyLife Shot of whiteboard session to curate the vision poster.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473136842751-7PERZPT30WYWTEZH1JR5/DisneyLife_PersonaDetail DisneyLife Bio of a primary user persona.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473223500387-KB42O4ULS55NNAAPUGMZ/image-asset.jpeg DisneyLife Our Transitions Library (shown in back) allows us to pull a heap of functionality into Framer (shown at front) with a few lines of code. A special thanks to the team at Walt Disney Parks and Resorts Online for their inspiration and guidance in this endeavor.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473137553925-SVGNDJ43KNXIX3196YEO/DisneyLife_LaunchView DisneyLife DisneyLife as it looked on launch day, November 2015.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473216790717-BI3RQHNA98J1SQYFGFHA/image-asset.jpeg DisneyLife Our style guide implemented across our range of supported devices.   https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473268816144-QNY6P3THJ52YOH53W53R/Banner.jpg DisneyLife http://www.katreilly.design/new-page daily 0.75 2018-07-13 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1531459626630-1866WBHHTW2REX3RE7KG/Feature+Graphic.png Messenger Kids http://www.katreilly.design/work-archive daily 0.75 2022-07-12 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473224981729-P08EBE45UZYBC9X72VJ1/Disney-Life-Thumbnail Work (Archive) https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1461905928754-LSBNMDKRPHS01AKGK2QJ/image-asset.png Work (Archive) https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1636828015502-Y532D6ZKH2TFJ76OVHE6/Seesaw.png Work (Archive) - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1461905909132-3CBGV0GRNG2DQUTLSZ31/Disney-Princess-Thumbnail Work (Archive) https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1461905865986-GJCP7WN983B7FOVD5GQI/YourVLR-Thumbnail Work (Archive) https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1461905847309-VR7SZKXG9LVLXCKDESIZ/image-asset.png Work (Archive) https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1657642020421-83ZPMHS1HUULCVL67BUW/image-asset.jpeg Work (Archive) https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1461905799774-U4W77I68CKEL4RUPDWVI/image-asset.png Work (Archive) https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1531459213228-UPIB8F1W1K8EHT0LQGN9/Feature+Graphic.png Work (Archive) http://www.katreilly.design/messenger-kids daily 0.75 2023-09-29 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/d4e4f3ab-bcf7-4a1f-a239-380519f58a10/MK+at+Launch.jpg Messenger Kids - Make it stand out Messenger Kids when it launched in 2018. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/11fb1188-5114-4fcf-a7fd-a8427456fa1b/mkLogo.png Messenger Kids - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/a28a9736-08e7-4bbc-befc-202ed6ff5247/MIMs+Proto+vs+Launch.jpg Messenger Kids - Make it stand out Even years after launch, the multiplayer games platform I designed is still one of the keystones of the Messenger Kids product. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/7b2a3014-6418-4539-b393-ab1fbf9b3ee5/MIMs+Flow.jpg Messenger Kids - Make it stand out User flow for a multiplayer games platform, which was heavily expanded through Messenger Kids’ need for high quality, interactive experiences. http://www.katreilly.design/seesaw-messages daily 0.75 2023-09-29 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/d5dc38eb-279e-4322-9f5b-a5aaf8bc5a5f/Seesaw+Messages+-+banner.jpg Seesaw Messages - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/dcffa505-536f-49d8-9758-f3a493a70750/Seesaw+Messages+Comparison.jpg Seesaw Messages - Make it stand out Whatever it is, the way you tell your story online can make all the difference. http://www.katreilly.design/disneylife2 daily 0.75 2023-09-29 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473216790717-BI3RQHNA98J1SQYFGFHA/image-asset.jpeg DisneyLife-new - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473138758403-QRDOV9B1DTYAACZTVGIF/DisneyLife_ExperienceMap_TouchPoints DisneyLife-new - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473213870485-EXA6A4NPWB0WSZYVEXIW/image-asset.jpeg DisneyLife-new - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473224981729-P08EBE45UZYBC9X72VJ1/Disney-Life-Thumbnail DisneyLife-new - Make it stand out DisneyLife as it launched in November 2015. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1473135917769-8SWOARYJMPOLQ9F1ZDJY/DisneyLife_VisionPoster DisneyLife-new - Make it stand out Whatever it is, the way you tell your story online can make all the difference. http://www.katreilly.design/disneyonline daily 0.75 2023-09-29 https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/43ea8314-1f02-4202-9182-3a7013a795d4/2013-05-16+16.23.03.jpg disney-online - Make it stand out Most of our designs began on paper. Armed with post-its and markers, my UX parner and I created the entire app and invited our colleagues to quickly test it. This approach made it easier to dismiss ideas that weren't working and efficiently iterate on ideas that did. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1481004659186-929T84Q5IDRR2PRI992I/2013-05-16+14.30.18.png disney-online - Make it stand out To validate our responsive layouts, my UX partner and I coded our approved wireframes. Working with the front-end technology helped us empathize with our developers and resolve any friction our design may cause them. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1442108191028-6RF64KHSPXVYD5E9Q87U/Junior-ResponsiveWires.png disney-online - Make it stand out Designing a consistent experience for all devices was one of our key product priorities. A "mobile-first" design approach allowed me to determine which elements were the most important to our young Guests and display them first. The team viewed larger displays as a playground, where we could infuse additional elements that brought play and magic to the experience. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/3fa309d6-81a7-4587-9403-9692d5d54f89/disney.comLogo.jpg disney-online - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/1481006426007-EPBXM7W9ZX8C1CUXLSKQ/junior_pageFlow2.jpg disney-online - Make it stand out This early user flow map emphasizes the content experience for kids (shown within the gray box). Illustrating this kept us focused on nailing the core experience first. It also encouraged us to remove layers and find even simpler navigation methods. https://images.squarespace-cdn.com/content/v1/5430a81ce4b0d5f62b39e4df/b4448d78-8713-47c1-b2da-dbc5b027e265/image-asset.jpg disney-online - Make it stand out The new, responsive DisneyJunior.com at launch in 2013.