Sign Out
Project Overview
Sign Out is a custom jacket builder platform for graduation and final-year students — a popular tradition where students design and order personalized jackets to mark the end of their academic journey (final degree, eleventh, or twelfth grade).
Before this platform, Sign Out was running entirely through Instagram, collecting student orders manually via DMs and messages. This made the process slow, error-prone, and hard to scale. We built a fully digital jacket customization and ordering platform to replace this manual workflow, enabling students to design their own jackets independently and place orders seamlessly.
Project Challenge
The biggest challenge was building a highly interactive, real-time jacket customization interface. From live previews to dynamic layer management, every interaction needed to feel seamless. I also integrated the Tkana Products API to manage SKUs, product variants, and dynamic pricing effectively.
Technical Stack
- Framework: Remix
- Styling: Tailwind CSS
- API Integration: Tkana Products API
Key Features & Enhancements
- Live Preview & Customization Layers: Users can select base jacket styles, change the colour of each individual part of the jacket, add patches or artwork, insert custom text, and immediately see the results in the preview pane — no guesswork.
- Dynamic Variant & Pricing Engine: Using the Tkana Products API, the platform fetches available jacket variants (sizes, fabrics, styles), calculates pricing dynamically based on user selections, and keeps SKU data in sync for accurate ordering.
- Group & Friend Ordering: A dedicated workflow allows a student to design a jacket and order for their friends as well — making it easy for an entire graduation batch to coordinate and order together.
- Multi-Language Support: The website supports multiple languages (e.g., English and Arabic), including right-to-left layouts for Arabic, to cater to a wider regional audience.
- Mobile-Friendly & Responsive Design: By leveraging Tailwind CSS, the customization interface works smoothly across desktop and mobile, since most students access from their phones.
Challenges and Learning
- Managing Performance for Real-Time Previews: With multiple layers (fabric colours, patches, artwork, text) updating dynamically, initial builds suffered lag on less powerful devices. The solution involved optimizing Canvas drawing, debouncing user input, and caching static assets.
- Handling Localisation & Languages: Implementing multi-language support meant rethinking layout and text flows — especially for RTL languages like Arabic — and ensuring all UI components adjust correctly.
- Ensuring API Robustness & Error Handling: The variant and pricing data from the Tkana API could change frequently; building fallback UI states, error-handling and optimistic updates was crucial to maintain a smooth user experience.
Outcome & Future Plans
The platform replaced Sign Out's manual Instagram-based order collection with a fully automated, self-serve customization experience. Students can now independently design, preview, and order graduation jackets without any back-and-forth with the brand.
Looking ahead, planned improvements include:
- A "Save & Share Design" feature so users can save their jacket design, share it via link, and return later to complete the order.
- Adding a 3D preview or AR view of the jacket for a more realistic try-on experience.
- Expanding fabric options, accessories, and seasonal templates.
🔗 Live Project: https://signout.sa/
