Graphic Design and Data Visualization Category Entries

Los Angeles Stadium Premier Center

Company Advent

Introduction Date November 1, 2017

Project Website

Why is this project worthy of an award?

The Los Angeles Rams and Legends came to us with a simple request: completely reconceive the idea of a sales center — how it looks, how it feels, how it conveys information to high-dollar clients — and make sure it drives hundreds of millions of dollars in sales. The Los Angeles Stadium and Entertainment District is an unprecedented stadium venture, built for two NFL teams, and surrounded by a massive district of parks, hotels, retail, offices and residential real estate. It required an unprecedented sales center. The two main staples of stadium suite-holder sales are the stadium model and the sample suite. We decided to turn both concepts on their heads. To begin with the model, we honored the pervasive emotional attachment to physical models. Customers love them for the same reason designers, architects and children do — they provide a tangible connection between the imagination and reality. They’re touchable, they’re real … and they’re cool. We avoided the temptation of straying from physical and moving to a pure digital solution, and instead expanded the idea, creating a massive 30x40’ (1,200 square feet), solid white model of the stadium and entire surrounding campus. 12 projectors are aimed at this model, and projection mapping provides a colorful and interactive experience, allowing the sales staff to show differing kinds of gameplay on the field, the location of suites and parking, the effects of seasonal sunlight and traffic and much more. There are even shadows of planes passing overhead on their way to and from LAX. To sell luxury suites, we immediately did away with physical suite models. This seemed crazy at first, as these kind of showroom models have been as much a touchstone of the sports sales game as pinboards for as long suite sales have existed. Instead, we created a virtual suite experience, with a set of screens running 9720x2160 resolution (20,995,200 pixels) and processing more than 2.3 billion pixels per second. While guests are treated to a custom tour of a life-size virtual suite by their sales person, they can also touch physical samples of the luxury materials, keeping a tangible connection. An introductory sizzle video, conceived and written by our staff and produced by the client, greets guests in a video tunnel with 20 screens running at a higher resolution (9600x4320) than IMAX. Throughout, we were careful to focus on clean, design and features that would make the sales staff’s work easy and navigable. Individual information kiosks, a private conference room and rooftop garden closing areas provide ample opportunity for conversation and the unreplaceable human touch.

What else would you like to share about your design? Why is it unique and innovative?

We began the design process with a series of discovery interviews with Los Angeles Rams and Legends administration, coaching staff and players, as well as with Rams superfans. Then, we invited Rams and Legends staff (the Chargers move was not yet finalized) to our offices for a two-day charette. The results of the charette, including an enormous mind map created by our VP of Design, were vital touchstones for both us and the clients throughout the process. It’s important to note that there is no permanent Rams-specific or Chargers-specific branding within the space. We were careful to keep our colors bold but neutral to teams, opting for rich blue and bright white that could suggest team affinity when team helmets and other paraphernalia were used by sales staff. Also, we’re always proud to add that one of our interns, Calvin Mai, designed the sweeping, curved reception desk, which has become an iconic spot in the center. We like to think it speaks to our taste in interns.

Who worked on the project?

Design Director: Drew Bryant Design Lead: Nathan Morgan Designer: Dustin Waltke Digital Experience: John Downie


Lucid Motors

Company Tolleson

Introduction Date January 19, 2017

Project Website https://lucidmotors.com

Why is this project worthy of an award?

Positioned and helped brand and launch an entirely new automotive brand in the US and global markets that combines forward-looking design with groundbreaking technology to establish an entirely new class of vehicle and reimagines luxury mobility. Partnered with engineers and design team to capture and infuse the company’s pioneering ethos. Lucid Motors was launched to great fanfare in the automotive and mainstream press, providing the momentum to announce plans for their $700M manufacturing facility and close in on their Series D funding. Tolleson developed positioning, narrative, identity, visual language, photographic direction, website and launch event within three months.

What else would you like to share about your design? Why is it unique and innovative?

