Learn More !
Project Context
Overseas Dragon (四海遊龍) is a well-known potsticker (Chinese dumpling) shop in Taiwan, cherished for its rich history and delicious food. However, its existing brand identity system failed to effectively communicate its core values. As part of a branding design project under the Master of Design program at National Taiwan Normal University, I collaborated with a team to modernize the brand while preserving its cultural essence. Through this rebranding effort, we introduced fresh, youthful elements to enhance the brand’s recognition and emotional appeal. However, the original website still presented usability challenges, with cluttered layouts, information overload, and a lack of clear navigation. Recognizing this gap, I initiated a UX-focused side project to redesign the website, ensuring that it aligns with the new brand guidelines and offers a seamless, engaging, and user-friendly experience.
Overseas Dragon (四海遊龍) is a well-known potsticker (Chinese dumpling) shop in Taiwan, cherished for its rich history and delicious food. However, its existing brand identity system failed to effectively communicate its core values. As part of a branding design project under the Master of Design program at National Taiwan Normal University, I collaborated with a team to modernize the brand while preserving its cultural essence. Through this rebranding effort, we introduced fresh, youthful elements to enhance the brand’s recognition and emotional appeal. However, the original website still presented usability challenges, with cluttered layouts, information overload, and a lack of clear navigation. Recognizing this gap, I initiated a UX-focused side project to redesign the website, ensuring that it aligns with the new brand guidelines and offers a seamless, engaging, and user-friendly experience.
YUNGWEI's Role
Competitor Analysis, Visual System Design, Logo Usage & Guidelines Edit, Cover Banner, Employee Identity Cards & Uniform Mockup, Website Redesign
(My thumbnail sketches established the fundamental tone for the rebranding design, evolving into a complete logo design system.)
Competitor Analysis, Visual System Design, Logo Usage & Guidelines Edit, Cover Banner, Employee Identity Cards & Uniform Mockup, Website redesign
(My thumbnail sketches established the fundamental tone for the rebranding design, evolving into a complete logo design system.)
Competitor Analysis, Visual System Design, Logo Usage & Guidelines Edit, Cover Banner, Employee Identity Cards & Uniform Mockup, Website redesign
(My thumbnail sketches established the fundamental tone for the rebranding design, evolving into a complete logo design system.)
Methods & Tool
Competitive Analysis, Adobe Illustrator, Photoshop
Duration
Rebranding: September 2021 - February 2022
Website Redesign: December 2024
Teammate
Ruo-Yun Zhang
(Brand History Research, Competitive Analysis, Takeaway & Dine-In Container Mockups)
Pei-Sin Su
(Brand History Research, Competitive Analysis, Store Exterior Mockups)
Lu-Han Huang
(Competitor Analysis, Logo Font & Guideline Design, Website & Menu Mockups)
Associated with
Special Topics on Branding Design
Master of Design Program at
National Taiwan Normal University
Advisor
Prof. Chien-Jui (Manfred) Wang
Brand Story
Brand Background and Founding
Brand Background and Founding
In 1992, Li Xing-Chang started a food stall to manage debt from his campaign, teaching by day and selling potstickers at night in Zhonghe. In 1993, he co-founded the brand with Chen Wu-Diao. Differences in their business philosophies led to a split, but they later reunited. This caused inconsistent branding that struggled to convey their values effectively.
In 1992, Li Xing-Chang started a food stall to manage debt from his campaign, teaching by day and selling potstickers at night in Zhonghe. In 1993, he co-founded the brand with Chen Wu-Diao. Differences in their business philosophies led to a split, but they later reunited. This caused inconsistent branding that struggled to convey their values effectively.
Competitor Analyze
What Connects the Brand to Deliciousness?
What Connects the Brand to Deliciousness?
We analyzed competitors selling similar food to Overseas Dragon, including a Brand Positioning Matrix to understand their positioning, whether traditional or modern, with products priced high or affordably. Additionally, we studied trending logos and color schemes in the food industry from these brands.
We analyzed competitors selling similar food to Overseas Dragon, including a Brand Positioning Matrix to understand their positioning, whether traditional or modern, with products priced high or affordably. Additionally, we studied trending logos and color schemes in the food industry from these brands.
Competitor Analysis - Brand Positioning Matrix
Competitor Analysis - Brand Positioning Matrix
Competitor Analysis - Logo Color Usage
Competitor Analysis - Logo Color Usage
Key insights include:
Our analysis shows that most competitors use warm colors like red, orange, and yellow as their main visual identity, likely to stimulate appetite. Green is also commonly used to convey freshness in websites and advertisements.
Key insights include:
Our analysis revealed that most competitors use warm colors, such as red, orange, and yellow, as the main colors in their visual identity systems. These colors likely stimulate consumers' appetites. Additionally, green is often used to convey a sense of freshness.
Rebranding
Keywords: #Fresh. #Youthful. #Vivid. #Warm.
We began with thumbnail sketches, where each teammate contributed potential designs and concepts. Ultimately, we selected Yung-Wei's sketch as the foundation for our rebranding. Lu-Han refined the logo script, creating a more balanced design ready for commercial use.
We began with thumbnail sketches, where each teammate contributed potential designs and concepts. Ultimately, we selected Yung-Wei's sketch as the foundation for our rebranding. Lu-Han refined the logo script, creating a more balanced design ready for commercial use.
The Rebranding Process.
The Rebranding Process.
The rebranding concept focuses on the image of the Chinese Dragon (龍, Loong), directly reflecting the brand name. This is combined with traditional Chinese tableware, such as chopsticks and plates, to emphasize the brand’s connection to traditional cuisine, particularly potstickers.
The rebranding concept focuses on the image of the Chinese Dragon (龍, Loong), directly reflecting the brand name. This is combined with traditional Chinese tableware, such as chopsticks and plates, to emphasize the brand’s connection to traditional cuisine, particularly potstickers.
The New Brand Design.
The New Brand Design.
Logo Usage & Guidelines
After designing the new logo, we developed a comprehensive Logo Usage & Guidelines document to support the new visual identity system.
After designing the new logo, we developed a comprehensive Logo Usage & Guidelines document to support the new visual identity system.
Logo Usage Example
The logo usage example includes employee ID cards, staff uniforms, menu, store exterior, food containers, and website.
The logo usage example includes employee ID cards, staff uniforms, menu, store exterior, food containers, and website.
Original photo of the employee uniform sourced from Mos Burger, used solely as a basis for mockup design.
Original photo of the employee uniform sourced from Mos Burger.
Original photo of the employee uniform sourced from Mos Burger, used solely as a basis for mockup design.
Current State
Identified Issues with the Original Website
Identified Issues with the Original Website
Identified Issues with the Original Website
The original website presented several usability challenges:
Overloaded text-heavy pages, making it difficult for users to scan key information.
Lack of visual hierarchy, failing to direct user attention effectively.
Cluttered layouts, reducing engagement and making navigation frustrating.
Inconsistent branding, causing a disconnect between the rebranded identity and the digital experience. The company even maintained two different official website styles, which led to user confusion and diluted brand recognition.
The original website presented several usability challenges:
Overloaded text-heavy pages, making it difficult for users to scan key information.
Lack of visual hierarchy, failing to direct user attention effectively.
Cluttered layouts, reducing engagement and making navigation frustrating.
Inconsistent branding, causing a disconnect between the rebranded identity and the digital experience. The company even maintained two different official website styles, which led to user confusion and diluted brand recognition.
Case Study
Learning from Food Industry Leaders
Learning from Food Industry Leaders
Learning from Food Industry Leaders
To refine the design, I studied top-performing food industry websites and identified key strategies:
Minimalist, image-driven layouts evoke appetite and emotional connection.
Clear navigation structures allow users to find information effortlessly.
Storytelling elements help communicate brand values and product uniqueness.
To refine the design, I studied top-performing food industry websites and identified key strategies:
Minimalist, image-driven layouts evoke appetite and emotional connection.
Clear navigation structures allow users to find information effortlessly.
Storytelling elements help communicate brand values and product uniqueness.
User Research
Understanding Customer Preferences and Needs
Understanding Customer Preferences and Needs
Understanding Customer Preferences and Needs
To gain deeper insights into user preferences, I conducted a survey with 60 participants. The findings revealed several key insights:
Photo-centric layouts increase engagement and appetite appeal.
Concise, visually separated content improves readability and scanning efficiency.
One-page scrolling experiences enhance usability, allowing customers to absorb information naturally.
To gain deeper insights into user preferences, I conducted a survey with 60 participants. The findings revealed several key insights:
Photo-centric layouts increase engagement and appetite appeal.
Concise, visually separated content improves readability and scanning efficiency.
One-page scrolling experiences enhance usability, allowing customers to absorb information naturally.
Ideation & Solution
Understanding Customer Preferences and Needs
Understanding Customer Preferences and Needs
Understanding Customer Preferences and Needs
Based on research findings, I designed a modern, single-page layout to streamline the user experience:
Section-based scrolling to guide users through brand stories, products, and customer testimonials.
High-quality imagery to showcase food presentation and enhance emotional appeal.
Clear typography and spacing to improve readability and content prioritization.
Seamless mobile optimization to cater to users across devices.
Based on research findings, I designed a modern, single-page layout to streamline the user experience:
Section-based scrolling to guide users through brand stories, products, and customer testimonials.
High-quality imagery to showcase food presentation and enhance emotional appeal.
Clear typography and spacing to improve readability and content prioritization.
Seamless mobile optimization to cater to users across devices.
Website Redesign
Section Breakdown #1: Hero Section: Capturing Brand Essence with High-Quality Imagery
Section Breakdown #1: Hero Section: Capturing Brand Essence with High-Quality Imagery
The homepage opens with a full-width banner showcasing Overseas Dragon’s signature dishes. This section immediately immerses visitors in the brand’s culinary experience, highlighting freshness, variety, and craftsmanship. The combination of organic curves and warm colors reinforces the brand’s modern yet traditional identity.
The homepage opens with a full-width banner showcasing Overseas Dragon’s signature dishes. This section immediately immerses visitors in the brand’s culinary experience, highlighting freshness, variety, and craftsmanship. The combination of organic curves and warm colors reinforces the brand’s modern yet traditional identity.
Section Breakdown #2: Brand Story & Concept: Tradition Meets Innovation
Section Breakdown #2: Brand Story & Concept: Tradition Meets Innovation
A visual storytelling section introduces Overseas Dragon’s core philosophy, preserving classic flavors while embracing contemporary food trends. A key image features multi-colored dumplings, symbolizing innovation and health-conscious offerings. The accompanying tagline conveys the balance between heritage and creativity in their product line.
A visual storytelling section introduces Overseas Dragon’s core philosophy, preserving classic flavors while embracing contemporary food trends. A key image features multi-colored dumplings, symbolizing innovation and health-conscious offerings. The accompanying tagline conveys the balance between heritage and creativity in their product line.
Section Breakdown #3: Product Categories: Streamlined Navigation for User Engagement
Section Breakdown #3: Product Categories: Streamlined Navigation for User Engagement
This interactive section allows users to explore different product series, including: Potstickers (鍋貼系列), Boiled Dumplings (水餃系列), Noodle Products (麵類商品), and Spicy Stir-Fried Dishes (香辣抄手), etc.
Each category is visually represented with circular thumbnails, creating an intuitive and aesthetically pleasing navigation experience.
This interactive section allows users to explore different product series, including: Potstickers (鍋貼系列), Boiled Dumplings (水餃系列), Noodle Products (麵類商品), and Spicy Stir-Fried Dishes (香辣抄手), etc.
Each category is visually represented with circular thumbnails, creating an intuitive and aesthetically pleasing navigation experience.
Section Breakdown #4: Latest News & Ordering System: Enhancing User Accessibility
Section Breakdown #4: Latest News & Ordering System: Enhancing User Accessibility
(Left) Latest News Panel: Provides updates on new menu items, limited-time offers, and store events.
(Right) Order & Store Locator Panel: Allows users to select their city and preferred store, making it easier to place online orders or find nearby locations.
The split-card layout ensures clarity, helping customers quickly access essential information without overwhelming them with text.
(Left) Latest News Panel: Provides updates on new menu items, limited-time offers, and store events.
(Right) Order & Store Locator Panel: Allows users to select their city and preferred store, making it easier to place online orders or find nearby locations.
The split-card layout ensures clarity, helping customers quickly access essential information without overwhelming them with text.
Section Breakdown #5: Brand Values: Trust & Quality
Section Breakdown #5: Brand Values: Trust & Quality
This section visually represents the brand’s key values, including: Health (健康), Service (服務), Innovation (創新), Quality (品質), etc.
The circular design reinforces community and collaboration, while iconography enhances readability.
This section visually represents the brand’s key values, including: Health (健康), Service (服務), Innovation (創新), Quality (品質), etc.
The circular design reinforces community and collaboration, while iconography enhances readability.
Section Breakdown #6: Franchise & Career Opportunities: Strengthening Brand Expansion
Section Breakdown #6: Franchise & Career Opportunities: Strengthening Brand Expansion
A call-to-action section encourages potential business partners to join the Overseas Dragon franchise. The professional yet approachable employee uniforms reflect the brand’s modernized identity, emphasizing a welcoming, customer-oriented culture.
A call-to-action section encourages potential business partners to join the Overseas Dragon franchise. The professional yet approachable employee uniforms reflect the brand’s modernized identity, emphasizing a welcoming, customer-oriented culture.
The New Website Design across different devices (Mobile Phone, Tablet, and Desktop).
The New Website Design across different devices (Mobile Phone, Tablet, and Desktop).
Lessons Learned
Bridging Brand Design with UI/UX Principles
Bridging Brand Design with UI/UX Principles
Bridging Brand Design with UI/UX Principles
Rebranding a well-known traditional brand in Taiwan is no easy task, especially when people already hold strong perceptions of it. The challenge was to preserve the brand’s original values while introducing a fresh, modern vibe. Ensuring that the new visual identity remained easily recognizable and closely tied to the food store was crucial.
Additionally, the visual identity needed to work seamlessly across both print and digital platforms, making it essential to create a comprehensive logo usage and guidelines document. This provided invaluable insights into how branding decisions affect commercial applications, from packaging to web design.
Through this project, I learned that an effective digital transformation extends beyond aesthetics. It requires a deep understanding of brand consistency, user behavior, and functional usability. The website redesign allowed me to bridge branding principles with UX design, ensuring that the rebranded identity was not only visually cohesive but also intuitive and engaging for users.
Rebranding a well-known traditional brand in Taiwan is no easy task, especially when people already hold strong perceptions of it. The challenge was to preserve the brand’s original values while introducing a fresh, modern vibe. Ensuring that the new visual identity remained easily recognizable and closely tied to the food store was crucial.
Additionally, the visual identity needed to work seamlessly across both print and digital platforms, making it essential to create a comprehensive logo usage and guidelines document. This provided invaluable insights into how branding decisions affect commercial applications, from packaging to web design.
Through this project, I learned that an effective digital transformation extends beyond aesthetics. It requires a deep understanding of brand consistency, user behavior, and functional usability. The website redesign allowed me to bridge branding principles with UX design, ensuring that the rebranded identity was not only visually cohesive but also intuitive and engaging for users.
The rebrand for Overseas Dragon was also showcased in the "1+1>2" exhibition.
The rebrand for Overseas Dragon was also showcased in the "1+1>2" exhibition.
People are also interested in…
People are also interested in…
