2017 ESPN Body Issue
Company Ueno
Introduction Date July 5, 2017
Project Website http://www.espn.com/espn/feature/story/_/page/body/espn-body-issue-2017
Why is this project worthy of an award?
Our challenge: How to take content traditionally made for print and desktop, and rethink it for a mobile-first world? In the nine years since ESPN launched the Body Issue, its annual publication showcasing prestige photography of up-and-coming athletes, the world has gradually moved from print to digital. And with mobile counting for over 70% of traffic in 2016, it was clear to ESPN that the 2017 edition should be a mobile-first experience. Ueno was responsible for the design of the digital edition of the Body Issue (theme: “Every body has a story”), as well as branding for both digital and print. Big picture, small screen: A key design element was creating an intuitive and non-invasive UI, allowing the photography to take center stage. We challenged ourselves to make an experience that would solve the limitation of displaying big imagery on small screens. This led us away from the obvious solutions and forced us to experiment more. Embracing the limitations of a smaller screen, the design lets users tilt and move their phones to get the big picture. Variations on a logomark: In addition to the web design, we designed a logomark for the Body Issue to be used in print and digital, with ten variations depending on context. The logomark references the tension and dynamism of athletes bodies in motion, and tips the hat to ESPN’s own logo. An elevating experience: We used technology to elevate the experience of print, improve on it, and make it more intriguing wherever possible. The Body Issue is full of spectacular athlete photos, and the mobile-first design allows for a lot of playful interactions with them. ESPN case study: https://ueno.co/work/espn
What else would you like to share about your design? Why is it unique and innovative?
ESPN was adamant that this edition be a mobile-first experience: Emphasis had gradually moved from print to digital and approximately 70% of traffic to the 2016 Body Issue came from mobile. Mobile-first design begs for creative user interactions. Our objective was to elevate the print experience with an intuitive, non-invasive design that enabled the photographs to take center stage. Interaction was key, enabling users to get the whole picture by tilting and moving their phones – never noticing the limitations of viewing the photography on a smaller screen.
Who worked on the project?
Steffen Christiansen, Creative Director - Ueno Marco Coppeto, Designer - Ueno Alison Overholt, Editor-in-chief, ESPN the Magazine Chin Wang, Creative Director, ESPN Tim Rasmussen, Photo Director, ESPN Karen Frank, Photo Director, ESPN the Magazine Heather Donahue, Art Director, ESPN Joey Maese, Sr. Developer, ESPN
View the project video:
2019 Acura RDX Next-Generation Autonomotive User Interface
Company Lextant
Introduction Date March 28, 2018
Project Website https://www.acura.com/future-vehicles/acura-rdx
Why is this project worthy of an award?
Drivers are becoming more and more distracted by increasing feature complexity in their vehicles. By focusing on actual user needs and user-centered design principles, this next-generation automotive interface makes the overall driving experience safer, less distracting, and more enjoyable. From the start, Honda and Lextant were focused on designing a system based on the needs of the user. Every element of the interface was based on the iterative process of design and evaluative user testing (thousands of hours of research in total). While most infotainment systems use flashy graphics and extraneous animation, this interface was intentionally kept simple and minimal. A flatter, grid-based visual layout helps maintain high CPU performance while presenting information in a way that is quick and easy to visually scan. A structured, well-defined typographic hierarchy allows for strong consistency throughout the applications—the user always knows what is and isn't interactive. Animation and sounds are used to support interaction and performance, helping the driver navigate and understand the system even during quick glances. A robust iconography system was developed to supplement the interface and aid the user in quickly understanding available actions. Based on Google Material Design and ISO, the icons use a strict set of rudimentary shapes and line-weights to create an icon library that remains consistent and readable, while reducing search time. An effective combination of dashboard gauges and a head-up display allow the user to quickly understand important information and actions, while being able to focus on what's most important—the driving experience.
What else would you like to share about your design? Why is it unique and innovative?
The all-new Acura True Touchpad Interface (with an Android-based operating system) is projected onto a dual-zone, 10.2-inch full-HD screen. The display is mounted high atop the center console close to the driver's natural line of sight, which allows the driver to accomplish tasks quickly and easily while reducing the risk of distraction. While traditional touchscreens are easy to use, they need to be close enough to the driver for direct interaction, which tends to be outside of the natural line of sight. By placing an input device at the natural resting spot of the hand the driver can easily interact with the console-mounted display. Unlike a computer touchpad, the True Touchpad Interface has a precise, one-to-one mapping with the corresponding action on the center display (e.g., a tap on the top left corner of the touchpad highlights the top left of the center display). As the world's first application of absolute positioning in the driving environment, Honda is transforming the touchpad experience, allowing the driver to more easily and intuitively navigate the system. The dual-zone screen and touchpad also improve on traditional systems. The primary zone houses most main interactions, including full-featured versions of each application. The secondary zone is a series of vertically-scrolling "cards" that give the user quick information, such as upcoming navigation turns or an active phone call. A quick tap of the secondary zone on the touchpad switches the two zones, allowing for deeper interaction with whichever application is selected. The effective application of a user-centered design approach provides more than a competitive advantage for Acura’s interface design. A collaborative team engaged in a fast and nimble iterative process of design and testing provided Acura with a beautiful, sophisticated, and safety-focused interface that not only feels fresh but is also flexible enough to be expanded and refined for future models. A unique and intuitive icon design strategy sets a new industry benchmark. Detailed design specification documents, complete with an icon creation style guide and coding-design translation, were created to ensure future design iterations and new feature development maintained the user-focused design intent.
Who worked on the project?
Lextant project leads: Steve Simula - UX Design Sr. Director, Collin Simula - UX Design Director, Katie Mowery - Human Centered Design Sr. Director, Bobby Nguyen - Human Centered Design Director Honda project leads: Steven Feit - Sr. Manager / Chief Engineer, Ross Miller - Principal Engineer, Mike Tsay - Manager / Principal Designer
3M™ Intelligent Control Inhaler
Why is this project worthy of an award?
Simply put, this device has the potential to improve the lives of people with asthma and COPD. According to one study, up to 94% of patients do not use their inhalers correctly and don’t even realize it. It’s difficult to know if you inhaled the right dose or not, often leaving patients with inadequate treatment and exacerbated health complications. In the 60 years since the first metered dose inhaler (“MDI”) was invented, there’s never been a way to address that problem in one device, until now. Sensing technology is built into the 3M™ Intelligent Control Inhaler, currently in development and not available for commercial sale, that can detect whether a patient inhaled long enough to get the full dose of the drug. Designed to link to patients’ digital devices, the companion app, also in development, will be able to provide additional information, including the opportunity for patients to review their usage, set reminders, and get feedback and training on proper inhalation technique. The app is even being designed to have the ability to transmit adherence data (i.e., how often a patient takes their medication in accordance with their prescription), so healthcare providers may better understand individual patient progress and better direct patient care. The benefits of these kinds of technology have the possibility of not only improving patient outcomes, they may also help to address healthcare costs. Studies have proven that preventive care can save money. The type of real patient data that these kinds of technologies may generate, aim to put actionable analysis into the hands of the people that need it the most with the overall goal to help increase the effectiveness and efficiency of each patient’s treatment.
What else would you like to share about your design? Why is it unique and innovative?
This product was designed from the start with input from patients and their physicians who care for them.
Who worked on the project?
Sam Van Alstyne, Marketing. Louise Righton, Marketing, Richard Brewer, Engineer, Steve Wick, R&D, Richard Moody, R&D. Lesley Hoe, Regulatory, Stewart Griffiths, Project Management
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
Acorns 2.0
Why is this project worthy of an award?
Acorns is the leading micro investing app in the U.S. Its easy-to-use, mobile-first technology depends on innovative design to make complex financial decisions small. Our user interface makes it effortless to invest, save, spend smarter and grow wealth in the background of life. Acorns automatically rounds up transactions on a user’s bank account to the nearest dollar, then invests that spare change, building wealth naturally, pennies at a time. We believe that from Acorns mighty oaks do grow. The past year has amplified our always disruptive trajectory as we pushed to further open the doors of wealth to everyone. We rolled out a PayPal product integration, made our first acquisition, launched the first IRA designed for the up-and-coming, announced two rounds of financing, developed a financial wellness educational curriculum on Udemy, added more partners to our Found Money program and reported record growth. The design that spirited Acorns 2015 win in the mobile category of Fast Company’s Innovation by Design Awards got a refresh last year. In July, we released Acorns 2.0, introducing a new look and feel to the user experience, while maintaining the elegant design our customers know and love. The new Action Feed feature allows customers a holistic snapshot of their investment accounts, a view of important actions and content as part of the home screen. Acorns 2.0 uses data science to serve investors increasingly relevant and useful content that’s customized to their personal goals and interests. The new homescreen is temporally designed in a past, present, potential format clearly displaying previous account activity, current balances, and projected account value. We also introduced a Round-Up multiplier, which allows customers to invest larger increments through Round-Ups and save money even faster.
What else would you like to share about your design? Why is it unique and innovative?
At Acorns, we constantly think about how to improve, simplify and enhance the customer experience. The biggest changes to the app are the new Past/Present/Potential home screen structure and the addition of the Action Feed where our investors get a holistic snapshot of their Acorns account, plus notifications about new app features like Acorns Later, Found Money offers, and the latest money news and advice from our publication, Grow. The new Action Feed on the Present Screen is a dynamic feed of cards with content aimed at helping customers get the most out of Acorns. They now have the ability to manage account features from the Action Feed and immediately get a holistic snapshot of their activity including withdrawals, Round-Ups, Recurring investments and more. Acorns 2.0 serves up personalized Found Money notifications and recommendations based on investor’s purchase history. And the redesigned feed allows investors to preview the latest financial wellness articles from our digital magazine, Grow. By consolidating all of the various features offered through Acorns into one clean feed, we make account information easily accessible to all of our customers. The new Past Screen in 2.0 consolidates the previous History Screen and Round-Ups ledger. This new screen allows customers to view all of their Acorns activity in one simple format - including Recurring Investments, Dividends, Found Money, Referral rewards and withdrawals. Acorns customers can also now see their bank transfer activity that shows all money moving between Acorns and their checking account. The new Potential screen allows customers to visualize their projected account value based on their current portfolio and account settings. Customers can also see how changing their automatic investment features, like Recurring Investments and Round-Ups, can affect the projected growth of their account. They can also set or update the increments of the Recurring Investment and turn on Round-Ups from this screen. We separated Invest into its own screen so we could consolidate all of the investment options into a single screen, making it easier for our customers to invest. Our popular features (Round-Ups, Recurring and One-Time Investments) are all located on one simple screen. Another feature update includes our Round-Up Multiplier that makes Round-Ups more powerful by allowing customers to multiply the spare change from transactions by 2x, 3x or 10x to reach their goal even faster. Our biggest feature update was the introduction of Later into Acorns 2.0, marking our first tax-advantaged product offering. Later is the simplest option for investors to open and fund a retirement account. The thoughtfully designed interface again leans into the Acorns ethos of making complex financial decisions small by re-envisioning individual retirements accounts. The investor is seamlessly guided through the enrollment process to the appropriate retirement account and portfolio for them based on factors such as age and income. With as little as five dollars as an initial contribution, users can open accounts in minutes, easily set the cadence of recurring contributions, and have the peace of mind that their portfolio will rebalance and grow over time.
Who worked on the project?
Acorns
View the project video: http://bit.ly/AcornsLaterFastCo, http://bit.ly/AcornsFastCo
