The client's initial request was to design a landing page featuring a PDF uploader. Users would upload files, followed by proprietary data processing and financial information extraction. This extracted data would then be elegantly presented on a separate page. Alongside this, users needed the convenience of exporting received data, viewing and managing uploaded files. The project's scope also included the implementation of commercial plans and user limits.
I started my research by carefully analyzing the competition. I looked into similar digital services like PDF processing sites, AI-based solutions, and platforms that allow you to interact with PDFs. Even though there are many websites that offer PDF uploads, our product concept goes beyond just converting PDFs.
My approach heavily relied on Object-Oriented User Experience (OOUX). By breaking the page into its fundamental objects, we could see what properties and data arrays play a crucial part in the whole site architecture.
There were multiple sessions with the stakeholder, developers and machine learning experts to discuss all the functionalities and possibilities of the technology we wanted to implement. Using object-oriented UX I managed to identify main objects, their inputs and outputs, connections between pages, file formats etc. With all the necessary information I could start wireframing basic user flows.
At this stage, the core components began taking form. The process involved sketching rough designs, rigorous prototyping, thorough testing, and meticulous feedback collection. This iterative process culminated in refined high-fidelity pages and components, including:
Multiple Uploading Options: Our uploader provides three ways to add files: drag and drop, selecting files from your device, or using a link. We aimed to ensure user clarity and address potential errors by offering informative guidance.
.png)
File Upload and Processing Status: Once the file is successfully added, during the uploading and processing, it could take some time for the model to analyse all the data. An effective approach involves introducing stages or processing steps along with a progress bar featuring numeric indicators. According to research, users are generally patient for around 22.6 seconds if they can see a progress bar. Consequently, we've integrated this feature into our design.
Progress modal showcasing the stages of processing with a percentage counter, making users more tolerable of long waiting periods
Sharing and User Permissions: As the website operates on a subscription model, we had to strategize which features would be accessible to different types of users. Here's an illustration of how user sharing might function in the initial release.
.png)
We ultimately opted for a dark mode as our final style direction. This choice aligns with the product's futuristic outlook and service. The dark mode design is applied to various aspects, including the landing page, extracted files display, the "All Files" page, and the primary modals.
.png)
My design process followed the traditional double-diamond approach. The research phase was particularly pivotal and time-intensive. During this stage, the Object-Oriented User Experience (OOUX) method played a vital role in transforming a concise client request into a comprehensive system. This approach made it effortless to communicate the system's intricacies to all team members, involving designers, developers, product managers, and QAs.
.png)