businesssystemsdesign
Drew MacGibbon is an author on the Incubrain Blog

Drew MacGibbon

Pub: 01 Nov 2023

The Art Of Itterative Design - Incubrain Systems

At incubrain we know perfection doesn't exists, all you can aspire to is continuous improvement. In this article we outline the system we have for creating stunning websites, with functional UI/UX's.

Diving into the digital realm demands a design that's both captivating and purpose-driven. Welcome to our Iterative Design System, a fusion of user-centric principles and a clear, actionable process.

This isn't about chasing fleeting trends; it's about understanding users, refining designs, and continuously evolving.

Whether you're an experienced designer or just embarking on your digital journey, explore with us the essence of a design that looks good and, most importantly, works effectively. Let's iterate towards excellence, one step at a time.

Incubrain logo inline separator

Our Principles

Every successful venture is grounded in strong principles, and web design is no exception.

At Incubrain, we've distilled the essence of user-centric design into six guiding pillars.

These principles ensure that we never lose sight of our main objective – creating an intuitive and impactful user experience.

  1. Know Your Customer: - Don't design for yourself, design for your customers. Imagine how they will interact with the website, and what they will be looking for.
  2. Know The Goal: - What are you trying to achieve? Why? What are your customers goals? How do you align the two?
  3. Simplicity: - Keep it simple. Each element should have a specific purpose which will keep your design free from unessasary complexity/clutter.
  4. Consistency: - Use what works. Don't use different styles for the same elements, don't use different elements for the same purpose. That's not to say you cannot add your own design flare.
  5. Track Results: - If your design updates take you further away from your goals, you need to know! You must track your goals.
  6. Itterate: - Design is a process, not a destination. Itterate, itterate, itterate. Don't be afraid to change things up, try new things, Remove things and experiment.

design for the whole page, not just the section / component. Don't get stuck in design, get traffic to measure performance, then itterate design / copy with A/B testing.

Incubrain logo inline separator

Our Process

The path to impeccable design isn't a straight line; it's an iterative journey that demands a systematic approach.

Dive into our detailed process, a blueprint we've honed over time, encompassing everything from thorough research to constant iterations.

With these steps, we craft digital experiences that are not just visually appealing but also deeply resonant with our audience's needs.

1. Research

Start by researching your industry and competitors, understand their product offering and identify gaps in their offerings.

Know your your customer intimately so you can create customer personas.

2. Brainstorm

Brainstorm ideas, what sections do you need based on your research.

Visit your competitor sites, and see what they are doing. What works? What doesn't? What can you do better?

ChatGPT can help get you started.

3. Map It Out

Visualize the typical journey a user would take on your website.

From landing on the homepage to the final conversion, map out every step to ensure a smooth and intuitive flow.

4. The Best Part Is No Part

You don't build a 100 million dollar business website overnight.

Keep it simple, and focus on the core elements that will convey your business to your customer, remove anything unessasary.

5. Simple Wireframe

Draw a wireframe of your design.

This can be done on paper, or using a tool like Page Marker in your browser.

Design for mobile first, then adapt for desktop.

6. Create A Prototype

This might be an unpopular opinion, but at Incubrain we don't use design tools like Figma and Adobe XD yet.

Instead we use Nuxt/UI and TailwindCss combined with ChatGPT to get something live quickly.

7. Add Dummy Data

You can get a good headstart with ChatGPT when it comes to copywriting and imagery, it will make your website feel/look completed, and is actually very easy!

8. Polish In Isolation

Yes you need to see how your sections all fit together, but most of your designing should be done in isolation so you can focus improving each section individually.

9. Accessibility Checks

Ensure that your design is inclusive by accommodating users with disabilities.

In a sentance, make sure there's text behind visual components.

Tools like WAVE and W3 Tools can help you evaluate web content for accessibility issues.

10. Setup Analytics

Without any way to measure website preformance you're acting blind.

Setup Google Analytics or PostHog and Google Search Console to track your goals.

11. Gather Feedback

You need time to determin if your design and copy is good, this may take anywhere from a week to a few months depending on how many visitors the site is getting.

Below are some simple benchmarks to get you started

MetricBadGoodGreat
Conversion Rate
< 2%
2% - 5%
> 5%
Bounce Rate
> 70%
40% - 70%
< 40%
Average Session Duration
< 1 minute
2 - 3 minutes
> 3 minutes
Pages per Session
< 1.5 pages
1.5 - 3 pages
> 3 pages
Page Load Time
> 3 seconds
2 - 3 seconds
< 2 seconds

We'll write a more detailed article on website metrics soon.

12. Itterate

Once you've had time to collect data, it's time to itterate. Make small changes, and see how they affect your goals. If you're not seeing the results you want, it's time to change things up.

13. Remove Some Stuff

Don't forget to ask yourself "do I need this thing?", sometimes the best choice is nothing! White space is shown to increase focus, decide what you want your users to focus on an prioritise that.

Incubrain logo inline separator

Conclusion

Like all of our systems at Incubrain, this is a living document. We are constantly upgrading it and looking for feedback from the community on how we might improve it. If you have any suggestions, please click the "Suggest Edit" button in the bottom right.

Sources

TitleAbout
Filler

Share

- or -

Suggest Edit