Aesop.com
Why is this project worthy of an award?
Luxury E-Commerce Goes Global: How to Bridge Physical and Digital Experiences Over the past 25 years, Aesop has built a cult following. The Melbourne-based luxury beauty brand has amassed devotees around the globe who love the skincare line’s refined plant-based products, refined packaging and sensory store experiences. Having long shunned traditional marketing tactics —Aesop invests in little to no advertising— they turned to digital agency Work & Co. The ask? Help grow the brand by redesigning a global e-commerce site that stays true to the brand’s minimal, luxury aesthetic. Simultaneously, the new platform had to be a content-rich experience encouraging shoppers to browse, discover, and purchase. The Challenge During the 10-month project, Work & Co’s designers and engineers continually asked themselves how they could eschew the typical e-commerce sites --riddled with product detail pages that look more like Times Square versus a calm, enjoyable shopping experience. Our approach every single day of the project was to simplify: we were hyper-focused on paring designs down to only a few necessary components. Another focus was longevity. The best e-commerce sites perform as well a year out from launch as they do on Day 1. Designing something beautiful was a given. But we wanted to go a step further: create a site that Aesop’s internal team could iterate on and add content to easily over time. Our answer was a component-based design that enables Aesop’s internal team to make continual tweaks and updates efficiently. A New Navigation Paradigm A chief consideration in creating the new Aesop.com was bridging the physical and digital experience for shoppers. It had to feel like an extension of what customers expect from the Aesop brand in person --a team of highly consultative store associates who are skin care experts helping each shopper define a custom regimen. Unlike many e-commerce sites today, the new Aesop.com gives shoppers a high-touch and tailored experience online. You get seasonal and location-specific recommendations, and can watch videos explaining how to use cleansers and moisturizers. It was important to be able to serve Aesop’s many loyalists as well as newcomers who are continually discovering the brand. So we built a first-of-its-kind “shoppable navigation”. The underlying framework offers a simple, fluid shopping experience that lets you add to your cart right from the nav or dig deeper to discover more product information. Now users are met with a site that flexes to allow them to spend as much or as little time as they need to find and purchase the products they’re looking for. The Results We designed and delivered front-end development for the new global e-commerce platform. In May 2017, the site rolled out in the United States, followed by Australia, Europe, Canada, and Asia. Within months, the US store saw a 15% lift in conversion and a 50% incremental increase in product detail to purchase. Our relationship with Aesop has been ongoing, and we have continued to optimize the site in the months post launch.
What else would you like to share about your design? Why is it unique and innovative?
Extending a Carefully-Architected Brand Every Aesop store is conceived and designed for its unique location. Aesop hires a local architect and sources local materials so that each store feels tailored to its environment. We channeled this incredible focus by applying that same ethos for the e-commerce experience. We knew that translating that unique feeling of shopping in a store would be key, so we were hypersensitive to keeping the essence of the brand intact in digital, and preserving the knowledge transfer that occurs in-stores when we brought the retail experience online. Research In-Store to Create the Online Store To create the online experience, we spent a lot of time studying the brand’s behavior offline. We learned that Aesop’s in-store experts are stewards of the products and teachers too. They help each customer to create your custom regimen suited for specific skin types. Similarly, we wanted Aesop.com to offer tailored experiences too, such as thoughtful product curation, seasonal and location-specific recommendations, and anticipating users’ needs for fast replenishment. We organized skincare not by the products themselves but by the regimen, in the order you’d use them. Clicking on “Cleanse,” “Exfoliate,” “Tone” and “Moisture” can also take users beyond specific products to access how-to videos. Lastly we brought the local aspect to the site by making it contextually relevant for users, with product recommendations are specific geographies, and seasonal climates. With the redesigned www.aesop.com we were able to challenge the paradigm of a normal e-commerce platform and create something which hadn’t been done, but was so visually simple. With the shoppable navigation we invented an underlying framework that offers a simple, fluid shopping experience. Using Restraint as a Design Principle Aesop is a special brand for a lot of reasons, not the least of which is their incredibly focused understanding of who they are and what’s so appealing about their products to customers. Their culture, and their team’s focus, led to our design approach being minimal and restrained. As we built the product detail pages, we questioned what features were on-brand. With checkout we pushed against the notion that any modern checkout flow should offer an option of saving products to a wishlist. Instead of implementing the expected we paired the site down to what truly belonged.
Who worked on the project?
Jon Jackson - Partner, Design Tiago Luchini - Partner, Technology Dever Thomas - Design Director Laura Pence Ambrose - Group Design Director Michael Evans - Director of Product Management Fernando Andrade - Technology Director Virginie Delannoy - Associate Design Director Andrew McBride, JP Lages - Design Lead Juliana Gaiba, Brian Nguyen, Sang Kim - Senior Designer Elizabeth Gaynor, Julie Basque - Senior Product Manager Wesley de Souza, Marko Niciforovic, Josh Rounsville, Matt Sacks, Jay Moretti - Senior Developers Glauber Sampaio, Marco Vincit - Designer Owen Herterich, Elizabeth Morrison, Gaston Figueroa - Developer Aniket Sharma, Denise Miceli - Senior QA Mila Rudnouskaya, Olesia Velychko - QA analyst
View the project video:
An enterprise platform to connect athletes with fans
Company Postlight
Introduction Date March 22, 2018
Project Website https://www.theplayerstribune.com/en-us
Why is this project worthy of an award?
The Players Tribune, the VC-backed publishing startup founded by Derek Jeter, transforms how athletes normally connect with newsmakers and their fans. Instead of talking about last night's game, athletes instead tell intimate, powerful, first-person stories. The company hired Postlight to update the front end design of the platform and also create a unique backend platform that tracks athletes’ brand equity and influence. The company's strong focus on data and technology resulted in a very ambitions product roadmap. Postlight was brought in as a partner to bootstrap their newly formed team and build a strong, data-oriented foundation for their tech platform. Our overarching goal was to build a unified platform to manage international content, track athlete relationships, and integrate smoothly with a host of different analytic data providers. The enterprise data app we built (named Central) measures and analyzes all data related to athlete and their digital brand equity. It’s an all-in-one hub that includes biographies, agent relationships, endorsement deals, social media presence, contributions and publications, and more. It’s a one-of-kind equity tracking platform, which helps editors manage athlete relationships and drive editorial strategy. The data also supports athletes in becoming better ambassadors of their own brands, as well as in better understanding their relationships with fans.
What else would you like to share about your design? Why is it unique and innovative?
TPT’s legacy WordPress website was outdated, and couldn’t be integrated effectively with the broader platform that they wanted to build. Editors were dealing with a stand-alone legacy site that was slow, inflexible, and overloaded with defunct features. Not only did a new site need to be launched quickly, but data generated from the website had to be fully integrated with data and analytics from the broader tech platform. Because of our tight schedule, we didn’t have time to build a custom CMS to power the site from scratch. Instead, we chose to build a React.js frontend with a custom WordPress backend. GraphQL allowed us to easily retrieve and leverage the data we needed from anywhere across the platform. With the React.js frontend, we greatly improved the the overall reading experience by fully integrating multimedia video and audio, decreasing page load times, and optimization large images. To plan for international expansion, we established tools and processes for cross-posting translated content across global editions. All this helped make the site experience more seamless and pleasurable, removing barriers between the reader and the athlete. With the CMS, editors were given flexible tools to play with storytelling in more interesting ways. We also set the groundwork for increased programmatic personalization and discoverability for users, and built out the analytics so editors could make smarter choices about content and promotion.
Who worked on the project?
Chris LoSacco -- Managing Partner Ian Hall -- Senior Product Manager Will Denton -- Product Designer Matthew Famularo -- Product Designer Gina Trapani -- Director of Engineering Shawn Kelly -- Senior Engineer Alexi Akl -- Senior Engineer Adam Pash -- Director of Engineering Nick Beattie -- Senior Engineer
View the project video:
AutoCAD Web
Why is this project worthy of an award?
The tech world is entering a new era of web applications, where the lines between web, desktop, and mobile devices are blurring. We designed a first-of-its-kind application that took AutoCAD, a 35-year-old desktop product (with code older than the Internet itself), and re-fit it for the web, overcoming the habits and notions of an exceptionally acclimated customer base to build a product that satisfies the expectations and instincts of both the experienced user and the relative novice. The Design Challenge Developing AutoCAD for the browser, we wanted to use the opportunity to reexamine our design choices in the AutoCAD experience. A multi-year technical undertaking was recently completed to create a common core code base that offers new opportunities to create cohesive experiences and require new partnerships across international web, mobile and desktop teams. While maintaining the power, precision, and familiarity of the AutoCAD desktop application, we aimed to create a streamlined and easy-to-learn experience—balancing the experience needs and expectations of both existing and future customers. Our Design Approach We anchored this goal in 3 design principles, phrased as customer desires: 1. "I want the real deal" 2. "It's an extension of my mind" 3. "I want to learn the right way" As with all great design, we wanted to create a research program that would support our convictions. We needed to make some decisions about what workflows and interactions to focus on. How do we take a tool that is used by thousands of industries, in hundreds of different roles, for thousands of different purposes and create a minimal loveable product that we can grow in an agile and meaningful way for our customers? We did robust user research over the course of a year to develop customer insights, design principles and a Journey Map using the “Jobs to Be Done” research framework. This helped us focus on the minimal loveable workflows required to have a successful launch. What We Achieved We have found a way to neatly package the power of desktop AutoCAD into curated experiences that enable our legacy customers to maintain their productivity, but also engage the new and potential AutoCAD users in a simple user interface. Design Impact Without a clearly articulated, focused and sustained design approach to guide the huge technical effort of a 35-year-old desktop application, we ensured that a minimal loveable product, driven by customer needs, was delivered to the market. The application is the real deal, that helps new and existing users use tools the right way and it is as intuitive as the muscle memory our customers expect. On this foundational design, we are confident we’ve taken the first step in a broad new horizon for AutoCAD in a browser.
What else would you like to share about your design? Why is it unique and innovative?
Not only are we being recognized by web technology experts for our technical accomplishments of porting at C++ codebase to the Web using WebAssembly (Google), but customers are also raving about the new experiences. We improved some key tools such as Offset, Selection and Trim in a way that was intuitive, more efficient and easier to learn. In fact, AutoCAD experts even asked us to incorporate these improvements in the desktop. This is no small feat. Customer quotes: "That (Trim tool) is quite intuitive...I like that " "That (Offset tool) was easier than expected" "Overall the design is very clean. It's very intuitive...It's not over-complicated. And discovering the different features was relatively easy. So I do like it a lot. It feels like a very condensed, light version of AutoCAD" We are also currently working on patent submissions for design patterns. Some UI components (like managing lists and layers) need to be reconsidered from the ground up when being translated from a desktop environment to a web environment.
Who worked on the project?
Dania El Hassan, Product Manager Vince Bohner, UX Manager Lorne Trudeau, UX Architect Scott Price, UX Lead Cameron Westland, Software Architect Albert Szilvasky, Software Architect Martin Alonso, Engineering Lead Rebecca Pariser, Visual Design
View the project video: https://help.autodesk.com/videos/NyZnVxZTE6cso1ANpEf913Jhcuh7FsHN/video.webm
Foundation Medicine
Company Upstatement
Introduction Date September 1, 2017
Project Website http://foundationmedicine.com/
Why is this project worthy of an award?
Foundation Medicine develops groundbreaking genomic tests for cancer patients that help connect them to emerging therapies and drug trials. We're proud of the ways we found to translate their story to the web, making it accessible to everyone from patients to oncologists to researchers.
What else would you like to share about your design? Why is it unique and innovative?
So many biotech companies segment their content by audience (patients, doctors, partners). We took a different approach, organizing content in a way that told Foundation's story organically and letting the UI and structure layer in complexity where appropriate. The result is what the web does best: draw readers in and let them drive the experience.
Who worked on the project?
Tito Bottitta - Creative Director Chris Plummer - Lead Engineer Mitchell Gates - Engineer Emily Theis - Producer Keri O'Brian - Designer James Muspratt - Designer
View the project video:
Hippo
Why is this project worthy of an award?
To say the home insurance sector needs renovating would be an understatement. Nearly three-fourths of all homeowners miscalculate the level of coverage needed for their homes. Most think they’re covered for happenings that aren’t actually in their policies. And, it’s commonplace to overinvest time and money purchasing the product, due to an outmode structure involving commissioned agents and various hidden fees. Enter Hippo. The three-year-old home insurance startup is on a mission to be the first company that lets people buy their home insurance simply online. Founder and CEO Assaf Wand hired Work & Co in 2016 to build the first insurance research and buying platform that truly respects users -- the start of a total UX transformation for a $90 billion industry. Our approach: We began by conducting field work with an array of user groups, to understand how they discovered, selected and visited home insurance websites. Using an iterative design approach, we then worked closely with Hippo’s team to trade tedious forms that are a large lift to complete for a snappier, more conversational and transparent approach that rapidly helps sort through different plans based on geography, type of home, and other factors. Inspired by the uniqueness of everyone’s homes, the site design is clean while still maintaining a whimsical personality and not feeling too sterile. Another key consideration was helping to ensure that the experience undid the complex reputation that purchasing insurance can have. Speed was paramount to the strategy as well. We knew that there was an opportunity to make the process far smoother than the competition. While other home insurers famously ask customers to spend 15 minutes getting an insurance quote, Hippo reduced the full process to just 60 seconds. And, while most insurance policies are sold over the phone, Hippo customers can complete the purchase online in just a few more steps. THE RESULTS: Since launching in May 2017, Hippo has exceeded all expectations. The site went live in California and a nationwide expansion is underway. By year’s end, 60% of the country is expected to have access to Hippo. And with its updated digital experience, Hippo is continuing to secure millions in funding from Silicon Valley. Forbes calls it a “fresh approach to home insurance” and “an experience that is transformed at every level.” Fast Company also recognized it as one of the 14 most important interfaces of 2017.
What else would you like to share about your design? Why is it unique and innovative?
Friendly and human is always a customer preference. Our work with Hippo aims to make home insurance more than something you tolerate. Home insurance can just be as friendly as Harry’s has become. At the same time, behind that friendly UI is some serious tech and data firepower. Hippo has collected a range of data --from when your to your square footage to the material the roof is made with-- to autopopulate throughout the signup flow. Housing data accuracy means that make the quotes are more accurate, and this helps with competitive pricing -- sometimes less by nearly 25%. Hippo isn’t done reinventing the housing market, they’re continuing to add to their product offerings to help people manage their home needs with the help of technology. Using satellite data, Hippo can keep tabs on your house and even send you a message if you need to make a repair on the roof or the deck. Winter coming? It can remind you you need to buy salt for the driveway or nudge you to clean your gutters ahead of Spring. By offering helpful tools, Hippo incentivizes homeowners to keep their home in good shape and thus keep costs down. If you go a year without submitting any claims Hippo may offer to pay for a new water-leak monitor. The tool will be keep owners on top of caring for their home, save them money from costly repairs and reduce some of the risk Hippo takes when ensuring you.
Who worked on the project?
Mohan Ramaswamy - Partner, Strategy Thadeu Morgado - Partner, Design Laura Pence Ambrose - Group Design Director Ian Lyckland - Product Management Lead Gustavo Balestraci - Design Lead Juliana Gaiba, Joris Rigerl, Felipe Victor, Lucas Teixeira - Senior Designer Rafael Lucas - Designer
View the project video: