![Puredocs AI [B2B – Web App]](https://www.stefanobarilli.com/wp-content/uploads/2025/01/puredocs-cover.png)
PureDocs is an advanced web application for document management and analysis powered by Artificial Intelligence, ensuring maximum confidentiality and transparency. Its minimalist and intuitive interface allows users to open, view, and process PDF, TXT, and DOCX documents, automatically extracting and organizing key information. Every operation is tracked and explained, ensuring security and reliability. With advanced navigation features and continuous technical feedback, PureDocs provides an efficient and secure document management experience.
In this project, I worked as a Product Owner, collaborating closely with the Marketing Manager and CTO as key stakeholders. My role involved overseeing the product development lifecycle, from initial research to final implementation, ensuring the solution aligned with user needs and business objectives. Below are the key steps and their descriptions:
1. RESEARCH AND ANALYSIS
We began by conducting thorough research to understand the domain and user needs. This involved gathering data through interviews, surveys, and industry insights, providing a foundation for the subsequent design phases.
2. DEVELOPING PERSONAS AND MAPPING USER JOURNEY
Using the insights gathered during research, we created detailed personas to represent our target users. These personas were instrumental in mapping user journeys, highlighting pain points and opportunities for improving workflows.
3. CREATING INITIAL WIREFRAME
With a clear understanding of user requirements, we designed low-fidelity wireframes to visualize the app’s structure and functionality. These wireframes served as a blueprint for the product, ensuring alignment with stakeholder expectations.
4. REFINING THE FINAL UI
After reviewing and iterating on the wireframes, we developed the high-fidelity UI designs. The final interface combined a clean, intuitive layout with functionality tailored to user needs, ensuring an engaging and efficient experience.
5. USER TESTING WITH JUSTICE MATTER EXPERTS
To validate the usability and practicality of the design, we organized structured testing sessions with Justice professionals, who represented key end-users of the application. These sessions simulated real-world scenarios, allowing participants to navigate the app, complete tasks, and interact with its features as they would in their daily workflows.
One example is Roberta, a lawyer specializing in criminal law, who participated in the testing. Roberta was tasked with using the application to search for case documents, organize evidence, and generate a summary report for a trial. During the session, Roberta provided valuable feedback about the search functionality, noting that while it was powerful, the filters needed to be more intuitive to save time. She also identified an opportunity to improve the organization of evidence by allowing multi-level categorization, which better reflected how cases were structured in her practice.
This feedback revealed specific areas of friction and informed actionable improvements. We simplified the filter design to make it more user-friendly and added advanced categorization options for evidence management. By incorporating these adjustments, we ensured the application not only aligned with the needs of professionals like Roberta but also enhanced their efficiency and effectiveness in managing their workloads.
6. DEVELOPING PUREDOCS WITH REACT ASTREA DESIGN SYSTEM
During this phase, we focused on the core development of Puredocs, leveraging the React framework and the Astrea Design System. This approach ensured a consistent and scalable user experience across the application while adhering to best practices in modern web development.
Key Considerations:
- React Framework: Utilized React’s component-based architecture for efficient development, maintainability, and reusability of UI elements.
- Astrea Design System: Adhered to the Astrea Design System guidelines to create a cohesive and user-friendly interface that aligns with brand standards and accessibility best practices. We started using Astrea components from the prototyping phase in Figma, leveraging the existing design system within the Figma environment to ensure consistency and accelerate the design and development process.
- Continuous Integration/Continuous Delivery (CI/CD): Implemented CI/CD pipelines to automate the build, testing, and deployment processes, enabling faster development cycles and improved software quality.
This step emphasizes the technical aspects of the project while acknowledging the importance of a user-centered approach through the use of a well-defined design system. It also highlights the early adoption of Astrea components in the design process, emphasizing a seamless transition from design to development.
7. INCORPORATING FEEDBACK AND ITERATIVE DESIGN
Based on the test results, we refined the app further, addressing usability issues and optimizing workflows. This iterative approach ensured that the final product met user expectations and delivered tangible value.