Knowledge
3 min

How Website Prototyping Can Help to Cross-Check Your Business Idea

IT consulting, food blog or fashion label – no matter what your plans may be, your website makes your idea come alive. You can take advantage of this fact even before you start your business. Take an afternoon to create a website prototype for your business idea. This way you can uncover gaps in your concept and see exactly where you still need to improve in order to successfully get your baby on the road.

Contrary to what advertising claims, creating websites is not that easy. Texts, images, videos, search engine optimization, compatibility with different screen sizes, and so much more. But don’t worry – we have a clear focus for our prototype: The focus here is not on professional development, but on the questions that you basically have to ask yourself when designing a website.

Step 1: Learn How to Build a Website

No two websites are the same. Depending on the industry and the service that is offered, they differ considerably. The structure that I am about to introduce to you is that of a classic ‘one-pager’. You can imagine it as a virtual business card that distils all information about the project or business down to the essentials. Complex functions outside of a classic newsletter subscription, such as a shop or a booking platform, are not taken into account for the sake of simplicity. The one-pager we are using as a template here usually begins with a ‘header’. It consists of a logo, the name of the company or artist, the navigation elements, and links to the social networks in which you are active. It specifies the structure of the website and is used to navigate between the different sections on the page. This is followed by what is called a ‘Hero Section’. It is usually filled with large images or videos and contains a central benefit statement as well as a ‘call-to-action’, i.e. a button that encourages the user to get in touch with the provider. In most cases, this is followed by a section on the services offered and an area with three unique selling points that explain what makes them so unique. This is followed by testimonials from customers who have already used the products or services, as well as reference examples and customer logos. Blog posts that make the product tangible with useful additional information are also often used at this point. This is followed by a contact form. At the end, there is the footer with imprint, contact details, general terms and conditions and data protection declaration. Quality seals, certifications and important partners also find their place here.

Step 2: Find the Appropriate Medium

Depending on your level of experience and knowledge of web design, there are three options for implementing your prototype: you can sketch it by hand, create it in a graphics program of your choice or build a clickable dummy with a ‘Page Builder’. If you decide on a handwritten sketch, I recommend using a whiteboard or an iPad so that you can revise and correct your ideas over and over again. You should only opt for a graphics program if you regularly work in this environment and do not need any time-consuming training. If you know what you’re doing, Sketch or Adobe XD is the right choice, but Microsoft PowerPoint can also get you there. If you are already browsing the web on a regular basis, or have perhaps been involved in creating a website yourself, it can make perfect sense to create your page directly with a page builder such as Wix, Squarespace or Elementor. This has the advantage that it gives you a starting point from where you can quickly go online with a ‘minimum viable product’, i.e. a first minimal version of your website that meets the minimum requirements for customer, market and functional needs.

Step 3: Ask the Right Questions

After you have gathered your tools in steps 1 and 2, it is time to get down to business. Use the one-pager structure described above for an interview with yourself. Try to answer the following questions through the eyes of a potential customer. However, be careful not to completely lose your view of things. In the end, both sides have to be happy with your company

Header:

What should the logo or visual identity of my company look like?
What values should it convey?
What colors and shapes suit me and these values?
What is the right name for my company?
What services do I want to offer?
What information do my customers need to be able to perceive them?
Should the services be offered online?
Which social networks suit me and my company?
Are there possibly even industry-specific networks on which I should be present?

Hero section:

What image describes me and what I do at first glance?
What mood should the image convey?
What color scheme conveys my values?
Do I have my own image material or do I want to use stock material?
How can I summarize in one sentence what I offer and what is the added value for my target group?
How should website visitors interact with me?
What should website visitors do after opening the website?
Who benefits from what I do?
Are there possibly multiple target groups that should interact with me via the website?
What should my “call-to-action” look like so that website visitors react to it?

Service overview:

What is my core product?
What services can I offer now, what services can maybe follow later?
How can I describe what I do in two sentences?
How can I visualize what I do?
What are the overarching categories for what I do?
What are application examples (use cases?) for what you do?

Unique selling points:

What is the most important unique selling point for me and my offers?
What are the advantages of what I do over other similar products or services?
How does what I do change the life of my target group?

Testimonials:

What do customers say who have already used my products or services?
If you have never performed the service, what would potential customers say about your services?
Who are the customers that would use your product or services?
How do you characterize them?
Are they companies or consumers?
What are their demographics?
What are their wishes and goals?
What does their ‘persona’ or profile look like?

Blog posts:

What topics are currently trending in your area?
What information do your customers need in order to be able to use your products or services efficiently?
Are there application examples (use cases) that your customers are not yet familiar with?
What information about you as a person could your customers be interested in?
Are you planning any events or promotions that you would like to announce?
What problem do potential customers have that you can solve?
What questions do my customers have before they use my product or service?

Contact form:

What do interested parties get when they contact us?
What do I have to consider regarding data protection?
Should my prospective customers receive a newsletter?
What form fields do I need and which are more of a deterrent for users?

Footer:

In which country do I want to set up a business?
Do I need an imprint?
What do I have to consider with regard to data protection?
What is my company address?
What contact options do I want to provide?
Are there any certifications or awards that give testimony to my professionalism?
Are there partners with whom my company is closely connected?

Step 4: Making the Prototype

Have you been able to answer all questions satisfactorily? No? No problem. That is absolutely normal and that’s not the point. It’s about visualizing and playing through different options in your head, on paper or on the screen. Pick up different colored pencils, newspaper clippings or photos of your products. Everything is allowed. It is your prototype. If you work on your PC, it can also help to look for ideas from similar providers or to add images from Google search. It is very likely that you will throw an idea overboard in a relatively developed state. In this case, be sure to save the current status or at least take a photo. Often parts of a rejected idea are interesting again later.

For orientation, see the images in this post for previous versions of the Passion Pilot website. I created my prototypes with Microsoft Powerpoint and Adobe XD. You can see clearly: the original idea developed over time and with each iteration the picture became a little clearer.

Step 5: Uncover Gaps in Your Business Idea

Things are getting interesting now. Are there any contradictions in your design? Were there any areas that you haven’t given any thought to? Then there are contradictions and gaps in your concept. But this is no problem. The aim of the exercise was to find precisely these ambiguities. Write down your findings and go through them step by step. Adjust your prototype accordingly and see whether your result seems more consistent. At this point, it can also be interesting to get feedback from people you trust and to compare it with your own point of view.
Repeat the process over and over and refine your prototype step by step. Hopefully you will notice that the concept is becoming more and more solid. By the way, you already have a perfect briefing for a web designer who will help you to implement your website when the time comes.

Finished? Then I am really excited to see what experiences you have had with this method. Drop me a line! I’m looking forward to your feedback. From your point of view, are there any important questions missing from my list? Please let me know. I will be happy to add your suggestions.

Laura Jane Hoffmann

Laura Jane Hoffmann is the founder of Passion Pilot. After working more than ten years as a Marketing Manager in the IT industry she now runs her own creative marketing agency, makes music and works as a dance and fitness instructor. Passion Pilot is her heart project. Together with her network of founders and artists she wants to support people all over the world in finding their passion through creativity, discovering the tools to execute their ideas, and starting their own business.