Trekinn Website

Redesigning Online Presence and Brand Aesthetics

Trekinn is a local-owned homestay in Hualien - a popular gateway to some of the most scenic areas in Taiwan. It is top rated in the local homestay scene, and has been established for more than ten years. Trekinn has two double queen bedrooms and three king-sized bedrooms. Primary clients are young adults and families with young children.

Branding

Design Brief

Trekinn needed content reorganization for its website as well as brand assets.

The original website speaks in a direct and transparent tone that conveys simplicity and honesty. Website content emphasizes Trekinn’s cleanliness, excellent location, and locality – “We know our way around, and we can help you plan the best trip possible.”

The project's scope included a website redesign, encompassing tasks such as information reorganization, enhancing intra-website mobility, separating Chinese and English versions, implementing responsive web design, and updating key brand assets to align with the physical experience of staying at the homestay.

Color and Photography

While guests are strongly encouraged to explore Hualien's natural beauty, the website initially lacked visual content. So the first thing I incorporated into the design assets were high-quality photos showcasing the local scenery, open sourced from the local county's tourism beaureau. Since all of them are highly saturated, I wanted the website to have low to medium saturated colors for balance.

Typography

Since most customers are from Taiwan, my design approach was Chinese-first. For Chinese I wanted a Ming font, and landed on Gen Wan Ming, an elegant and scholarly font with with slightly rounded angles which effect mimics the slight blur of newspaper print. It evokes a nostalgic but homely feeling. The typeface pairs well with the serious tone of being direct and trustworthy, as well as with the brochure quality I wanted. For the body text, I chose Genseki, a sans-serif font. For the English body text, I prioritized matching the style of the Chinese characters. Although I liked Gen Wan Ming's built-in latin characters, they felt a little too rounded. Instead, I chose Edita to complement Gen Wan Ming, and after butting heads with many sans-serif choices that felt too sterile and geometric, I landed on the humanist Classico URW to be the counterpart for the Chinese sans.

Web Design

User Flow

Assessing the site, I can see very thoughtful information, such as how the website instantly provides value to users by listing local points of interest while also highlighting the homestay's excellent location. There are some thoughtful features such as a "call" cta that allows users to quickly contact the homestay. The accessibility of this information could be improved through organization - for instance, moving travel information and services from under the “bulletin” to its own page.

I ended up organizing site information into five screens: About, Rooms, Map & Destinations, and Contact. I also planned for a Landing page that would serve as an entry point to each page, and increased intra-website mobility by placing relavant links where needed. For instance, there was a link to the Contact page in the footer, and a link to Map & Destinations in the Rooms page, located right after booking information. This link was for users that just completed booking, and would like to explore things to do near the homestay or plan their itinerary in Hualien.

Wireframes

Development

Technology Stack

I used React and Tailwind CSS for this project.

Highlighted Features

Internationalization

Instead of creating a separate English version of the site, I used i18n, which allows in-app language changes – no reload required. It works by dynamically mapping json values onto their corresponding keys in html.

import i18n from "./../../i18n.js";
import { useTranslation } from "react-i18next";
import NavLink from "./NavLink.js";
const Navbar = () => {
  const { t, i18n } = useTranslation();
  return (
    <nav>
      <NavLink linkText={t("Navbar.trekinn")} linkRoute="/" />
      <NavLink linkText={t("Navbar.about")} linkRoute="/about" />
      <NavLink linkText={t("Navbar.rooms")} linkRoute="/rooms" />
      <NavLink
        linkText={t("Navbar.destinations+map")}
        linkRoute="/destinations+map"
      />
      <NavLink linkText={t("Navbar.contact")} linkRoute="/contact" />
      <NavLink linkText={t("Navbar.home")} linkRoute="/" />
      <div
        onClick={() => {
          i18n.changeLanguage(t("Navbar.language"));
        }}
      >
        {t("Navbar.changeTo")}
      </div>
    </nav>
  );
};
export default Navbar;

//translationZHTW.json
{
  "Navbar":{
    "trekinn":"《 美崙遊記 》",
    "about":"簡介",
    "destinations+map":"觀光指南及地圖",
    "rooms":"訂房",
    "contact":"聯絡資訊",
    "changeTo":"English",
    "language":"en"
  }
}
//translationEN.json
{
  "Navbar":{
    "trekinn":"Home",
    "about":"About",
    "destinations+map":"Travel guide",
    "rooms":"Rooms",
    "contact":"Contact",
    "changeTo":"中文版",
    "language":"zhtw"
  }
}