Driving the Creative Process Through Prototypes

by Katie Boyd

In late 2013, I was hired as one of the first prototypers in Nike Engineering. Prior to 2013, prototyping had been common in many companies focused on innovating in the tech space, but the concept was pretty new to me as well as to Nike as a whole. Applying my frontend development skills to rapid prototyping, I saw the value it could add to communicating ideas, testing with users, and delivering a viable product.

For the last two years, we have been building a team of UI developers focused exclusively on prototyping web experiences. We started with one prototyper and are now a team of seven. Prototyping has become an essential part of our discovery process when rolling out new experiences and has helped to shape new experiences such as Nike SNKRS for web, the redesigned product detail page, and Nike.com checkout.

Here I will explain the importance of prototyping in our software development workflow, our approach to building prototypes, and what we have gained from working this way. Reading this, I hope you will take away some techniques that you can apply to your own work as well as some tools you can use to help.

What is a Prototype?

The word “prototype” can mean a lot of different things, but in my work, this is the definition that feels most accurate:

A prototype is an experiment built to test a design hypothesis.

When we design, we are a making assumptions about how users will engage with our interface. A prototype allows us to prove or disprove the validity of our theory by observing it in the hands of consumers. At this stage, we are collecting qualitative data, which is very helpful in driving decisions about how to build UI. Sometimes we compare multiple solutions to a UI problem, and user testing doesn’t provide us with a clear winner. In this situation, we employ multivariate testing to provide quantitative data on which solution performs best.

Nike and Rapid Prototyping

Prototyping facilitates collaboration between design, product, and engineering teams to deliver the best experience for our users. Prior to incorporating prototypes into our workflow, feedback on interactivity was unavailable until the development phase of a project, at which point changes were costly. Early prototypes allow us to test our assumptions with users and gather feedback while a design is evolving. By obsessively iterating on usability, we can be sure that the apps we deliver will allow consumers to connect with Nike in a meaningful, and premium, way.

One example of the power of prototyping came from our implementation of pinch-to-zoom in 2014. Communicating about the relationship between image scaling and gesture using mockups was extremely difficult; the problem simply did not lend itself well to verbal description. Building a prototype provided an effective way to review and iterate on the look and feel, which translated seamlessly into the finished product.

Why we prototype

While reviewing layouts is an important part of the design process, we have found that they were not really serving us once an idea was ready to share beyond the design team. When presenting a Sketch document or PDF to engineers, we were spending time trying to communicate and understand the interactivity and feel of proposed designs — time that would be better spent discussing implementation strategy. Introducing high-fidelity prototypes to the engineering process meant we could spend less time figuring out what we were trying to build and more time figuring out how to build it. It also gave us the ability to validate with users and observe how they interacted with an interface before building it in production.

Serving Stakeholders

A prototype can serve a variety of needs for different stakeholders. Our prototypes are used by design, product, and engineering at the beginning of a project’s life cycle.

In many cases the same prototype can serve all of these needs simultaneously — an efficiency that is priceless in the development process. The attention to detail required to build a high-fidelity prototype is necessary for creative reviews and to receive useful feedback from UX testing. It also paints a clear picture of the desired look and feel for the developers, who eventually construct the app. A prototype can be both a tool to help determine what to build and a blueprint to follow during the execution phase.

How we prototype

Prototyping tools

There are many tools available to build prototypes. Some of the tools are built using HTML/CSS/JS, while some use a drag-and-drop interface. Choosing a tool for prototyping depends largely on the skillset of the prototyper — at some companies, prototyping is considered part of the design domain. At others, it’s treated as an extension of engineering. They all have pros and cons, but in my opinion the best prototyping tool is the one that allows you to work the fastest. Here are a few popular prototyping tools:

Tools for coders:

Framer, Codepen, Storybook, Processing, Code Sandbox

Tools for non-coders:

InVision, Sketch, Proto.io

Bowerman — Nike’s Custom Prototyping Tool

Our team chose to build our own prototyping tool when we saw that there were many options that provided some or even most of the functionality we wanted, but not all. The Nike prototyping team is comprised of mostly frontend developers, which means working in code is the fastest way for us to iterate. Codepen came the closest to meeting our requirements, but the company did not have an enterprise product, which was important because we wanted to be able to share prototypes within the company without asking users to create new accounts.

