One & Only Artisan Bakery
One & Only Artisan Bakery
One & Only Artisan Bakery
One & Only Artisan Bakery
One & Only Artisan Bakery
One & Only's Authentic Bakery Treats, Just a Click Away!
One & Only's Authentic Bakery Treats, Just a Click Away!
One & Only's Authentic Bakery Treats, Just a Click Away!
One & Only's Authentic Bakery Treats, Just a Click Away!
One & Only's Authentic Bakery Treats, Just a Click Away!
About Project
"One & Only Bakery" is a renowned traditional egg custard tart brand from Taichung. This project aims to redesign its e-commerce website, to create better shopping experience.
About Project
"One & Only Bakery" is a renowned traditional egg custard tart brand from Taichung. This project aims to redesign its e-commerce website, to create better shopping experience.
About Project
"One & Only Bakery" is a renowned traditional egg custard tart brand from Taichung. This project aims to redesign its e-commerce website, to create better shopping experience.
Client
One & Only Artisan Bakery
Timeline
Jan ~ Jun, 2024
My role
RWD Web Design
Design Proposal
Prototype
Design System
Design Specification
Design Review
Animation Design
Client
One & Only Artisan Bakery
Timeline
Jan ~ Jun, 2024
My role
RWD Web Design
Design Proposal
Prototype
Design System
Design Specification
Design Review
Animation Design
Client
One & Only Artisan Bakery
Timeline
Jan ~ Jun, 2024
My role
RWD Web Design
Design Proposal
Prototype
Design System
Design Specification
Design Review
Animation Design
( OVERVIEW )
Goal
Optimize the product purchase flow and experience
Enhance website visuals, as well as the feedback mechanisms provided across various user contexts and scenarios.
Challenge
Ensure a seamless purchasing experience during high traffic periods
During peak periods like Mid-Autumn Festival, the website experiences high traffic surges, degrading the overall user experience.
Enhance feedback mechanisms that can guide users seamlessly across the website.
When users encounter operational issues or unique scenarios, the lack of intuitive direction adversely impacts their shopping experience.
Solution
Leverage the use of modal prompts and toast notifications across the website.
We ensure that contextual guidance and prompts are provided to steer users toward the appropriate actions based on their specific situations. This can help reduces users’ website learning curve and increases efficiency.
Implement loading animations
During periods of high traffic, employ loading animations coupled with clear direction to mitigate negative waiting experiences and prevent user abandonment due to perceived downtimes.
( OVERVIEW )
Goal
Optimize the product purchase flow and experience
Enhance website visuals, as well as the feedback mechanisms provided across various user contexts and scenarios.
Challenge
Ensure a seamless purchasing experience during high traffic periods
During peak periods like Mid-Autumn Festival, the website experiences high traffic surges, degrading the overall user experience.
Enhance feedback mechanisms that can guide users seamlessly across the website.
When users encounter operational issues or unique scenarios, the lack of intuitive direction adversely impacts their shopping experience.
Solution
Leverage the use of modal prompts and toast notifications across the website.
We ensure that contextual guidance and prompts are provided to steer users toward the appropriate actions based on their specific situations. This can help reduces users’ website learning curve and increases efficiency.
Implement loading animations
During periods of high traffic, employ loading animations coupled with clear direction to mitigate negative waiting experiences and prevent user abandonment due to perceived downtimes.
( OVERVIEW )
Goal
Optimize the product purchase flow and experience
Enhance website visuals, as well as the feedback mechanisms provided across various user contexts and scenarios.
Challenge
Ensure a seamless purchasing experience during high traffic periods
During peak periods like Mid-Autumn Festival, the website experiences high traffic surges, degrading the overall user experience.
Enhance feedback mechanisms that can guide users seamlessly across the website.
When users encounter operational issues or unique scenarios, the lack of intuitive direction adversely impacts their shopping experience.
Solution
Leverage the use of modal prompts and toast notifications across the website.
We ensure that contextual guidance and prompts are provided to steer users toward the appropriate actions based on their specific situations. This can help reduces users’ website learning curve and increases efficiency.
Implement loading animations
During periods of high traffic, employ loading animations coupled with clear direction to mitigate negative waiting experiences and prevent user abandonment due to perceived downtimes.
Design System
Design System
Design System
Typography
Typography
Mulish
Mulish
Bold, Regular
Color Palette
Color Palette
Primary
Primary
#CD353D
#CD353D
Secondary
Secondary
#F0B658
#F0B658
Neutral
Neutral
#16171C
#16171C
Typography
Mulish
Bold, Regular
Color Palette
Primary
#CD353D
Secondary
#F0B658
Neutral
#16171C
Design Specification
This documentation conduce to systemize component implementation, minimizes error during development, and reduces communication cost. Moreover, the content are reviewed and aligned with the project manager before handing-off to the front-end engineering team.
Design Specification
This documentation conduce to systemize component implementation, minimizes error during development, and reduces communication cost. Moreover, the content are reviewed and aligned with the project manager before handing-off to the front-end engineering team.
Design Specification
This documentation conduce to systemize component implementation, minimizes error during development, and reduces communication cost. Moreover, the content are reviewed and aligned with the project manager before handing-off to the front-end engineering team.
Final Design
Final Design
Final Design
Mobile
Mobile
Mobile
Desktop
Desktop
Desktop
Landingpage redesign
1
Improve product cards accelerates the shopping process
Users can quickly inspect the item's content and directly add desired products to their cart without navigating to the product page.
2
Optimize the navigation bar
Create intuitive navigation labels, and replace the "Account" and "Cart" text buttons with icon buttons, to simplify visuals and improve readability.
Before
After
Landingpage redesign
1
Improve product cards accelerates the shopping process
Users can quickly inspect the item's content and directly add desired products to their cart without navigating to the product page.
2
Optimize the navigation bar
Create intuitive navigation labels, and replace the "Account" and "Cart" text buttons with icon buttons, to simplify visuals and improve readability.
Before
After
Landingpage redesign
1
Improve product cards accelerates the shopping process
Users can quickly inspect the item's content and directly add desired products to their cart without navigating to the product page.
2
Optimize the navigation bar
Create intuitive navigation labels, and replace the "Account" and "Cart" text buttons with icon buttons, to simplify visuals and improve readability.
Before
After
Strategic implementation of contextual prompts
1
Clear contextual prompts
Provide clear confirmation and guidance while users are editing the cart products to minimizing confusion and frustrations along their journey.
Strategic implementation of contextual prompts
1
Clear contextual prompts
Provide clear confirmation and guidance while users are editing the cart products to minimizing confusion and frustrations along their journey.
Strategic implementation of contextual prompts
1
Clear contextual prompts
Provide clear confirmation and guidance while users are editing the cart products to minimizing confusion and frustrations along their journey.
Redesign the calendar
2
Incorporate contextual prompts and loading state
Introduce loading states and sold-out remarks to prevent users from mistaking blank calendars or greyed-out dates as a non-functional calendar.
1
Add calendar status tag
Allow users to instantly identify dates with available pre-order inventory.
Redesign the calendar
2
Incorporate contextual prompts and loading state
Introduce loading states and sold-out remarks to prevent users from mistaking blank calendars or greyed-out dates as a non-functional calendar.
1
Add calendar status tag
Allow users to instantly identify dates with available pre-order inventory.
Redesign the calendar
2
Incorporate contextual prompts and loading state
Introduce loading states and sold-out remarks to prevent users from mistaking blank calendars or greyed-out dates as a non-functional calendar.
1
Add calendar status tag
Allow users to instantly identify dates with available pre-order inventory.
Redesign product page
1
Prioritize purchase notice section
We create a purchase notice section to remind users of the non-refunding purchase policy, coupled with a link that directs to the purchase guide page. By this approach, we hope to mitigate the post-purchase concerns and disputes
2
Improve the readability of the product details
We categorize product details by themes to enable users to locate desired product specifics efficiently.
Redesign product page
1
Prioritize purchase notice section
We create a purchase notice section to remind users of the non-refunding purchase policy, coupled with a link that directs to the purchase guide page. By this approach, we hope to mitigate the post-purchase concerns and disputes
2
Improve the readability of the product details
We categorize product details by themes to enable users to locate desired product specifics efficiently.
Redesign product page
1
Prioritize purchase notice section
We create a purchase notice section to remind users of the non-refunding purchase policy, coupled with a link that directs to the purchase guide page. By this approach, we hope to mitigate the post-purchase concerns and disputes
2
Improve the readability of the product details
We categorize product details by themes to enable users to locate desired product specifics efficiently.
Redesign the order page
1
Incorporate the coupon and promotion functions
As users start the order process, they can directly view which discounts were applied and what available coupons can they apply.
2
Transparent order cost calculation
Allow users to calculate the total order cost in advance, by taking the product receiving method into account.
Redesign the order page
1
Incorporate the coupon and promotion functions
As users start the order process, they can directly view which discounts were applied and what available coupons can they apply.
2
Transparent order cost calculation
Allow users to calculate the total order cost in advance, by taking the product receiving method into account.
Redesign the order page
1
Incorporate the coupon and promotion functions
As users start the order process, they can directly view which discounts were applied and what available coupons can they apply.
2
Transparent order cost calculation
Allow users to calculate the total order cost in advance, by taking the product receiving method into account.
Strategic implementation of modals
1
Modals that guide users in completing their purchase process seamlessly.
Modal dialogs notify users and provide guidance during situations such as inventory constraints or unverified emails impede purchases. This proactive approach empowers users who are facing friction points to progress smoothly.
Strategic implementation of modals
1
Modals that guide users in completing their purchase process seamlessly.
Modal dialogs notify users and provide guidance during situations such as inventory constraints or unverified emails impede purchases. This proactive approach empowers users who are facing friction points to progress smoothly.
Strategic implementation of modals
1
Modals that guide users in completing their purchase process seamlessly.
Modal dialogs notify users and provide guidance during situations such as inventory constraints or unverified emails impede purchases. This proactive approach empowers users who are facing friction points to progress smoothly.
Loading animation design
1
Mitigate the frustration emotion due to long loading time.
I created a short loading animation for page loading. The animation took reference of the brand logo and aims to generate a vivacious and fresh ambiance which aligns with the brand image.
Loading animation design
1
Mitigate the frustration emotion due to long loading time.
I created a short loading animation for page loading. The animation took reference of the brand logo and aims to generate a vivacious and fresh ambiance which aligns with the brand image.
Loading animation design
1
Mitigate the frustration emotion due to long loading time.
I created a short loading animation for page loading. The animation took reference of the brand logo and aims to generate a vivacious and fresh ambiance which aligns with the brand image.
( 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!