- UI Design and Web Development
- Started: April 2024 - Launched: August 2024
Share this content
Introduction
The client seeks a complete revamp of their website to integrate functional features and embrace a more visual, minimalist aesthetic. Their goal is to showcase specific products and the brands they represent while improving overall navigation.
Objective
Design Solution
NEW
BEFORE
As you can see, they have re-branded. So, their color scheme changed as well which is implemented to the entire site. The menus are grouped based on the collections they belong, to make it easier for the visitor to navigate.
1st Fold
This section can be changed into a short clip video or slider image. The company usually has marketing materials from its partner brands, promoting seasonal discounts or introducing new product lines.
2nd Fold
A little content about the company and a full-width section for a discounted product from their partner brand/s.
3rd and 4th Fold
These sections are for the new-release products they are partnered with, and a little description to give an idea for their visitors and or potential customers.
5th Fold
This is another full-width section for promotion product purposes. I’ve also included a navigation based on collections.
6th Fold
And most importantly a review section from their GMB account. To make an impression that the company is trusted and has built trust in their existing customers.
The Collection page is designed to be minimal, showing all the important information, and highlighting the products on promo to attract the user’s attention. And of course, a filter function for the user to help them sort what they are looking for.
The Product Details page is designed to put all the necessary details about the on its right section.
Before – this page has two columns, on the left side is the image carousel, and on the right is the checkout together with the description, the concern here is when the content is long. It looks odd as the user scrolls down. Now, it is not an issue on mobile, but on desktop or laptop screen sizes. We need to make sure that all the pages look presentable on all screen sizes as this is designed to be a responsive website.
New – I re-arranged the whole thing and added an accordion UI feature. So, the upper layer was divided into two columns, which are for the image carousel and the check-out. On the check-out, I added the dimension as this is one of the details that the user usually looks for.
Underneath is the product description and more details about the item presented using the accordion feature. Lastly, the recommended products.
I re-designed the contact page to resolve the one issue from its old look, which is adding a typical contact form that is for some reason missing. The potential buyer or existing customer can fill out the form, if they have concerns or inquiries from the company. To spice things up, I organize the contact details as well, presenting it in much helpful way for the users.
I’ve also implemented a real-time chatbox which is a very useful plugin. It has also an app that is available for iOS and Android.
The company can add a prompt response, related to the user’s order, or any question they want to ask about a product.
NEW
BEFORE
Before the website revamp, the search function is not working at all.
Obviously, I need to make this work, as the majority of the users prefer to use search. Especially if they don’t want to go through the menu.
Here is where I came up. It is working and has an auto-suggest feature. The search result is similar designed similar layout to the collection page.
Conclusion
As mentioned in the objective the website revamp is done, not only to improve the UI but also the experience of the users. To address the existing issue and present all the information in a organised manner, so that it won’t look boring. Highlighting the important details to grab the attention of the user for it.
I get in touch with the client, to check on how the newly designed website is going on their end since they do some digital marketing stuff on it too. The feedback is really good, the client loves the real-time chatbox, and the product details layout has helped the users to see the information they need.