A guide to prototype design – UX design process

When it comes to prototyping – whether it’s creating a simple wireframe without visuals and working links or a fully functional mockup that’s got it all – mastering the skill is extremely valuable to the UX design process. Mastering the skill of prototyping may seem like a waste of time – after all, it’s up to the client to make the final decision – but knowing how to deliver something to the client that requires as little corrections as possible saves valuable time during the final design and the correction process. Think of it as usability testing. To give you a better understanding, here’s our guide to prototype design and what the UX design process should look like.

What are prototypes and what are they used for?

A prototype is essentially an interactive mockup of your website. Although it may not have the details of a the final product, it gives you a great idea of the general flow, functionality, and user experience. It also includes a great visual representation of the product that only lacks animation or proper transitions.

Prototypes are used to present an accurate representation of what a finished product is going to look like without finalizing any details. It can be presented to the client so they can request changes before converting them to a final product.

The Prototyping Process

To start the prototype process, it’s important to narrow down your requirements. Odds are you’ve had endless conversations with your client about the final product and have dozens of pages of requests between the two of you. So, how do you go about actually get started? Here’s a checklist to narrow it down:

• What are the goals for the website? – Thinking about what the goals for the final product are and what needs they are trying to fulfill is a great way to get started building your prototype. You can’t set out to create a prototype unless you know what the website is supposed to do.

• Are there competitive products in place? – If there are competitive products out there, research them as much as you can. You need to see what customers expect from a similar project and what could be improved upon.

• Who is your target demographic? – Considering your target demographic is important to the overall design and feel of your website. You need to know who you’re creating the website for and what they’re looking for when they get there.

• What type of product and devices will it be used on? – Different kinds of projects can be created with a prototype. The client may be looking for a web app, responsive website, or even a mobile app. You also need to know what platforms it will be used on and on what devices.

• Are there visual precedents already in place? – The client may already have a previous mockup created or have presented you with some other form of visuals. In this case, you already have a rough idea to follow.

• What are your client’s expectations? -  What is your client looking to achieve and what are their timelines for the project? Have a look at the deliverables and make sure that everything’s as crystal clear as it can be before starting the project.

Hand draw your prototype

Before taking it to the screen, the next step in the process is to hand draw or sketch out your prototype. Obviously, this doesn’t have to be in great visual detail but paper prototypes give you a general sketch of the layout and structure and are a great way to get started. You can include as many visuals as you want but that’s not the overall point of the sketch. These aren’t functional prototypes - they’re meant to roughly map out the website’s terrain, highlighting what is possible and what isn’t.

You can draw your prototype using whichever physical medium you wish – whether that’s with pencil and paper, a chalkboard, or a whiteboard.

Converting to digital

Now that you have enough physical sketches to move forward, it’s time to convert them to the digital world. There are many programs available that can assist with this process, making the conversion as easy as possible for you. Programs such as Adobe Sketch, Framer, and Flinto are all great for the advanced UX designer while tools like InVision and Proto.io are valuable for creating clickable prototypes.

The process of prototyping

A crucial aspect of prototyping is making sure that you’re paying close attention to the process and what it is that your client wants to achieve. Ask specific questions about what the client needs and why they want certain functions to behave in certain ways. Gathering as much information as possible before and during the design process helps save you both a lot of time in the long run. The point of a prototype is to get it as close to the final product as possible. It’s not going to perfect but asking crucial and valuable questions along the way is essential to know how to proceed during the design process.

Building a website is not a straightforward process and you’re not going to get everything right the first time. Not only is there a chance you’ll miss things, but a client may also change their mind or decide they want new things added after seeing a prototype. This is exactly why prototypes are so important to create – they’re not a finished product. Every aspect of the website can be tweaked to perfection before it’s coded into its final version. Making sure you have a solid design process in place eliminates the need for a lot of tweaks and gets the project off to a good start.