Gap Inc. closes the gap between digital design and development


The average adult spends more than half of their days interacting with digital media, according to a 2018 report from global data analytics firm Nielsen.

Given the pervasiveness of social media and ecommerce, just about every retailer is working hard to create a compelling, accessible online presence. Their goal: websites and apps that engage consumers, offer easy access to information, efficiently handle ecommerce transactions and work across multiple types of devices.

As if that weren’t daunting enough, retailers that wish to maintain relevance must continually update their online presence. At the same time, they don’t want to risk their online operations.

Several years ago, Gap Inc., the company behind Athleta, Banana Republic, Gap, Hill City, Intermix and Old Navy, was assessing the effectiveness of its process for designing online and mobile sites and apps. Greg Schuler, user experience design head, and his colleagues were checking whether the company’s designers could more effectively use prototyping to communicate and validate a design, learn more about what works for the customer and identify ways in which a potential site or app could be elevated.

The team at Gap considered several tools. Some had steep learning curves, especially for employees who lacked a design background. Looking for “better, easier tools,” Schuler says it turned to InVision App, a virtual company that offers a digital product design platform.

InVision’s tools integrate closely with the other design tools Schuler and the team of about 300 designers use. The built-in communication capabilities allow users to easily communicate within the system as they’re working on a design or prototype. “There can be an open dialogue between the developer and the designer,” Schuler says.


The tools available through InVision help teams take ideas and quickly prototype, place them on devices and test them, says Stephen Gates, head of design transformation with InVision. The testing can be conducted with their team, within the broader company or with customers, as well as across multiple types of screens.

Moreover, companies using InVision don’t have to invest huge amounts of time and money in designing and developing digital products they later discover don’t work as well as they’d hoped. “We would almost describe it as a ‘build-to-think’ mentality,” Gates says. Teams gain fast feedback, so they can refine as they go.

At Gap, Schuler and his colleagues designed a new checkout process. Their goal was to make it more intuitive — especially on mobile devices, which account for a growing segment of transactions.

The team uses what’s known as the “design-thinking” process for creative problem solving. An early step in the process is to gather and review data, looking for trends and trying to understand the messages it presents. From this, Schuler and his colleagues can create assumptions and hypotheses they can test through prototyping.

“What we’re trying to do, at that point, is ask, ‘All right. Is this idea helping to prove our hypothesis?’” he says. Of course, that means getting it in front of customers.

With InVision, companies can quickly validate — or learn they need to tweak — their designs and ideas, make necessary changes and keep moving. As a result, they can get designs to market significantly faster, Gates says.

The team at Gap deployed InVision tools to create a prototype of the checkout process. They tested it, tweaked it and tested again, all in one-week cycles. For instance, on a Tuesday, they’d put the prototype in front of a group of customers who’d agreed to provide input. Based on their actions, the team would revise the design and then get it back in front of its customers on Friday.

The prototype Gap shared with its customers acted as it would if they were making purchases but wasn’t hooked up to any back-end systems, so no orders were processed.

Through these iterations, Gap gained a tremendous understanding of the ways in which its customers complete transactions. Some people would start the checkout process, only to be interrupted by their kids or other activities and return to it later.

“It’s not like they’re in a lab,” Schuler says. Through this close-to-real-life testing, Gap was able to determine if the design would help customers “get done the things they need to get done,” he says.

Moreover, Gap didn’t have to rely on customers simply telling them what they liked or didn’t about a design. That’s key, as customers can’t always articulate what they like or don’t.

With each iteration, Schuler and his team strengthened the design, so by the time they handed it off to the developers — whose time is always limited —
they could be confident it was a solid system. “We’re de-risking the business,” Schuler says.

Through this process, they were able to remove up to 50 percent of the clicks or taps needed to check out.


InVision offers a suite of design tools. Freehand is an “online white board” that allows groups to brainstorm and contribute to a virtual discussion even when members are distributed around the globe. It’s a way to “rethink and reinvent brainstorming,” Gates says. Board, another InVision tool, provides a “collaborative space” that allows team members to tell stories, post photos and share files, from the beginning of ideas to a finished product.

A new InVision tool, Studio, lets companies animate and bring to life their websites and app designs within a single application; Gates says, historically, this process has required multiple applications. Studio can help retailers move past static designs and create responsive designs that can, for instance, change based on the screen size.

The Design System Manager tool responds to the growing popularity of design systems that standardize the pieces, such as an address field or button, that will be part of a website or an app. That’s key when the people working on the project are scattered in different locations.

Even once the design team at Gap has tested a prototype with a subset of customers, it will conduct A/B tests across a broader swath of customers. Half the population will work with the new design while half continues with the older version. Schuler will run this test for six to eight weeks, gaining an even better understanding of how the changed process is working. In this case, they found that the improved checkout prompted more customers to complete their purchase. “We were successful,” he says.

The InVision tools are intuitive enough that Gap didn’t have to conduct formal training, Schuler says. That’s critical, as the easier it is for employees to pick up a new tool, the more likely they are to use it.

Indeed, while InVision is a design tool, only 20 percent of those on the platform identify themselves as a designer, Gates says. “Design is sort of being redefined inside a lot of different companies, to be much more inclusive.” InVision helps make design accessible while allowing the design team to maintain control.

Gap team members use InVision both for prototyping and to communicate design intent, allowing a seamless, efficient transition from design to development, Schuler says. As a result, InVision has helped Gap shorten its design and development processes by about 30 percent.

Karen Kroll is a business writer based in Minnetonka, Minn.


Comments are closed.