Research
Foundations
To kick off the foundational research, I first aimed to understand the scope and purpose of the tool. It involved answering key questions such as what I was going to build, why and when someone would use the product, and how it could help simplify their daily routine.
.png)
After answering the preliminary questions, my focus shifted towards understanding the needs and pain points of the target user – someone with numerous tasks, both business and personal, who desires to prioritize them effectively. To gain deeper insights, I conducted user interviews with five individuals from my network, ensuring a level of generalizability in the results.
To prepare the interview script, I kept the questions open-ended, allowing users to elaborate on their personal planning and uncover their pain points. It was important to remain unbiased and open-minded throughout the interviews, to better identify areas for improvement and unmet needs.
The interviews were conducted through Zoom, and the participants shared their experiences and feelings about managing their tasks and goals. Through these conversations, I gained valuable insights into how users approach planning and organizing their personal priorities.
User persona
I found that some people were using conventional project management tools, while others were writing down their tasks either to phone notes or paper notebooks. Some users also responded they keep everything in their head, and it creates a lot of anxiety. All this resulted in a mess of priorities, with personal tasks often being postponed or forgotten.
The interviewees expressed a need for a simple tool that would allow them to have a better oversight of their personal priorities, which is also a user-friendly, and not overly complex.
Based on these insights, I created user personas to represent different types of users and their goals, which helped to guide my design decisions.
I also defined the key features and functionality that the product should provide, such as a simple to-do list and deadline reminders. I assumed that an intuitive format would be ideal for task planning, especially if adding such features as categories and calendar.
Competitive audit
After gaining a thorough understanding of the user's goals and pain points, I conducted a competitive audit to analyze how existing solutions address personal task planning. For this audit, I chose two popular corporate planning tools, and one work-in-progress to-do list app designed for personal planning.
.png)
Upon analyzing these solutions, it became apparent that the first two are primarily catered to Kanban planning, which may not be the best fit for personal task planning. In contrast, the third app featured a well-designed to-do list, but lacked essential features such as deadline tracking and categorization on the dashboard.
In addition, I carefully reviewed user feedback for each of the tools analyzed, taking note of the areas where they fell short and the features that users found most helpful. I used this information to inform the design and development of the product.
Ideation
My proposal
As a result of the competitive audit, I identified gaps in the market for a more intuitive experience. To address it, I crafted high-level functions of the future app, consisted of the four features: dashboard, calendar, task card, and notifications.
.png)
I proposed a quick task add for the dashboard and calendar screens, as well as categorization and deadlines tracking.
Architecture
Prior to beginning the design phase, I created a product architecture based on the insights gathered from previous stages. It included user flows for main scenario and edge cases along with sitemap.
Creating a site map, I designed it to ensure that users could effortlessly locate the information they needed, such as their tasks, categories, and deadlines, without any confusion or complications.
Moodboard
To further explore the product's possible visual direction, I utilized a mood board. I identified emotions and associations related to the product, and generated preliminary ideas for typography, colors, and graphic elements.
Sketching
Moving further, I sketched out initial concepts of the product on paper and translated them into digital wireframes. This iterative process allowed me to brainstorm on which functions were essential to include and which could be removed.
.png)
.png)
Design Process
Wireframes
As part of my design process, I created wireframes with a preliminary layout of functions, which I shared with users. I gathered feedback from them, which proved to be very insightful. Three out of five participants felt that the task card was too small, while two others suggested that functional elements such as attachments and lists should be separate from the tags.
Incorporating their insights, I made several corrections and refined the wireframes. For example, I increased the card spacing to result in a bigger size of the element. Additionally, after testing suggestions to place tags in different areas of the task card, I selected the option that emphasized the category most effectively.
Once the overall layout was established, I focused on designing atomic elements, incorporating grids and spacing to ensure consistency and an intuitive user experience.
By soliciting user feedback early on, I was able to save the project budget and identify potential issues and opportunities for improvement before committing to the final design.
Mockups
In designing the visual elements for P.Planning, my goal was to trigger specific emotions and associations that align with the product's properties and mood. I wanted to create a design that was easy-to-use, friendly and organized, while inspiring peace of mind and discipline. To achieve this, I selected a color scheme that conveys simplicity and clarity while helps users quickly identify and differentiate between their tasks.
I used white as the primary background color for dashboard elements and black as the typography color. I added purple as an accent color to convey a sense of safety and prosperity. It is also a primary color behind the brand. The tags needed to be easily recognizable and memorable, so I chose a vibrant color palette for them that would stand out.
.svg)
For typography, I opted for the Helvetica family because of its neutrality and practicality which works well with SAAS products.
Regarding graphic forms, I decided to use rectangular forms with slightly rounded corners as they create a mood of organization and structure while remaining user-friendly and approachable. I also added drop shadows to create an airy and clean design that aligns with P.Planning's mood and identity.
High-fidelity design
The final results of the P.Planning project are showcased through animated mockups. These mocks are accompanied by responsive design, which ensures that the interface remains user-friendly and accessible across different devices and screen sizes.
UI kit
Throughout developing the visual style of P.Planning, I created a UI kit that included typography, colors, atomic elements and components the product. Using it as a tool not only helped me maintain consistency across my designs, but also kept my workflow organized and streamlined.
.png)
.png)
Reflections & Future Steps
During the process of designing P. Planning, I gained valuable experience and insights. One of the most significant lessons I learned was the importance of confident decision making in design. In the past, I struggled with asserting my design decisions, but this time, I made a conscious effort to stand by my product vision. This allowed me to confidently choose the solution with tags, which ultimately proved to be the most appropriate one for the project.
As with any product, there is always room for improvement and refinement. The next steps for P.Planning include conducting user testing to validate the design decisions, measuring success metrics to ensure the product is meeting its goals. I look forward to seeing how P.Planning evolves and grows in the future.