KINJO Jewelry

The e-commerce site brings a 12-year brand a new life.

Overview

Object

With a 12-year history, KINJO is the top one metalworking & workshop brand in Taiwan. Now they have 8 stores, attracting 1,800 tourists to experience handmade rings every month. At the moment, KINJO really needs an e-commerce website with a brand new digital image, presenting all the services they have, providing online purchase for course and products, to collect customers’ data and improve the efficiency of marketing strategy and sales.

Approach

Due to the services and complicated functions, the project scope is quite large so we have two designers participated in, my dear partner is Cece. Firstly, we analyzed the original site’s performance and the platforms they used to know more about the target audience. Then we spend a lot of time on digesting and organizing the information architecture for the new website. After research on branding, online booking and e-commerce, we had a clearer consensus on brand strategy, then we started crafting flowchart and prototype.

My Role

During the kickoff phase, I was responsible for market research and brand strategy. For those complicated process, I did a lot of research, drew the flowchart, and discussed with the team. Then we worked together on page design. I worked more on the design system with front-end developers and symbols organized for the sketch.

Duration

Jan 2018 - Oct 2018

Tools Used

MindNode, Eagle, Axure, Sketch, Abstract, InVision, Zoom, Airtable, Atlassian Confluence

Links
kinjo.co/tw

The Challenge

It is not only an e-commerce site, but all the business of KINJO need to integrate together. For designers, we had to digest heavy content and organize process & rules to be well presented. All the functions needed frequent discussoin with developers. And for the first time, our team members want to figure out the way to cooperate well between designers, developers and even clients on such a big project.

Process

Kickoff

Firstly, we used Similar Web to analyze the original website and we found that about 67% of visits were from organic search, which means high brand awareness. However, customers can only get limited information from blogger and facebook business page, rather than the official website. Therefore, we discussed lots with the client about organizing the information hierarchy for the new website.

The official site of KINJO in 2008.

The official site of KINJO in 2013.

The Sitemap of KINJO E-commerce Site

We spent lots of time discussing with client about the new information architecture for the new website.

Research

Rings are not a simple product, it is about the size, the personalized engraving, and the materials. Online booking is also complicated, the biggest question is how to sync remaining seats within date, time and stores. To thought comprehensively, we worked with developers during the research phase to prevent technical limitations as far as possible.

We provided some selected design references for the client. After discussion, we defined the soul of design will be storytelling, like the brand motto, “A Memory to Remember”. From online experience to products and workshop, we would like customers to feel the brand from the heart and keep it as a beautiful memory in mind.

KINJO research tools: Eagle & Confluence

We used Eagle (Left) to collect idea and inspiration, and shared our research notes on Confluence (Right).

Flowchart

By interviewed the client and some potential customers, we concluded the user stories to multiple scenarios:

  • I want to make two rings at the same time, so I reserve 2 courses for only 1 customer.
  • I want to reserve a course for my friend as a gift, so I cannot decide the date she will like to take the course, at the moment I order it.
  • I am going to travel to Taiwan for 5 days, however, there are no remaining seats.
  • If I only reserve the course, then why do I still have to fill out the address during checkout.

However, the process and requirements are getting complicated, we had to narrow down to simplify it. After frequent discussion with the developers and confirmed with the client, we drew the flowchart to double check all the situations can be satisfied.

Flowchart of Course Booking and Checkout

The flowchart was more complicated at the beginning, restricted by programming and project scope, we had to simpler it.

Wireframe

Based on the heavy content and critical process of the services, I created initial sketches and wireframes of our prototype with the following user flows, Course Landing Page & Single Course Page. We used Axure as the tool for wireframing the pages.

Course Landing Page

Wireframe of Course Landing Page

Single Course Page

Wireframe of Course Single Page

Final Mockup

According to the sitemap, there are more than 20 static pages need to design, not to mention dynamic pages. My partner designer, Cece mainly worked on design styles, and I were responsible for organizing components for our design system, then we worked together on all the pages.

Single Course Page

Single Course Page of KINJO

Customized Options

Customized Options for Course and Products

Single Blog Page

Blog Page

Email for Order Receipt

Order Receipt

Design System

Considering the budget, it was the first time the project scope is big enough for our company to create a design system for the project. It was not only a challenge for me but also for all the team members, hence we spent many resources and time on discussing and learned together.

I took much research on other design systems, such as Material Design (Google), Carbon Design System (IBM), Lightning Design System (Salesforce) for reference, and collaborated closely with front-end developers to build a design system satisfied their needs. As a web designer, I finally understood the importance of components naming and the “language” we communicate with the developers.

Symbols Organized

Symbols organized on Airtable (Left) and notes on Confluence (Right).

Delivarables

Prototype

The project had the pre-launch on the end of October 2018, click here to go! The rest of the parts including “promise rings” and “buyer’s guide” belongs to phase 2 are still ongoing.

Course Booking

Course Booking

Product Filter

Product Filter

Add to Cart

Add to Cart

Design System

Finally, we created a complete and basic guideline for KINJO. For color, you can see the color palette with color name and hex first, then all the usages & roles for each color on text and UI. For typography, every kind of heading, paragraph, and even link format are well defined by font size, line height, letter spacing and also the specs for RWD.

Our developers satisfied by the system we built, it makes them start a project more quickly than before. No need to ask designers again and again, “how many grays do you have?”. Just by copy and paste, designers can define these basic style guide fast in the future.

Color Palette & Usage

Design System for Color

Typography

Design System for Typography

Conclusion

What I Learned

As a web designer working at an digital agency, the budget is the crucial condition of any project. I was lucky to be part of KINJO project with such a big scope. During production, I spent much time discussing with front-end developers and found that there are still process and design I can improve more.

For example, I did not think of interaction much before. Even I had some references in hand, I did not organize them well and only find it out while developers ask. So we tried FSM for the first time, and notes other details on Confluence, developers also left their questions on it for more discussion. Still not familiar with the working process, but for now it was a good start.

More Projects

VUE Movie Database

Startup, Web Design, UI/UX, Marketing

Gig Bird Event Calendar

MVP, Logo, Web Design, UI/UX