WRITEPATH
Duration
June 2024 - present
Tools
Figma & Google Doc
My Role
UI/UX/PD Designer
Team
Co - Designer: Gabriela Drummond
Design Lead: Valentina Antunovic
This is a real-world project, and we work with a real client. We create it based on real user's needs
Project Overview
Background
Writers often face productivity challenges during the writing process, such as difficulty organizing scattered drafts and notes, managing writing time and word count, and a desire for interaction and communication with others. While there are some similar tools available on the market that can help solve some of their problems, many writers don't want to invest too much time or money in learning and using them because those tools are not all free for all features or need complex operations. Thus, writers usually use multiple platforms simultaneously to create their work. This will affect the writer's creative efficiency and creative passion.
We need an app designed to increase writers’ productivity and consistency and boost their motivation to keep working on their projects.
Goal
Create a user-friendly application to assist the user's creative process and boost their productivity and consistency.
Scope
Deadline: There is currently no deadline for this project.
Technology: React, PWA Framework.
Key features: Would be to have a first version with the main features. such as File management, a word processor, a writing timer, viewing productivity data, setting writing goals, and showing the activity of other users.
Discover stage
Research Goal Setting & Realization
After a meeting with the client, we set a Research goal.
1. Understand the functionality and research competitor solutions.
2. Understand the target user's goals and needs.
3. Identify problems or pain points that affect user productivity.
Goal 1: Understand the functionality and research competitor solutions:
After meeting with the client, we determined the product direction and are ready to start research in this field, which is completely new to me. So, I read literature to understand the intention behind each feature and how it meets user needs. At the same time, we look for highly rated, well-reviewed, or newly released products to study how they address user problems.
Considering these questions and the scope and requirements, we explored a range of direct, indirect, and similarly functional products.
We imagined myself as a "user" with a novel idea, ready to dive into writing. We even watched several novel-writing tutorial videos in my spare time and tested various products individually. This is the fun part of being a UX designer—it's like "transforming" into the user.
Secondary Research + Self Experience
After secondary research and combining my own experience with user feedback, I summarized the advantages and disadvantages of each product solution based on the client’s requirements. This will support the design in the future steps.
Summary advantages
-
Flexible chapter organization
-
Document management
-
User-friendly interface design should consider mental models
-
Backups and word count tracking
-
Simple timer
-
Distraction-free mode should be simple and clean
-
Data visualization
-
Effective emotional design
-
Templates or customizable formats
-
Collaboration features
-
Free, efficient, and fully meets writing needs.
Summary disadvantages
-
Steep learning curve
-
Icons are unclear
-
Lacks the ability to upload images
-
Can't view the entire manuscript at once;
-
Lacks an Android app, limiting non-iOS users
-
Limited templates
-
Export Formatting
Goal 2: Understand the target user's goals and needs:
Primary Research
After we accumulated enough research content and self-use experience, we prepared an interview plan and questions for the user interview, verified my ideas in the interview, and explored new ideas of users
Goal 3: Identify problems or pain points that affect user productivity:
Affinity Map
Organized the interview content and, combined with the conclusions from previous research, created an affinity map.
We divide user feedback into two categories: specific functions and their attitudes. The purpose of this categorization is to understand their opinions on each function better and identify their needs.
Synthesis
We primarily use qualitative data. Based on all the research mentioned above, the difficulties faced by users can be summarized as follows:
Professional & Ease of use
Users want an app like Scrivener, but find it too difficult to use.
Put Everything Together
Users want to avoid multi-platform switching and improve work efficiency
Increase Productivity
User feels like staying productive throughout the writing process is important when they facing a deadline.
Word Count
Writers need to meet the word count requirement for their clients.
Text Loss Anxiety
Sometimes, users worry that they can't save what they've just written
Chapter-by-Chapter
Writers need tools to organize and compose their work incrementally, allowing them to structure articles by chapters.
Reference Document
Sometimes, users need to look at other reference documents while writing
Social needs and sharing
Looking for attending writing event and share ideas with others
Define stage
Goals & Needs → Design Decisions
Based on the synthesis derived from the research steps and the discussions with the client, we have identified the user‘s goal & need and developed preliminary design decisions.
Because the user wants..
So the design should have..
Professional & Ease of use
Users want an app like Scrivener, but find it too difficult to use.
Put Everything Together
Users want to avoid multi-platform switching and improve work efficiency
Increase Productivity
User need a way help them stay productive throughout the writing process when they facing a deadline.
Word Count
Writers need to meet the word count requirement for their clients.
Text loss anxiety
Sometimes users worry that they can't save what they've just written
Chapter-by-Chapter
Writers need tools to organize and compose their work incrementally, allowing them to structure articles by chapters.
Reference Document
Sometimes users need to look at other reference documents while writing
Social needs and sharing
Looking for attending writing event and share ideas with others
A comprehensive Writing Platform
The design needs to create a comprehensive writing platform
Useful features and User-Friendly App
The design needs to focus on combining essential features and keep user-friendly
A Productivity Tools
The design needs to provide a tool to help writers stay productive throughout the writing process.
Real-Time Word Count Tracking
The design needs to provide a real-time word count tracking to user
Reminder or Automated Real-Time Save
The design needs to include a method to verify that work is saved in real-time or remind them to save.
Chapter-by-Chapter
The design needs to let user customize their article chapter-by-chapter and help writers structure their articles effectively.
Reference and writing area in one screen
The design needs to allow the user to display or switch between writing and reference on the same screen
Community for communication
The design needs to include a community session.
Persona
UX designer needs to "transform" into the user. Since none of us are "writers," we created a user persona based on the prompts from the requirements and the actual interview subjects to better understand the user.
We incorporated the issues identified during the discovery phase and user insights into the personas' "Frustrations" and "Goals."
❗️
The reason we have only one persona is the limitations in the number of subjects and groups we interviewed, so we had to design using the resources available. If new features are needed in the future or if we can reach a larger target audience, we will create additional personas and analyze their user journeys to guide a more precise design.
Based on persona and design decisions, we further narrowed down the scope of our research, which led us to define the problem statement.
Problem Statements
From the user's perspective, they mainly face the following types of issues when trying to accomplish their goals:
1. File organization problems;
2. Word count limits or deadline issues;
3. Communication and sharing.
After all, these pain points almost always affect user productivity, so we created a "How might we" sentence to better address these challenges.
“How might we develop an app that helps writers integrate all possible functions into one place to improve focus and productivity?”
Develop stage
Brainstorming
To make sure we consider all the features and improvements in an organized way, we decided to use a User Journey Map for brainstorming. We first created the map using the writing steps shared by users in our previous research and added the goals and frustrations mentioned in the persona.
Then, we went through each step to brainstorm possible opportunities to ensure no pain points were missed and to consider all aspects. Like this:
Information Architecture
After the brainstorming session, we grouped the sticky notes, which represented the potential features of the future app. However, this process often leads to the inclusion of unnecessary features, so we needed to refine our requirements. We based this refinement on three key points:
1. Problem Statement,
2. Technical Criteria
3. Design Decisions.
The following information architecture is the rest of our optimized functionality. The benefit of organizing information this way is that when you design the interface, you will have a clear understanding of which features should be present on each screen.
Delivery stage
As shown in the diagram above, this is our design process, but here I would like to first present our approach to building the design system.
Design System
In the prototyping phase, we first sketched rough wireframes on paper based on the above information architecture. Then, we directly proceeded to create a low-fidelity prototype. After completing the first round of testing, we moved on to creating a mid-fidelity prototype. At the same time, we also began preparing the design system to ensure consistency.
Colour Palette
We divided the color palette into primary colors, text colors, and colors representing specific states.
Typography
We generally follow the 4px rule in font design, but to meet practical readability needs, I have made adjustments and optimizations for some smaller auxiliary text.
We extracted common elements such as buttons, selectors, and lists from the mid-fi design and categorized them into basic and system components. Drawing inspiration from Bubble and Microsoft's design systems, we created our own design system.
Basic Components
When building basic components, we focused on consistency, simplicity, and accessibility. At the same time, considering the handover process, we prepared a developer handover document for the components. Below is an example using the button component.
System Components
Based on the creation of basic components, we have build some system components according to the requirements, such as this list.
Prototype
During the prototyping process, we continued to follow the iterative double diamond model, constantly revisiting the conclusions drawn during the Discover and Define phases. Here, I will explain how I designed and iterated the prototype.
Based on the information architecture, we created five sessions: Writing, Goal, Timer, Community, and Profile.
Writing
“Writing section” is primarily used for users to capture inspiration and edit articles, allowing them to store all their ideas in one place.
Goal
The "Goal-setting section" allows users to set their objectives.
Community
"Community section" allows users to view other writing activities and interact with other users.
Timer
"Pomodoro timer" tracks time for focused tasks.
Profile
"Profile" displays user information and statistics all data generated in the writing, goal setting, and focus sections
Writing - file management
Because..
1.User said:
So..
1.Information Architecture
2.Wireframe
1. I'm writing at home, in cafes and transports. have so many apps is complicated. if I forgot, I don't know to update the last version of my text at home and that I left home without it. I cannot keep writing, which is really complicated.
2. Having to search through my computer files when I need information about one of my characters, opening a new web page when I need to look up information, a definition, etc.
2.Design decisions
3.User's used software & Mental Model
I thought that To create a new design that aligned with the user's mental model was the most conservative form of user-friendly design, and then optimizing innovation on top of that.
3.Mid-fi prototype
4. Problems found in User testing & Cognitive Walkthrough
-
Users can not find the "Create new" feature
-
“‘Blank folder’ and ‘project’ stay together can be confusing.”
After Iteration..
-
‘Blank folder’ and ‘project’ stay together can be confusing.------I clarified the function of each. Now, on this page, users can only choose to create a "Project" .
-
Users can not find the "Create new" feature.----I enlarged the button.
Related user journey
Writing - word processor
Because..
So..
1.Design Decision
2.User's used software & Mental Model
1.Information Architecture
2.Wireframe
3.Mid-fi prototype
3.Technical limitation & Client Requirement
Since the client mentioned a minimalist style similar to Notion, I decided to go with a conservative design to keep development costs in mind.
4. Problems found in User testing & Cognitive Walkthrough
-
Users don't always need to see basic information about a file. except word count.
-
Users don't know how to start writing when they enter the project
After Iteration..
-
Users don't know how to start writing when they enter the project------I make a Guideline at the begining
-
Users don't always need to see basic information about a file. except word count. ---- I put it inside the menu.
Related user journey
Writing - Focus mode
Because..
So..
1. Client Requirement
1.Information Architecture
Users are expected to count their time and calculate their writing speed. Allows the user to start a Write session timer. Then, when the user stops, the app will pop up a window for the user to enter their word count.
After discussions with the client, we decided to split the timer feature into two parts: one integrated directly into the word processor and another as a standalone timer.
2.Mid-fi prototype
2.Design Decision
3. Problems found in Congitive walk through
-
In the mid-fidelity prototype, users receive a prompt to log their time as soon as they begin writing, and when they start to write, any writing tasks are automatically marked as complete. This increases the user journey.
After Iteration..
-
Time is recorded only when users enter Focus Mode, as this approach ensures that writing speed calculations accurately reflect their focused work.
Goal - Goal Create
Because..
1.Client Requirement
Requires a goal-setting feature, and can track the number of words written, and the time spent writing
2.Design Decision
So..
1.Information Architecture
2.Wireframe
3.Used software & Mental Model
3.Mid-fi prototype
4.SMART Goal Setting Theory
4. User testing & Cognitive Walkthrough
Specific
Goals should be clear and specific enough that they are easy to understand
Measurable
Setting metrics will help you determine if your goals are being achieved. So need to set specific numbers.
Achievable
Goals should be achievable, challenging, but not too unrealistic
Relevant
Goals should be linked to the long-term goals of the individual or the overall strategy of the organization
Time-bound
Goals should have a clear time frame to ensure that they are completed within a specific time frame
In the beginning, I divided the goal setting into 4 categories based on potential user needs: general goal, focus goal, project goal, and word count.
-
Users experienced difficulty in making choices. They were unsure how to set their goals and did not understand what each type of goal represented.
After Iteration..
I have reorganized the information architecture for the three goals. From the diagram, it can be seen that the gray sections represent the content that is shared and required across all goals, while the red sections represent the core content of each goal, and the blue sections indicate optional elements. Therefore, since the word count goal, project goal, and general goal are essentially the same, they can be combined into a single goal using the same page, which will reduce the user's decision-making effort.
Goal - Goal Display
Because..
So..
1.Design Decision
2.Mental Model
1.Information Architecture
3.Mid-fi prototype
2.Wireframe
4. User testing & Cognitive Walkthrough
Issue: Confusion Between “Task” and “Goal”
-
In terms of goal setting, typical applications usually divide goals into goals and tasks. Generally, a goal represents a group of objectives, while a task serves as a subgoal of that goal. These subgoals are often repeated daily or completed within the same day. After the release of the first version of the design, users raised some questions regarding the setup of goals and tasks. Therefore, goals can be further categorized into long-term goals and today's goals.
After Iteration..
-
Goals are divided into long-term and today. Long-term refers to objectives that span more than one day.
-
Daily tasks can be created and added in long-term goals
-
Daily tasks to be completed within the day.
Timer - Pomodoro
Pomodoro
Because..
So..
1.Client Requirement
1.Information Architecture
Clint wanted a separate timer that could be timed at any time
2.Mental Model
2.Mid-fi prototype
3. User testing
-
Users are unsure how to link to the existing writing goals.
After Iteration..
-
I refined the possible statuses during the timing process; this is the current flow.
Reflection
Future Work
-
Future expansions could include adding features like ambient sounds, a quote log, achievement badges, infographic generation, and a browser extension, as well as considering integration with other systems or services.
-
We faced the issue of users not being easy to find. Inspired by our tutor, we participated in offline activities related to writing to get to know more writers
Key Takeaways
-
My biggest takeaway from this project is that I learned how to create and maintain a design system from scratch. This experience gave me much exercise in the field of design systems and brand design, which I had not been involved in before.
-
I realized the importance of nonlinear thinking in design. Instead of just focusing on linear steps, I should periodically revisit the "discovery" phase, design decisions, technical constraints, etc., throughout the process. Otherwise, it is very easy to deviate, especially in the subsequent design process.
-
In user research, it might be better to include questions about brand elements early in the design process. For example, I could ask about users' preferences for color and design style. Consulting with the customer on the color scheme early on can help ensure the brand's tone and style stay consistent.
Challenges
-
This is my first time participating in the design and development of a design system, and every aspect, from color selection to system construction, has been quite challenging. Although maintaining consistency seems straightforward in theory, I found it to be quite difficult in practice.
-
This was my first time working on a project from scratch with another designer. Throughout the process, we learned from each other, which helped me improve my communication skills and gain valuable insights into teamwork. I am also very grateful for the support she provided.
HELLO AGAIN☀️
Thank you so much for visiting my portfolio!
I'm actively looking for Product / UX design positions.