ChatGPT is one of the very few products that blew my mind. I use it daily as my assistant to help me create and learn.
One of the use cases is to use ChatGPT, Claude, or any other Large Language Model to create something that you have very little knowledge about. These AI models are not experts (yet) and cannot innovate and generate new information, but they can be helpful in many ways.
The technology is still new and usually, it generates very generic answers if you don’t provide details. To utilize its power in generating a high-quality output, I don’t blindly ask it to create something with one sentence prompt.
Instead, I **examine the problem** using first principles and questioning to find key elements of the problem. Then using those key insights, I ask ChatGPT to expand and format the end result as I see fit.
I use its advantages to write faster instead of relying on it completely. You can think of it as an assistant. **The more details you provide, the more accurate and valuable is the generated output.**
## How to prompt ChatGPT to create a complete design brief
A design brief is an essential part of web design and development. It outlines the problem, the goals, and everything that relates to your expectations, brand, and preferences.
Here are **the main points that a well-crafted design brief** has to cover.
- Define the problem. Why do you need a website? What is the goal?
- Define the user profile. Who’s going to use your website?
- Define the site map: what is the website structure and what pages do you need?
- Define the spirit of the website: how does it speak with your problem/brand/audience?
- Define the budget for content, design, and development.
- Define the timeframe: when do you need the website launched?
- Define technical preferences: do you need any software preferences?
Now that I have the structure, I can fill in the information that the AI can later use to generate the design brief.
- **Problem**: My company, Acme Inc, acquired a travel blog with 100k organic visitors/month that I want to redesign and turn into a hub for travel suggestions. The current website looks very old and unorganized. It is also not mobile-friendly and unresponsive. It provides a bad user experience and while users find the content helpful, they bounce immediately. The current website is built in WordPress and I’d like to move it to Webflow.
- **User profile**: People from mid-30s to mid-50s who want to plan their vacation. However, there’s a diverse mix of people of different ages and countries. Additional research is required to analyze current analytics and define the user profile more precisely.
- **Sitemap**: My initial idea is to keep the directory, add a proper home page, and create membership accounts so that users can save destinations and come back to it later.
- **Spirit**: I see the website as modern and user-friendly where the content and destination photography are the main subjects to users’ attention.
- **Budget**: My current budget is $5000-$8000 for UX/UI design and $5000 for development.
- **Timeline**: I want to launch the new website in 2 months. I need a breakdown of how long UX, UI, and development process will take.
- **Software**: I want the design to be created in Figma. I want the website to be developed with Webflow.
With these defined points, we can now ask ChatGPT to create a design brief and add any potentially missing information.
Here’s the prompt I am going to use:
<aside>
💡
Write a comprehensive website design and development brief that covers the following points. Additionally, add information that is not covered here but adheres to best industry practices so that the design and development are based on complete information from the client side.
[Insert above key points here]
</aside>
Let's look at the unedited design brief generated by ChatGPT:
<aside>
💡
## **Website Design and Development Brief**
Acme Inc. has recently acquired a popular travel blog with significant organic traffic, boasting 100k visitors per month. Our aim is to transform the blog into a hub for travel suggestions by redesigning and redeveloping the existing site, which currently offers a poor user experience due to outdated design, disorganization, and lack of responsiveness on mobile devices. The existing website is built on WordPress, but we have made the decision to migrate it to Webflow.
## **Project Objectives**
1. Redesign the existing website to offer a modern, user-friendly experience.
2. Migrate the website from WordPress to Webflow.
3. Organize the existing content for easier navigation and enhanced user experience.
4. Introduce a membership system allowing users to save their favorite destinations.
5. Make the website mobile-friendly and responsive.
## **Scope of Work**
### **Design Phase**
1. **UX Design:** This will involve creating a new sitemap, wireframing, and user flow designs to ensure easy navigation, especially focusing on mobile users. We'll need a highly intuitive design that encourages users to explore the website and engage with its content.
2. **UI Design:** This involves developing an appealing visual identity that aligns with the brand image. We will focus on making the content and destination photographs the main subjects of user attention.
### **Development Phase**
1. **Web Development:** The site will be developed on the Webflow platform. This includes frontend development, implementing the membership feature, and ensuring mobile-responsiveness.
2. **Content Migration:** This involves migrating the existing content from WordPress to Webflow, ensuring all content is correctly formatted and organized.
3. **Testing and Launch:** Testing the site for usability, performance, and responsiveness, and debugging any issues. We will then move to launching the new website.
## **Budget**
The total budget for this project is $13000. We have allocated $5000-$8000 for UX/UI design and $5000 for development.
## **Timeline**
We are aiming to launch the website in 2 months from the commencement of the project. We suggest the following time allocation:
- UX Design: 2 weeks
- UI Design: 2 weeks
- Web Development: 3 weeks
- Content Migration: 1 week
- Testing and Debugging: 1 week
This timeline provides us with a buffer to accommodate any unforeseen circumstances or changes.
## **Desired Spirit of the Website**
We aim to design a modern and user-friendly website where content and destination photography take center stage. The overall aesthetic should reflect the excitement and wonder of travel, inviting users to explore and engage with our content.
## **User Profile**
Considering the existing traffic of 100k organic visitors per month, we will assume a diverse user profile. It would be beneficial to conduct user research or analyze website analytics to understand our audience better and cater to their needs more effectively.
## **Content Strategy**
Given the existing content is seen as helpful by users, the content strategy should focus on organizing and presenting this content in an engaging manner. Fresh content following the same standards can be created regularly, ensuring the website stays updated with the latest travel suggestions.
## **SEO Strategy**
SEO is crucial for maintaining and growing the current organic traffic. We need to ensure all migrated content retains its SEO value during the transition. Additionally, new content should follow best SEO practices.
## **Post-Launch Strategy**
We will require an effective strategy for site maintenance, updates, and user support post-launch. This might include user feedback mechanisms, a plan for handling website updates, a schedule for posting new content, and social media strategies to drive traffic.
## **Analytics and Reporting**
We need to integrate analytics tools to track user behavior and website performance, allowing us to adjust our strategies as necessary
</aside>
I think it’s not bad. The AI expanded on my points and added some missing parts.
After reading the generated brief, I realized that I missed a few things, so I am either gonna edit the initial prompt to include those points or directly edit the output.
Here’s what I forgot to add:
- Design process: I want to be aligned with the design process during the early phase so that everything is predictable regarding the layout and the aesthetics of the website.
On the other hand, I found it very helpful that ChatGPT added some missing information. I forgot to cover topics like content strategy, SEO, maintenance, and analytics.
Good job, ChatGPT!
## What’s next?
Once you are satisfied with the output, send it to the designer and ask for feedback. There might be some specific information that both you and AI didn’t add. A well-formulated design brief is an essential part of the quality of the final outcome. It’s a document that creates a certain structure for the website and also lets you evaluate the final outcome so that it fits every criterion that you set.
If you need help with formulating a design brief, send me an email to ayk@maray.ai and I’ll be happy to guide you through the process.
Sincerely,
Ayk