The tool we created combines a cloud editor with a prototyping gallery, which we named Bowerman after one of our founders. We were able to impose granular permissions around who can view and edit each prototype. Here are some of our favorite features:

• Easy to manage sharing/privacy
• Versioning within prototypes to easily compare multiple solutions
• Worked in HTML/CSS/JS, with support for React and Vue
• Integration with our localization services
• Prototypes automatically include our style framework
• Journeys — allows linking multiple prototypes to simulate a user flow through multiple pages

Process

1. Layouts — we usually start with a Sketch file created by a designer, although sometimes we begin with something less formal, like a whiteboard drawing. Other times we are given a video showing motion and animation studies.
2. Prototype Creation — we build prototypes in HTML and CSS (using the Stylus preprocessor), with a little bit of jQuery to facilitate interactions. We use jQuery in lieu of the frameworks our delivery teams employ to reinforce the idea that these are prototypes and not something that we’ll eventually turn into real application code.
3. User Testing/Internal Review — Once the prototype has been created, we can begin gathering feedback from users and internal stakeholders. Since prototype code does not need the same rigor around testing and stability as production code, we can quickly act on feedback and make changes to the prototype as needed. Also, because our UI design tools require us to use a laptop or desktop computer, we are predisposed to overlooking issues that a design might present on a mobile device. Using a phone to interact with a prototype early on gives us an opportunity to fine tune interactions for a small screen. If the prototype is intended for an international audience, we will incorporate translations so that user testing can be done in multiple geographies.
4. Visual QA — After the prototype has been tested and modified to reflect a UI in which the stakeholders are confident, it’s a good idea to spend some time polishing the visual design. Since the prototype will be the most thorough and up-to-date representation of the desired functionality, we need to make sure that it matches the design team’s vision for the appearance of the app. VQA might take the form of a meeting, redlines, or a prototyper and designer pairing to nudge pixels until they have the right look.
5. Engineering hand-off — For the final leg of the product development relay race, we give a prototype to the team of frontend developers who will be delivering the experience. We usually start with demo’ing the prototype for the engineering squad, followed by discussion between the engineers, prototypers, product owners, and designers. For a complex prototype, there may be quite a few unanswered questions in the implementation phase, but defining features with a prototype allows for a much more thorough conversation about deliverables than does a static mock-up.

Success Stories

It can be difficult to express the impact of prototyping in a measurable way. The majority of prototype code will never make it into production, and many of the ideas we iterate through get thrown out in the early stages of design. Unlike A/B testing, prototypes do not produce quantitave data pointing to an impact on conversion. However, the learnings that come from testing a prototype with consumers are incredibly valuable; it’s important to capture this feedback and present it as evidence in favor of the best consumer experience.

We can look at an early iteration of the design for the Nike SNKRS web experience to demonstrate the impact of prototyping. In the first screenshot, a design for a feed of purchaseable products was prototyped and placed in front of five consumers for UX research. The Call to Action (CTA) for the products was represented as a price within a button with a white background. When asked to simulate purchasing the item, each of the consumers struggled with determining where the CTA was. We heard people ask multiple times: “How do I buy it?”

This feedback helped us understand that the CTA needed to be more explicit, and the design evolved into the second screenshot. Prototyping prevented us from releasing a product that was difficult for users to engage with.

The Future of Prototyping

In addition to iterating within prototypes, we are always iterating on our prototyping process. The prototyping tool that we call Bowerman was born out of this iteration, succeeding a handful of prototype galleries that came before it and continuing to evolve with our workflow. Here are a few of the explorations that may shape the future of prototyping at Nike:

• Incorporating shared components at the prototyping stage
• Sharing styles between Sketch and code, building upon Sketch2React or Airbnb’s React Sketch.app Library
• Automated visual regression testing using prototypes as a baseline
• Integration with our CMS to generate a high-fidelity preview of data

Conclusion

There is value in incorporating prototypes into your workflow regardless of whether you have someone dedicated to prototyping full-time. We recommend starting by comparing a few prototyping tools to find one that feels efficient and intuitive. Interacting with your experience early on in the discovery process will allow you to address issues with feasibility and usability at a stage when pivoting is still relatively painless, creating a product your consumers love to use.