SEO AI Writing Tool Website Wireframing Instructions

Objective

• To create wireframes for a simple and intuitive SEO AI writing tool website targeted towards marketing professionals in businesses.

Target Audience

• Business marketing professionals
• Those seeking to enhance their SEO strategies
• Those who want to efficiently produce a large volume of content
• Those looking to rewrite existing articles to improve performance
• Those who want to easily manage and post articles on WordPress

Design Principles

• Simple & Intuitive: Easy-to-understand UI that requires minimal effort to navigate
• Minimal UI: A clean look with reduced complexity in buttons and decorations
• White base + One-point color: Clean and trustworthy design
• Easy-to-read font & Ample white space: Prioritize readability

Wireframe Creation Points

Top Page

• First View:
  • Service name, catchphrase, and concise explanation
  • Image/video that conveys the benefits of the service
  • Login/Sign-up buttons (Google Account or email address)
• Main Function Introduction:
  • Concisely explain features like article creation, SEO keyword optimization, article structure suggestion, tone selection, and article rewriting
  • Visually appeal to the benefits of each function (icons, diagrams, etc.)
• Pricing Plans:
  • Clearly display plan details and prices
  • Availability of a free trial
• Testimonials:
  • Include case studies and user reviews
• FAQ:
  • Summarize frequently asked questions about the service
• Footer:
  • Links to company profile, contact information, privacy policy, and terms of service

Article Creation Page

• Input Form:
  • Input fields for target keywords, article themes, related keywords, desired word count, tone (Formal/Casual/Professional), etc.
  • Include clear descriptions and examples for each input field
• AI Article Generation:
  • Area to display the generated article
  • Allow for editing, rewriting, and restructuring of the article
• SEO Keyword Optimization:
  • Display keyword frequency, related keyword suggestions, etc.
• Article Preview:
  • Preview display in WordPress-oriented HTML/Markdown format
• Download/Post:
  • Button to copy and paste directly to WordPress
  • Button to download in HTML/Markdown format

Other Pages

• Login/Sign-up page
• Pricing plan page
• Testimonials page
• FAQ page
• Contact page

Screen Transition Diagram

• Clearly illustrate the transitions between each page

Additional Notes

• Primarily focus on creating wireframes for main pages (top page, article creation page, etc.)
• Prioritize the placement of elements, size, and information design on each page.
• Maintain awareness of a simple and intuitive UI/UX.
• Refer to UI designs of relevant websites and apps for inspiration.

Deliverables

• Wireframes (PDF or image files)
• Screen transition diagram (PDF or image files)

Others

• If you have any questions regarding wireframe creation, please feel free to contact us.

Please create wireframes for the SEO AI writing tool website based on the above instructions.