Yihu Board Game

Yihu.Inc is one of the biggest Chinese board game companies. The company targets publishing, media, and other business about board games. One of their main objectives is the international business of introducing, localizing, and publishing board games worldwide.

Now it's time to rebrand and redesign their official worldwide web product, which is for marketing and sales purposes.

Objects

• Rebranding

• Redesign the responsive website

• Design the

E-commerce process

Role

• UX research

• UI UX design

• Branding design

• Prototype

• Usability Testing

Tools

• Figma

• Adobe Photoshop & Illustrator

Year

2021

Challenges

Redesigning the website is not easy. Enterprise always faces challenges when they want to change. Here are the three main goals of the product, overall, Yihu needs to expand the market and increase engagement by the redesign. On the other hand, Yihu wants to launch its e-commerce website for international users as well. 

/Rebranding

is always a challenge for an existing company. Yihu needs to keep its loyal customers and reach out to more users worldwide.

/Engagement

should be increased by redesigning, not only for current players/users but for other potential clients/users.

/E-commerce

now is the trend on the official site. Yihu needs a smooth and friendly user interface to achieve the purchasing process.

Design Approach

Competitor Analyst

During the pandemic period, playing board games become more popular as an indoor activity. Players need more platforms to discover classic and latest board games.

A platform like BGG is for players to search, filter, and discuss games, also you could find some events nationally here as well.

Publishers’ official websites like Cmon, Asmodee, and Z-man are more focused on branding and marketing, which have a similar goal with Yihu. But the functions are limited among each of them.

For example, Cmon doesn’t provide online shopping and Asmodee doesn’t include the News about the brand. The opportunity for Yihu is to build a website with basic functions for the players.

User Interview and Findings

I interviewed 3 board game players between 28 to 31 years old. All of them need an online platform that includes information discover and shopping experience. For online shopping, all of them tend to purchase on platforms like Amazon or Target, but they are fine to purchase on the brand’s official website if they could get early access to the latest game or they could get a better price.  As a hardcore player like Matt, he probably needs the source to review the latest news and events as well. So Yihu could have more opportunities other than presenting the culture of the company.

Opportunities

/Sales

could be made in the website directly in the new version, which is redirected to Alibaba before.

/Exposure

of existing and future board game products by redesigning.

/Culture

of the company distinguishes itself from other board game firms by unique and impressive design.

Persona

I created the persona about Jeff, a board game fan with basic tech knowledge, which describes Yihu’s target audiences. 

Site Map

After the previous research and meeting with the co-founders, we decided that the website would include searching, products list, events, news, about, and shopping page. So that would be a combination of branding/marketing and an e-commerce website.

User Flow

The following chart indicates the process of the users purchasing a Yihu board game in different ways. Not only from the product list, but users could also be directed from news, searching, and other pages.

Rebranding

Rebranding is always hard for an existing company. I keep the original meeple shape and change the characters to English. The attributes of the Yihu would be playful, lively, and refreshing. I choose to keep the original red color as the primary color, and I choose some vivid colors as the secondary ones.

For typography, Quicksand catches my eye when I was choosing the typeface, the font is formal and has some refreshing tone.

Wireframes

After sketching, I started to create low-fidelity wireframes. I began with the home page, which is the essence of the web product. After that, the other pages about products, details, news/events would follow the structure and layout. I keep the pages simple and concise, which is friendly for wider users/potential business partners.

Home

All Products

Product details

News/Events

News/Events Details

UI Design

After the wireframe designing, I designed the UI of the pages including home, product list, product details, purchasing process, news list, and news details.

Home

Product details

Checkout

All news

All Products

Cart

Order successful

News details

Prototype

After the UI design and iterations, I conduct the prototype in Figma, including the users’ browsing the web pages, and making purchases on the website. The video shows the whole process of the browsing and purchasing phases. 

Testing & Iterations

I conducted the testing with the stakeholders and other interviewees. Here are some iterations based on the feedback. 

Unique Tags

In terms of online purchase, the team was considering to increase the competitiveness between Yihu's site with other retail websites like Amazon, and from the previous feedback from user interviews, we decided to add the tags/stickers like "Early Acess" and "Exclusive" on the product details page.

Before

After

Payment Process 

During the user test, some users have the same problem when they are at the payment process. When she/he input the card information, the page will go to the successful page directly, which makes them feel less secure, so I added the process about payment. After the user inputs the card information, the system will process and show if the card info has gone through or not, next, users could decide whether to pay the order with the current card, or go back to the previous step to change another card.  

Before

After

Final Live Demo

Rebranding & Redesigning

Next Step

I'm so excited to participate in this project, I have a chance to work with the co-founders and accomplish the project from ideas and problems with them as a Product Designer. I believe after the website launching, there would be a great impact on the company, especially for marking and branding purposes. Not only some potential business partners all around the world but our existing customers and more targeting audience. 

I believe there are a lot of potential features we could dig more into. For example, online forums, customer reviews, users' profile pages, etc. For now, it's time to do more user testing and hand it to the developers. 

It's important to get more information and feedback from the users and partners as well after we launch the website. Hopefully, we could get more data and dig into more behind the scenes. 

Thank you for scrolling :)

More Case Studies