Code: Prototyping

A prototype is a primitive representation or version of a product that a design team or front-end-development team typically creates during the design process. The goal of a prototype is to test the flow of a design solution and gather feedback on it—from both internal and external parties—before constructing the final product. The state of a prototype is fluid as the team revises the design iteratively based on user feedback.

Why Are Prototypes Important?

Tom and David Kelley of the design company IDEO have perfectly summed up the importance of prototyping by saying:

“If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.” Read More

Throughout my career as a user experience designer, I have continually asked myself three questions:

• What should my deliverables be?
• Will my deliverables provide clarity to me and their audience?
• Where do my deliverables and other efforts fit within the spectrum of UX design?

I have found that, if I do not answer these questions prior to creating a deliverable, my churn rate increases and deadlines slip.

When attempting to answer the third question, I use a framework I discovered early in my career: The Five Competencies of User Experience Design.PDF This framework comprises the competencies a UX professional or team requires. The following sections describe these five competencies, outline some questions each competency must answer, and show the groundwork and deliverables for which each competency is responsible. Read More

Wireframing and prototyping are two of the most important stages of the design process. Wireframes and prototypes enable you to present your design concepts and show a Web site’s or application’s basic functionality to your stakeholders and clients. It is important that your clients understand the significance of creating wireframes and prototypes for their overall project and the differences between these deliverables.

At one of my previous organizations, our design team was redesigning an ecommerce Web site. During a daily standup meeting, our client suggested that we skip the prototyping stage and, instead, start with front-end development, creating interactive screens with HTML, CSS, JavaScript, and Angular JS. This meant our team needed to design what the site was actually going to look like, as well as its functionality, in actual code. Read More