Design And Prototype Development

Design And Prototype Development: UX Design in 2020
by Tim Moad
01 Nov 2020
14 min read
Introducing: The YouTube Marketing Hub, A Free Resource Library

Blog In A Nutshell: Prototyping is the process of creating that version of your digital product which can simulate the functionality of the end product to great accuracy even though it is not final yet. It's a non-linear process which results in a prototype. A prototype is a simulation of the real product that is used for feedback and testing. A prototype is more interactive than a wireframe but is of lower fidelity when compared to the final product. All wireframes are prototypes, but not prototypes are wireframes.

A prototype helps in:

  1. Keeping track of the product development
  2. Giving a clear gist of how the final product will function
  3. Changing a particular characteristic of the product before finalizing it
  4. Eliminating the unnecessary elements
  5. Achieving a good UX Design

 

The Blog In Detail:

An ever-changing world needs a flexible design methodology. 2020, because of COVID-19, has been an unprecedented year. It has made designers question the way they approach User Experience (UX), Prototyping, and Design in General. Therefore, it is important to iterate over the basics of UX Design, making sure that your design approach is fresh and up to date. In my last blog, I explained the importance of wireframes. The blog talked extensively about the mindset behind creating a competent wireframe. In this blog, I explore a more technical realm of UX design and answer question like 

 

  1. Importance Of Prototyping For UX Design In 2020
  2. What are the benefits of Prototyping For UX Design In 2020
  3. The Right Methodology For Prototyping For UX Design In 2020
  4. Design And Prototype Development for UX Design In 2020

 

Before I start, make sure you also read my blog about wireframes! It will allow you to better distinguish between the role of wireframes and prototypes in UX Design. For a quick recap, watch this video:

 

A prototype, in simple terms, is a mature wireframe. A Prototype is the simulation of the real product that is used for feedback and testing. Prototyping is the process behind creating a prototype.

Importance Of Prototyping For UX Design In 2020

A test run helps your best run. Prototyping highlights what works and what does not. In UX Design, Prototyping goes a step further and conveys the way your audience might react to your final product. The prototyping process, then, is not only limited to testing the product, but it is also essential to weigh your audiences' reactions. Their reaction has a direct impact on the success of your digital product, website, or app. 

An example of a bad UX which could have been avoided with proper Prototyping is GoDaddy's Website. GoDaddy is one of the most famous internet domain registrars. However, the process of registering your domain with them is not as straight forward. Their upselling technique qualifies as a 'trick'.

While registering a domain name, you can see the yearly fee; however, when you add the domain to the cart, it is automatically being purchased for two consecutive years. If you somehow manage to get past this, you need to tackle the next curved ball of buying domain protection. The UX is such that it feels that the domain protection will be included in the registration fee. But no! One has to pay an extra 10 USD for this. And finally, you need to make sure that you uncheck the option for buying an email address that matches your domain. Why? Because Google offers a much better service for your website.

Interfaces like these can be qualified as sneaky and dark. They are one of the main reasons for customers taking their website registrations to more authentic and transparent registrars. God only knows how much of my business did GoDaddy lose because of such shady practices. There are many such examples of bad UX due to ineffective prototyping.

The reason this UX is condemned as 'dark' is that it is the opposite of 'user-first' design. Instead of keeping the need of the customers a top priority, the UX is confusing, and it tries to upsell without providing any substantial value. 

So what should have been the right prototyping approach which would have eliminated this issue in the design stage? To answer this, we will have to revisit the basic steps for UX design. GoDaddy fell short in empathizing with their customers. Most of the people registering a domain name are startup owners with limited resources. GoDaddy is one of the first points for investing in their venture. Therefore, Godaddy's UX should be adjusted to empathize with the new entrepreneurs instead of tricking them in paying more. 

Empathizing is an essential prerequisite in designing a prototype. Empathizing is understanding end-users to the extent that the end product feels like it is customized for them. Quantitative and qualitative data are two essentials tools that you can use to empathize with your end-user. At the end of your analysis, you should be able to elicit your customers' pain points and needs.

Other essential prerequisites which help you in making a good prototype are:

  1. Defining or coming up with a hypothesis for the problem that your product is aiming to solve. Based on this problem definition, you will come up with a suitable prototype.
  2. Ideating or coming up with as many solutions to a problem as you can. Ideating helps you filter out the best solutions, which allows you to build a good prototype.

 

I have given great insights into these prerequisites, which will help you in coming up with a good prototype! Feel free to reach out to me on my Instagram handle if you need more information.

What Are The Benefits Of Prototyping For UX Design In 2020

The benefits of Prototyping are many. It helps in eliminating those traits of your digital product which will not please your end customers. Moreover, testing your prototype will help you generate more quantitative data, allowing you to predict your product's success. Since a prototype is a precise and interactive representation of the actual product with scope for evolution, it benefits you by helping your final product be more precise, interactive, and evolved! 