Background When Lucid Motors introduced their first production-ready vehicle, the Lucid Air, it marked a new frontier in automotive engineering and design. It signaled the launch of an entirely new automotive brand. Tolleson worked alongside the Lucid team to establish how to best position them within the automotive industry, laying the groundwork to craft their story, design their visual identity, and ultimately launch their company. Positioning Lucid was embarking on something extraordinary: an uncompromising luxury sedan built to elevate and personalize the experience of every passenger. Three key ideas anchor Lucid Motors’ positioning statement and the foundation from which the brand would take shape. 1) Those Not Bound by Convention are Free to Define Their Own Experience Without legacy architecture, Lucid was able to work from a clean-slate and completely reimagine what a car could be. That freedom allowed Lucid to focus on how engineering and design could deliver the most personalized driving experience for their customers. 2)¬¬ A Car By and For Those Who Move the World Forward Across the industry there has always been an imbalance between automakers and their customers. But for Lucid, their target customers are their peers. They draw inspiration from one another. They celebrate the entrepreneur’s journey and embody California’s pioneering spirit. 3) Leading a New Era of Luxury Mobility Lucid was embarking on a new type of driving experience that would transcend what customers had come to expect from the luxury category. In the midst of big changes in transportation, accelerated by the growth in ride-sharing and autonomous technologies, Lucid was setting out to create a new form of mobility, designed for all the ways people get around. Design Lucid’s overarching design philosophy is rooted in their “California DNA” and leverages their home state’s optimism and pioneering spirit. These tenets played a role in the idea underpinning the entire launch. The logo design was a nod to the car itself: elongated, modern, sleek, and timeless. But the logo also had to integrate seamlessly with the car. In much the same way that auto designers shape the car’s body in clay, the logo was carefully shaped for maximum optical proportion and balance. Four complementary fonts were selected to strike the appropriate balance between the technical nature of Lucid’s designs and the intuitive experience the vehicle delivers. The color palette was developed in parallel with Lucid’s approach to color, material, and finishes, drawing inspiration from the light throughout California at various times of day. The 24-hour color wheel, punctuated by the color gradations of the twilight hours, was distilled into a set of core brand colors. Using a range of macro and landscape imagery of California’s oceans, mountains, deserts, and urban environments, the photography’s look and feel plays to both the intimacy of the driving experience and the promise of a company unconfined by convention. Launch At an event in Fremont, California, the Lucid Air was unveiled to the world, accompanied by a brand video and the concurrent launch of the Lucid Motors website.

Who worked on the project?

Lucid team: Derek Jenkins, VP Of Design Doreen Allen, Director of Sales Zak Edson, Director of Marketing Nathan Barbour, Senior Brand Manager Evangeline Lyu, Marketing Associate Doreen Allen, Director of Sales Tolleson team: Steve Tolleson, Principal, Executive Creative Director Jesse Goldberg, Strategist & Writer Jamie Calderon, Creative Director Molly Skonieczny, Creative Director Marta Taketa, Senior Account Manager Briana Tarantino, Senior Account Manager Kelly Ongpin, Senior Account Manager Bill Bowers, Interactive Creative Director Craig Clark, Associate Creative Director Satomi Nagata, Designer / Illustrator Stacy Wang, Senior Interactive Designer Rene Rosso, Director of Production

View the project video: https://youtu.be/1bTTn2WAsrM


McDonald's Global Design System

Company Method, Inc.

Introduction Date March 1, 2017

Project Website http://www.method.com/work/mcdonalds

Why is this project worthy of an award?

For years, the McDonald’s brand had a fragmented design language across and within markets, digital touch points, and brand expressions. We developed a Global Digital Design System for the express purpose of ensuring consistency and high fidelity (experientially, visually, tonally, interactively) across all of the touch points. Rather than a static collection of standards, the Global Digital Design System is as much a part of the process of building software as it is designing customer-facing UI. The Design System helps: – Information Overload – Increased Customer trust – Customer Omni Channel Expectations – Business Efficiency Arch Sans: Bridging the Brand For an iconic brand, there was a complete lack of consistency in the fonts used across legacy digital channels in all markets. We commissioned a global font that covers Arabic, Latin, Cyrillic, and Greek. This font communicates personality, unifies the brand through a cohesive expression, and works hard in a large variety of contexts across: legibility, readability, performance, language, aesthetic. Iconography: Expressing the Brand We developed an icon set that serves as a common vernacular, bridging gaps in language, communication, and comprehension. They highlight navigation, tasks, and notifications. They appear when something needs attention, to celebrate moments, and generally to add visual richness.

What else would you like to share about your design? Why is it unique and innovative?

