Glow Laser & Skincare is a laser spa clinic located in Surrey, they were the first client that I reached out to and my first main project of my internship with Downtown Surrey Business Improvement Association. As they already had a website before which was created with the Wix platform, I decided to use the same platform to redesign their site for them. The previous website had several major design problems, such as layout misalignment and color inconsistency with the brand, which were all fixed with the new design, giving a more professional look to it and aesthetically pleasing at the same time (Figure 2).

Process

During the beginning of the project, my team and I visited the clinic to get in touch with the owner to talk about how we can improve her business digitally, such as refurbishing and promoting their social media profile and website. While my other teammates were focused on the social media, marketing aspects, and the other Web Designer in the team was working on another business, I took charge of the web development and design aspect for Glow Laser & Skincare individually.

In the discussion of redesigning their website with the owner, I took notes of what she wanted to add or change specifically for each page of the site (Figure 3).

The challenge here was to identify which idea that the client provided was suitable for the business and which was not. By using critical thinking, I was able to filter out some insignificant ideas that didn’t provide substantial improvements to the website.

In this process, I sketched 3 different layout drafts for both the landing page and contact us page and implemented them inside a sketched box in an approximated ratio of the site (Figure 4), which I passed them to the owner for her to choose the best one that will fit the overall aesthetic and goals of the company. Eventually, the owner preferred to choose some of the best features of each different layouts and combine them together. Therefore, I modified the designs to enhance the attractiveness of them and added extra contents that were requested by the client.

For the typography, I used work sans as the header since it gives a clean and modern feeling to it from the san-serif font family-style and tends to be leaned towards modernistic due to the minimalistic style of the letters. Which provides great legibility to the viewer.

Also, I used Proxima Nova as body since it contrasts with the header with its narrower letters. It is clean and causal as well, which is greater for smaller text readability.

As for the colors, the blue color scheme represents the branding of the clinic, peaceful and calm. As the owner requested, I used the same color as the physical sign outside the clinic, to create visual consistency. The two darker shades of blue help contrast between the texts and the background or other visual elements.

As for the skin color, it is for any highlights that will catch the viewer’s eyes, such as the Botox and filler section since the owner wanted it to be more obvious.

After I finalized the layouts, typography, and colors, I started implementing them and develop the new design with the Wix platform through several iterations. The first iteration implemented the side by side picture and text design from the second draft of the landing page (Figure 5). I utilized the is design since there were bullet points in the text which looked the worse when it was center-aligned.

In the second iteration, I added a container with a darker blue shade behind the set of pictures and texts, as the owner found the white text to be difficult to see with the light blue background (Figure 6).

In the third Iteration, I realized the container was a bit distracting as there was too much of a contrast between the container’s color, the background color, and the text color. Therefore, I decided to remove the container and changed the background color to the same as the container, to provide a better and clear visual hierarchy (Figure 6).

As for the mobile web design, it had several major design issues in the previous version, such as missing background color, menu button blocked page contents partially, and layout inconsistency (Figure 7). Therefore, I reorganized all the visual elements on the page, added important contact information on the Contact Us page, and added graphical icons to each contact information (Figure 7), which made the page more appealing and allowed the customers to recognize the contact information faster and easier.

Takeaways

In the end, the client was very fascinated with the result of the new web design, she stated that it became much more professional and cleaner than it was before and that her customers were surprised seeing the new site as well. Overall, the number of site visits to the site has surged, comparing with last year.

From this project, I gained more experience in coordinating and communicating effectively with a client, as it helped keep everyone on track with the process, hence improved the efficiency and consistency in designing.

Link to the portfolio piece

www.glowmedispasurrey.ca