The other benefits of Prototyping are:

  1. Prototyping has two facets to it. On the one hand, it helps the designers explore more. On the other, it helps in inspiring the user by putting an actual product in their hands.
  2. Prototyping encourages redefining the problem definition.
  3. It helps in better visualizing the idea for the solution.
  4. Prototyping is an excellent tool for assessing technical feasibility.
  5. It serves as a blueprint for your final product.
  6. A prototype helps in testing the effectiveness of the final product.

The Right Methodology For Prototyping For UX Design In 2020

Once you are happy with the way your wireframes looks, you can build a prototype in the following ways:

  1. Paper Prototyping
  2. Digital Prototyping
  3. HTML Prototyping

Paper Prototyping

This methodology works best in the early stages of design primarily for testing purposes. But because of detailed wireframing, paper prototyping has become a redundant step. One can still design paper prototypes to rework the wireframes and make them more precise. 

Digital Prototyping

While working in UX design, you will find yourself dealing with Digital Prototyping at almost every stage of your career. Digital Prototyping is done by using apps or software such as abode. Adobe helps you streamline your design process. It has artboards that can be wired together with a single click to define user flows, add transitions and animations. Abode XD is a convenient tool with many pros and a few cons. It is indeed the fastest way to build a basic prototype for an app. 

Another such tool to prototype digital products (like websites) is wix.com. Wix is a code free way of designing websites. This means you can create and test a basic user flow for your future website without any coding. Once you test how effective your user flow will be on Wix, you can dive into coding your website from scratch. The only disadvantage that Wix has is that it only provides a very generic template for everyone. This is a significant disadvantage as your website will look like any other website made by using Wix. 

Advantages of Digital Prototyping:

  1. Digital Prototypes are easy to build and help you test the user flow without investing too much time into it.
  2. They allow you to replicate the interactions of your final product at low infidelity 
  3. Depending on your project, digital prototypes can be used as the foundation for your final product. Therefore, every feature which works for a digital prototype will be a valuable addition to your finished product as well
  4. The minimal time investment needed for Digital Prototyping will enable you to test your product in its early stages. 
  5. The quick build time required to make a digital product also allows you to conduct frequent testing.

Disadvantages of Digital Prototyping:

  1. Since Digital Prototyping is built 'code-free', transitioning them into 'code' will require a significant learning curve.
  2. Transitioning into code might also force you to eliminate those features of your final product which worked on the prototyping level but are not 'code-compatible'. These features include the likes of advanced animations which may not be realistic in the final product as they might cause the final result to lag.

You can always seek help and guidance from the right mentors if transitioning is a challenge for you. The community at The Proto Process is here to support you for precisely these challenges. We have full-stack developers who can help you transition your prototype into the final product.

HTML Prototyping

The HTML prototype is normally a series of linked static HTML pages. It helps in eliciting the basic flow of the proposed software solution. HTML Prototyping works best for those who have the relevant knowledge to build a code-oriented prototype. If you have the technical requirements to create an HTML Prototype, you will be doing your future self a huge favor as your transitioning phase will be very smooth.

Design And Prototype Development for UX Design In 2020

The year 2020 is full of surprises. In times when nothing is certain, the best way to work is to be agile. Design and Prototyping, in an agile way, means that you are continually innovating. Some of the best examples of prototypes that took full advantage of the uncertain times of covid are the projects build around Artificial Intelligence (AI). These projects include the likes of mask detecting cognitive software and apps used to track the spread of the infection. The creators continuously iterated over their prototyping process, making sure that their end product helps various governments stop the spread of COVID-19.

So what does this mean for your projects? Perhaps every project that you work on starting now should have a scope for adding features to tackle the then crisis. When designing a prototype, ask yourself how can the features and UX of this digital product help in resolving any unprecedented major crisis. Perhaps your designs should have a scope for adding a donate button which allows your users to contribute to tackling a future problem. Similarly, suppose your app needs to access the location of a person when being used. In that case, you can do something with tracking the health status of your app users in that vicinity, making sure that your customers are not around any infection. For maximum agility, your design process should be structured in such a way that the time taken to revisit and iterate over the prototype is a bare minimum.

The Proto Process is my initiative to help people have a glorious career in the field of UX. UX Design is a rewarding career opportunity that offers satisfying work. A UX designer can impact businesses and their customers in the most significant way possible. If this is something that interests you and you wish to learn more about it, feel free to get in touch with me! I will be more than happy to help you with your UX journey. Don’t hesitate from adding me to LinkedIn and following The Proto Process! I give daily UX related tips on Instagram and Twitter, making sure you are always learning. 

There’s more! I have recently launched a UX Guide helping new designers get on the fast track of their UX Journey! Make sure to check it out! 

For you to navigate your way through the UX world, The Proto Process provides all the right resources! Join our community to receive invaluable insight from working User Experience Professionals. Get direction on where to put your efforts next, or even work through a problem you’re having with The Proto Process. You can also Book a FREE Consultation Now for a more personalized experience! Furthermore, you can be a part of our digital classrooms. They will enable you to stay relevant in your career and help you grow as a UX Designer. 

 

The Proto Process: Designing Your UX Career, One Artboard At A Time.

Our industry experts come from renowned design-led companies