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
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.
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.
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.
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.