https://maggiebryan.com Maggie Bryan Thu, 15 Aug 2019 02:39:41 +0000 https://maggiebryan.com en https://maggiebryan.com/Header Sun, 11 Aug 2019 13:54:28 +0000 Maggie Bryan https://maggiebryan.com/Header Director of UX — NY, NY and Worldwide Selected work 2015 - 2019 https://maggiebryan.com/Project-Index Mon, 12 Aug 2019 17:11:38 +0000 Maggie Bryan https://maggiebryan.com/Project-Index Pr.01 Stonewall Forever THE LGBT COMMUNITY CENTER&nbsp; • WEB &amp; AR EXPERIENCE • AN IMMMERSIVE MONUMENT AND MINI-DOC ON THE STONEWALL RIOTS AND 50 YEARS OF PRIDE&nbsp; • &nbsp; Pr.02 Chobani.com CHOBANI&nbsp;• WEB REDESIGN • A REFOCUSED, LUSHLY DESIGNED SITE FOR TRUE FOOD INNOVATOR •&nbsp; Pr.03 October PITCHFORK x ZX VENTURES&nbsp; • WEB DESIGN • A BEER MAGAZINE FOR THE NEXT GENERATION •&nbsp; Pr.04 Body 10 ESPN&nbsp;• WEB DESIGN • A SMART AND SLICK FEATURE ISSUE THAT CELEBRATES THE BODY IN ALL IT’S GLORY&nbsp;•&nbsp; Pr.05 Beyond I Do AD COUNCIL x CP+B&nbsp;• WEB DESIGN • DIGITAL CAMPAIGN HIGHLIGHTING DISCRIMINATION AGAINST THE LGBTQ+ COMMUNITY •&nbsp; https://maggiebryan.com/Stonewall-Forever Sun, 11 Aug 2019 17:21:47 +0000 Maggie Bryan https://maggiebryan.com/Stonewall-Forever Stonewall Forever THE LGBT COMMUNITY CENTER An immersive digital experience and augmented reality app that features previously unheard perspectives from the LGBTQ+ community about the impact of the Stonewall Riots on the last 50 years of Pride. ➡ www.stonewallforever.org We worked with Lesbian, Gay, Bisexual and Transgender Community Center and Google over nearly two years to create a first-of-its-kind monument with digital technology. The “living monument” can be accessed on the web, via an AR app, or even through Google Maps. Unlike a traditional monument, the living monument is interactive and changes every day. The monument is organized around six collections of content — from “Life Before Stonewall” to “Love and Solidarity” — that visitors can explore to understand the impact of the Stonewall Riots on the past, present, and future of Pride.&nbsp; Each collection features audio stories, video, photography and ephemera that were collected and curated for the experience. This historically significant content is enhanced by photographs and written reflections that visitors submit from all over the world, today, showing that the impact of the Riots on LGBTQ+ history continues to grow and reverberate with time. <img width="2007" height="1130" width_o="2007" height_o="1130" data-src="https://freight.cargo.site/t/original/i/de90dca9535d9a6865733472bf623ec504894c0ae979f249382877f33734038f/Maggie_Bryan_Portfolio_Stonewall_5.jpg" data-mid="48572763" border="0" src="https://freight.cargo.site/w/1000/i/de90dca9535d9a6865733472bf623ec504894c0ae979f249382877f33734038f/Maggie_Bryan_Portfolio_Stonewall_5.jpg" /> Over the nearly two years I worked on Stonewall Forever, we went through three separate phases, each with its own challenges. Initially, our objective was to establish the north star vision for the project. We answered the big questions, like how a monument can live in digital space, if the documentary would live on it’s own our inside the monument, and how we would tell the story of the Stonewall Riots authentically and with respect. Later on, as we built out a “teaser” site, where the community could submit their artefacts and stories, we had to define an intuitive UX flow and a visual language that conveyed the gravity of the subject while also imbuing a sense of forward-looking urgency. <img width="1200" height="801" width_o="1200" height_o="801" data-src="https://freight.cargo.site/t/original/i/e22e771ed1fbe32d6460d6c46feb2be3847bd0d948e15ae61d663077ee3416d9/Maggie_Bryan_Portfolio_Stonewall_1.gif" data-mid="48572759" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/e22e771ed1fbe32d6460d6c46feb2be3847bd0d948e15ae61d663077ee3416d9/Maggie_Bryan_Portfolio_Stonewall_1.gif" /> In the final and most ambitious phase of the project, we built the monument itself, weaving over one hundred historical artefacts and reflections into the experience across multiple touchpoints. Our main challenge was creating an intuitive way for users to navigate this first-of-its-kind digital monument while also crafting a transcendent visual experience that did justice to 50 years of Pride. How would we group content? How would users move through the unconventional WebGl environment? What mobile affordances should be implemented to simplify the experience for smaller screens? How could the AR app parallel the web build? How would users upload their own reflections, simply and quickly, across desktop, mobile, and AR? Because of the scale and complexity of this project, there were many questions that needed to be answered by the UX team at the outset. <img width="2007" height="1130" width_o="2007" height_o="1130" data-src="https://freight.cargo.site/t/original/i/62454859f7c51e736e4e2e02b137ec25219a4b7373583e53bb6cc66c1facb870/Maggie_Bryan_Portfolio_Stonewall_4.jpg" data-mid="48572762" border="0" src="https://freight.cargo.site/w/1000/i/62454859f7c51e736e4e2e02b137ec25219a4b7373583e53bb6cc66c1facb870/Maggie_Bryan_Portfolio_Stonewall_4.jpg" /> To bring order to the galaxy-like interior of the monument, we grouped content into “collections”, each with its own theme, which users fly through as they ascend a central core. With guidance from The LGBT Community Center, we curated the collections from the thousands of historical artefacts that were archived for the project and organized them so that they both explained the impact of the riots and drew parallels to today. <img width="448" height="805" width_o="448" height_o="805" data-src="https://freight.cargo.site/t/original/i/f90157d34745160014abac7870d7e300d9455990f06f72e2f46d73f6a3ad935d/Maggie_Bryan_Portfolio_Stonewall_Diagrams_6.png" data-mid="48616175" border="0" src="https://freight.cargo.site/w/448/i/f90157d34745160014abac7870d7e300d9455990f06f72e2f46d73f6a3ad935d/Maggie_Bryan_Portfolio_Stonewall_Diagrams_6.png" /> <img width="638" height="366" width_o="638" height_o="366" data-src="https://freight.cargo.site/t/original/i/c992a29059a9e1aaaad9bbff55bd158f1be1a99a2283666882b00a43dca9cca0/Maggie_Bryan_Portfolio_Stonewall_Diagrams_7.png" data-mid="48616176" border="0" src="https://freight.cargo.site/w/638/i/c992a29059a9e1aaaad9bbff55bd158f1be1a99a2283666882b00a43dca9cca0/Maggie_Bryan_Portfolio_Stonewall_Diagrams_7.png" /> <img width="652" height="366" width_o="652" height_o="366" data-src="https://freight.cargo.site/t/original/i/6326ac0329ff729058cbaa2f7f21459735dc538bae9070ed91ca3aad66e56f98/Maggie_Bryan_Portfolio_Stonewall_Diagrams_8.png" data-mid="48616177" border="0" src="https://freight.cargo.site/w/652/i/6326ac0329ff729058cbaa2f7f21459735dc538bae9070ed91ca3aad66e56f98/Maggie_Bryan_Portfolio_Stonewall_Diagrams_8.png" /> <img width="638" height="358" width_o="638" height_o="358" data-src="https://freight.cargo.site/t/original/i/e8b33dc0c10e6bd19858418bbf0dcc67332a9ee82ff90dd647d4a2c7fe165798/Maggie_Bryan_Portfolio_Stonewall_Diagrams_10.png" data-mid="48616179" border="0" src="https://freight.cargo.site/w/638/i/e8b33dc0c10e6bd19858418bbf0dcc67332a9ee82ff90dd647d4a2c7fe165798/Maggie_Bryan_Portfolio_Stonewall_Diagrams_10.png" /> <img width="652" height="366" width_o="652" height_o="366" data-src="https://freight.cargo.site/t/original/i/7c4e138cc023b2d82fbcec38ddcc4347b5c85c74f1dbb7d3405812ed94f86705/Maggie_Bryan_Portfolio_Stonewall_Diagrams_9.png" data-mid="48616178" border="0" src="https://freight.cargo.site/w/652/i/7c4e138cc023b2d82fbcec38ddcc4347b5c85c74f1dbb7d3405812ed94f86705/Maggie_Bryan_Portfolio_Stonewall_Diagrams_9.png" /> To streamline navigation, we added integrated tooltips and built a sticky subnav that helps users to skip ahead or dive into a specific artefact. But we also designed the UX to allow for different user mentalities. If a user freely ascends the monument by scrolling, they are subtly interrupted with a title screen when they enter a new collection, signalling this shift without breaking their flow. If a user lingers on a title page, they are timed into highlighted content from that collection and can easily explore more highlighted artefacts by clicking left and right in the content view pages. Taken together, these decisions allow for two different navigation styles, an on-the-rails experience for users who want a guided tour of the highlights, and an exploratory mode for users who want to move freely and investigate the monument on their own. On mobile, we simplified the bottom navigation into a sticky drawer that saves space while still allowing users to jump between collections, and kept the path of highlighted content in the center of the screen so that there would always be an interactive particle in every part of the flow. The AR app was developed for both iOS and Android, and provides a custom experience if it detects a user is in Christopher Square, the site of the Riots and the physical home of our digital monument. We aligned AR with mobile UI patterns like the sticky bottom drawer for consistency, but we also made new affordances for AR. Instead of being organized around a central core, the shape of the monument is more open and highlighted content is placed towards the bottom, since users can’t move upwards. We also created a system of alerts for AR users who ventured outside Christopher Park and might be in danger if they didn’t look up from their phones.&nbsp; <img width="1920" height="1440" width_o="1920" height_o="1440" data-src="https://freight.cargo.site/t/original/i/4b3971d2690c35b7f80a5cb85c6672dca72435f0142a98533e9a08ec8883b49c/Google_StonewallForever_CaseStudy_8.jpg" data-mid="48574384" border="0" src="https://freight.cargo.site/w/1000/i/4b3971d2690c35b7f80a5cb85c6672dca72435f0142a98533e9a08ec8883b49c/Google_StonewallForever_CaseStudy_8.jpg" /> Encouraging users to submit their own reflections on Pride was a key goal of the site, since the “living” monument reflects the impact that small acts of courage can have collectively. To ensure that anyone, anywhere, could add their own photo and a written note, we had to design a dead-simple uploader that worked across desktop, mobile, and AR, while creating a moment of magic when your submission turns into a particle and fades into the monument. Behind the scenes, we crafted a plan for integrating these submissions using AI and human moderators,&nbsp; while a custom CMS handles the thousands of submissions we receive. PRESS "Stonewall Forever: How Google is preventing erasure of LGBTQ+ history" YAHOO "Google Created an AR Experience to Tell the Story of the Stonewall Riots" ADWEEK "Google Celebrates 50 Years of LGBTQ Pride with 'Living Monument' to the Stonewall Riots" TIME "Google Creates AR "Living Monument" Documenting LGBTQ+ History" OUT "New 'Digital Monument' Allows Users to Relive Stonewall Uprising" ADVOCATE "Stonewall National Monument's Digital Experience Lets Community Share Their LGBTQ Story" PSFK "Stonewall 50 years later: Google’s digital monument marks LGBT history" FAST COMPANY "Stonewall Forever: 50 years after the raid that sparked the LGBTQ movement, monument goes digital" USA TODAY “Stonewall Inn Project to Preserve Stories Behind a Gay Rights Monument” THE NEW YORK TIMES “Google Gives $1 Million For Stonewall Inn History Project” GOTHAMIST AWARDSFWA of the DayFWASite of the DayAWWWARDS Mobile ExcellenceAWWWARDS Developer AwardAWWWARDS Mobile Site of the WeekAWWWARDS WebpickCOMM ARTS TEAMThe LGBT Community Center CLIENT With support from Google Stink Studios CREATIVE STUDIO Jay ChapmanCREATIVE DIRECTOR Maggie Bryan DIRECTOR OF UX Liz Wells UX DESIGNER Nic Sanchez DESIGN LEAD Joel Watkins MOTION DESIGNER PJ Ahlberg HEAD OF TECHNOLOGY Arnaud Tanielian TECH DIRECTOR &amp; FRONTEND DEVELOPER Anthony Marefat &amp; Adam Smith UNITY DEVELOPERS Samuel Honigstein WEBGL DEVELOPER Terrence Curran BACK END DEVELOPER Abhaya Rawal FULL-STACK DEVELOPER Lauren Keller EXECUTIVE PRODUCER Lauren Saunders SENIOR INTEGRATED PRODUCER Shami LaCourt CONTENT PRODUCER Eric Larson ASSISTANT EDITOR, CONTENT Rennie McDouggal RESEARCHER, CONTENT Next: Chobani.com Index https://maggiebryan.com/Chobani-com Thu, 15 Aug 2019 00:02:55 +0000 Maggie Bryan https://maggiebryan.com/Chobani-com Chobani.com CHOBANI A re-focused, re-branded home for America’s most innovative food company.&nbsp; ➡ www.chobani.com Over the last decade, Chobani went from an artisanal food brand to America’s #1 Greek yogurt. But with success comes competition, and their competitors often copied their aesthetic, but not their ethos. We worked with Chobani to completely redesign and rebuild their .com while the entire company underwent a 360 rebrand.&nbsp; <img width="1600" height="960" width_o="1600" height_o="960" data-src="https://freight.cargo.site/t/original/i/538269edd8f9ab194dfb595b6b71c4115ae373011c37dd5863c69add05ab1fff/Maggie_Bryan_Portfolio_Chobani_3.png" data-mid="48619589" border="0" src="https://freight.cargo.site/w/1000/i/538269edd8f9ab194dfb595b6b71c4115ae373011c37dd5863c69add05ab1fff/Maggie_Bryan_Portfolio_Chobani_3.png" /> The previous Chobani.com contained hundreds of pages, and the structure of the site had grown organically over time to reflect the organization of the company rather than what users needed. While we wanted to build an optimized site that followed UX best practices, we didn’t want the site to feel soulless. To recapture the magic of the brand, we needed to create unique micro-moments that showcased Chobani’s playful side. Unlike their competitors, Chobani wanted to invest in making their .com a best-in-class example of accessibility. Making a more accessible web is a value we share, so we not only tested the work-in-progress site with users, but also designed the site for low-vision and keyboard users. <img width="1362" height="1134" width_o="1362" height_o="1134" data-src="https://freight.cargo.site/t/original/i/8cba7a97c048560c49b89120c17d614ce57a3eaf239f7389bdb9af1fd47c465c/Maggie_Bryan_Portfolio_Chobani_7.png" data-mid="48619594" border="0" src="https://freight.cargo.site/w/1000/i/8cba7a97c048560c49b89120c17d614ce57a3eaf239f7389bdb9af1fd47c465c/Maggie_Bryan_Portfolio_Chobani_7.png" /> <img width="5616" height="3744" width_o="5616" height_o="3744" data-src="https://freight.cargo.site/t/original/i/a9509a4f84ff93deb38ca8ecef6ffc1571eb5e73476ae4862623db3cec89beb8/Maggie_Bryan_Portfolio_Chobani_1.jpg" data-mid="48619676" border="0" src="https://freight.cargo.site/w/1000/i/a9509a4f84ff93deb38ca8ecef6ffc1571eb5e73476ae4862623db3cec89beb8/Maggie_Bryan_Portfolio_Chobani_1.jpg" /> <img width="1861" height="1243" width_o="1861" height_o="1243" data-src="https://freight.cargo.site/t/original/i/f8a12fbf9fde3658416892b09d3f105cfe55c878df2df8b69f823c4c809e20a7/Maggie_Bryan_Portfolio_Chobani_2.jpg" data-mid="48619588" border="0" src="https://freight.cargo.site/w/1000/i/f8a12fbf9fde3658416892b09d3f105cfe55c878df2df8b69f823c4c809e20a7/Maggie_Bryan_Portfolio_Chobani_2.jpg" /> <img width="1600" height="1066" width_o="1600" height_o="1066" data-src="https://freight.cargo.site/t/original/i/b020baffeb690783fc5f3d80290cc75b32275392661494e9fa26402799c82321/_MG_7582.CR2.jpg" data-mid="48620431" border="0" src="https://freight.cargo.site/w/1000/i/b020baffeb690783fc5f3d80290cc75b32275392661494e9fa26402799c82321/_MG_7582.CR2.jpg" /> We cast a wide net to gather insights for this project . We researched Chobani’s consumers, but also interviewed a diverse set of employees-- from the brand new CCO to the veteran call center manager-- to understand the role of the .com in the company’s larger mission. In order to align Chobani.com’s information architecture with their core purpose, I proposed restructuring the site to focus on Product (Desire), Recipes (Inspiration), and Impact (Vision). These three content pillars aligned with real user needs and position Chobani as a founder-led, food-focused wellness company rather than just another yogurt brand. From there, I created several rounds of detailed site maps and content strategy for every page on the site, workshopping the designs with stakeholders as I went. <img width="2007" height="1129" width_o="2007" height_o="1129" data-src="https://freight.cargo.site/t/original/i/44d0c4bc2b68e8b0fdd06f77309f5964443be6fd99ae6fb9e6ced8c45cd9a359/Chobani_4_Wireframes_MaggieBryan.jpg" data-mid="48703447" border="0" src="https://freight.cargo.site/w/1000/i/44d0c4bc2b68e8b0fdd06f77309f5964443be6fd99ae6fb9e6ced8c45cd9a359/Chobani_4_Wireframes_MaggieBryan.jpg" /> We explored many ways to bring a sense of play into the site. The design team found areas - like the unconventional cut out images and whimsical shapes - that drew inspiration from the larger rebrand and breathed life into the digital home. But we also created unique UI/UX magic moments, for instance the discovery tool on every product page where users can see a whimsical illustration of other flavors by hovering below the product image. Balancing usability with innovation was a key aspect of my role as lead UX designer. &nbsp; <img width="2007" height="1130" width_o="2007" height_o="1130" data-src="https://freight.cargo.site/t/original/i/8487364ae4c5a2dd2d12a0c4e9b222599d69589a0e2e11452484e266909d877a/Chobani_5_FinalDesigns_MaggieBryan.jpg" data-mid="48703490" border="0" src="https://freight.cargo.site/w/1000/i/8487364ae4c5a2dd2d12a0c4e9b222599d69589a0e2e11452484e266909d877a/Chobani_5_FinalDesigns_MaggieBryan.jpg" /> Unique in the category, Chobani.com is a PWA (progressive web app) so that users with low-bandwidth can easily load the site. This technical optimization helps users with slower internet connections and users, like supermarket shoppers, who may have temporary connectivity issues. Since launching the site, I’ve worked with our tech lead, Arnaud Tanielian, and Chobani to improve the design and codebase for screen readers and low-vision users. PRESS “Why Chobani Is Reinventing Itself—and Why It Had No Choice” ADWEEK “Folk Art and Fairy Dust: How Chobani Hopes to Grow Its Brand” ADAGE “Get me to the Greek” BRAND NEW AWARDSSite of the Day AWWWARDS Developer Award AWWWARDS Mobile Excellence AWWWARDS Mobile Site of the Month AWWWARDS Site of the Day CSS AWARDS TEAMChobani CLIENT Stink Studios DIGITAL AGENCY Ben Hughes EXECUTIVE CREATIVE DIRECTOR Olivier Gillaizeau CREATIVE DIRECTOR Nate Skinner DIRECTOR OF STRATEGY Maggie Bryan SENIOR UX DESIGNER Carinda Roestorf ART DIRECTOR Maxime Rimbert DESIGNER Anthony Méric LEAD MOTION DESIGNER Aaron Covrett MOTION DESIGNER Lauren Keller EXECUTIVE PRODUCER Danielle Kim PRODUCER PJ Ahlberg DIRECTOR OF TECHNOLOGY Arnaud Tanielian TECH DIRECTOR Oskar Tilly TECH DIRECTOR, BACKEND Abhaya Rawal &amp; Suny Gao DEVELOPERS Next: October Index https://maggiebryan.com/October Thu, 15 Aug 2019 01:29:01 +0000 Maggie Bryan https://maggiebryan.com/October October PITCHFORK x ZX VENTURES A digital publication celebrating craft beer culture for a new generation, imbued with a spirit of creative rebellion.&nbsp; Pitchfork secured funding to create a new craft-beer magazine aimed at millennial beer consumers. They had done some ethnographic research, but they hadn’t been able to synthesize the findings into a plan of action, and they had a deadline: publish within six weeks, or lose the funding. Since most beer publications focused on die-hard connoisseurs or homebrewers, we saw an opening to connect with a new generation of beer drinkers through lifestyle editorial and smart design. <img width="2007" height="1130" width_o="2007" height_o="1130" data-src="https://freight.cargo.site/t/original/i/f9fda142dcf5e6efc3bdff5cce74e89ba5a8facb60e65c8ff7a7b7ff6c530d92/Maggie_Bryan_Portfolio_October_10.jpg" data-mid="48622604" border="0" src="https://freight.cargo.site/w/1000/i/f9fda142dcf5e6efc3bdff5cce74e89ba5a8facb60e65c8ff7a7b7ff6c530d92/Maggie_Bryan_Portfolio_October_10.jpg" /> One of the first challenges of the project was the timeline.&nbsp;We had lots of ideas and only a little time to turn them into reality, so setting up a strong UX approach at the beginning was key to success down the road. We focused our initial efforts on building a MVP (minimum viable product) version of the site, using the insight that in today’s internet age, every page is the homepage. Article pages were our most important pages, since we expected users to come through social media directly, and then explore further. At the same time, we needed to build a site that would start small but scale with the ambitions of the October team over the following months, and that was easy for editors to use. The site also needed to feel irreverent and down-to-earth in order to speak to a new audience of beer fans, and to stand out from the competition. <img width="2087" height="1128" width_o="2087" height_o="1128" data-src="https://freight.cargo.site/t/original/i/787f214b4bf93dc11d16a517dc9d5413a4eed30bb08d3ab44926083d3a098ec9/Maggie_Bryan_Portfolio_October_12.png" data-mid="48622750" border="0" src="https://freight.cargo.site/w/1000/i/787f214b4bf93dc11d16a517dc9d5413a4eed30bb08d3ab44926083d3a098ec9/Maggie_Bryan_Portfolio_October_12.png" /> <img width="1112" height="626" width_o="1112" height_o="626" data-src="https://freight.cargo.site/t/original/i/4410c9297e69b266206bb424c0e7c65e8d8d2d69f8d9d6b1153ac6b1e0908609/Maggie_Bryan_Portfolio_October_5.png" data-mid="48622753" border="0" src="https://freight.cargo.site/w/1000/i/4410c9297e69b266206bb424c0e7c65e8d8d2d69f8d9d6b1153ac6b1e0908609/Maggie_Bryan_Portfolio_October_5.png" /> <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/b34f1e689039e76d4b5bb792765279ad6423965358a530891aa8507a691353ea/Maggie_Bryan_Portfolio_October_6.png" data-mid="48622754" border="0" src="https://freight.cargo.site/w/960/i/b34f1e689039e76d4b5bb792765279ad6423965358a530891aa8507a691353ea/Maggie_Bryan_Portfolio_October_6.png" /> At the beginning of the project, we flew to Chicago and embedded with Pitchfork’s team. In preparation, I had quickly spun up a vision prototype for us to share. Over the course of three days, I led collaborative design and ideation workshops and then took our findings back to New York, where I spent time synthesizing and sketching out key ideas. Because we had to launch an MVP within a month of our initial kick-off, I had about one week to complete two rounds of wireframing and prototyping. All in all, I completed over 100 pages of documentation for the first week. <img width="1429" height="857" width_o="1429" height_o="857" data-src="https://freight.cargo.site/t/original/i/3d1f237c97248ce2356bd455a262bee2d5cde8f314fce46d6b84b47e25972993/Maggie_Bryan_Portfolio_October_3.png" data-mid="48622778" border="0" src="https://freight.cargo.site/w/1000/i/3d1f237c97248ce2356bd455a262bee2d5cde8f314fce46d6b84b47e25972993/Maggie_Bryan_Portfolio_October_3.png" /> <img width="1024" height="699" width_o="1024" height_o="699" data-src="https://freight.cargo.site/t/original/i/372fc186ff22e4e902b56f43c19750a309396ab93e51e1f648cba0fdb9261614/Maggie_Bryan_Portfolio_October_4.png" data-mid="48622779" border="0" src="https://freight.cargo.site/w/1000/i/372fc186ff22e4e902b56f43c19750a309396ab93e51e1f648cba0fdb9261614/Maggie_Bryan_Portfolio_October_4.png" /> <img width="1895" height="1266" width_o="1895" height_o="1266" data-src="https://freight.cargo.site/t/original/i/782fddb529a5625a42b95ae4c197588a208582a078acea37e8c71231b28e67db/Maggie_Bryan_Portfolio_October_2.jpg" data-mid="48623078" border="0" src="https://freight.cargo.site/w/1000/i/782fddb529a5625a42b95ae4c197588a208582a078acea37e8c71231b28e67db/Maggie_Bryan_Portfolio_October_2.jpg" /> When I was designing the UX for October I imagined creative ways for the rebellious spirit of the brand to shine through. Some of these were details, like our “cheeky beer reviews”- illustrated beer reviews that would complement numerical scores. Others were overarching- like the site structure and content strategy. Because the beer world has traditionally been a male-dominated environment, we wanted to create a publication that felt both smart and accessible to everyone who appreciated the craft and artistry of beer. <img width="2007" height="1130" width_o="2007" height_o="1130" data-src="https://freight.cargo.site/t/original/i/c9c2e305af60b9beeeec8335857a88ef4f2c84ba81ec2c7a2c71a694c50bb3f4/October_4_FInalDesignsMobile_MaggieBryan.jpg" data-mid="48703724" border="0" src="https://freight.cargo.site/w/1000/i/c9c2e305af60b9beeeec8335857a88ef4f2c84ba81ec2c7a2c71a694c50bb3f4/October_4_FInalDesignsMobile_MaggieBryan.jpg" /> We took an unconventional approach to designing October, starting with the modular article pages. We not only designed them first, but we designed them to grow with the ambitions of of the site’s editors. We created a bank of 12+ modules, from music players to maps, that allow any editor to create an article, event recap, or beer review that stands out. The design team also gave the site a fresh color palette, refined typography and progressive layouts give the brand a distinct place amidst the masculine, heritage-focused design language of the beer industry.After launching our initial MVP, I worked closely with our brand design and development teams to complete October over the next four months. Based on user feedback and performance, we simplified the homepage, bumped up font sizes, and changed the navigation. Since launching in March of 2017, the magazine has exceeded all goals for success. The site immediately outperformed engagement targets, it’s spawned a music-and-craft beer festival, and it’s even brewed its own beer. PRESS “New online magazine launched by Pitchfork looks to make craft beer “less geeky”” DESIGN WEEK “Pitchfork is launching a craft beer site” DIGIDAY “A new site dedicated to beer and the culture surrounding it” PITCHFORK “Online music site Pitchfork is branching into the beer world” FOOD REPUBLIC “Introducing October — Falling for Beer” GOOD BEER HUNTING “Launch of October” THREE’S BREWING “Check out October” BEERGRAPHS AWARDSSite of the Day TYPEWOLF TEAM Pitchfork &amp; ZX Ventures CLIENT Stink Studios DIGITAL AGENCY Ben Hughes EXECUTIVE CREATIVE DIRECTOR Olivier Gillaizeau CREATIVE DIRECTOR Maggie Bryan SENIOR UX DESIGNER Jessica Hägg DESIGNER PJ Ahlberg DIRECTOR OF TECHNOLOGY Oskar Tilly TECH DIRECTOR Arnaud Tanielian SENIOR DEVELOPER Erik Taheri &amp; James La Marre DEVELOPERS Patrick Krulik EXECUTIVE PRODUCER Lauren Saunders PRODUCER Dan Savage ILLUSTRATOR Next: Body 10 Index https://maggiebryan.com/Body-10 Thu, 15 Aug 2019 02:07:13 +0000 Maggie Bryan https://maggiebryan.com/Body-10 Body 10 ESPN A rich digital experience for the tenth anniversary of ESPN’s annual Body Issue that feels worthy of its place in culture. ➡ www.espn.com/bodyissue ESPN’s Body Issue celebrates the human form in peak physical condition and sparks annual conversations about beauty norms and the wear and tear of professional sports careers. Every year since 2009, athletes - from football stars like Colin Kaepernick to soccer legends like Megan Rapinoe - have posed for the world’s top photographers. It’s considered a huge honor to grace the cover of the magazine. We partnered with ESPN to create a stand-out experience for the tenth anniversary that gave every athlete a chance to shine. <img width="2007" height="1129" width_o="2007" height_o="1129" data-src="https://freight.cargo.site/t/original/i/ec1462d79218c04614f7dc88b8c38b0dfa7899d0ccc08d290c129d2af57105b0/Maggie_Bryan_Portfolio_ESPN_3.jpg" data-mid="48624639" border="0" src="https://freight.cargo.site/w/1000/i/ec1462d79218c04614f7dc88b8c38b0dfa7899d0ccc08d290c129d2af57105b0/Maggie_Bryan_Portfolio_ESPN_3.jpg" /> The previous digital experiences for ESPN’s Body Issues were visually bold and used unique interaction design patterns, such as a horizontally scrolling nav and 360-degree photo viewing. But it performed poorly, particularly on mobile. While the unique site appealed to the design community, actual readers had difficulty discovering the content. These learnings led ESPN to ask us to reimagine the Body Issue with a focus on usability and mobile optimization, without sacrificing design. We also needed to create a seamless, simple system of modules that ESPN could use to spin up the site. At the same time, we wanted every athlete’s page to feel distinct and worthy of their contribution. Beyond improving usability and UI, page views were a key area for improvement. We used this goal to challenge ourselves to think about creative, non-intrusive ways of helping users explore more of the Body issue than in previous years. &nbsp; <img width="1200" height="801" width_o="1200" height_o="801" data-src="https://freight.cargo.site/t/original/i/2511ac218d77e7c3a36ae24c41f2026235a620e481ff8d7dcebe97407669fe1d/Maggie_Bryan_Portfolio_ESPN_1.gif" data-mid="48624526" border="0" src="https://freight.cargo.site/w/1000/i/2511ac218d77e7c3a36ae24c41f2026235a620e481ff8d7dcebe97407669fe1d/Maggie_Bryan_Portfolio_ESPN_1.gif" /> I kicked off the project by leading a nontraditional workshop that combined elements of UX and design. We explored lofty ideas, like visually tying the bodies of the athletes to greek statue, and tiny design details, like how the menu would open and close. This initial push was designed to help us agree on key UX paradigms for the site, like implementing&nbsp; a simple vertical scroll, while elevating our design thinking. <img width="4222" height="5948" width_o="4222" height_o="5948" data-src="https://freight.cargo.site/t/original/i/05a223975af92828bd753a4ae4e22d40c177fc6d64fe1c343e7054e26aa1b1b1/Maggie_Bryan_Portfolio_ESPN_Boards_3.jpg" data-mid="48624554" border="0" src="https://freight.cargo.site/w/1000/i/05a223975af92828bd753a4ae4e22d40c177fc6d64fe1c343e7054e26aa1b1b1/Maggie_Bryan_Portfolio_ESPN_Boards_3.jpg" /> <img width="3963" height="5230" width_o="3963" height_o="5230" data-src="https://freight.cargo.site/t/original/i/5cb3ff9705a81d4c58f19ed3e52e05717a431de88487bd2ab01405b537f56efe/Maggie_Bryan_Portfolio_ESPN_Boards_2.jpg" data-mid="48624553" border="0" src="https://freight.cargo.site/w/1000/i/5cb3ff9705a81d4c58f19ed3e52e05717a431de88487bd2ab01405b537f56efe/Maggie_Bryan_Portfolio_ESPN_Boards_2.jpg" /> <img width="2007" height="1130" width_o="2007" height_o="1130" data-src="https://freight.cargo.site/t/original/i/bcd0bfec5664d0a159037cd837140df2919be287b2df924ac3222e0caa98178e/ESPN_4_Wireframes_MaggieBryan.jpg" data-mid="48703218" border="0" src="https://freight.cargo.site/w/1000/i/bcd0bfec5664d0a159037cd837140df2919be287b2df924ac3222e0caa98178e/ESPN_4_Wireframes_MaggieBryan.jpg" /> After some early prototyping and design explorations, we landed on a mobile-optimized navigation system before jumping into the details of each page.&nbsp; Along with a Designer and, later on, a Creative Director, we went through four rounds of UX and visual design, while also building out a flexible modular system that ensured each athlete’s page would feel like a unique cover story.We crafted a unique fluid-grid system for athlete pages that dynamically adjusts to different image crops, and allowed ESPN to mix videos with images and gifs. The design of the site, which uses ESPN’s signature red, but introduces new fonts and UI, was created to mirror the power of the athlete’s form. <img width="2007" height="1130" width_o="2007" height_o="1130" data-src="https://freight.cargo.site/t/original/i/1ea976df7083fa99e189d63d1081f522bacc81634dc043960a9316f3a07e7138/ESPN_5_FinalDesignsDesktop_MaggieBryan.jpg" data-mid="48703753" border="0" src="https://freight.cargo.site/w/1000/i/1ea976df7083fa99e189d63d1081f522bacc81634dc043960a9316f3a07e7138/ESPN_5_FinalDesignsDesktop_MaggieBryan.jpg" /> The site performed beyond expectations, garnering three million views in the first week of its launch. The site fluidly transitions between pages and has a timed infinite scroll at the bottom of each athlete page, so browsing is seamless. Even though the site featured high-res images and interactive design elements, the fast and performant mobile experience sacrifices nothing from the desktop version. PRESS “‘ESPN The Magazine’ Debuts 10th “The Body Issue”” HYPEBEAST “1st LGBTQ couple featured on cover of ESPN The Magazine’s body issue” ABC NEWS “LGBTQ Athletes Make History in ESPN The Magazine’s 2018 Body Issue” HUMAN RIGHTS CAMPAIGN AWARDSSite of the Day AWWWARDS Site of the Day FWA TEAMESPN CLIENT Stink Studios CREATIVE STUDIO Olivier Gillaizeau CREATIVE DIRECTOR Maggie Bryan SENIOR UX DESIGNER Maxime Rimbert SENIOR DESIGNER Jen Nichols EXECUTIVE PRODUCER Katie Sharrow-Reabe SENIOR PRODUCER Joey Maese DEVELOPER (ESPN) Next: Beyond I Do Index https://maggiebryan.com/Beyond-I-Do Thu, 15 Aug 2019 02:39:41 +0000 Maggie Bryan https://maggiebryan.com/Beyond-I-Do Beyond I Do ADCOUNCIL x CP+B A candidly informative site that highlights ongoing discrimination against LGBTQ+ couples and families through personal stories and an interactive map.&nbsp; Ad Council partnered with CP+B and Stink Studios to create “Beyond I Do”. The campaign highlighted ongoing injustices to LGBTQ+ families in 31 states, even though couples can marry in all 50.Our goal was to create a digital experience for “Beyond I Do” that shifted perception among “the Moveable Middle” - Americans who may not be explicitly pro-LGBTQ+, but believe that all Americans deserve equal treatment under the law.&nbsp; <img width="2006" height="1336" width_o="2006" height_o="1336" data-src="https://freight.cargo.site/t/original/i/d8141d500b57cfbd38e22c2fbeec0379d18c00b27d37dd21363acf41ab550983/Maggie_Bryan_Portfolio_AdCouncil_7.png" data-mid="48625340" border="0" src="https://freight.cargo.site/w/1000/i/d8141d500b57cfbd38e22c2fbeec0379d18c00b27d37dd21363acf41ab550983/Maggie_Bryan_Portfolio_AdCouncil_7.png" /> Creating a persuasive, simple narrative with accurate legal information and attention-grabbing storytelling was the major challenge of this project. We needed to turn dense legal jargon into quick, digestible bites that anybody could understand, and do justice to the stories people shared through our UX and design choices. We had to strike just the right tone in both our UX patterns and visual design. The site couldn’t feel too flashy or too staid. We also needed to balance the desire for heavier functionality, like an interactive map, with the need to create a highly performant experience on mobile. <img width="1867" height="1247" width_o="1867" height_o="1247" data-src="https://freight.cargo.site/t/original/i/df10e439a2246b2355658d9a8cac82346dd2e24b64fadbe584378781ac1593f9/Maggie_Bryan_Portfolio_AdCouncil_1.jpg" data-mid="48625229" border="0" src="https://freight.cargo.site/w/1000/i/df10e439a2246b2355658d9a8cac82346dd2e24b64fadbe584378781ac1593f9/Maggie_Bryan_Portfolio_AdCouncil_1.jpg" /> To kick off, the UX team brainstormed three distinct UX directions, each with a unique strategy to engage the “Moveable Middle” through design and content strategy. We considered, for instance, how our audience would respond to a homepage with just three highlighted stories versus an interactive map of America, and what modules were essential for story pages. We then dove into all the factors that would affect the site’s usability and design in a workshop with our clients, which I led. The workshop included our fully fleshed-out wireframes and explorations of color, typography, statistics, and icons. Since one of our core goals was to simplify complex legal information for average Americans, these visual elements were key to our overall creative strategy. We ultimately landed on a site flow that centered around an interactive map so that users could easily locate their home states, while making articles feel trustworthy and approachable though a clean design with a custom icon system. <img width="2105" height="1146" width_o="2105" height_o="1146" data-src="https://freight.cargo.site/t/original/i/f12a9cdf8d52e24b46d7a90de84da5cdb2a56002cfd5ae5da595954b644a2047/Maggie_Bryan_Portfolio_AdCouncil_6.png" data-mid="48625278" border="0" src="https://freight.cargo.site/w/1000/i/f12a9cdf8d52e24b46d7a90de84da5cdb2a56002cfd5ae5da595954b644a2047/Maggie_Bryan_Portfolio_AdCouncil_6.png" /> <img width="2007" height="1130" width_o="2007" height_o="1130" data-src="https://freight.cargo.site/t/original/i/e1fe7ad2bfe05ae14ac72d1332ce3108a00a60c0498ed42201bf8e3d463d2a42/Maggie_Bryan_Portfolio_AdCouncil_4.jpg" data-mid="48625276" border="0" src="https://freight.cargo.site/w/1000/i/e1fe7ad2bfe05ae14ac72d1332ce3108a00a60c0498ed42201bf8e3d463d2a42/Maggie_Bryan_Portfolio_AdCouncil_4.jpg" /> <img width="3468" height="2443" width_o="3468" height_o="2443" data-src="https://freight.cargo.site/t/original/i/7b895a24e766eeca249b216eb4aa2e60eb66b819a352dde5cc21ca0caf5df92e/Maggie_Bryan_Portfolio_AdCouncil_5.png" data-mid="48625277" border="0" src="https://freight.cargo.site/w/1000/i/7b895a24e766eeca249b216eb4aa2e60eb66b819a352dde5cc21ca0caf5df92e/Maggie_Bryan_Portfolio_AdCouncil_5.png" /> After honing our initial UX directions, we considered the details, like how to integrate tooltips into articles to explain terms like “transgender” and how to expand and contract the full list of discriminatory legislation in every state so that it would inform, but not overwhelm, our target users. Over the next two months, the team then finished and polished our designs, building an immersive, content-rich site that performed well on mobile despite major challenges, like translating an interactive map into a user-friendly list. <img width="2007" height="1130" width_o="2007" height_o="1130" data-src="https://freight.cargo.site/t/original/i/ed66320b21590f26f62e1baf62260559cbdd73fcef9adb79b81319637d88fc9b/Maggie_Bryan_Portfolio_AdCouncil_3.jpg" data-mid="48625257" border="0" src="https://freight.cargo.site/w/1000/i/ed66320b21590f26f62e1baf62260559cbdd73fcef9adb79b81319637d88fc9b/Maggie_Bryan_Portfolio_AdCouncil_3.jpg" />When it launched, the site performed beyond our initial benchmarks and more importantly brought to light these continued injustices in a digestible, actionable way. The “Beyond I Do” campaign garnered national attention and was featured on major news outlets like Good Morning America and ABC News, as well as industry publications like Site Inspire and The Drum. PRESS “'Beyond I Do' campaign reveals why&nbsp; LGBTQ discrimination is still legal” MASHABLE “Ad Council introduces ‘Beyond I Do’ campaign to raise awareness about LGBT discrimination” THE DRUM “Ad Council goes 'Beyond I Do' to fight LGBT discrimination” CAMPAIGN “"Beyond I Do" Campaign Reminds Us That LGBT Discrimination Didn't Stop With Marriage Equality” LOGO NEWS “"Beyond I Do" Campaign Launches to Raise Awareness about the Prevalence of Discrimination Against LGBT People in the United States” PR NEWSWIRE TEAMAdCouncil &amp; Crispin Porter Bogusky CLIENTS Stink Studios DIGITAL AGENCY Gaby Iglesias CREATIVE DIRECTOR Julie Muckensturm DESIGNER Maggie Bryan UX &amp; STRATEGY LEAD Liz Wells UX DESIGNER JP Gary &amp; Arnaud Tanielian TECH LEADS Sylvain Reucherand DEVELOPER Jen Nichols EXECUTIVE PRODUCER Belinda Reichle EXECUTIVE PRODUCER, CONTENT Nickie Kuhn DIGITAL PRODUCER Lauren Saunders SENIOR PRODUCER, CONTENT Next: Stonewall Forever Index https://maggiebryan.com/Info Sun, 11 Aug 2019 13:54:28 +0000 Maggie Bryan https://maggiebryan.com/Info Maggie Bryan is currently open to work.<img width="1913" height="2500" width_o="1913" height_o="2500" data-src="https://freight.cargo.site/t/original/i/33668836f7208c07bb561b86f064bc20d10393dd0b292ef1f4fbd841332684cd/Maggie_Bryan_Portfolio_Headshot.jpg" data-mid="48602358" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/33668836f7208c07bb561b86f064bc20d10393dd0b292ef1f4fbd841332684cd/Maggie_Bryan_Portfolio_Headshot.jpg" /> Maggie is a freelance UX Design Director with 10+ years experience. She is open to working on digital strategy, web, and product work, but particularly enjoys creating boundary-pushing digital experiences. In her previous role at Stink Studios, an indepedent creative agency known for its boundary-pushing digital work, she sat on the US leadership team and oversaw the UX and Digital Design disciplines. In addition to her management responsibilities she was also a hands-on project lead, working from pitch through delivery on a wide variety of work.&nbsp;Maggie’s nontraditional career has crossed the worlds of art, design, and technology. After working in New Media &amp; Performance at MoMA, she managed the Chinatown studio of Terence Koh, a digital media, performance, and installation artist known for his subversive work. She later helped launch industrial design-inspired accessories line WXYZ, best known for creating Beyonce’s crown in the 7/11 music video and Childish Gambino’s headpiece for the ‘Awaken, My Love!’ album cover.After her grandmother went suddenly blind, Maggie discovered human-centered design and was immediately hooked. She found a mentor and grew her skills, eventually landing at Stink Studios in the fall of 2015. Over the next 8 years, Maggie grew Stink’s UX practice and produced award-winning work for clients including Pitchfork, Chobani, The Wall Street Journal, Spotify, Twitter, Facebook, and Google.Her work has been recognized by The Webbys, Awwwards, FWA, and Communication Arts, and has been featured in The New York Times, The Verge, Adweek, Fast Company, and Time, among others. In her free time, she mentors up-and-coming UX designers and serves as an advisor for the Elsewhere artists residency in Greensboro, NC. Index