Overview

In this project I focused on creating new Angular components and making improvements to the user experience for the integration of a signature service into the myswisscom app. A well-known app in Switzerland with over 3 million users. The new digital signature flow was incorporated directly before the login in the app and on the web in a dedicated link for the use of this service.

Key Features

• Sign Service Integration: Developed the integration of the blink api, considering the guidelines and usecases.
• Figma Designs Implementation: Implementation of desings into Angular components and existing functionality.
• Consistent mobile and desktop experience: Established a consistent experience for multidevice. Considering the expected designs requirements
• Mobile Controls: Leveraged with new UI elements to maintain the functionality clear and minimalist.

Technologies Used

• Figma Designs and Prototypes: For extracting design and expected behaviors.
• Angular and Apache Sling: For building the front-end codebase with clean, reusable components.
• Insomnia: For managing the test requests and userflow scenarios.
• GitHub: For deploying in test env and syncing design changes to the repository.

Challenges and Learnings

• Cross-Platform Consistency: Ensuring a seamless transition between mobile and desktop required careful handling of events (e.g., ondrag vs. ontouch) within the same codebase. This highlighted the importance of designing adaptable components that gracefully handle different device interactions.
• Complex UI Interactions: Allowing users to add and position digital signature stickers without overlap posed both design and technical challenges. Balancing user-friendly mobility with strict positioning constraints emphasized the necessity of robust event management and collision detection strategies.
• Scalability & Maintainability: Building on an existing app with millions of users underscored the value of keeping code extensible, modular, and future-proof. The process required a delicate balance between integrating new functionality and preserving existing architectures.
• Cross-Functional Collaboration: Integrating multiple tools and frameworks (Figma, Insomnia, Angular, etc.) reinforced the importance of clear communication and adherence to design and technical requirements. Collaboration across design and development teams streamlined the creation of cohesive user experiences.

Outcome

The digital signature service is currently working on the app and website at https://sign.swisscom.ch and I currently use the service privately and free of charge. I find it to be an excellent tool for signing contracts.

---

This project put my creative problem-solving skills to the test. Not only did I reuse existing functionality and components but I made some minimalist visual changes that allow for a clean user experience.