YosLock is a leader in developing smart entrance accessing solutions that simplify access by transforming door unlocking systems. It provides tailor-made solutions for hotels, homes, and offices. Based on the various scenarios and details in the solutions, how the website can introduce the features more effectively and methodically? How can let customers who have never seen solutions that easy to understand the complex technologies? Using the “Timeline” to be the middle line of the page, also cooperate card design to introduce the content. Allow customers to understand the solution in different scenarios and products step by step from the outside to the inside.

ROLE: Design & Production (CMS Platform + Bootstrap Framework + Coding)

CLIENT: Yoslock

YEAR: November 2019

KEYWORDS: Web Design, UI & UX Design, Graphic Design, Responsive Design, Timeline, Card Design

01 Planning
Join the meeting to understand the “Yoslock” Brand requirements, collect data and communicate with the marketing team.

02 Design
Base on the data to draw the sitemap, design the wireframes and the visual design (All the design image of website)

03 Development
Using the CMS platform to code the website with the most frontend and less backend development.

04 Launch
Deliver the website to client and help to maintain the website. Sometime it’s needs to change some contents.

The home page mainly uses the big slogan with the related products to show the features.

On the solutions page, using the “HOME”, “HOTEL” and “OFFICE” to be the main body of the banner visual, then pictographically adding related products into the words. The product and the words were combined harmoniously. According to the different solutions, it needs to introduce the products and their usage. So that they have a lot of information to show on the page. Using the timeline layout to show the usage of products from outside scene to inside scene. Also, adding the related technology icons. It can let users have a better understanding of product details.