Challenge: A fragmented interface

AskMe Sign's UI was characterized by a lot of visual fragmentation and a lack of coherence. This inconsistency made the user experience confusing and unintuitive, negatively impacting brand perception and user efficiency.

1. Defining Design Guidelines for a Consistent UI

Solution: A unified design system

To address this challenge, we implemented new components into the design system and standardized existing ones, so that the library was complete and coherent. This decision provided a clear guide for the development of all interface elements, ensuring a consistent aesthetic and a smoother user experience. We conducted a thorough analysis of the existing user experience to identify areas for improvement and defined clear guidelines for:

Visual design : color palette, typography, iconography and layout.
Interaction design : interactive components, microanimations and visual feedback.
Accessibility : Compliant with WCAG standards.

Results: An improved user experience

The adoption of the design system has led to significant improvements in the overall user experience of the application, in particular:

More intuitive : The interface has become more intuitive and easier to navigate.
Visual Consistency : The unified aesthetic strengthened the brand's identity.
Increased efficiency : Users were able to complete their tasks faster and easier.

Challenge: Scaling the design system for a consistent user experience

As the AskMe product range developed, the need for a more robust and scalable design system emerged. The existing design system was fragmented and poorly documented, limiting the ability to create consistent, high-quality user experiences across all products. Additionally, the lack of a centralized design system increased development time and costs, slowing the introduction of new features.

2. Updating and improving the Design System

Solution: A centralized and modular design system

To address this challenge, we implemented a centralized and modular design system. The main actions taken were:

Component Library Expansion : We have enriched the library with new reusable components, covering a wide range of UI elements.
Code Optimization : We have improved the quality of the source code, adopting development best practices and ensuring greater maintainability.
Angular Material Integration : We have leveraged the power of Angular Material to speed up development and ensure alignment with the latest design trends.
Detailed Documentation : We have created comprehensive documentation for each component, including usage guidelines, accessibility considerations, and implementation examples.

Results: A more consistent user experience and more efficient development

The implementation of the new design system has brought numerous advantages:

Visual Consistency : A more consistent user experience across all AskMe products strengthened the brand and improved recognition.
Increased efficiency : Reusability of components has accelerated development times and reduced costs.
Quality Improvement : The adoption of accessibility standards has made the application more inclusive.
Scalability : The design system has become a solid foundation for developing new products and features.

Challenge: Transform a Design Vision into Reality Through High-Fidelity Prototyping on Figma

The main challenge of this phase was to effectively communicate a new design vision for AskMe Sign, actively engaging stakeholders to gather feedback and align expectations. The goal was to create high-fidelity prototypes that realistically represent the final user experience and that could be used as a reference point for product development.

3. High Fidelity Prototypes with Figma

Solution: Interactive prototypes and stakeholder engagement

To overcome this challenge, we took an approach focused on creating highly detailed and interactive prototypes:

High-Fidelity Prototypes: I developed prototypes that closely replicated the look and feel of the final UI, for both web and mobile.

Interactive elements : I included interactive elements to simulate real user experience and allow stakeholders to explore the features intuitively.

Feedback and Iteration : I actively involved the product team, stakeholders and end users in feedback sessions and usability testing. The feedback collected was used to iterate on prototypes and refine the design.

Results: A user-centered and goal-aligned design

Thanks to this approach, we achieved the following results:

Effective Communication : High-fidelity prototypes allowed us to clearly and concisely communicate the new design vision, facilitating alignment among all stakeholders.
User-centered design : Involving users during the design process ensured that the final design was aligned with their needs and expectations.
Risk Reduction : Usability testing conducted on prototypes allowed us to identify and resolve potential usability issues early, reducing development risks.
Solid foundation for development : High-fidelity prototypes provided a solid foundation for final product development, accelerating lead times and improving the quality of the output.

Challenge: Develop new features in an agile way and aligned with business objectives

Introducing complex new features within AskMe Sign required an agile and highly collaborative development approach. The challenge was to ensure that the new features were developed efficiently, while maintaining a high quality user experience and aligning with the evolving needs of the market and customers.

4. Agile Development and User-Centered Design

Solution: An agile and customer-focused approach

To address this challenge, we have adopted a customer-centric development approach:

Agile Methodology : We have implemented an agile development process, characterized by short development cycles, continuous collaboration between teams and a strong focus on product owner and customer feedback.
User Flows and Prototyping : Before starting development, I created detailed user flows and high-fidelity prototypes to visualize user interaction with the new functionality.
Continuous Validation: Throughout the design process, I actively involved the product owner and customers to gather feedback and ensure that the new features were in line with their requirements.

