20LASER


I was including in the revamp of 20LASER's website. I was responsible for Wireframes, Mockups, Prototypes, Responsive Web Design, Front-end coding and also Communication with related parties, including creative director, marketing manager, programmers, marketing executives and advertising agencies.


Company Background

20LASER operates A beauty center in Hong Kong to offer professional hair removal treatments and skincare for male.

My Role

I had involved in the project of revamping the company wesite, I had to design various hair removal treatments' booking flow, which mainly using Single Page Application concept. I was responsible for user experience design and user interface design, collecting requirements from related parties to HTML prototypes. I also had to maintain the UI of the website, including layout, micro interaction, and workflows, such that to make sure users can have the best experience using 20laser.com.hk.

Homepage Mockups

After the style rules are set: colors, typography, sapcings, visual elements with Creative Director and Graphic Designers, I began to build the homepage. During this time, I more foucs on polishing. This presents the home page for 20LASER collecting treatments of hair removal and skincare, with its seasonal promotions and service plans.


Free Trial Page Mockups

Marketing manager needed a way to present free trial treatments for marketing campaigns. The 20LASER free trial page is providing free trial of hair removal and skincare for attracting new customers.


Landing Page Mockups

All the social media marketing events, including Facebooking fan page, YouTube, WeChat and SMS need a landing page to drive traffic from social media platforms to the 20laser.com.hk. The landing page provides the information, the technology introduction, effects and advantages of the treatment.


Testimonial Page Mockups

Male hair removal service is still a growing business in Hong Kong, so the testimonial page serves as a platform to show off how others have benefited from the treatments, making it a powerful tool for establishing trust and encouraging potential customers to take action.


Revamp Process

For revamping 20LASER previous version of the website, firstly I had to communicate closely with Creative Director, to make sure the style rules are matched with the beauty center's corporate identity. Afterwards, I had to work with the marketing manager to deisign the the booking flows. The process was from the wireframes to completed coding. All of the front-end coding was written by myself including HTML, Javascript and CSS.