2017 Brands in Review
Company Morning Consult
Introduction Date December 15, 2017
Project Website https://intel.morningconsult.com/featured/2017/12/13/brands-review
Why is this project worthy of an award?
2017 Brands in Review transcends disciplines to reveal exclusive data on what people really think about culture-defining brands through cutting-edge survey research technology and elegant, interactive data visualization. Conducting nearly 1 million surveys with U.S. adults on over 1,000 brands, the project allows users to choose a brand and learn about how it performs across key metrics: favorability, buzz, and trust. The microsite interface dynamically displays data from Morning Consult's brand-tracking software product, Brand Intelligence, and showcases the company's in-house design and development expertise. Survey research as an industry has historically been complex, arduous, and time-consuming, but 2017 Brands in Review illustrates how technology is changing that game, too.
What else would you like to share about your design? Why is it unique and innovative?
Like survey research itself, too much data can be confusing, overwhelming, and inaccessible. 2017 Brands in Review leverages Morning Consult’s software platform, Brand Intelligence, and its data to create visual narratives for every individual brand it tracks. The project combats the typical complexity of data visualization, going the opposite direction to make sure that the data is "King" and that understanding the narrative comes first rather than just designing confusing visuals. The clean, modern design presents the data in a way that is accessible, easy to understand, and visually striking. Morning Consult’s in-house design and development team took advantage of the medium (web) to craft engaging and colorful animations that bring each data point to life. The typography is super modern, really clean, simple, yet still engaging. The mixture of a modern serif and geometric sans serif to bring clear hierarchy to the typography helps the audience understand the nuances of the data. The data visualizations take different forms showing favorability over time in an animated, miniature story showing the growth of the trend line; a calendar of simple color blocks that expand to reveal the buzziest month for that brand, and a sleek, animated bar chart to display trust. While each data point looks different, the whole microsite feels cohesive because of its high-contrast color palette that lended itself well to a super sleek vibe, where age-old survey research meets modern technology.
Who worked on the project?
Lillian Ling, Creative Director Clare Bennett, Director of Marketing Alex Dulin, Chief Technology Officer Libby Isenstein, Managing Director of Creative Jeff Cartwright, Managing Director of Content Matt Popovich, Front-End Developer
View the project video:
3M Oral Care Portal - Custom Orthodontics
Company 3M
Introduction Date October 30, 2018
Project Website
Why is this project worthy of an award?
The 3M Oral Care Portal is a cloud-based software platform that enables clinicians to plan, order and manage custom orthodontic treatments. The initial launch supports treatments using 3M Clarity Aligners, a new custom aesthetic appliance. The portal provides doctors with a comprehensive set of user-friendly tools to support the entire treatment process. Doctors can upload digital patient records and submit orders using a simple and intuitive 5-step prescription process. Doctors can then view 3D simulations of expected tooth movement and provide comments or make direct adjustments to the final tooth position using 3D controls. The portal also features integrated messaging functionality that enables clear and efficient communication between clinicians and 3M’s orthodontic technicians and clinician support specialists. In designing this platform, we faced a number of complex challenges relating to information architecture and user interaction. The portal needed to support seamless and coordinated workflows among a variety of users such as orthodontists, dental assistants, treatment coordinators, 3M technicians and 3M support specialists. In total, the portal supports 13 different user roles. In designing each feature, we had to be cognizant of the various goals and responsibilities of our users, as well as the way that users would need to communicate and collaborate with one another. Another challenge was the design of the portal’s 3D viewer interface. In planning custom treatments, orthodontists require comprehensive tools for viewing, analyzing, and manipulating the position of teeth and other aspects of treatment. At the same time, doctors and staff want the flexibility of a cloud-based system, so that they can manage cases from a variety of settings - whether it is in the office with a desktop and large monitor or working from home or on the go with a small notebook computer. This presented a unique interaction design challenge: how to incorporate advanced 3D editing tools within a browser-based app of limited screen space without overwhelming the user or cluttering the interface.
What else would you like to share about your design? Why is it unique and innovative?
The 3M Oral Care portal provides clinicians with unprecedented control over treatment details within a browser-based application. Doctors can view 3D simulations of the tooth movement over the course of treatment and overlay clinical analyses such as Bolton analysis, arch length, and occlusal mapping. Doctors can use 3D controls to make precise adjustments to the final positioning of teeth, interproximal reduction (IPR), and the size and placement of attachments. The portal is also unparalleled in its support for collaboration and communication in managing treatment. Each staff member in a practice can have their own login credentials with permissions based on their role. The portal features messaging tools that are seamlessly integrated and optimized for efficient communication. Doctors and staff can receive email notifications to follow the progress orders and receive timely alerts action is needed. When reviewing treatment plans, doctors can send comments to 3M technicians that include visual reference points on the 3D model. Finally, the portal features a unique clinician support dashboard and workflow that enables 3M support staff to provide efficient and responsive service. Simplicity is what we strived for when designing this product; we wanted to create a tool that is minimal, easy-to-use and delightfully helpful. One aspect of this was presenting a clean, modern look-and-feel to provide a more focused user interface. Having a focused interface streamlines the ordering process and helps the user minimize time and effort when accomplishing tasks. Other design features like grouping related elements together and setting focus on most-used elements for quick visual reference contribute to an overall intuitive tool layout. Additionally, details like our model orientation tool display icons that resemble the orientation for faster cognitive relational understanding. Through design consistency and following best practices and patterns in user interface design, we establish a foundation for a more lovable experience. Furthermore, we conducted extensive usability testing with clinicians and support teams to co-design a delightful product around actual user needs. Our web platform allows 3M to enter the clear aligner market and position itself as a leader in custom orthodontics. Additional values like scanner integrations, free digital record storage and ability to dropship aligner and retainer reorders provide even more brand equity. Through our user-centered design process, focusing on 3M employees as users, we help to provide a more efficient manufacturing and satisfying customer support process. This is achieved through improving the user’s workflow and providing a great experience. Our plan is to provide digital practitioners choice and flexibility to deliver patient centered, science-based treatment. We will achieve this by offering doctors a better clinical experience through shorter treatment time by helping to plan and visualize treatment outcomes and track progress mid-treatment; doctors are also empowered with more choice and flexibility through combinations of treatments/appliances within a single platform. As a result, the full suite of solutions will improve patient's oral health and aesthetics by allowing people to live healthier, happier lives.
Who worked on the project?
Poeuth Pann - Lead Interaction Designer & David Roedl - Lead UX Designer, Information Architecture
View the project video: https://drive.google.com/file/d/1RXeFvx54Rx-TrkoAU9r-KZDWkd-lNrjF/view?usp=sharing
Adobe Spark – Transforming Ideas Into Stunning Visual Stories
Why is this project worthy of an award?
Since its launch in May 2016, Adobe Spark has empowered anyone with an idea to effortlessly create graphics, video stories and web pages in a matter of minutes—without any design expertise. In the world of digital media, visual content is king. Tweets with images receive 1.5 times more retweets than those without, while Facebook posts with images see 2.3 times more engagement*. Marketers who use video grow revenue 49% faster than non-video users **. Petition-hosting website Change.org has found that petitions with visual elements are seven times more likely to succeed***. And studies have found that people will remember 65 percent of information they hear paired with a visual after three days, versus just ten percent without****. But visual content can also be intimidating and expensive to create, especially for individuals and small businesses without design and video experience, and nonprofit organizations or educational institutions without professional designers on staff. Adobe Spark—a series of apps, as well as an integrated web solution, all with a highly approachable user interface—eliminates many of the barriers to entry associated with traditional content creation. From business owners to influencers, content creators and students, anyone who has an iPhone, iPad or computer with an internet connection can use it, free and with no design or video editing skills necessary. Spark Post is a fast and easy way to create stunning graphics. Users can leverage professionally-designed templates and make them their own with text and images, or they can create their own posts from scratch. Spark Video lets users combine video clips, photos, icons, soundtracks and text to create eye-catching videos. Making a video is as simple as adding content, fine-tuning with text and audio options, then saving to a device or posting directly to social channels. Spark Page puts a unique twist on anything you want to communicate, letting users create engaging and responsive magazine-style web stories that automatically adapt to any device, from tablets to phones and computers. All three apps are available on iOS mobile devices. For users who prefer to work on a larger screen, full functionality is also available in the web-based version of Adobe Spark. Additionally, a series of premium features on mobile and web are available to paid subscribers (and are included free with Adobe Creative Cloud subscriptions) to further personalize content to align with a user’s brand, such as colors, fonts, themes and custom templates. While great for individuals, these premium features are also ideal for small businesses—empowering organizations of all sizes to create custom content marketing campaigns without the need for a dedicated in-house graphic designer or video editor. To get a visual sense for what Adobe Spark can do, examples of user-created content can be found here: https://spark.adobe.com/gallery/ *Source: https://blog.bufferapp.com/the-power-of-twitters-new-expanded-images-and-how-to-make-the-most-of-it and http://buzzsumo.com/blog/how-to-massively-boost-your-blog-traffic-with-these-5-awesome-image-stats/ ** Source: https://www.hubspot.com/marketing-statistics and http://aberdeen.com/research/10922/10922-RR-Video-Marketing-Difference.aspx/content.aspx ***Source: https://www.huffingtonpost.com/2014/05/21/changeorg-petition_n_5360209.html ****Source: http://www.brainrules.net/vision
What else would you like to share about your design? Why is it unique and innovative?
Adobe Spark has a highly approachable UI, allowing users with limited design experience to create professional-grade graphics, videos and web stories quickly and easily. Web-based users are guided through content creation with large, directional fonts and visuals, and they have the option to “learn more” about features throughout the creative process. A bar located at the top of the tool gives users the option to preview projects as needed or download and share their projects at any point. This bar is also the go-to place for modifying project themes, layouts, palettes, music, backgrounds and text. Though each mobile app differs slightly in design and features, they all showcase a user-friendly interface aimed at making the creative process as fast and easy as possible. Users can browse through a plethora of featured templates and inspiration, click to create a new project or view past projects. For example, users can scroll through a style wheel for a myriad of suggestions for fonts, text layouts and colors. And those hoping to include product images or fun design elements can easily do so by importing their own images or leveraging the “search free photos” option. Users in need of additional help can access tutorials and tips by clicking the settings button in the top left corner of each app. Since Adobe Spark is connected to a user’s Adobe ID (or other method of logging in), Adobe Spark projects automatically sync between iOS apps and the web solution, offering flexibility to seamlessly transition between devices and locations as needed. This feature ensures that users are never limited by the devices at hand, and they can access their projects whenever inspiration strikes. Adobe Spark also helps users manage their branded content and projects—including logos, colors, fonts, themes and templates—in one organized, convenient place with a Creative Cloud subscription. Subscribing users gain a host of premium features, including the option to remove the Spark logo from their content and replace it with users’ own branding, and access to live phone and chat support if they have questions or need assistance.
Who worked on the project?
The Adobe Spark Team
View the project video: https://www.youtube.com/watch?v=ZWEVOghjkaw&feature=youtu.be
Adobe Summit: event identity + experiences
Why is this project worthy of an award?
2018 Adobe Summit is a celebration of Experience Makers. "Maker" by definition is a person who create; form; shape. Based on the theme, the event identity should be equally expressive in both digital and physical form. This year the identity consists of two components: digital modular pattern (vector) + physical installation (photographs). You might ask why create a physically installation then photograph it when one can achieve nearly identical result from digital renderings? A bespoke installation is unique. Through the makers’ hands they’ve each added a layer of depth which is one of a kind, hard to replicate with digital renderings. Much like the range of skills required of modern day Experience Makers, the final artwork is blend of a variety of disciplines: 2D & 3D, digital & physical, software skills & traditional crafts, plus a lot of love. The installation was shipped from UK to Vegas for the event. Attendees were able to see, feel and interact with the identity. See how it is made: https://www.behance.net/gallery/62278163/Adobe-Summit-2018-Identity
What else would you like to share about your design? Why is it unique and innovative?
The identity consists of two components: physical installation (photographs) + digital grid pattern (vector). The system is flexible for various needs to produce the event experience. - Making of Summit identity: https://create.adobe.com/2018/3/24/wall_together_now_th.html - Main stage stinger: https://www.dropbox.com/s/k7wxumgvqcyk7go/Summit2018-Opener.mp4?dl=0 - Main LED event entrance animation: https://adobe.ly/2qmtg8a
Who worked on the project?
Steve Gustavson, Executive Creative Director, Adobe Angela Fisher, Creative Director, Design, Adobe Morgan McManus, Associate Art Director, Adobe Ashley Vong, Associate Art Director, Adobe Nicole Williams, Executive Creative Producer, Adobe Joe Buchwald, Creative Producer, Adobe Deb Fant, Sr. Studio Manager, Adobe Kristine Jensen, Content & Web Producer, Adobe DBLG LDN Almost Everything Pix Productions
View the project video: https://vimeo.com/250443822
Airbnb Cereal
Why is this project worthy of an award?
At Airbnb, our brand and work is extremely typographic, and people experience our brand across various mediums at a global scale—including website, apps, Airbnbmag, and metro stop advertisements. As a company that’s strongly rooted in both online and offline experiences, we saw a clear opportunity to create a distinct typeface that can carry the weight of both—to leap off the screen to a magazine. The challenge is, that marketing and UI often have very different purposes and context for the type. Where brand and marketing aims to set strong connection with crafted designs—presented in controlled a environment—UI can be very much the opposite. With UI, the content, screen sizes, and qualities are dynamic—text size, copy length, format, and device resolution all vary. The UI, first and foremost, has to be functional to support complex or critical moment—when the community needs to read, understand, or take action based on the information provided. Together with Dalton Maag, we believe we were able to create an amazing typeface that both lends itself to a great UI font, while being an ownable brand look. Weights like Book, Medium, and Bold are designed with UI in mind, whereas Extra Bold and Black have bit more character. We consider the typeface very easy to read, even in small sizes, while the large size for brand still expresses our brand’s friendliness. Unifying the brand, marketing, and UI also eliminates potential typographic mismatches, and allows us to design more effectively across all platforms. At times, typography can be very subtle. A slight angle or curve on a individual letter can be easy to dismiss but when all those details and words come together, they create an interesting whole. To tell a story and showcase these features, we designed a site (airbnb.design/cereal). The site has a chapter for each of the main features—character, function, and scale—with applied usage and interactive experiments. The typeface is now live on all of our product platforms, and will be featured in our marketing in the future. Now that have our own typeface, we are considering it more like software—improving and evolving over time, across our brand and product.
What else would you like to share about your design? Why is it unique and innovative?
In large organizations, you often have tens or hundreds of designers who are supporting multiple platforms (iOS, android, web: mac, windows, linux) and launching ad campaigns around the world. When it comes to typefaces, there really isn't any universal system fonts that are available on all platforms. If you use different fonts on each platform the design will be slightly different, and trying to manage a cross-platform design system becomes challenging. Every time, a designer has to pick the right font, and potentially submit 2-3 designs with different fonts to make sure they all look how they want them to. And each time a user or anyone in the company looks at the design on their device, it’ll appear slightly different. If the marketing team uses different type for campaigns, it will look slightly off when they include product shots. For the site design and development, we used some of the modern approaches—like basing font sizes on the screen size available and CSS grids to make sure the site scales well to small and large screens (which is one of the key features of Cereal itself). We ended up creating the site in a story format since we felt that it was important for people to follow the story in a linear manner. This also gave us the full screen to design the experiments with. For the animations, we used our open source library—Lottie—that allows us to design expressive animations, and implement them to the site in a performant way.
Who worked on the project?
Alex Schleifer (VP of Design), James Goode (Managing Director), Tony Hogqvist (Executive Creative Director), Karri Saarinen (Design Lead), Benjamin Wilkins (Design Technology Lead), Derek Chan (Creative Lead), Lucas Smith (Design Tools Manager), Salih Abdul-Karim (Design Lead), Magen McAfee (Editorial Producer), Takahiro Kawaguchi (Experience Design Manager), Sola Biu (Creative Strategy Manager), Ian Rowe (Sound Designer), Jack Hone (Experience Designer), David Hong (Experience Design Lead), Cecil Odom (Design Program Manager), Robyn Weatherby (Project Manager), Anastassia Babanskaia (Project Manager), Michael Smith (Writer) Dalton Maag: Dalton Maag Tom Foley (Creative Director), Fernando Caro (Designer), Bruno Mello (Designer), Marlon Brand (Project Manager)
View the project video: https://www.youtube.com/watch?v=KOfxE-pDLW4