Systematic design is well established in product and design led organizations. For an organization that has been predominantly driven by marketing and IT this was a seismic evolution in thinking about product and design. Systematic Design: Elevating the Brand The system guides how interactions occur, underpinned by all elements, components, templates, and pages, which together, make up the experience. In terms of implementation, they allow us to work nimbly and intelligently across design sprints. While form factors and mediums invariably vary, our design system flexes to adapt to customer needs, technologies, and services. Toolkit: Scaling the system The McDonald’s Global Digital Toolkit is the source of truth for design application, interaction patterns, visual language, voice, and tone. It’s the resource for McDonald’s leadership, associated stakeholders, local markets, product owners, designers, and developers.

Who worked on the project?

Steve Wake, Executive Creative Director Reema Pinto, Executive Director Client Services Taylor Cole, Lead Designer Adam Augustyn, Lead Designer Dave Toro, Lead Designer Matt Helland, Lead Copywriter Misa Rodriguez, Senior Designer

View the project video:


Mia

Company NewDealDesign

Introduction Date October 1, 2017

Project Website http://www.miacontacts.com

Why is this project worthy of an award?

MIA is a guide to all the people you know – an app designed for a deeper understanding and navigation of your social and professional community through holistic, continuously evolving insights into the people in your contact base. MIA is your intelligent network. Did you know that Joe H.'s wife is an expert rock climber? Need a new VP of Marketing? Simon O., Annie's Dad who you met at your son's swim class, is looking for a new job. Born out of an algorithm and a notion for an app, MIA organizes contacts automatically, tagging people according to skills, schools, companies, organizations, and location while updating the entire network in real-time as you tag your own contacts with personal insights. Through initial conversations on Astronomy and pop culture’s obsession with the ‘Star Power’ of one’s network, the concept for MIA’s place in the world loosely emerged. Working closely with the founder, we developed a completely new idea – including a brand, website, app, positioning and launch strategy – transforming the technology into a living ecosystem – one that grows and evolves with you. We named it mia. We had two challenges, the first of which is simpler- How do we design a new contacts app? An App that is enticing and different for all the good reasons? The second challenge is complex - We amass thousands of connections, connections traditionally bifurcated into personal and professional and distributed across a variety of digital mediums. These relationships are underutilized, lost in our contacts apps or overlooked because the relevance of their presence on a particular platform doesn't resonate with the use case of that platform. Additionally, while there is seemingly endless information at our fingertips and no shortage of thoughtful reviews and recommendations made public, their applicability relies heavily on their reflection of our individual tastes, preferences, and expectations. Our ability to leverage the power of our relationships is more significant when we allow our personal and professional circles to overlap, uncovering unique, tailored value from sources we might otherwise disregard. Still, people remain sensitive to what they share and with whom. The degree to which these circles overlap varies considerably between individuals. To address these concerns and acknowledging the presence of the many failed, emerging, and established social networks. We intended Mia to function more like a utility. By focusing explicitly on unification, organization, and personalization of contacts, Mia favors efficiency over features that detract from the overall vision, achieving the ambitious task of visualizing the entirety of your complex, ever-changing network, at a glance. Each of the design touch points presents a clear and consistent brand for a young company looking to tell a memorable story. Crafting a digital-first interactive experience enabled the teams to be clearly aligned on the vision and mission of the brand and product, as well as the aspirations surrounding the product experience.

What else would you like to share about your design? Why is it unique and innovative?

It was important that we represent MIA’s brand as alive and changing - as opposed to a single mark. So, we designed MIA as a space of interacting spheres and bubbles – fluid and dynamic, evolving over time. From one point comes different points that can all be interconnected. These grow and morph, move in and out of orbit and connect between people according to various attractions and interests. We designed MIA as a space with interacting spheres and bubbles that grow and change, move in and out of orbit and connect between people according to various attraction and interests. We designed MIA contacts to cut through the noise of other networking apps, rather than add to it. To this end, the MIA focuses on the simple utility of identifying and making use of categorical information about your peers and their relations. Rather than pushing people to interact with each other or dropping them into a free-for-all RSS feed, we kept the interface simple, intuitive, functional, and clear. The data visualization - in the form of colorful bubbles - is fluid, playful, and customizable while always serving the use case at hand by sorting groups by size and relationships by relevance. Besides the visual interface, the data itself is well-organized and ready to use from day one, with over four billion tags pre-populated in the app. We also added a crowdsourcing element to enrich the database and allow everyone to build on the existing array of use cases and tailor it more specifically to the needs and interests of their own network - and do so together. Flow, prominent colors and round shapes of the network bubbles presents the data in a warm and inviting way, creating a unique graphical interface which breaks through the limitations of traditional vertical or grid-based mobile layouts. Users can also move the data bubbles by touching and dragging them, adding a playful tactile element to an otherwise bare bones interface. In doing so MIA reinforces the fact that these are personal connections unique to each person. MIA takes an immense amount of data, populates and organizes it right away when you enter the app, and the interface is entirely based on the search function, which is often secondary. From your first moments on the platform, MIA learns what you need in a fraction of the time it takes you to scour Facebook, LinkedIn, or Yelp. For those who want to curate their database further, we added a fun and simple tagging game, enriching their network of information while keeping the sorting legwork in the back-end, revealing this new data instantaneously. While extremely simple, the process is not trivialized, but guided by the MIA network to ensure that the user's best interests are always represented and they have all the necessary information presented in an organized, intuitive layout. Since the app's launch in October 2017, MIA has raised $3M in funding.

