AuraColor Project Report
1. The Concept
AuraColor is a lightweight, web-based aesthetic wellness app that turns a user’s daily mood into a beautiful color-based “aura” experience. Instead of using plain emoji mood tracking, the app lets users choose moods like Happy, Calm, Creative, Motivated, Excited, Tired, Sad, and Overwhelmed, then transforms those feelings into soft pastel visuals and shareable weekly vibe cards.
I chose this concept because it combines wellness, self-expression, and social sharing in a way that feels especially appealing for Gen Z students and young professionals who enjoy cute, minimalist, Instagram/Facebook-friendly visuals.
2. The Stack
The Stack: HTML5, Vanilla CSS, and JavaScript.
The AI Assist: ChatGPT helped shape the initial product idea, target user, app flow, and design direction. OpenAI Codex was then used for the development phase, translating the concept into a working mobile-style web prototype with screens, interactions, animations, responsive layout, and downloadable weekly image generation.
3. The 1 Day Sprint:
Morning (Hours 1–3): We started by defining the product idea: a soft, magical mood diary that turns feelings into color palettes. We planned the target user, mood list, app screens, and key social-sharing feature. The first version focused on the Today’s Vibe screen, mood selection, aura reveal, and weekly palette.
Afternoon (Hours 4–6): The coding phase focused heavily on visual polish. We built the mobile phone shell, start screen, Today screen, mood cards with custom PNG icons, aura reveal screen, and weekly share card. A lot of time went into matching the provided pastel Japanese mobile game UI style: glossy buttons, soft gradients, rounded cards, mascots, sparkles, and premium spacing.
The Finish Line (Hour 7-8): The final phase focused on responsive fixes and feature completion. We adjusted the full-screen mobile layout, fixed spacing issues, rebuilt the Weekly screen as a downloadable share image, added a back button, and implemented a “Download Image” button that generates a PNG export.
4. The Roadblocks
Roadblocks: The biggest roadblock was responsive design on mobile. The app had to feel like a native mobile experience with no scrolling, but the visual design included large mood cards, big typography, large buttons, and decorative spacing. Making everything fit on smaller screens like iPhone 13 mini required several rounds of layout adjustments.
Another challenge was keeping the product flow unchanged while improving the visual design. The app already had finalized screens and logic, so all improvements had to happen through styling, spacing, component polish, and careful UI replacement without breaking the flow.
5. Key Takeaways
What worked best was using AI to rapidly iterate on visual direction. Codex was able to convert design prompts and reference images into a polished interface with custom mood icons, gradient buttons, animated aura effects, and shareable weekly visuals.
What worked worst was precision UI matching on small mobile screens. Even when the design looked good on desktop preview, responsive testing revealed spacing, cropping, and overflow issues that required repeated refinements.
My final thought: If I had one more day, I would polish the downloadable image further, add real mood history storage, and improve the weekly summary logic so the generated vibe names feel more personalized. If I could redo the project, I would define exact mobile breakpoints and spacing rules earlier before building the full visual system.