top of page
大图23.png

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.

​​

Design Process

We used the Double Diamond design model as a reference to plan the design process. The picture on the right shows my thought process for deriving the solution.

中间图1.png

Discover stage

Screenshot 2024-10-12 at 11.28.11.png

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:

chatu9.png
Professional & Ease of use

Users want an app like Scrivener, but find it too difficult to use.

chumo8.png
Put Everything Together

Users want to avoid multi-platform switching and improve work efficiency

qidong5.png
Increase Productivity

User feels like staying productive throughout the writing process is important when they facing a deadline.

mima7.png
Word Count

Writers need to meet the word count requirement for their clients.

ditu4.png
Text Loss Anxiety

Sometimes, users worry that they can't save what they've just written

wenjianjia3.png
Chapter-by-Chapter

Writers need tools to organize and compose their work incrementally, allowing them to structure articles by chapters.

liebiao2.png
Reference Document

Sometimes, users need to look at other reference documents while writing 

goutong 1.png
Social needs and sharing

Looking for attending writing event and share ideas with others

Define stage

Screenshot 2024-10-12 at 11.34.12.png

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..

chatu9.png
Professional & Ease of use

Users want an app like Scrivener, but find it too difficult to use.

chumo8.png
Put Everything Together

Users want to avoid multi-platform switching and improve work efficiency

qidong5.png
Increase Productivity

User need a way help them stay productive throughout the writing process when they facing a deadline.

mima7.png
Word Count

Writers need to meet the word count requirement for their clients.

ditu4.png
Text loss anxiety

Sometimes users worry that they can't save what they've just written

wenjianjia3.png
Chapter-by-Chapter

Writers need tools to organize and compose their work incrementally, allowing them to structure articles by chapters.

liebiao2.png
Reference Document

Sometimes users need to look at other reference documents while writing

goutong 1.png
Social needs and sharing

Looking for attending writing event and share ideas with others

icon-test_1.png
A comprehensive Writing Platform

The design needs to create a comprehensive writing platform

icon-test_2.png
Useful features and User-Friendly App

The design needs to focus on combining essential features and keep user-friendly

icon-test_3.png
A Productivity Tools

The design needs to provide a tool to help writers stay productive throughout the writing process.

icon-test 4.png
Real-Time Word Count Tracking

The design needs to provide a real-time word count tracking to user

icon-test 10.png
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.

icon-test 11.png
Chapter-by-Chapter

The design needs to let user customize their article chapter-by-chapter and help writers structure their articles effectively.

icon-test 12.png
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

icon-test 13.png
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."

User Persona12.png
​❗️

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

Screenshot 2024-10-12 at 11.31.36.png

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

Screenshot 2024-10-12 at 11.31.50.png

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.

Frame 1010104665.png

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.

Frame 1010104653.png

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.

Screenshot 2024-12-17 at 14.51.04.png
Screenshot 2024-12-17 at 14.56.21.png
Screenshot 2024-12-17 at 14.58.02.png

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.

Screenshot 2024-10-20 at 21.53.26.png
Frame 1116.png
Goal

The "Goal-setting section" allows users to set their objectives.

Screenshot 2024-10-27 at 13.58.02.png
Frameqe 222.png
Community

"Community section" allows users to view other writing activities and interact with other users.

Screenshot 2024-10-20 at 21.50.59.png
Frameqe 3.png
Timer

"Pomodoro timer" tracks time for focused tasks.

Screenshot 2024-10-20 at 21.54.04.png
Frrame e4.png
Profile

"Profile" displays user information and statistics all data generated in the writing, goal setting, and focus sections

Screenshot 2024-10-20 at 22.19.13.png
Frame 77.png

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
Screenshot 2024-11-03 at 23.30.25.png
3.User's used software & Mental Model
IMG_6768.PNG
Screenshot 2024-10-15 at 20.59.33.png
Screenshot 2024-10-15 at 21.03.12.png

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.

Screenshot 2024-10-15 at 21.20.24.png
未命名作品 12_edited.jpg
3.Mid-fi prototype
14.png
10044.png
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..

Frame 10101048.png
  • ​‘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
Screenshot 2024-11-04 at 00.06.48.png
2.User's used software & Mental Model
1.Information Architecture
Screenshot 2024-10-16 at 00.38.49.png
2.Wireframe
未命名作品 12_edited.jpg
3.Mid-fi prototype
10205.png
Screenshot 2024-10-15 at 23.42.03.png
Screenshot 2024-10-15 at 23.48.20.png
10268.png
10039.png
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
Frame 1010104588.png
  • Users don't always need to see basic information about a file. except word count.  ---- I put it inside the menu.
Frame 1010104587.png
Note33.png

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.

Screenshot 2024-10-12 at 14.30_edited.jpg
2.Mid-fi prototype
10023.png
10039.png
10042.png
2.Design Decision
Screenshot 2024-11-04 at 17.07.29.png
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..

Frame 1010104546.png
Note231.png
  • 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
Screenshot 2024-11-05 at 14.27_edited.jp

So..

1.Information Architecture
2.Wireframe
未命名作品 12_edited.jpg
Screenshot 2024-10-18 at 00.42_edited.jp
3.Used software & Mental Model
3.Mid-fi prototype
4.SMART Goal Setting Theory
Screenshot 2024-10-18 at 00.36.13.png
Screenshot 2024-10-18 at 00.34.26.png
Screenshot 2024-10-18 at 00.40.04.png
10266.png
10267.png
10262.png
10244.png
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..

Screenshot 2024-11-05 at 14.51.36.png
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.
Screenshot 2024-11-05 at 14.52.36.png
Frame 1010104590.png

Goal - Goal Display

Because.. 

So..

1.Design Decision
Screenshot 2024-11-05 at 14.27_edited.jp
2.Mental Model
1.Information Architecture
Screenshot 2024-10-18 at 00.42_edited.jp
3.Mid-fi prototype
2.Wireframe
未命名作品 12_edited.jpg
10079.png
264.png
Screenshot 2024-11-11 at 12.31.00.png
IMG_6998.PNG
Screenshot 2024-10-23 at 12.17.22.png
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..

Screenshot 2024-11-05 at 14.52.36.png
  • 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
Frame 1010104568.png
Screenshot 2024-11-05 at 14.46.20.png
  • Daily tasks to be completed within the day.
Frame 1010104564.png

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
Screenshot 2024-10-12 at 14.30_edited.jpg
2.Mid-fi prototype
10028.png
3. User testing
  • Users are unsure how to link to the existing writing goals.

Screenshot 2024-11-05 at 16.06.15.png
Screenshot 2024-11-05 at 16.10.50.png
IMG_7448.PNG

After Iteration..

Frame 1010104405.png
Frame 1010104594.png
Not321e.png
Noteewe.png
  • I refined the possible statuses during the timing process; this is the current flow.
Frame 1010104598.png

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.

IMG_4808.png

HELLO AGAIN☀️

Thank you so much for visiting my portfolio!

I'm actively looking for Product / UX design positions.​​​

bottom of page