Website redesign for Hon Kah Trading

6 years ago, I overcame my inability to cycle, and morbid fear of it after a short 1-hour lesson with Coach Edmund, the owner and resident Coach for Hon Kah Trading. Hence, I found it really fitting that I got to reconnect with Coach Edmund through redesigning his website, as well as to contribute to an SME that I know from experience, has made a positive impact on the community.

Figuring out the business

Through a short interview with Coach Edmund, we managed to gain a glimpse of his business and how he operates it, as well as his main revenue streams. We found out that providing cycling lessons is Hon Kah Trading’s main source of profit, accounting for more than 80% of revenue generated by the shop. The audience he targets is mainly children, but he still gets his fair share of middle-aged and elderly individuals who wish to learn how to cycle. For this reason, sales of children’s bicycles account for almost all the revenue generated by product sales, and they are normally a direct consequence of a first-time cycler attending the lesson. We also learnt that most of his customers come from Google searches, or simply word of mouth. This is no surprise as the website URL, cyclinglesson.com.sg, makes search rankings for the website extremely favourable.

As such, the short discussion gave us the key information we needed — Hon Kah Trading is a family-run business that focuses on providing cycling lessons for children, which also helps to drive sales of children’s bikes, the secondary revenue stream for the SME.

Understanding how we could improve

Below is an image of the landing page of Hon Kah Trading’s initial website.

Through our UI/UX course, we manage to identify a few elements of the website that were off right off the bat. The call to action (CTA) was too tiny, and is indistinguishable from the rest of the text on the front page. The pictures act as a form of social proof but are too outdated to project an image of credibility to viewers. The primary and secondary products and services of his SME are also not obvious on first glance and requires too many clicks to get to. The colour combination of the website also could be improved, as it gives a very dated vibe that would not have been successful in retaining significant user interest. The front page also lacks testimonials that would keep customers interested in his service, since entrusting your child to a complete stranger, even a cycling coach, can be nervewracking for some.

Design process

After identifying the elements, we improved on them individually before combining them together as a whole to create our final product.

Overall color + font combination

We decided to use the colours found in the logo to design the website, as well as darker shades of those colours to introduce some variation.

As for the font, we decided to use Raleway. It is a font that is aesthetic yet readable, and has more than 10 different styles, which helps to create hierarchy within the site.

Navigation bar

The navigation bar for the original website was practical, but dated. Consumer preferences change over time, so we decided to carry out a card sorting exercise in order to figure out how to design the navigation bar.

After much deliberation, we settled on the below design.

Since the whole website is left aligned, we decided to left-align the logo as well to leave more space for the more important components of the navigation bar. Instead of having the button for bicycle lessons as a regular component in the navigation bar, we bolded it and put it within a red button in order to attract the attention of viewers and increase our conversion rate. By combining some elements together, such as “Courses” and Services”, we manage to declutter the navigation bar, which helps viewers to find what they need more easily.

Landing page

The landing page was the portion of the site we made the most changes to, which is why we were most pleased with its final design.

This is a vast improvement from our initial design for the homepage. (below)

In order to improve the design of the landing page, we used a picture of Coach Edmund teaching a student so that the first thing that grabs the viewers attention is Coach Edmund in action during one of his lessons. Additionally, given the color palette of the website, greater contrast can be achieved by layering the text over a dimmed picture instead of a plain-colour background. We also designed a more compelling call to action for each service he provides, such that viewers will have a clearer idea of his value proposition. To complement this, we also implemented a radio switch button, so viewers can easily switch between both pages depending on their reason for visiting. The social proof on this website is also more prominently displayed compared to the original, and helps boost the credibility of the SME.

Testimonial page

The testimonial page is split into two portions: one that can be accessed by scrolling down from the landing page, and one that only can be accessed by clicking the button located on the former.

We felt that it was important for the faces of these reviewers to be displayed, so viewers will be confident that these are real reviews. We also utilised the different text styles of Raleway to create hierarchy within each review, making them more readable.

About us page

The About us page provides important information about Coach Edmund, which helps him seem more approachable to potential customers. His mini resume also reassures them that their children would be in safe hands, which is key in increasing business for the SME.

Lesson details page

People want to find out more about a lesson before they sign up. A lesson details page is perfect to showcase Coach Edmund’s unique and effective teaching style, while also alleviating any concerns’ the parents may have.

Pictures that accompany description of skills taught help to assure parents more effectively, and also help to engage viewers more.

Royalbaby information page

Coach Edmund focuses on selling Royalbaby bicycles, a brand that specifically focuses on children’s bikes. As such, we created a page to explain the benefits of Royalbaby bicycles.

Even though such a page might seem to have little relation to Coach Edmund’s core service, an information page actually helps to promote sales of bicycles by convincing consumers of their quality.

Contact Page

Hon Kah Trading’s original “Contact Us” page was very messy and aesthetically unappealing. We improved upon that by splitting the page into three distinct sections.

Since the content on the page may not fall into the broad category of contact information, splitting information up makes it easier for users to locate visually. Use of vector icons also achieves the purpose of beautifying the website.

FAQ page

A FAQ page is a relatively bland part of the website, so there was a limit to what we could do to beautify it. In the end, we decided on allowing the viewers to click on drop-down buttons to view the answers, so they would not be overwhelmed by all the questions and answers at once.

Conclusion

In conclusion, this design process was a very fulfilling one. Personally, it really solidifed the notion that design needs to be meaningful — a conscious choice needs to be made with regards to certain aspects of the website in order to facilitate a seamless user experience. It also helped me to understand more in depth on how an SME operates, as well as other valuable insights that I am sure will benefit me in the future.