Are you wondering how websites are being made? This article will cover the complete process, tips, and principles that can save you time and money 💰 when choosing a designer, developer, and platform for your new website. In the following paragraphs, I will talk about my entire process starting with interviews, designing & prototyping, all the way to the working website in Webflow.
I specialize in agile design & development. In short, I prefer to be live with an MVP (Minimum Viable Product) having 80% of features for 20% of total dev & design time (80/20 rule). This rule allows me to get your project live before your competitors launch theirs. All additional features and upgrades can easily be added later; at the same time when the competitors are still considering what colors and fonts work for their website.
A minimum viable product is a version of a product with just enough features to be usable by early customers who can then provide feedback for future product development.
Phase 1: Intro Call
You get to the point where your old website or just showing presence on social media is not enough anymore. You are facing complex decision-making and trying to find a solution that will not lead to a dead end with wasted money. You want to scale your business, get more leads, improve sales, increase conversion rate, improve trust and credibility, or leverage time from your team so that they can focus on things that matter. All those reasons are valid for investing your money into a new website. In short, a good reason to spend money on a new website is anything that leads to improving profits or reducing costs.
There may be some situations motivating businesses to make this investment, which I would advise against. Anything that doesn't lead to profit improvement or cost reduction is not a valid reason to spend money on a new website.
Anything that doesn't lead to an increase in profit or cost reduction is not a valid reason to spend money on a new website.
I offer a free 30-minute intro call after submitting a new project, where I discuss reasons for a new website, project scope, and expectations so that I can help you decide whether I am a good fit for your project or not.
Furthermore, I will recommend the following steps if your project is not a good fit for Webflow. This is the moment that will save you thousands of dollars. After a successful interview, I will send you a proposal. Agreeing to the proposal and paying for the first invoices is when we officially start our cooperation!
Phase 2: Interviews
No designer can design you a website that meets your business goals without knowing your business, target audience, and project expectations. Every project has specific questions, but I usually follow the list below.
No designer can design you a website that meets your business goals without knowing your business, target audience, and project expectations.
Business-Related Questions:
- Which problems are you solving?
- Who are you solving them for?
- What makes you stand out (USP)?
Website-Related Questions:
- What is your goal for the website (conversion action)?
- What do you like about your current website?
- What would you improve about your current website?
Target Group-Related Questions:
- What is the process like when ordering your services?
- In which situation is your client while searching for your services?
- What is important for the clients - and what is not?
- What is the risk for the client before buying your services?
- What problem/concern could be the reason for not choosing your services?
- Who decides about purchasing your service?
Phase 3: Personas, Sitemap & Information Architecture
Knowing your business, target audience, and project expectations means we can initiate a prototyping phase starting with Sitemap & Information architecture (a simplified structure of the website and its sections). This phase helps to save a lot of time by avoiding design changes later in the process. In addition, I create personas (as seen below) for your business based on the provided information about your target audience. I use these personas anytime I need to make decisions.
Phase 4: Style Guide
Finally, we are getting to the most creative phase – the style guide. In this phase, we choose the primary website colors and typography. Furthermore, I also design a component library. Colors and typography are always aligned with the brand guidelines, although there may be some website-specific elements.
Colors and typography should be approved based on the selected strategy rather than simply based on your liking. Marketers should decide what colors fit your brand and designers what typeface works for your website. Making sudden decisions based on your wants can get you into trouble later when applying this style guide to other products. That is why choosing from multiple design variants is not a good practice. I always start with one high-end version and continuously change it based on the feedback.
Marketers should decide what colors fit your brand and designers what typeface works for your website.
Phase 5: Wireframes
Wireframes are all about expanding a small sitemap into a low-fidelity prototype. This phase is all about prototyping each section. We will also work on the site's copy.
Wireframes should represent the final version of the site when it comes to structure and website copy. Making changes later in the process costs you extra money as making changes to a high-fidelity prototype or live website is very time-consuming. Final approval in this phase is the most important of them all.
Making any changes later in the process costs you extra money as making changes to a high-fidelity prototype or live website is very time-consuming.
Phase 6: High-Fidelity Prototype
You've done most of your work, and the whole project is now up to me. I will apply the approved style guide to the low-fidelity prototype. Making any structural changes in this phase means that you ignored the previous stage. Any structural changes from now on will trigger changes to the project budget.
In addition, we create all the images and videos. The best scenario is that you have a graphic designer who is in charge of content creation, but if this is not the case, I can also help with content.
Any structural changes from now on will trigger changes to the project budget.
Phase 7: Webflow & Optimization
With me on the team you’ll benefit from the fact that I can cover the complete process from prototyping through development to a live website. The Webflow phase consists of four major phases:
- Desktop version
- Mobile optimization
- Animations
- Speed optimization
In each phase, I send a report to collect feedback. The primary subject for the feedback during this phase is how accurate I turned the design into Webflow and how some of the website's features work. During speed optimization, I ensure that all scripts are loaded efficiently, that all content is fully optimized, and I will help optimize videos and images. Please remember that website speed heavily depends on how many third-party scripts your website uses. You can check your current performance here. The dev time heavily depends on the site's features, CMS complexity, data migration, custom scripts, and animations. It can range from one week to months.
The dev time heavily depends on the site's features, CMS complexity, data migration, custom scripts, and animations. It can range from one week to months.
Phase 8: Third-Party Apps & Automations
Based on the conversion action and a general use case, I will automate your business with Third-Party Apps and Zapier. The most common apps I use are:
- Zapier
- Stripe
- Google Sheets
- Asana
- Airtable
- Memberspace
- Memberstack
- Shopify
Phase 9: SEO & Final Touch 🎉
We made it! Now we are ready to launch the website. Shortly after launch, I will fix minor issues that will potentially show up. In addition, I will add structured data to the site so that Google can gain a deeper understanding of the website.
Once the crawling is completed, those searching for your website will see rich search results, which can improve the click-through rate. They are essential for SEO (search engine optimization). Typical rich search results may include articles, how-to tutorials, breadcrumbs, FAQs, etc.
Structured data are essential for search engine optimization.
Test, Fix and Repeat
One cool thing about websites is that they are never finalized. Listening to your users and updating the website based on their feedback is crucial to staying relevant online. In addition, you can test the website from time to time to see if the users enjoy a smooth user experience. My favorite tools for that are Smartlook or Hotjar.
Websites are never finalized.
Summary
We covered the entire process and tips that can save money when working on a new website. If you are unsure whether Webflow is suitable for you, feel free to submit a new project, and I will do my best to help you set a good direction.