Results: Innovative features aligned with business objectives

Thanks to an Agile approach, we achieved the following results:

Reduced development times : The agile approach allowed us to develop and release new features more quickly, responding effectively to market needs.
Alignment with business goals : New features were developed in close collaboration with the product owner and customers.
Flexibility and adaptability : The agile approach has allowed us to quickly adapt to changing requirements and market needs.
Customer Satisfaction : Continuous customer involvement throughout the development process ensured that new features met their expectations and helped improve their experience.

Challenge: Make AskMe Sign accessible to everyone

The challenge was to make the AskMe Sign web application fully accessible to all users, including people with disabilities. The goal was to ensure compliance with WCAG requirements and provide a positive and inclusive user experience.

6. Ensure accessibility for Public Administration

Solution: A systematic approach to accessibility

To address this challenge, we have taken a systematic, data-driven approach to accessibility:

Deep Dive with Accessibility Insights : Using the Accessibility Insights for Web Chrome extension, we conducted a detailed analysis of the application, identifying areas that were not compliant with WCAG 2.2 requirements. This tool provided us with precise, measurable data on the accessibility barriers present.
Customized Improvement Plan : Based on the analysis results, we developed a customized improvement plan, prioritizing the changes that would have the greatest impact on accessibility.
Implementing Changes : We have implemented the necessary changes to ensure WCAG compliance, paying particular attention to the correct use of HTML elements, adding alt text for images, and creating a logical page structure.

Results: A more inclusive web application

Thanks to this approach, we achieved the following results:

WCAG 2.2 Conformance Verified : Using Accessibility Insights, we were able to objectively verify the application's conformance to WCAG 2.2 requirements.
Improved User Experience : The changes made have not only made the application more accessible but have also improved the overall user experience for all users.
Strengthened Brand Image : WCAG compliance demonstrates AskMe Sign's commitment to creating inclusive and accessible products, helping to strengthen our reputation.

Challenge: Extend AskMe Sign to the offline world, ensuring security and consistency

The growing demand for flexible and secure e-signature solutions has led to the need to extend the functionality of AskMe Sign beyond the web environment. The main challenge was to develop a solution that allows users to securely sign and verify documents even without an internet connection, while maintaining a consistent and intuitive user experience across all platforms.

5. Desktop Application

Solution: A complete and secure offline desktop application

To meet this challenge, we have developed an offline desktop application that offers a number of advanced features:

Offline signing: Users can securely sign documents using PAdES, XAdES and CAdES formats, even without an internet connection.
Local Verification : The application allows you to verify the authenticity and integrity of digital signatures locally, ensuring maximum security.
Full Offline Functionality : The application offers all the main features of AskMe Sign, even in offline mode, thanks to the use of a local database and advanced encryption algorithms.

Results: A more flexible and secure user experience

The introduction of offline desktop application has brought about numerous benefits:

Greater accessibility: Users can now sign and verify documents anytime, anywhere, even without an internet connection.
Enhanced Security: Local document signing and verification provides a higher level of security, protecting sensitive data from potential cyber threats.
Consistent User Experience: Intuitive design and consistent visual language ensure a smooth and enjoyable user experience across all platforms.
Flexibility: The desktop application offers greater flexibility, allowing users to work with documents even when offline.

+30

Functionality

+280'000

Users

AskMe Sign

AskMe Sign is the Lascaux solution for managing multi-platform electronic signature processes, simple, secure and ideal for large companies, SMEs and professionals.

It offers the possibility of signing via browser or via tablet/smartphone app, with an interface optimized for each scenario and is integrated with the main Italian Certification Authorities for the application of the qualified signature on documents and for the management of signature books, presence signatures, commercial signatures with maximum simplicity.

Try the demo

Project Goal

As the AskMe Sign product grew, the need for a cohesive, consistent, and effective user experience (UX) emerged. This case study delves into the UX design process undertaken to address this challenge and improve the overall user experience by integrating new features into the product based on user needs.

Team

UX RESEARCHER, PRODUCT OWNER, ANGULAR DEVELOPER, UX/UI DESIGNER

My role

UX/UI DESIGNER (activities coordinated by a Senior UX Designer)

Tools

AFFINITY | FIGMA | FIGJAM | LOTTIEFILES

Inspiring environments

UX/UI DESIGN | PRODUCT DESIGN | UX RESEARCH | ACCESSIBILITY

They talk about AskMe Sign

PAPERLESS 2024 EDITION FINALIST - "LARGE AND MEDIUM-SIZED ENTERPRISES" SECTION

FEATURED IN DIGITAL FRONTIERS MAGAZINE - PAGE 22