How do you prototype for web, mobile, and wearable devices?

1 Define your goals

Before you start prototyping, you need to define your goals and scope for your project. What problem are you trying to solve? Who are your users and what are their needs? What are the key features and functionalities of your product? How will you measure the success of your prototype? Having clear and specific goals will help you focus on the essential aspects of your product and avoid unnecessary complexity and confusion.

2 Choose your fidelity

Prototyping fidelity refers to the level of detail and realism of your prototype. Depending on your goals, you can choose to create low-fidelity, medium-fidelity, or high-fidelity prototypes. Low-fidelity prototypes are simple and rough sketches or wireframes that show the basic layout and structure of your product. Medium-fidelity prototypes are more refined and include some colors, fonts, and images, but not the full content or functionality. High-fidelity prototypes are very close to the final product and include all the content, interactions, and animations. Generally, low-fidelity prototypes are faster and cheaper to create and are useful for exploring different ideas and concepts. Medium-fidelity prototypes are good for testing the usability and design of your product and getting feedback from users. High-fidelity prototypes are best for demonstrating the look and feel of your product and validating the technical feasibility and performance.

3 Select your tools

When prototyping for web, mobile, and wearable devices, there are many tools available, from paper and pen to online platforms and software. Your choice of tool should depend on the goals, fidelity, budget, and skills of the project. Popular tools include paper and pen for creating low-fidelity prototypes with sketches and sticky notes; Balsamiq for drag-and-drop elements and icons; Figma for medium-fidelity to high-fidelity prototypes with vector graphics, custom fonts, and animations; and Adobe XD for high-fidelity prototypes with rich graphics, audio, video, and 3D elements. Additionally, voice commands, haptic feedback, and sensors can be added to prototypes in Adobe XD for previewing on web, mobile, and wearable devices.

4 Test your prototypes

Once you have created your prototypes, you need to test them with real users and stakeholders to get feedback and insights. Testing your prototypes will help you identify and fix any issues, errors, or gaps in your product and improve its usability, functionality, and desirability. Some methods for testing your prototypes include user testing, heuristic evaluation, and A/B testing. User testing involves observing and interviewing users as they interact with your prototype and asking them to complete specific tasks or scenarios. Heuristic evaluation involves evaluating your prototype against a set of usability principles or heuristics. A/B testing involves comparing two or more versions of your prototype and measuring the differences in user behavior, preferences, or outcomes. There are various tools available for each of these methods that can facilitate remote user testing, provide relevant heuristics to apply to the prototype, as well as create and run A/B tests on the prototype.

5 Iterate your prototypes

The final step in prototyping is to iterate your prototypes based on the feedback and data you gathered from testing. Iteration is essential for creating a better product, as it allows you to learn from mistakes, refine ideas, and make changes, improvements, or additions to your prototype. It's important to prioritize the most important and urgent issues and feedback first, make small and incremental changes rather than big and radical ones, and test frequently. Additionally, document your iterations and keep track of the changes and reasons behind them. Communicating your iterations and results with your team, users, and stakeholders can help you get their input and approval. By following these steps and tips for iteration, you can create effective prototypes that will help you design and develop better products that meet your users' needs and expectations.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?