A Simple Hack to Use AI to Improve Website Design

80
2.4M followers

Can you AI help you with website design? If so, how can we get AI platforms like ChatGPT to have a look at our website designs and give us constructive feedback and novel suggestions for improvements.

Many of us see AI as a tool for answering questions or solving straightforward problems, but it can also act as your personal design assistant. I want to walk you through how I use AI to get fresh insights into design side elements of our business, in this case on Wealthy Affiliateā€™s interface and layout.


Step 1: Introducing AI to Your Design Challenge

AI tools like ChatGPT can provide perspective that you might not have considered when improving your websiteā€™s design. Hereā€™s how I approached it:

  • Scenario: I took a screenshot of the Wealthy Affiliate interface (back office and menu structure) and uploaded it to ChatGPT.
  • Prompt: I asked the AI to act as an expert website designer and UX specialist, providing solutions for a better interface thatā€™s more intuitive for our users.

Hereā€™s what I typed:

"You are an expert website designer and UX specialist. I want you to help me come up with solutions for a better interface design and one that is much more understandable to our end users. I am the owner of Wealthy Affiliate, and this is the current interface in the back office and menu structure."

Step 2: Reviewing AI Feedback

The AI delivered detailed suggestions based on the interface I shared. Here are some key takeaways from this.

  1. Prioritize Clarity in the Menu:
    The AI noted that the menu structure could feel overwhelming due to the variety of icons and labels in close proximity. It suggested grouping menu options into collapsible sections (e.g., "Training," "Community," "Tools") to streamline navigation.
  2. Streamline the Dashboard:
    The AI observed that the dashboard presents too much information at once, potentially overwhelming users. It recommended:
    • Adding quick-access cards (e.g., "Continue Learning" or "Your Next Action").
    • Moving elements like "Recent Questions" and "Live Chat" into dedicated community tabs to reduce clutter.
  3. Simplify Visual Design:
    Clean, minimalist designs with less clutter were recommended to make the interface more intuitive.
  4. Introduce Activity Analytics:
    The AI suggested integrating analytics that allow users to track progress, which could motivate them to engage more with the platform.

Step 3: Digging Deeper on Suggested Improvements

One of the best aspects of using AI is the ability to probe further.

For example, I asked:

"How would you appropriately group the current menus within Wealthy Affiliate in a way that would make sense to the end user?"

The AI responded with a detailed architecture for menu grouping, suggesting categories like:

  • Training: Core lessons, advanced classes, tutorials.
  • Community: Live chat, forums, success stories.
  • Tools: Keyword research, content templates, website builders.

This kind of iterative dialogue allowed me to refine and explore ideas that I might not have thought of on my own.


Step 4: Testing and Implementing AI-Driven Ideas

Once I had these suggestions, I began thinking about how to test and implement them:

  • Sketch New Layouts: AI can analyze even hand-drawn sketches of potential designs and provide feedback.
  • Iterate on Concepts: Ask follow-up questions to refine ideas and gain insights into coding, layout, or usability.
  • Prototype Changes: Using tools like Figma or Adobe XD, I could translate these ideas into prototypes for user testing.

Why Use AI for Design?

AI acts like an extra set of eyes (or an unbiased consultant) that can help you, where you can get quick "design audits".

  • Spot areas of improvement that you might miss.
  • Generate new ideas for organizing or presenting content.
  • Offer detailed suggestions for layout, usability, and functionality.

Even if the AIā€™s feedback isnā€™t always perfect, it often sparks new ideas and provides a fresh perspective that can lead to innovative solutions.


Have you used AI tools for website design or other creative projects? If so, Iā€™d love to hear about your experiences. Drop your thoughts in the comments below, and letā€™s discuss how AI can help us all create better, more user-friendly designs. Looking forward to your feedback!

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core ā€œBusiness Start Upā€ Training

Recent Comments

61

Good morning Kyle,

That's an interesting training video!

To me, this is a great way to use AI, you know my thoughts on AI and how much I waffle on about it! But using AI like this is brilliant; I'm sure it opens up new ideas that we would never have thought of, which can then bring on more new ideas.

