Aida Ink

Web Designer

Frontend Engineer

AI Developer

Next.js

Ruby on Rails

Tailwind CSS

Intro

Aidaink.com is a side passion project initiated by Kai-Ting Lin (designer) and Vik Borges ( developer). It merges Print-On-Demand eCommerce with AI-generated art and allows users to create personalized phone case designs in just three simple steps. Our initial focus is on phone cases, offering eight curated styles for users to choose from.

My Role

In this collaborative project, I handled the UI/UX design and contributed to the basic front-end development using Tailwind CSS. I worked closely Vik who managed the Next.js, Ruby on Rails, and Stable Diffusion stack. For cloud services, we utilized Replicate to run AI with an API.

Project Task/Challenge

The challenge was to create an engaging and intuitive user experience that simplifies the process of creating personalized phone case designs. The platform needed to seamlessly integrate AI-generated art while providing a smooth user journey.

Project Solution

To address the challenge, I designed a user-friendly interface that guides users through the creation process, making it easy and fun to generate unique phone case designs. The solution included the following key elements:

Dynamic Interface Design

I created design with Figma and developed with Tailwind CSS, ensuring that users can easily navigate through the process of selecting and customizing their phone cases.

AI Integration

By leveraging Stable Diffusion and Replicate, the platform allows users to input keywords or phrases to guide the AI in generating personalized designs. This integration ensures that each design is unique and tailored to the user's preferences.

Run AI with an API in Replicate with custom models

Curated Style Showcase

To inspire creativity, I curated a selection of styles that users can choose from. I trained the models using LoRA on the Replicate platform, ensuring a diverse and unique collection of patterns.

Eight curated styles

Step-by-Step Personalization

The platform simplifies the design process into three easy steps:

Step 1 - Choose Your Case and Styles Users select their preferred phone case model and style.

Step 2 - Spice It Up with Keywords Users add keywords or phrases to guide the AI in crafting their design.

Step 3 - Let the AI Do the Magic! The AI generates a unique design, which users can then order and showcase.

Summary

Aidaink.com is an innovative Print-On-Demand eCommerce platform that combines AI-generated art with personalized phone case designs. My role involved designing a dynamic and user-friendly interface, ensuring seamless integration of AI technology, and curating a variety of styles to inspire creativity. The result is an engaging and intuitive platform that allows users to create their personalized phone case designs with ease.