Greetings Island – Modernizing Frontend for Customization

Project background 

Overview

Greetings Island, a leading platform for customizable cards, invitations, and calendars, required an enhanced user experience and improved performance for their web and mobile applications. The platform’s customers demanded faster customization and styling options, while the client aimed to streamline purchases and improve the overall frontend architecture.

Our primary tasks included modernizing the visual components, refactoring the codebase from JavaScript to TypeScript, and implementing new purchase-related functionalities in mobile apps.

Project Goals

• Enhance user experience by reducing card customization times.
• Refactor frontend code for better scalability and maintainability.
• Introduce premium features, such as watermark removal, to boost in-app purchases.
• Unify product offerings across cards for a simplified purchasing process.

Challenges

• Transitioning the codebase from JavaScript to TypeScript without disrupting existing features.
• Transfer of modal window controls in the Card Editor component during the refactoring process.
• Balancing design improvements with performance optimizations.
• Implementing premium features across web and mobile platforms while maintaining consistency.

Our approach

Solution

We prioritized a phased development strategy, starting with refactoring the existing frontend codebase to TypeScript to enhance maintainability and scalability. This allowed us to implement robust features, such as real-time card customization and faster visual updates.

For mobile apps, we devised a solution to improve the purchase workflow, enabling users to remove watermarks after upgrading to a premium account. Additionally, we streamlined product offerings by consolidating individual card purchases into a unified product system.

We refactored the Card Editor component using Stencil for design consistency and performance, and successfully resolved modal window control issues. Redux and NGRX were used for state management, while Webpack optimized the application for faster load times.

Team

The project was executed by a compact team consisting of two members: a tech lead and a developer. This small yet highly skilled team allowed for efficient collaboration and swift delivery of improvements to both web and mobile platforms.

Results

Our efforts resulted in a significant improvement in the user experience, with card customization now being several times faster. The transition to TypeScript reduced technical debt and improved code readability. Mobile app updates, including watermark removal and unified products, boosted premium account purchases, aligning with the client’s monetization goals.

The Card Editor component refactoring enhanced responsiveness and functionality, making it easier for users to style and customize their designs efficiently.