Who worked on the project?

Gadi Amit, President & Principal Designer; Jon Patterson, Brand Manager, NewDealDesign; Timmy Chau, Experience Design Lead, NewDealDesign; Adam Cote, Strategy Design Manager, NewDealDesign; Jen Phannguyen, Experience Design Manager, NewDealDesign;

View the project video: https://vimeo.com/270212583


Microsoft Learning Tools

Company Microsoft

Introduction Date January 19, 2016

Project Website https://www.onenote.com/learningtools

Why is this project worthy of an award?

Created to help children with dyslexia and dysgraphia learn to read, Learning Tools taps into Microsoft’s toolbox of technology with an emphasis on inclusive design, including: Bing’s speech recognition, simultaneous audio text playback, and natural language processing. These technologies make fundamental skills like reading and writing more accessible to all students. Students increase reading ability and comprehension through visual aid, including highlighted parts of speech (verbs, nouns and adjectives), and words broken into syllables – a text segmentation that has been shown to improve phones and spelling skills. There are many features to Learning Tools, each of which provides a unique benefit to the user. • Enhanced dictation: While the user speaks, the tool writes words and sentences correctly spelled and punctuated. • Focus mode: Reduces line length. This sustains attention and improves reading speed. Research published in 2013 by Schneps showed a 27 percent increase in reading speed when using short line lengths. • Immersive reading: Recognizes text from images and files. When used with the read aloud feature, the words being spoken are highlighted, allowing the user to follow along. This improves comprehension and sustains attention. • Font spacing: Readers can increase text spacing between letters, words, and lines of text, improving reading speed. Research published in 2012 by Zorzi showed 50 percent fewer reading errors when people with dyslexia increased spacing. • Syllabification: Separating words into syllables can increase reading comprehension by 10 percent, according to research by Yu-Chi Tai in a study supported by Microsoft – which is especially helpful to English language learners. • Comprehension mode: Highlights dependent clauses within sentences. Comprehension can improve by 30 percent just by adding line breaks between clauses according to research by Graf & Torrey (1966). • Parts of speech: Part of Comprehension mode, this feature shows nouns, verbs and adjectives in different colors. Learning Tools is designed to help all students with reading and writing, as evidenced by the recent 3rd party study from RTI International, Leveling the Playing Field with Microsoft Learning Tools. This study found Learning Tools: • Improved writing stemming from students being able hear their own writing read aloud back to them, helping them identify errors. • Improved learning equity for struggling readers, by enabling access to learning materials in other content areas like math, science and social studies.

What else would you like to share about your design? Why is it unique and innovative?

The origin of Learning Tools is a story of innovation. At Microsoft’s annual Hackathon event in 2015, a team of developers spanning the breadth of the company created Learning Tools as an extension for OneNote. Out of 3,300 other projects, and 13,000 participants, Learning Tools was chosen as the overall winner. Now, Learning Tools’ features are incorporated into many Microsoft products including Word, Outlook, Edge and more. Learning Tools is also unique as it is free and non-stigmatizing. Teachers face growing class sizes and a range of abilities and needs, and Learning Tools helps ensure all kids meet their goals without an additional cost and while remaining in class with their peers. Learning Tools and the Immersive Reader are seeing over 6,000,000 monthly active users, across Word, OneNote, Outlook, Edge, and Office Lens and support in over 30 languages.

Who worked on the project?

Mike Tholfsen, Principal Product Manager, Education and OneNote