I appreciate the heads-up.

Have a fantastic weekend.

Roy

Yes, there are so many applications Roy. I will eventually turn you into an AI advocate, I use it in many ways not just on a business side of things, but in my personal life to really lead to more efficiency, freeing up time to dedicate to other things.

You have a fab weekend as well!

Good morning Kyle,

Lol!šŸ˜ This is where I find using AI genuine and helpful, Kyle. As you mentioned, it's great for speeding up tasks, being more efficient, etc.

I do believe that you are probably using AI in a really great way, whereas some people are using it in a really poor way and there's a huge difference!

A very happy Sunday to you.

Roy

Hi Kyle

I'm not crazy about AI's overall suggested improvements, perhaps because it needed more info at the onset about the extent of WA's goals and functions.

WA is an "all-in-one" online marketing platform that brings training and community input together in a very unique way, which, in my mind, is very different from a "single-niche" website that is designed to answer particular user queries in the easiest and most straightforward way with the simplest GUI.

Most people come to a single-niche website from search results, videos, ads, etc., and want a high-quality, concise answer with maximum navigational simplicity.

I agree that you could drill further down into the initial suggestions that AI provided to obtain some valuable insights that could result in small changes, but I doubt that the WA home page would appear radically different.

There's usually an optimal balance between interface simplicity and functionality. I don't like having to make multiple clicks to arrive at something that could be obtained more efficiently.

Everything has a learning curve, and I love the overall layout of the WA home page. I doubt it would take new members more than a day to figure out how it all works. šŸ˜Ž

Frank šŸŽø

Yeah, WA is different than perhaps a niche blog, but there are 1,000s' of potential design and organization attributes that you could have. Even content structure.

Trust me, I don't use every AI idea ever presented to me, but instead of me using a bunch of brain calories to come up with ONE idea, I get 10 from GPT that are mostly good, and offer me new perspective and if I need to dig from there, I will.

In terms of our design, it made some good suggestions, and some not so good. We are actually going through a bit of a redesign in terms of our navigation so it was on point with many of these assessments. It is pretty good now, but we area always in a state where we know we can get better.

Thanks for your feedback here Frank!

Youā€™re welcome, Kyle. šŸ˜Ž

Hi Kyle:

I like what you have done in this "A Simple Hack to Use AI to Improve Website Design" session. That's one of the ways I utilize ChatGPT, not just for business but in other areas.

For example, I would take a picture of an object, upload it for ChatGPT to tell me about it. I use the information it provides in my creative content, if that's the purpose I'm using it for. Otherwise, it's useful information I didn't have before.

I've found what you've said in the following quote to be true: "Even if the AIā€™s feedback isnā€™t always perfect, it often sparks new ideas and provides a fresh perspective that can lead to innovative solutions."

Thank you for sharing!

Veron

That is excellent, I like that. That is definitely another creative way you can utilize images in GPT to get a useful and creative output. :)

Another advantage I found is that ChatGPT's generated HTML code is better organized into sections and not all on one line like Blogger that you have to first sort out before you can adapt it. :-O I once asked ChatGPT to create me a table to display a picture on one side and text on the other. I tried it first myself and made a mess-up as the text block was not the right size. After copying and pasting the code provided the results were perfect! AND I could change minor details without accidentally deleting part of the code!

Yeah, that is another great use for GPT, love it! It is getting really good at coding, not up to par with a great coder, but definitely efficient and through time I think we are going to really be able to do all our heavy lifting as a tech company with AI drive coding.

AI can certainly help us with much much more than just content ideas and creation Kyle!!

Appreciate you sharing your prompts here..... I will give them a try (tailored to my needs obviously) in the the coming days!!

Enjoy the rest of your week buddy! :-)

šŸ‘šŸ‘

Yes, definitely try this one out. You can actually ask it about your content design as well, if you want to get a feel for whether or not your content has good "visual flow". So it is not just website design, it can be other types of design (also UX and app design).

Absolutely Kyle... there is so much AI can help us with!!

Have a wonderful weekend my friend! :-)

See more comments

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core ā€œBusiness Start Upā€ Training