Dreamers
Dreamers
Dreamers
Dreamers
Dreamers
Every dream starts with a cup of fresh coffee.
Every dream starts with a cup of fresh coffee.
Every dream starts with a cup of fresh coffee.
Every dream starts with a cup of fresh coffee.
Every dream starts with a cup of fresh coffee.
About Project
The objective of this personal project was to revamp the corporate website for Dreamers Coffee to create better navigation and branding experience. For this website redesign, I utilized Framer to create an interactive demo to showcase the proposed solution.
About Project
The objective of this personal project was to revamp the corporate website for Dreamers Coffee to create better navigation and branding experience. For this website redesign, I utilized Framer to create an interactive demo to showcase the proposed solution.
About Project
The objective of this personal project was to revamp the corporate website for Dreamers Coffee to create better navigation and branding experience. For this website redesign, I utilized Framer to create an interactive demo to showcase the proposed solution.
Timeline
Jan ~ Mar, 2024
My role
UI design
Framer development
Design System
Timeline
Jan ~ Mar, 2024
My role
UI design
Framer development
Design System
Timeline
Jan ~ Mar, 2024
My role
UI design
Framer development
Design System
( OVERVIEW )
Goal
Enhancing the website’s navigation and readability.
Aligning the website visuals with it’s branding strategy.
Optimizing the menu browsing experience.
Challenge
Redesign visuals that can express the brand value
While optimizing the website browsing experience, how to better present the brand value and uniqueness should also be taken account.
Develop a demo website with Framer
This is my first time using Framer to develop a website and was not quite sure how to create certain animations.
Solution
Implementing parallax scrolling animation
I decide to use “parallax scrolling animation” as the main visual to create an immersive ambience that aligns with the calm and comfortable vibe of the brand.
Referencing others‘ Framer works
I learn to create different animation effects via the Framer academy and by referencing others’ framer work.
( OVERVIEW )
Goal
Enhancing the website’s navigation and readability.
Aligning the website visuals with it’s branding strategy.
Optimizing the menu browsing experience.
Challenge
Redesign visuals that can express the brand value
While optimizing the website browsing experience, how to better present the brand value and uniqueness should also be taken account.
Develop a demo website with Framer
This is my first time using Framer to develop a website and was not quite sure how to create certain animations.
Solution
Implementing parallax scrolling animation
I decide to use “parallax scrolling animation” as the main visual to create an immersive ambience that aligns with the calm and comfortable vibe of the brand.
Referencing others‘ Framer works
I learn to create different animation effects via the Framer academy and by referencing others’ framer work.
( OVERVIEW )
Goal
Enhancing the website’s navigation and readability.
Aligning the website visuals with it’s branding strategy.
Optimizing the menu browsing experience.
Challenge
Redesign visuals that can express the brand value
While optimizing the website browsing experience, how to better present the brand value and uniqueness should also be taken account.
Develop a demo website with Framer
This is my first time using Framer to develop a website and was not quite sure how to create certain animations.
Solution
Implementing parallax scrolling animation
I decide to use “parallax scrolling animation” as the main visual to create an immersive ambience that aligns with the calm and comfortable vibe of the brand.
Referencing others‘ Framer works
I learn to create different animation effects via the Framer academy and by referencing others’ framer work.
Brand Analysis
Brand Analysis
Brand Analysis
Brand value
Brand value
Brand value
To encouraging and empowering every customers in Dreamers to courageously pursue their dream.
To encouraging and empowering every customers in Dreamers to courageously pursue their dream.
To encouraging and empowering every customers in Dreamers to courageously pursue their dream.
Social media marketing
Social media marketing
Social media marketing
Dreamers showcases its comforting and minimalist ambiance by sharing captivating stories of in-store displays, menu offerings, and store locations across official social channels.
Dreamers showcases its comforting and minimalist ambiance by sharing captivating stories of in-store displays, menu offerings, and store locations across official social channels.
Dreamers showcases its comforting and minimalist ambiance by sharing captivating stories of in-store displays, menu offerings, and store locations across official social channels.
Brand feature
Brand feature
Brand feature
.Create various healthy dishes and drinks
Integrate local culture and lifestyle in their cafes’ interior design.
Create various healthy dishes and drinks
Integrate local culture and lifestyle in their cafes’ interior design.
Create various healthy dishes and drinks
Integrate local culture and lifestyle in their cafes’ interior design.
Brand vibe
Brand vibe
Brand vibe
I generated multiple keywords that present the brand's unique ambiance and emotional experience.
I generated multiple keywords that present the brand's unique ambiance and emotional experience.
I generated multiple keywords that present the brand's unique ambiance and emotional experience.
#comfortness
#comfortness
#pursue dream
#pursue dream
#immersive
#immersive
#positive
#positive
#minimalist
#minimalist
Design System
Design System
Design System
Typography
Typography
Work Sans
Work Sans
Bold, Regular
Color Palette
Color Palette
Primary
Primary
#FFBA08
#FFBA08
Secondary
Secondary
#F2F2F2
#F2F2F2
Neutral
Neutral
#231816
#231816
Typography
Work Sans
Bold, Regular
Color Palette
Primary
#FFBA08
Secondary
#F2F2F2
Neutral
#231816
Final Design
Final Design
Final Design
Mobile
Mobile
Mobile
Desktop
Desktop
Desktop
Landingpage redesign
1
Incorporating in-store ambience in the UI design
The website design draws inspiration from the calming color palette and ambience of the cafe's interior decor, aiming to cultivate a serene and comforting brand experience. I also including environmental shots and product imagery, to convey a minimalist aesthetic that aligns with the brand's visuals.
2
Crafting an Immersive Brand Experience
The website employs parallax scrolling animations to immerse users in an captivating brand storytelling experience. Reinforcing this immersive journey, encouraging messaging aligned with their social media branding strategy is seamlessly integrated throughout the design.
Landingpage redesign
1
Incorporating in-store ambience in the UI design
The website design draws inspiration from the calming color palette and ambience of the cafe's interior decor, aiming to cultivate a serene and comforting brand experience. I also including environmental shots and product imagery, to convey a minimalist aesthetic that aligns with the brand's visuals.
2
Crafting an Immersive Brand Experience
The website employs parallax scrolling animations to immerse users in an captivating brand storytelling experience. Reinforcing this immersive journey, encouraging messaging aligned with their social media branding strategy is seamlessly integrated throughout the design.
Landingpage redesign
1
Incorporating in-store ambience in the UI design
The website design draws inspiration from the calming color palette and ambience of the cafe's interior decor, aiming to cultivate a serene and comforting brand experience. I also including environmental shots and product imagery, to convey a minimalist aesthetic that aligns with the brand's visuals.
2
Crafting an Immersive Brand Experience
The website employs parallax scrolling animations to immerse users in an captivating brand storytelling experience. Reinforcing this immersive journey, encouraging messaging aligned with their social media branding strategy is seamlessly integrated throughout the design.
Menu redesign
1
Establish an extensible and accessible information structure.
Categorizing brand franchise menu across Northern, Central, Southern, and Eastern regions based on geographical locations. By this mean, not only can users browse franchise menu more efficiently, but also ensuring flexible management of increasing franchise stores in the future.
2
Improve the product search experience
I utilize standardize design to improve the simplicity and readability of the menu. For each dish category, users can quickly arrive at different section through clicking on different category tabs. Tags are also implemented to highlight exclusive dishes of each franchise store to reinforce their marketing promotion.
Menu redesign
1
Establish an extensible and accessible information structure.
Categorizing brand franchise menu across Northern, Central, Southern, and Eastern regions based on geographical locations. By this mean, not only can users browse franchise menu more efficiently, but also ensuring flexible management of increasing franchise stores in the future.
2
Improve the product search experience
I utilize standardize design to improve the simplicity and readability of the menu. For each dish category, users can quickly arrive at different section through clicking on different category tabs. Tags are also implemented to highlight exclusive dishes of each franchise store to reinforce their marketing promotion.
Menu redesign
1
Establish an extensible and accessible information structure.
Categorizing brand franchise menu across Northern, Central, Southern, and Eastern regions based on geographical locations. By this mean, not only can users browse franchise menu more efficiently, but also ensuring flexible management of increasing franchise stores in the future.
2
Improve the product search experience
I utilize standardize design to improve the simplicity and readability of the menu. For each dish category, users can quickly arrive at different section through clicking on different category tabs. Tags are also implemented to highlight exclusive dishes of each franchise store to reinforce their marketing promotion.
Franchise page
1
Optimize information display and standardize visuals
I optimize information browsing through a space-efficient layout that segments content into intuitive clusters to streamline information browsing and minimize excessive scrolling. Additionally, textual elements are complemented with simplified visuals to enhance knowledge acquisition and comprehension.
Franchise page
1
Optimize information display and standardize visuals
I optimize information browsing through a space-efficient layout that segments content into intuitive clusters to streamline information browsing and minimize excessive scrolling. Additionally, textual elements are complemented with simplified visuals to enhance knowledge acquisition and comprehension.
Franchise page
1
Optimize information display and standardize visuals
I optimize information browsing through a space-efficient layout that segments content into intuitive clusters to streamline information browsing and minimize excessive scrolling. Additionally, textual elements are complemented with simplified visuals to enhance knowledge acquisition and comprehension.
Contact Us page
1
Segment different needs of contact objectives
To optimize the user experience, the "Talent Recruitment" function is separated as an external link directing users to the brand's 104 recruitment site. Inquiries for "Customer Service" and "Business Collaboration" are collected through a dedicated contact form, allowing users to easily get appropriate assistance.
Contact Us page
1
Segment different needs of contact objectives
To optimize the user experience, the "Talent Recruitment" function is separated as an external link directing users to the brand's 104 recruitment site. Inquiries for "Customer Service" and "Business Collaboration" are collected through a dedicated contact form, allowing users to easily get appropriate assistance.
Contact Us page
1
Segment different needs of contact objectives
To optimize the user experience, the "Talent Recruitment" function is separated as an external link directing users to the brand's 104 recruitment site. Inquiries for "Customer Service" and "Business Collaboration" are collected through a dedicated contact form, allowing users to easily get appropriate assistance.
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!