top of page

ikigai Coffee

The Ikigai Coffee project is a web design concept for a specialty coffee brand, targeting young people who appreciate high-quality coffee and brand authenticity. Inspired by the Japanese word Ikigai, meaning "a reason to get up in the morning," the website design embodies energy, vibrancy, and purpose. The goal was to create an engaging, bright, and modern user experience that captures the essence of coffee culture while being visually inviting and easy to navigate.

Role

Visual Designer

User Researcher

Tools

Figma

Adobe Illustrator

Adobe Photoshop

Year

2023

​

element.png
Frame 102.png

Research & Insights

Concept & Idea

The word "Ikigai" represents finding joy and purpose in daily life. Translating this idea into design, the website captures the energy and motivation a good cup of coffee can bring to the morning. The bright, vibrant colors reflect the brand’s youthful energy and mission to inspire users every day.

​

Target Audience

The target audience is primarily young adults in their 20s and 30s who value sustainability, wellness, and high-quality coffee. These users appreciate brands that align with their lifestyle, offering both excellent products and a purpose-driven experience.

​

Competitive Analysis
I researched other specialty coffee websites to understand trends in design, functionality, and user engagement. The goal was to identify strengths and gaps in the market to ensure Ikigai Coffee stands out with its unique concept and design language.

Frame 104.png

Design & Prototype

Moodboard & Aesthetic
The visual style combines bright, bold gradients with fluid animations. The gradients in the background shift gently, adding a sense of movement and life to the page. This dynamic use of color reinforces the energetic vibe of the brand, making the website feel alive and interactive, without overwhelming the user.

​

UI Design
The interface is clean, user-centered, and visually engaging. The design features:

  • Vibrant gradients that softly shift and animate in the background, creating a sense of movement and excitement.

  • High-quality product images with a focus on clear typography and interactive elements.

  • Smooth transitions between sections, providing a seamless browsing experience.
     

Figma Prototyping
The interactive prototype, built in Figma, includes animations and transitions that showcase the soft movement of the background gradients. The prototype includes:

  • Dynamic homepage with engaging visuals and subtle animations.

  • Product and subscription pages with interactive features and smooth navigation.

  • Smooth animations that guide the user through the coffee selection and purchasing process.

Frame 103.png
Frame 105.png

Conclusion

The Ikigai Coffee website design reflects the energy and purpose of the Ikigai philosophy through bright colors, modern typography, and an engaging user interface. It creates an immersive and visually dynamic experience for young, eco-conscious coffee lovers, inviting them to explore the brand and its offerings. The project helped me hone my skills in creating bold, user-centered UI designs that are both functional and visually striking.

bottom of page