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.
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.
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.
Jan 2018 - Oct 2018
MindNode, Eagle, Axure, Sketch, Abstract, InVision, Zoom, Airtable, Atlassian Confluence
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.
We spent lots of time discussing with client about the new information architecture for the new website.
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.
We used Eagle (Left) to collect idea and inspiration, and shared our research notes on Confluence (Right).
By interviewed the client and some potential customers, we concluded the user stories to multiple scenarios:
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.
The flowchart was more complicated at the beginning, restricted by programming and project scope, we had to simpler it.
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
Single Course Page
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
Customized Options
Single Blog Page
Email for Order Receipt
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 on Airtable (Left) and notes on Confluence (Right).
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
Product Filter
Add to Cart
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
Typography
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.