banner2

PROJECT BRIEF

Kakio Mart team is aiming to help Canadian customers learning and shopping premium products from Japan and China. They introduce toys, stationery, and beauty products that are famous in Japanese and Chinese markets to Canadian customers. Specifically, Kakio Mart believes building an engaging shopping community and a convenient, user-centric shopping experience is crucial to success.

TEAM & PROJECT INFORMATION

UI/UX design : Leona Huang

APP development: Luren Wang, Nithin

Business strategy: Echo Qing

Marketing: Flora, Qishi, Nadia

Project length: 9 weeks

Project type: Commercial
Tool: Figma, Photoshop, Sketch

PROBLEM SPACE

Kakio Mart team is a retail company based in Toronto and has more than 4 years of experience in selling and marketing premium Asian products. Currently, they want to digitalize their business by launching their own e-commerce app.

They look forward to learning more about the local customers and introducing more innovative Asian brands to those customers through their own app.

How might we help Kakio Mart design a convenient and elegant online shopping experience, so that their customers will be able to learn and purchase the most trendy products in Japan and China?

USER RESEARCHES ( Primary user research + secondary research )

What makes it difficult for Canadian customers to learn and purchase popular Japanese and Chinese products onlineļ¼Ÿ

Some key insights from user research

Demands for international sales agents

- The users will need an agent to help them purchasing niche products and limited offers because lots of emerging young brands donā€™t support international shipping.

Users buy products as listed

- Users donā€™t have a chance to tell the sell-side what they want unless they email/call the sell-side.  

Users learn about products by reading users reviews
Users are not familiar with emerging young brands

- Product reviews are one of the critical references that push users to try new products. 

- Young and innovative Chinese products are fresh to the Canadian market. 

Business strength of Kakio Mart

1, Kakio Mart has local inventory in Ontario. Their customers will be able to get the product within 3 days.

2, Kakio Mart has good insights into the growing needs for innovative Chinese and Japanese products in the Canadian market.

3, Kakio Mart provides a direct shipping service between Japan and Canada. Users will be able to get any limited-time offer and niche products from Japan by reservations.

4, Kakio Mart is familiar with emerging Chinese and Japanese brands, and they are good at filtering the products that fit the Canadian lifestyle.

Think about the Business goal

Kakio Mart team started to sell Japanese and Chinese premium products in Toronto in 2017. They are professionals in marketing Asian products in Canada.

Kakio Mart is looking forward to building an app to better serve and learn about their customers. They believe their app is a place for shopping and a platform for customers to communicate with the seller.

Communication and Community are two keywords of Kakio Mart's business plan for the future.


" learning about the customers and providing them the best service."  - core business value of Kakio Mart

CORE USER STORY

As a user, I want to learn about the most trendy products in Japan and China, so that I can bring innovative products to my daily life.

TASKFLOW

Frame-14

HIGHLIGHTED FEATURES OF THE PRODUCT

The image on the right side shows the important features of this product:

 

1, Local inventory vs Japanese inventory 


The local products will take 1-3 days to deliver, while the products directly imported from Japan will need at least seven days.


"1" - Blue background indicates the product is from local inventory.
"2" - The yellow background and the shipping journey show the product is directly shipped from Japan.

productpage

2, Add a feature that encourages the user to communicate with the Kakio Mart team.


The ā€œ3ā€ feature ( see image on the right side) on the home page references an interactive banner that takes users to the mailbox. As I have mentioned in previous paragraphs, Kakio Mart values the customersā€™ opinions of the products. This app will encourage the user to tell Kakio Mart what they want to buy from Japan and China.


Consider the feasibility of app development, the user will be directed to their mailbox after taping the contact banner on the bottom. They will able to send their suggestions to Kakio Mart via emails.

homepage

EXPLORATION AND ITERATIONS

Tech constraint vs Marketing strategy

Since Kakio Mart starts their app development with a small development team, it is important to maintain the simplicity and elegance of the product design. To simplify the product design and improve the user experience, I have conducted usability tests.

Notable changes based on tests results and tech constraints

1, Home page and the secondary menu ( before / after )

beforeafetr1

Usersā€™ voice ā€œ there are too much things to learn for a new app.ā€

Development teamā€™s voice ā€œ It takes long time to develop those features."

Original design:

- Homepage is a place where people obtain coupons, sales events and most trendy product/brands information.

- The secondary menu displays sales events relates to a primary category. For example, the banners of the beauty page indicates sales events relates to all the beauty products.

2, Home navigation bar( before / after)

Iterated design:

- The homepage banners will focusing on displaying : trendy products, top sales of the month and current promotion.

- The secondary menu will display all the products under this category. Users will tap the category buttons to filter the products.

categoryiteration2

Usersā€™ voice ā€œ Current homepage looks similar to the category page. It is confusing the see two similar pages on the home navigation bar.ā€

Original design:
Iterated design:

- Since this app is probably going to have more than 10 categories of products in the future, the home page only displays the most popular product categories, and the category page shows all the product categories.

- After few meetings with Kakio Mart team, we believe that creating a perfect product is not our current goal. It is important to deliver a simple and elegant product to our target users. Therefore, I simplify the home navigation bar by removing the category page, and merging the 10 categories into 8 categories.

 

 

 

UI + BRANDING DESIGN

According to the meetings with the Kakio Mart team, there are key messages in their branding:

1, Using fox as their icon animal.

The founder of Kakio Mart believes that the fox is the icon animal of their company because Kakio Mart starts their business by selling premium Japanese products. A fox has a metaphoric meaning for lucky and good wishes in Japanese culture.

2, Using colours that suggest relaxing and feminization

The founders and the primary customers of Kakio Mart are female customers. The Kakio Mart team aims to help their customers buy products that bring convenience and happiness to their lives.


MOCKUP5
UI Design

Based on these messages, I started my works with a mood board that indicates Japanese culture. Pink and blue become the dominant colours of the design.

Also, to help the development team better understand the design details, I created a UI library that presents all the product details, including UI components, illustrations, and logo variations.

MOODBOARD1
COLOUR4
Icon set and UI illustrations

I designed a set of icons for product categories on the homepage to illustrate the relaxing vibe of Kakio Mart. Since the primary customers are females age between 20 and 30. I started from a cartoon style ( Plan1) and then ended up with a more mature and modern style ( Plan2 ) of design.

iconset
Logo + Icon design

As I have mentioned in previous paragraphs, Kakio Mart is looking forward to using a fox as their mascot animal for their brand. 

 

Design requirements for the brand mascot:

- Demonstrate a sense of Japanese animation.
- Clean and simple.
- Indicate the Asian culture.
- Demonstrate the sense of traveling.

Brand mascot moodboard

moodboaed2

Brand mascot development process

development1

Logo development process

development2

MOCKUP

Let's shopping at Kakio Mart!

Mockupsample3

LEARNING AND NEXT STEPS

Kakio Mart is the first commercial app design project leaded and designed by myself. It is excited for me to go through the process of transforming a real business plan into a genuine product.

During the design and development process, I learned a lot about communicating among stakeholders and the development team. I look forward to seeing more changes and improvements to the products after receiving more user feedbacks.

Selected Works

TD bankApp design

Kakio martApp design

Q1 dynamicsSaaS design

FoodieApp concept design

WeCare Real estateWeb design

Waterlily retreatsVisual design