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?

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

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

Serving Stakeholders

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

Tools for coders:

Framer, Codepen, Storybook, Processing, Code Sandbox

Tools for non-coders:

InVision, Sketch, Proto.io

Bowerman — Nike’s Custom Prototyping Tool

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. 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.
  2. 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.
  3. 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.
  4. 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

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

  • 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

Nike Engineering

The Nike Engineering team is creating the future of sport - innovating retail experiences, connecting athletes to the brand and creating powerful moments of distinction through the Nike Digital ecosystem.

Katie Boyd

Written by

Front end developer/prototyper, plant nerd

Nike Engineering

The Nike Engineering team is creating the future of sport - innovating retail experiences, connecting athletes to the brand and creating powerful moments of distinction through the Nike Digital ecosystem.