How We Gave This Website A User-Friendly Redesign

16 August 2021
9 min read

It’s ideal for websites to undergo an evaluation and redesign process at least once every three to five years. A website redesign can help to boost your user experience, keep your website safe and up-to-date and reach your goals better.

Recently, as a web design agency in Singapore, Oangle was tasked to conduct a user experience (UX) review and redesign on Enjye.com, a website owned by Singaporean piano teacher Chue En Jye. As we evaluated her website, we kept in mind The 10 Usability Heuristics for User Interface Design by Jakob Nielsen, a list of principles commonly referred to for UI/UX reviews and designs.

In this article, we will go through 8 different enhancements we added to make for a smoother user experience on the website.

1. Ability to Control Background Music

mute
Mute/Unmute button for BGM

A key feature of the website was the background music that would play when users visited the site, a little touch meant to allow users to be immersed in the experience. To further enhance the experience, we added a mute/unmute button in the top-right corner. This gives users clearer visibility on the state of the system — whether music is playing or muted — as well as provide them with the ability to control whether they would like music to be played on the site or not.

2. Navigation Menu Active State

The second element of the website we redesigned was its navigation menu. We made a minor but critical tweak by changing the styling of its active links. Previously, the active state was indicated by a slight increase in font size, which was easy to miss. To provide users with clear visibility of which page they are currently on, the active state was adjusted to be shown using an increase in font weight and a slight change in colour.

active menu
Redesigned active link state

3. Sticky Header

The third element of the website we redesigned was the header bar. We made it sticky, meaning that it stays in position when users scroll down the page. This allows users quick access to the navigation menu.

sticky header
The sticky header on desktop

On mobile sizes, we made use of the classic sticky hamburger menu to provide quick access to the navigation links, instead of requiring users to scroll to the top of the page. As users scroll away from the landing on the homepage, the logo animates and moves to its new spot from the centre to the top-left corner, adding a subtle touch of interactivity to the site.

mobile sticky menu
The sticky header on mobile

4. Mobile Maneuvers

In the old design, the mobile menu sat above the signature name card section as a button labelled “MENU”, displaying a dropdown of the navigation options when tapped. As the header was not sticky, this meant that users had to scroll all the way back to the top of the page before they could browse the navigation menu. Paired with the lack of a “back-to-top” button, going to the navigation menu would have been a tedious task for mobile users.

old mobile menu
Previous mobile menu

As such, we decided to design a sticky header for mobile sizes as well, which encompasses a hamburger menu, the logo, and the mute/unmute button for background music. To continue with the theme of music, the mobile menu overlay features a piano keyboard at the bottom of the screen, livening up the mobile experience.

redesigned mobile menu
Redesigned mobile menu

5. Loading Icon

loading old
Previous loading screen

An example of system status would be the loading status. Prior to the revamp, the site would only display “Loading… Please Wait…” to indicate that the page was taking some time to load. However, this provided poor feedback to the users as it would be difficult to differentiate between slow loading and a completely frozen page. Thus we designed and animated a loading icon that would be a simple indication to users that the page is still loading.

loading redesigned
Redesigned loading screen

6. Declutter Distractions

In our redesign of the website, we removed less critical elements and regrouped others, rearranging the layouts. By doing so, users would be able to focus better on the content without distractions or clutter causing any confusion. This also freed up some space to add in missing information, such as a short description of the services provided, or a neat way to present the title of pieces performed by students.

about old
Previous About page

Prior to the redesign, the About page simply displayed both English and Chinese content together and had a lack of accompanying graphics or images. This could be overwhelming to users as they see only a block of text. For the redesign, we included a language toggle for users to choose between English or Chinese content, providing them with more control while cutting down on the visual burden. In addition, we included a portrait image of the teacher, Chue En Jye, to accompany the text to provide users with more information about who she is.

about new
Redesigned About page

7. Add Important Information

While it is important to declutter so that users can focus on the key content, there are certain types of information that should still be displayed prominently. For example, the 3 main services on the homepage were previously displayed with only images, and the name of the service hidden behind a hover effect. This made it difficult for users to understand what the 3 services are, especially for mobile users as the “hover” effect is much less intuitive on mobile.

home services old
Previous Services section

In the redesign, we brought the service’s title below their respective images and replaced the hover effect text with a description for each service. This kept the interactive element of the homepage while providing more information to users who are unsure of any of the services. For mobile users, the design was tweaked to display the description below the title, removing the need for any unintuitive actions.

Redesigned Services section
Redesigned Services section

8. Scalable Structure

The previous design of the Videos page utilised a tile-down layout, where new videos uploaded would simply appear below the next most recently populated video. While the layout was simple and fuss-free, its simplicity resulted in trade-offs with its usability. In the long run, it would only become increasingly tedious for users to view newer videos as it would require them to scroll for extended periods of time. Furthermore, the layout prevented users from scanning through the list of videos quickly for something they would be more interested in.

videos old
Previous Videos page

Thus, we made use of a tiled layout paired with a lightbox for viewing of videos in the redesign, so that users would be able to easily browse through more videos and look for what they are interested in. This design is also more sustainable in the long run as it is able to clearly display many more videos.

redesigned Videos page
Redesigned Videos page

Even Seemingly Small Redesigning Efforts Can Greatly Enhance Your Website’s User Experience

Most of the elements we redesigned on Enjye.com’s website weren’t huge, but they make a great difference. All the little interactions that users have on your website are what adds to the overall user experience and satisfaction. Not sure how to improve the experience and aesthetics of your website? We’d be happy to advise you on your website redesigning efforts — drop us a line today!

Be the first to get tips on web design, WordPress & more

Sign up for our newsletter to be in the loop.

RELATED ARTICLES

Thumbnail
Thumbnail
Thumbnail

Have queries or need some advice?

FOR LIGHTNING-QUICK CORRESPONDENCE, DROP US A
WHATSAPP MESSAGE OR EMAIL US