Swiftic.com
Project Overview
Swiftic was a Software-as-a-Service (SaaS) platform that empowered small and medium-sized businesses (SMBs) to create their own custom mobile apps without any coding knowledge. The platform's core mission was to make mobile marketing and customer loyalty accessible and affordable for everyone, from local restaurants and retail shops to health & beauty spas. It provided an easy-to-use, fast, and effective solution for businesses to engage their customers directly on their most-used device.
Project Goals
- ✓ Simplify app creation for non-technical users.
- ✓ Design a clean, intuitive, and trustworthy user interface.
- ✓ Develop a flexible system for diverse business branding.
- ✓ Increase user conversion from trial to paid subscription.
Challenges & Solutions
Consolidating Disparate Design Systems
The Problem: The project began with multiple, inconsistent design systems inherited from previous iterations. This fragmentation made it difficult to maintain a cohesive user experience and slowed down development.
The Solution: Before the full redesign, I conducted a comprehensive audit of all existing components and styles. By assessing and consolidating these disparate systems into a single, unified design system, we established a solid and consistent foundation for the platform's revamp.
Managing a Large-Scale System as a Solo Designer
The Problem: As the sole designer on the team, the sheer volume of components, states, and variants required for the platform revamp presented a significant logistical challenge. Managing this complexity was crucial for a successful outcome.
The Solution: I developed a systematic and highly organized approach to component creation and documentation. By focusing on scalability and reusability from the start, I was able to efficiently build and manage the entire design system, ensuring consistency and high-quality output across the board despite the team's lean structure.
Design System Examples
Usage Guidelines
Form elements are sharp and functional with no border-radius. Dashed placeholders with a circled plus icon are used for media uploads. Error states are clearly communicated with a red border and an explicit helper message.
Usage Guidelines
Icons are simple, recognizable, and friendly. Using a consistent solid-fill style and the brand's primary blue, they communicate concepts quickly and effectively, contributing to the platform's overall ease of use.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body copy is set in Lato for its warm, friendly, and highly legible characteristics.
Usage Guidelines
The typographic scale is designed for maximum clarity, with all headings set in Lato Bold or Black and strictly left-aligned. All headings have a line height of 150% for readability. H1 has a 1% letter spacing to give it prominence.
Usage Guidelines
The palette is built around an energetic and professional Blue (#4EA5FF). The highlight and warning color is a vibrant Yellow (#FCBF1E), supported by clear colors for error (#FF4141) and success (#44DA53) states.
Digital Presence & Platform UI
The final designs were translated into a high-fidelity prototype of the main marketing website and key user flows within the app-building platform itself. The focus was on a seamless journey, from the initial landing page visit to the final step of publishing a new mobile app.
Project Outcomes
Improved User Experience
The redesigned UI and streamlined user flows led to a significant decrease in support tickets and an increase in positive user feedback, validating the focus on simplicity.
Increased Conversion Rates
A clearer value proposition and more intuitive onboarding contributed to a measurable lift in free trial sign-ups and a higher conversion rate to paid plans.
Successful Acquisition
The platform's strong market position, polished UX, and steady growth culminated in its successful acquisition, a testament to the power of user-centered design in creating tangible business value.