Intro
Anyline
Founded in Vienna in 2013, Anyline is a global leader in optical character recognition (OCR) technology and AI-driven text recognition. Its cutting-edge technology enables real-time, server-free scanning of ID documents, meter readings, and more, powering seamless efficiency across industries like automotive, logistics, and law enforcement.
The Challenge
Anyline required a complete revamp of the entire UX for scanning ID documents, meter readings, & other similar documents.
The challenge was to create an intuitive web application that not only showcased their technology but also streamlined the user journey. With an emphasis on speed, accuracy, and ease of use, the solution had to reduce user effort and enhance performance.
My Role
As the lead UX designer, I was responsible for:
-
Conceptualizing and designing the entire web application from scratch.
-
Engineering a fully functional prototype with animations.
-
Streamlining user flows and optimizing interactions.
-
Collaborating with developers to implement the design in Next.js.
Goals
-
Redesign the user experience: Enhance the user journey for scanning and recognizing text and make it more engaging, easy-to-use
-
Improve efficiency: Streamline the process to reduce the time and clicks required for generating results, making the app 25% more efficient.
-
Create a fully functional prototype: Deliver a polished, interactive prototype with animations, providing a delightful user experience.
-
Meet demanding timelines: Ensure the project was delivered on time, with 100% client satisfaction, while adhering to the highest quality standards and a delightful user experience.
BUSINESS GOALS:
-
Drive Adoption: Create an intuitive demo to encourage exploration and integration of the Cloud API.
-
Increase Leads: Streamline user journeys to boost SDK trial requests (Anyline SDK) and contact form submissions (Anyline Contact).
-
Showcase Technology: Highlight Anyline’s OCR speed and accuracy through a responsive, polished interface.
-
Reinforce Brand Trust: Align design with Anyline’s guidelines to convey innovation and professionalism.
-
Provide Clear workflows to minimize user reliance on support.
​PROBLEM
-
Intuitive Design for Technology Showcase: Created an intuitive web application to highlight Anyline’s OCR technology, streamlining the user journey to emphasize speed, accuracy, and ease of use.
-
Cluttered Navigation: Overhauled navigation to ensure scan modes (e.g., Meter, ID, MRZ) were easily discoverable, reducing user scrolling.
-
Accessibility Compliance: Achieved WCAG 2.1 compliance while delivering a visually engaging, brand-aligned experience.
-
Tight Timeline: Delivered a fully functional prototype in 3-4 weeks, meeting demanding deadlines.
-
Iterative Feedback: Incorporated user feedback to refine usability within a fast-paced schedule.
Design Process
Conducting stakeholder interviews
-
Who are the Primary Users?
-
What are the primary goals you want this web application to achieve for your users and business?
-
What are users' current challenges or pain points with the existing solution?
What are the key use cases or scenarios this application should cater to? -
Which document types are most frequently used?
-
Which environment are they being used?
-
Are there any constraints or specific requirements I should consider? Are there technical or accessibility standards that need to be adhered to?
-
Are there any competitors or existing solutions we should benchmark against?
-
How will the product align with the brand’s identity and values?
Analyze
Analyzing Existing Workflows
To improve the user experience, it was essential to analyze the current workflows and task patterns within the application. The existing flow for scanning documents is as follows:
-
Select the Type of Document: Users begin by choosing the specific document they want to scan, such as an ID or meter reading. This step requires the user to navigate through a list or menu, which can be time-consuming if not optimized.
-
Submit: After selecting the document type, users must submit their choice. This additional step may feel redundant and could be combined or streamlined to reduce friction in the process.
-
Upload the Document: Users then upload the document they wish to scan. This step is crucial but can become cumbersome if the upload process is slow or if users need to perform multiple clicks to complete it.
-
Click Scan: Finally, users click a scan button to initiate the scanning process. This last step could be simplified to make the scanning feel more immediate and responsive.
Insights for Optimization:
The current workflow involves multiple steps that could potentially slow down the user's task completion. By analyzing these patterns, we identified opportunities to streamline the process, such as combining the "Select" and "Submit" steps into a single action or enabling automatic scanning after document upload to reduce the need for an additional click. This approach aims to make the workflow more intuitive and efficient, ultimately enhancing the overall user experience.
"If User has only 1 job, do it for them"
User Stories
The following user stories were crafted to guide the design process:​​
-
As a first-time user, I need a guided experience that helps me understand how to use the scanning feature effectively so that I can start using the application without confusion.
-
As a field technician, I want to quickly scan multiple types of documents without navigating through complex menus so that I can complete my tasks efficiently in the field.
-
As a field technician, I want a clear and intuitive document selection process so I can efficiently choose the correct type on the first attempt, ensuring smooth task completion without repetition.
Ideation
Journey Map
I have used alternative research methods and data sources to construct the journey map presented in below table.
​
-
Stakeholder Insights: Gathered feedback from stakeholders about common user complaints and questions during product demos to identify key user challenges​
-
Competitor Analysis: Examined competitor features known to enhance user engagement, considering how similar approaches could improve our user journey.
-
Internal Experience: Simulated user interactions with internal teams to collect qualitative feedback and identify potential areas for improvement.
Stage | User Action | Pain Points | Opportunities |
|---|---|---|---|
Awareness | Encounters the need to scan a document | Uncertainty about how the application works | Provide clear onboarding or tooltips for first-time users |
Decision | Chooses the document type from a list | List navigation can be time-consuming | Keeping options to minimum for quick selection. |
Engagement | Uploads the document for scanning | Multiple steps | Combine upload and scan steps for a streamlined process |
Processing | Waits for the document to be processed | Lack of real-time feedback | Add a loading indicator to keep users informed |
Result | Views the scanned results | Unclear results presentation | Make results more digestible and easily usable. |
User Flows
This simplified user flow outlines the core steps of Anyline's document scanning functionality, providing a clear overview without delving into extensive details.
"The Fewer Clicks the Better"
Design
Prototyping
The prototyping phase marked a pivotal step in transforming conceptual designs into a tangible, interactive experience. For Anyline's web application, this phase involved creating a fully functional prototype that encapsulated the enhanced user journeys, streamlined workflows, and engaging visual elements. The goal was to bring the design to life, enabling stakeholders and users to interact with and experience the new functionalities before final development.
Using Figma, I created low-fidelity wireframes to outline the structure of the screens. Once approved, I transitioned to high-fidelity prototypes, incorporating:​
-
Engaging animations to guide users intuitively.
-
Design elements that aligned with Anyline’s branding.
Optimizing Efficiency
A critical focus was on reducing the time required to generate results. By:
-
Saving redundant clicks in the user flow.
-
Simplifying interactions. I achieved a 25% improvement in efficiency, significantly enhancing the user experience.
Handoff & Collaboration
​I collaborated closely with the development team to implement the design in Next.js. Regular check-ins ensured the final product matched the envisioned prototype.​​
Key Results​
The redesigned Anyline web application delivered measurable impact across both user experience and business outcomes:
-
25% Boost in Efficiency: Streamlined workflows and fewer clicks significantly reduced user effort and task completion time.
-
Increased Engagement: A simpler, faster, and more intuitive interface led to fewer dropouts and higher user satisfaction.
-
Higher Conversions: With improved usability, more users completed their tasks—resulting in more leads and increased business opportunities.
-
Smarter User Journey: The reimagined flow created a seamless, frictionless experience tailored to real user needs.
-
Delight in Every Detail: Custom illustrations and subtle animations brought life to the interface, making it not just functional—but enjoyable.
-
Client Satisfaction: Delivered on time, the high-fidelity prototype exceeded expectations and received glowing feedback—proving that thoughtful UX drives both performance and delight.
This project stands as a testament to how user-centered design, when paired with strategic execution, can create not just a better product—but a better experience.