The shopper journey has significantly changed in the last decade since the international-fashion retailer, ALDO, last overhauled its ecommerce website. Ecommerce is the retail industry’s fastest growing storefront
, and forging a cohesive digital experience in this nonlinear “consumer decision journey” is one of the biggest challenges retailers face.
ALDO saw an opportunity to not only create a new ecommerce presence, but to elevate its brand into a style destination—one that shoppers seek for inspiration and return to for fashionable footwear and accessories again and again. With over 50% of shoppers purchasing on mobile, ALDO’s new site had to be beautiful and premium, regardless of screen size or device.
ALDO partnered with Work & Co on the design and development of a new ecommerce experience that was built to inspire, grow market share online, and be accessible to anyone on any device.
“Over 50% of online shoppers purchase on mobile.”
From the start, ALDO’s GM of Omnichannel Experience, Grégoire Baret, emphasized their desire “to prove an accessible website can be transactional, responsive, and beautiful.” He states: “You don’t need to compromise. It was important to create a universal design, for all people and devices, that is as useful as it is beautiful.”
To create such an ambitious ecommerce experience, Work & Co asks clients to actively collaborate with us—we need to function as one integrated team. Together, our team embraced 4 notable design and development approaches, which led to the success of the new aldoshoes.com.
1. Design—and develop—the site’s most complex and impactful pages first
It’s tempting to want to start with the homepage of a site, but it’s important to allocate ample time towards designing and developing the most feature-heavy pages that will also garner the highest visibility from end-users.
For ALDO, this was the product detail page, the product landing grid system, and the single-page checkout flow. These pages and flows have the most stake in converting users down the path-to-purchase, and as a result, are essential to the business.
“Redesign feature-heavy pages before you tackle the homepage.”
With one-third of site traffic going directly to a product detail page, it not only must display product information, but it will also serve as the entry point into the brand experience and the consumer shopping journey. This page was critical to nail, so we allocated the most time to ensure we got it right.
Above: The final version of the product detail page at the large breakpoint.
By concepting, prototyping, and validating the more complex pages first, we were able to begin developing them earlier. We strategically started building the checkout flow first due to the foreseeable technical complexities of many third-party integrations, including: multiple payment gateways, interactive address validation, and CRM software with existing user recognition technology—to name a few. This approach allowed us to allocate an adequate amount of time to the pages that were both visually involved and rich in functionality.
Above: A user going through the 1-page checkout flow.
2. Create a collaborative design and tech philosophy that’s portable and reusable
Sometimes, it makes sense to ditch the conventional device-specific breakpoints and instead allow the content to dictate the breakpoints. We chose this approach for ALDO in order to maintain high visual and functional integrity of the site at every screen size.
This methodology led us to define one major breakpoint system and one minor breakpoint system, which allowed the content on each page to be displayed at its best.
“Try letting content dictate the breakpoints.”
For instance, the majority of the site adheres to a 3-breakpoint grid, but it’s rare to have a one-size-fits-all solution for sites of ALDO’s scale. Given the product detail page’s unique visual layout and high volume of content, it requires 4 breakpoints to ensure the designs respond gracefully as a browser’s screen size scales in width.
Above: The product landing page grids adhering to the 3-breakpoint system.
Above: The product detail page adhering to the 4-breakpoint system.
This bespoke approach was coupled with a collaborative design and technological philosophy, which brought disciplines—design, motion, technology—together to collectively contribute to the product design’s portability and reusability.
We created a component-based design system made up of reusable UI elements and interaction patterns, allowing the team to repurpose components, modules, views, and even entire frameworks. Thinking this way enabled us to give each page freshness and build consistency across the experience all while maximizing development efficiency.
From the technical architecture to the design components, we built a system that could scale and expand as we grew.
–Grégoire Baret, GM Omnichannel Experience at ALDO Group
Above: The carousel control UI elements and interaction behavior is repurposed from the navigation menu’s featured stories carousel to the product detail page’s image gallery carousel.
3. Tailor your prototypes to specific audiences and objectives
Prototypes are one of the main ways we share ideas and how we evolve those ideas over time. The tools we use depend upon the objective of each prototype, and the fidelity we’re aiming to achieve. Sometimes it makes sense to scaffold a quick clickable walkthrough in InVision. Other times we might create prototypes in HTML, React Native, or iOS to get as close to the end experience as possible for usability testing. Each prototype we created during the ALDO engagement served a purpose that gave us new insights—whether that was internal or from customers.
“InVision was the easiest way to update each design iteration in one location.”
We shared iterative design work as prototypes to the ALDO team instead of spending time pulling together more formal presentation decks. We would link to InVision prototypes to simulate a variety of user journeys, allowing the ALDO team to experience the designs on their devices and more confidently validate scale and design impact in situ.
Additionally, it was the best way for our core stakeholders to share concepts internally without requiring additional context to collect consolidated feedback. For such a large website, InVision became the easiest way to update each design iteration in one location—where the team knew the most recent designs could be referenced.
Above: Final designs by section of the site stored within InVision prototypes.
Equally important, to define and validate our custom breakpoints, we created HTML prototypes for a few core pages to verify content would respond fluidly across multiple breakpoints. It’s easy to create designs that look perfect in Photoshop or Sketch at each breakpoint, and assume the design will hold up responsively. Instead of finding out static designs don’t work later on in development, we were able to feed the lessons learned back into the design work early and, ultimately, the final product.
Above: Low-fidelity HTML prototype utilized to validate page breakpoints and that content would respond fluidly as the browser scaled.
To validate brand perception and effectiveness of ALDO’s redesigned path-to-purchase, we conducted several rounds of concept validation and usability testing with clickable HTML prototypes at the largest and smallest breakpoints. The prototype took users from a general product search in Google to a product detail page, and concluded after successfully placing an order via the one-page checkout.
As Grégoire points out, “the DNA of both ALDO and Work & Co is to involve the customer and end-user in the process. We aren’t creating something in a vacuum and praying for it to work. From the concept creation process to a very tactical mission at the end, we want to make sure we do user tests at every point.” There’s no better way to capture qualitative feedback than by conducting user tests with functional prototypes.
4. Create living documentation to foster collaboration and up-to-date information
We chose Work & Co because they could create a beautiful and ownable system. We needed a way to co-create and allow our team to own that moving forward. The tools, prototypes, documentation are important ways to make it faster for us to jump in.
–Grégoire Baret, GM of Omnichannel Experience, ALDO Group
After the initial roll-out, ALDO’s team will be responsible for keeping the site alive. With this in mind, handing over a coherent design system and codebase for their team to easily maintain and build upon was crucial.
Dropbox Paper was used to capture functional annotations.
Accessibility was an important consideration for ALDO’s new website. In the US, 1 in 5 adults live with a disability. We wanted to ensure this site could be used by everyone—while also debunking the notion that accessible sites can’t be beautiful.
Related: The ultimate guide to web content accessibility
The main internet standards organizations, WAI and W3C, have set guidelines for accessible website design and development. Our goal was to adhere to the AODA and WCAG 2.0 Level AA web accessibility standards. While many aspects of accessibility criteria are clearly outlined, there’s still a lot of grey area that we had to research and collectively define to be AA accessible on ALDO’s site.
To manage this, we created an AA Accessibility Decisions document that defined the best practices we were going to follow, examples of those implementations, and any additional enhancements we employed.
Above: Dropbox Paper was used to capture AA Accessibility Decisions document.
For users reliant on screen readers and keyboard navigation, we wanted to provide additional context for where they were within the experience.
For instance, the default screen reader text for a carousel control indicator would only read, “button” on focus of each image carousel indicator within a series of 5 images. We decided to modify this language to read “Slide 1 of 5, button” to make it more clear to the user this is visual content within a series of 5. See recording of screen reader behavior in the video below.
To maintain consistency, this usability behavior is implemented for all carousel controls across the website. The AA Accessibility Decisions document housed all modifications and decisions like this, which ensured global consistency and mitigated risk of confusion during QA testing.
Better for customers—and for business
The new aldoshoes.com was progressively rolled out to select markets starting March 2017. The extra time spent designing and developing the product detail page and checkout experience is paying back already; ALDO has seen an increase in both volume and engagement for shoppers converting from product detail pages.
Now available in 10 markets across North America and Europe, mobile conversions have increased up to 20%, and ALDO is on track to see a 20% increase in revenue this year.
These applied approaches have become an ongoing way of designing and developing for ALDO. And it’s only the beginning of a continuous improvement for the company that centers around rapid prototyping and an iterative, customer-centric process.
Want to share your recent redesign here on the InVision Blog? Give us a shout on Twitter: @InVisionApp.
You’ll love these posts, too
by Sarah Layng
Sarah is a Senior Product Manager at Work & Co, where she leads the development of digital products for clients including ALDO, Credit Suisse, and Acorns. A natural problem solver, Sarah owns, shapes, and refines premier digital products for clients. She brings a strong understanding of strategic business requirements, user needs, and technical foresight to every project. Follow Work & Co on Twitter.
