Genuine Writing Partner - The Beginning
OVERVIEW
This project was my personal exploration into crafting an AI-related product. The project helps writers create various types of writing with AI. AI acts as a professional writing consultant.
ROLE
Primarily as a Product Designer. But, I whipped up the entire app solo to dive into the coding world and get the hang of it.
LINK TO PROJECT
https://ai.muammariz.com/gwp-ai
Introduction
“Very efficient, lots of time saved. I don't need to switch tabs to communicate with AI when I write a lot of things. But is it possible if…”
This is one of the unimaginable responses during the testing process of this project. This simple project was created to assist article writers, journalists, or editors in their work processes.
By introducing a straightforward recipe prompt and ensuring a smooth flow, valid ideas can be refined further. This project aims to help users navigate the workflow effortlessly, as if they have a personal assistant within the document, boosting productivity.
Problem Digging
One day, while talking with writer and editor about their profession, they shared a common issue. They feel that AI can be really helpful. But, there are certain things in writing apps that they find difficult to control with the built-in AI features.
Such as; Responses often miss the mark and altering the writing structure due to the document editor's AI feature. They find extra work unnecessary, as they prefer crafting with their own styles. Plus, there's a worry about copyright. They think written work gets its magic and character when it comes straight from the author's heart.
In the end, they went for ChatGPT from OpenAI because it allowed them to customize prompts without messing with their writing styles.
However, a new problem popped up -- they have to keep switching between the document and ChatGPT tabs, making it a bit distracting while they write.
Scopping
Many helpful features, like continuous writing, grammar checks, and sentence rephrasing, can be implemented in an AI tool for writers.
In this project, I'm focusing on seamless user interaction with AI, through chat feature, without tab switching. Despite our initial narrow scope, we aim to create an easily expandable and adaptable solution for smooth transitions between features. Therefore, my focus encompasses on:
1. Enabling users to interact with AI seamlessly through the chat feature without tab switching.
2. Crafting AI prompts that effectively meet the needs of users as writers.
Initial Flow and Wireframe
In this simple flow, I have placed an action button to bring up the Chat Room directly in each document. With this way, users can communicate directly with AI without switching tabs, allowing them to stay focused on the same document.
Action buttons are strategically placed for easy access, and the bottom navigation bar is fixed at the document's bottom.
Chat Room also appear without interrupting the document. The expectation is that AI will not disrupt the structure of the document created by the user.
What is the main goal of this flow? We're primarily assessing users' success in finding the chatroom and the prompts' effectiveness in addressing authorship-related questions.
Prompt Crafting
As it operates in a chat-like manner, we designate AI as an interactive partner while writing. Necessitating several quick prerequisites — its identity, purpose, and manner of behaving.
• Identity:
AI functions as a professional writing consultant.
• Purpose:
Respond to every question related to the realm of writing.
• Behavior:
Be a friendly companion without being condescending. Provide guidance if there are questions that don't align with the writing context.
After breaking it down into the points mentioned earlier, a prompt will appear like this:
You are a professional writer consultant. If the question is ambigous, just answer anything about writing and make it clear. Suggest other related ideas to users if the results don't match the question. Use casual language based on what user language like we're a friend. Act as if you are chatting as friends. Include emoji for every answer.
Why is having a well-crafted prompt important?
Each API call incurs charges. If the answer context is unclear, users may persist in seeking clarification, leading to increased charges.
Inappropriate AI responses can cause problems for users and harm business outcomes. That's why using the method I employ to create prompts is expected to have a positive impact, benefiting both users and the business.
Initial Design
The design for this prototype is kept as simple as possible, prioritizing heuristics and consistency. We are disregarding branding and complicated UI exploration, focusing instead on flow goals.
This approach ensures a faster prototype processing process, facilitating quicker iteration of obtained data.
Development Phase
To enhance development efficiency, I typically use the studied framework stack while working on this project independently. In general, this includes Typescript, NextJs, Radix with shadcn/ui, Tailwind, and a touch of Framer Motion to enhance interaction.
Throughout the development process, this framework facilitated the rapid implementation of designs aligned with those in Figma. The atomic structure system in design, as it turns out, aided me in coding to achieve consistency and heuristics principles.
Test Preparation
At first, I made a list of questions and ideas I wanted to look into. Overall, I have a few points I'd like to double-check with users. ↴
1. How much time does it take for a user to create a new document when utilizing the AI feature within the document?
2. How quickly can users locate the button to access the Chatroom?
3. Does the AI response meet the user's writing needs?
4. Can users easily understand the document structure based on their experience with other writing apps?
5. Can users easily grasp the functions in the Chat Room?
6. Are there any other desired goals or AI-related writing features that could assist users?
Then I carried out testing on 3 participants with writing backgrounds. ↴
R
A freelance article writer who prioritizes creating SEO-friendly content.
O
An editor and curator on an online novel platform.
D
A product designer who enjoys writing on Medium about career and design.
Test Result
I'll use the test results for evaluation and iteration. Being online together with user helps me keep an eye on with them during testing, making it feel more human. Of course, I'll use a few tricks to ensure users stay objective.
In short, here's a quick look at how the test went :
~1 Minute
The average time participants need to create a new document.
~3 Minutes
Time to participants find Chat Room
~2 Minutes
Average time for the participant to understand how to interact with AI for the first time.
In the results, all participants were satisfied with the response from AI.
On average, participants use AI to look for information or ideas in writing.
2/3 Participants felt unfamiliar with the “chat bubble” structure for receiving AI responses
All participants needs a function to stop AI responses deemed inappropriate, for the sake of time efficiency.
First Iteration
After reviewing the test results, I aimed to reassess and improve small aspects to make it more user-friendly. As a result, I've identified several key points that will be implemented, including:
The outlined flow in the image is designed and in the development stage while I am in my vacant time.
Key Takeways
This project has been a valuable learning experience for me. I gained insights into AI knowledge, the art of creating effective prompts, also discovered the efficiency of the prototyping process, enabling the delivery of essential features from design to development.
Additionally, I acquired knowledge about the business aspects of AI products.
Speaking of business, is it possible to monetize this project? All participants are willing to subscribe, as they believe that AI has simplified their workflow.
Through this project, I have learned that validating assumptions is crucial in product development. Meeting both user and business needs can be achieved with a simple prototype, which is certainly scalable over time.
