ArkiTask
Designing an AI SaaS tool aimed at simplifying project planning
Secured early-stage funding for a Bay Area startup
BACKGROUND
In early 2023, I was part of a small team of 2 designers and 2 engineers to build ArkiTask, a new productivity platform tool from 0-1. We worked on this project for 3 months, developing an MVP and bringing the product to life. My involvement in this project was largely focused on the product ideation and creation of the visual design and high-fidelity wireframes, mockups, and prototypes of the core project planning flow/feature.
ABOUT THE PRODUCT
The newly founded Bay Area startup wants to support organizations and teams to save time on project planning with AI-powered templates and cost estimates. The tool aims to serve as an intelligent companion, enabling businesses to make smarter decisions regarding task allocation and task management.
CHALLENGE
Designing a product that didn’t exist before while also being feasible to build and launch within strict time and technical constraints.
CLIENT
MY ROLE
UX/UI, Visual Design, Prototyping
TEAM
Me (Product Designer)
Alejandro Alonso (Designer)
Julien Hoacock (Engineer)
Anish Khazane (Engineer)
TIMELINE
1.5 months
PROBLEM STATEMENT
Organizations are facing challenges with managing their time effectively due to poorly written, estimated, and missing tasks.
THE SOLUTION
Use company historical data from similar completed projects to inform and streamline the planning process.
By utilizing ArkiTask's data-first approach to project planning, users can effectively unlock the value of their organizational planning data and streamline the project planning process ultimately reducing the time it takes to compose projects.
View Full Prototype →
Demo of the ArkiTask project creation flow
INITIATE
Understanding the Product
Because of the nature of the project, I primarily relied on lengthy conversations with the start-up founder and subject matter experts to draw out the information I needed in order to put myself in the users’ shoes and bring the product to life.
Initially, the founder, Julien provided me with some rough sketches to convey his initial vision for the product. However, after several weeks of ideation and iteration, the final design and functionality evolved significantly from its initial concept.
Working with Constraints
Since our client had planned to pitch this product to potential customers and get funding to develop the product, understanding the constraints I would be designing under was important.
Time Constraints: We only had two months to build the product, so we wanted to make sure that all main problems were addressed in our proposed solution.
Technical Constraints: The client had limitations on their current technology infrastructure, which meant we had to work within those limitations to create a feasible solution.
Planning for MVP
After gaining a deeper understanding of the product and considering the time constraints we were under, we decided to prioritize the key functionalities that were essential for building out the beta product and attracting potential investors.
Our primary focus for the MVP flow centered around the task management features, which included the ability for users to create new projects and tasks, and leverage the AI capabilities for project and task assistance as well as task estimates.
Creating User Flows
To understand how users would be navigating the product, we took a step back and created user flows that would highlight how a user could quickly create a new project for their team and add tasks leveraging their prehistoric data.
Design Challenges
INTEGRATION
How to integrate an AI tool into a productivity platform?
COMPLEXITY
With such complex functionality, how do we make the platform intuitive and easy to use?
TECHNICAL CONSTRAINTS
How do we balance design considerations with technical constraints on an early-stage product?
DESIGN
Open up early design discussions
In a first step, sketches and low-fidelity wireframes were created to establish a shared vision for the new product. Weekly meetings were also held with the client and engineers to gather feedback, identify areas for improvement, and get insight into what was technically feasible. Based on this feedback, we iterated on our designs and made revisions as needed.
Sketches from the design ideation phase
WIREFRAMES
In several iterations, the key functionalities of the product were explored and behaviors defined
We worked our way up building higher-fidelity wireframes and visual mockups on Figma.
To ensure usability, we prioritized simplicity in design and navigation, making it easy for users to find the information they need and utilize the platform's various features.
Additionally, the design aimed to communicate the capabilities of the AI system in a clear and approachable way, so users can understand and take advantage of its features.
Early wireframes of key screens
ITERATIONS
Balancing user and business goals
Initially, the client wanted users to manually input the estimated hours needed to complete a task before they can add it to their task list, with the business goal of gathering data to improve the beta product's accuracy in the future.
This process proved to be very tedious and time-consuming as users would have to take the time to select the hours needed for each task. To address this, I spoke with the client and urged more consideration for the user experience, resulting in an iteration of this product feature that better aligns with users needs and preferences.
With this new approach, users can now quickly add tasks and entire project task bundles to their task list, and modify the budgeted hours in the task details if needed.
Other changes and refinements in v2 of the Task Selection screens are annotated below:
DESIGN PIVOT
Right-side Panel View 💡
In the last week before handoff, the engineers realized they can integrate a right-side panel into the design, something we spoke about early on in the design process but was deemed unfeasible within the technical constraints at the time.
As a result, the design team was able to quickly iterate on the design and seamlessly incorporate this new feature into the final design. The newly added functionality provides several benefits such as increased efficiency and better organization for users.
Increased efficiency - users can access important information and actions quickly without having to navigate away from the current screen
Better organization - the right-side panel can be used to display additional project or task details, allowing users to better organize their project information
With the addition of the right-side panel, two screens (previously) consolidate into one single-screen view.
VISUAL DESIGN
UI Kit + Branding
Right from the start, a component library was created in Figma to easily apply changes throughout the process and to keep things highly consistent throughout the product.
When building the brand and UI for ArkiTask, the focus was on designing something that felt intuitive, simple, and aesthetically pleasing while also something that felt native and familiar to users.
Colors were used sparingly to avoid creating a visually cluttered interface and used a very limited color palette that aligns with the brand.
FINAL PRODUCT
Streamlining the project creation process ⚡
Leveraging historical data, the tool recommends which tasks users should undertake within a project, as well as provides accurate estimates of how long each task will take. With this solution, teams can streamline their project planning processes and achieve their goals more efficiently.
Turning task creation to task selection
After generating the project, ArkiTask AI will suggest similar projects from its organization’s database that may be relevant to the user's needs. Users can create new tasks from scratch or quickly add tasks from those prehistoric projects suggested.
Effortlessly integrate entire project task bundles or cherry-pick individual tasks to your task list
After selecting a suggested task, users can customize the details to their liking and receive an estimate of the time required based on their modifications.
Export to 3rd Party
Users can easily export or share their projects with a third-party task management software to streamline their workflow and collaboration process.
FINAL
Impact
A very happy client thrilled with the final design. The product was a major success as they were able to expand their customer waitlist by 2x and were able to secure the first round of funding with the help of our design.
View Full Prototype →
Mockup of the product
CONCLUSION
Lessons Learned
My experience on this project was a very valuable learning experience for me, as I learned a lot about the importance of close collaboration with engineers and thinking about the feasibility and technical constraints when designing a product. Throughout the design process of ArkiTask, I faced various challenges working within these constraints and an early-stage product. However, these limitations also presented me with opportunities to be creative and flexible in finding solutions. It was a great learning experience that pushed me to think outside the box and further develop my problem-solving skills.
Next Steps
If I were to continue working on this project, I would conduct additional user tests to gain a deeper understanding of how users engage with the current design so I could further develop this prototype and refine the UI.