© 2019 by Chao-Yu Chen. All rights reserved.

Ho Chien Food 

Responsive Website / Branding

The Concept


What method do you use to record your memories?

How often do you look back to your memories?

From B2B to B2C​​

Ho Chien Food has been a poultry supplier to over hundreds of restaurants in northern Taiwan for over thirty years. As a family-owned business, they grow fast in recent years. The new generation of owner would like to expand their business by offering prepped chicken to consumers and create a website for taking existing orders from restaurants as well. They are in need of a branding design and responsive website to cover these purposes.



  • Design a responsive website (desktop, tablet, and mobile) that covers core functionality:

1. Purchase page for restaurants (search, info, order).

2. Purchase page for consumers (search, info, order). 

3. Information of Ho Chien Food.

  • Create an identity for the company.​

  • Set up project timeline and product development.

Understand the Market & Customers


Background Knowledge / Empathy Research

Research Goals

  1. Understand what drives customers to make purchasing decisions.

  2. Identify the target customers and their purchasing preferences (type of chicken, purposes, cooking method, etc).

  3. Identify customer’s concerns and ways to solve these issues.

  4. Research the market.

  5. Identify the product's strengths and ways to emphasize them.

Research Assumptions

  • People prefer to purchase poultry with clear/transparent package so they can see the product and make purchasing decision.

  • Target customers are age from 25-40, working woman/mom who has already a habit of ordering fresh food online.

  • People have difficulties determining what to buy because they don't know how to cook them.

  • Most prospective customers make decisions relying more on their feelings rather than logical reasons.

  • There is a competitive precooked chicken market in Taiwan, but very few of them supply to restaurants as Ho Chien Food does. 

Empathy Research

5 participants were recruited from 3 locations- WholeFood, Shoprite, and Keyfood at the poultry area. They shared their experience, feelings, and concerns regarding order poultry online. They are 2 males and 3 females aged 26 – 36 who had an experience on fresh food online shopping.


To synthesis my interview, I typed out the conversations and then categorized them by do, think/feel, see and hear. And then I grouped the common ones into patterns. I came up with insights and needs according to this processes. 


  1. What triggers you to purchase prepared/precooked chicken online?

  2. What are your considerations when purchasing fresh food online?

  3. When you open a website do you read the text or see the image first?

  4. How often do you cook with prepared/precooked chicken/food?​


  1. Quality and freshness are the most important considerations for customers ordering online.​

  2. Most people won't read the text but see the graphic first. The package affects the visual sense and impact the decision making most. 

  3. When purchasing the product, people also look for recipes or cooking suggestions on the package.  


  1. People need a transparent package to see the chicken to know what it looks like.

  2. People need to be able to understand the ways to cook the product in a clear and concise way.

  3. People need to be attracted to the package first before making purchasing decision.

  4. People need information of the history or story behind the brand for connection.

Ideate the Product


Persona / POV / HMW

Building Persona

Persona - Working Woman

Emily, 34 / Lawyer / Married / Taipei



  • Work from 8:30-7:00 

  • Subway to work

  • Cooking twice a week 

  • Heavy online shopper


  • When I am cooking I want to use the prepared ingredients to reduce the time of cooking.  

  • I love cooking but I don't have much time for shopping.


  • Fresh product with easy purchasing method.

  • Recipes of the product. 

  • Clear instructions of the website.

  • Track the delivery.


  • Can't find good quality prepared chicken.


  • Amazon Social Icon
  • Facebook Social Icon
  • Instagram Social Icon
  • vogue-logo-png-transparent
  • 1200px-UNIQLO_logo.svg

POV Statements & How Might We ...

I did a research of e-commerce checkout design and list out the point of views for the primary persona by referring back to the research and persona's need, and then find out HMW according to the POV statements.


  1. Most people won't read the text but see the graphic first for most of the merchandise, but for fresh food, people look into the details of the product.​

  2. When purchasing the prepared chicken, people look for recipes or cooking suggestions on the package. ​

  3. The target customers are young professionals or working women. This group of people have heavy online shopping habit and cook more than once a week.​

  4. Information of the history or story behind the brand is a way to build emotional connections with customers.

Guidelines of E-Commerce Checkout Design

  1. Checkout process should be completely linear.

  2. Add descriptions to form field labels.

  3. Avoid contextual words like “continue”.

  4. Don’t use an “apply” button in the form.

  5. Use only one column for form fields.

  6. Don’t require seemingly unnecessary information.


The brand needs to tell their story of history because it is a way to distinct itself from other competitors and to build emotional connections with customers.


How might we incorporate the story of company in the brand identity and apply that concept in the website?


  • Use traditional Chinese characters for logo to relate to the history of the company and create professional impression.  

  • Illustrate chicken with calligraphic design on the landing page so the customers could understand the brand immediately.​​

  • Use minimum color in branding design to coordinate with the calligraphic style of logo.

  • Incorporate the traditional logo into the  stylish feeling of the website to attract attention of the targeted consumers. 


The shopping site needs to have the seasoning of the prepared chicken in a clear and concise way because it can increase the motivation of purchasing.


How might we present the seasoning on the website of each product in a way that is understandable and easy-to-read?


  • ​Use strong shadows to contrast between the product and the background and create focal point on the web page. ​

  • Place the seasoning on a simple background to present what's included in the prepared chicken.​​

  • Use minimum color in branding design to contrast with the products and provides flexibility for future business purpose.  

  • Put the uncooked and cooked chicken side by side to create contrast and trigger the shopper's curiosity to know the product.

Define the Experience


Sitemap / Wireframes / Responsive UI


Mid-Fidelity Wireframes


The concept is to create a clear and concise website which allows customers to see the products right away. In the early stage, there will be only three products in the shop, therefore the product page links to the homepage of the products. For future product line expansion, the product page could be its own page and the homepage will be introducing promotional products. 




Shopping Cart / Check Out


Responsive UI



Mood Board / UI Kit / Animation / High Fidelity Wireframes / Prototype

Mood Board


Users could adjust the intensity of each feeling. The detail will then appears in the statistics. 

Saving the Memory

After recording, there are eight feelings to select. The combination of two feelings will be the emotion of the memory.


Each record could be enlarged and compared to other records. Users could play each memory directly on the statistic boards.

Statistic Boards 


The boards are composed with activities (steps), sleep analysis and heart rate. In the month section, the emotions are categorize by days and types, which allows users to better understand the composition of their memories.

Key Screens

Next Step

Conduct usability testings, and start producing the lessons and library features.

Tools: Sketch, Invision, Photoshop