Radiotroniks Website Redesign

Introduction

This is my first time redesigning an entire website. Prior to this project, I have only engaged in UI/UX design for school works or various redesign test projects. This documentation outlines my thought process in a detailed and structured manner, and at the same time, also serves as a way for me to look back at one of the designs I have ever created in a professional setting.

Project Overview

During my internship, the first project I was assigned to was redesigning the website of one of the company’s in-house brands, Radiotroniks, enhancing its user experience and user interface.

Roles and Responsibilities

As the UI/UX Designer, I was responsible for the following tasks and activities:

Conduct a heuristic evaluation of the current website, effectively identifying problems and usability issues

Conduct analysis of similar e-commerce websites, gaining different approaches on user flow and interface design

Redesign the website to improve its usability, aesthetics, and visual coherence, and

Redesign multiple pages with a focus on improving information architecture, establishing a clear and intuitive navigation, and improving overall user experience

What is Radiotroniks?

Radiotroniks is an in-house brand for the company where I conducted my internship, Microbiz One Inc. It is a B2B (business-to-business) e-commerce platform specializing in the distribution of enterprise electronic components such as radios and CCTV surveillances. It utilizes the request-for-quote (RFQ) functionality for its procurement process.

The Problem

While the website works and functions properly, there was a need to improve its current layout and design. The following problem fields identified were as follows:

Consistency and Standards: There is a disconnect between design elements as the website lacks in the user interface design aspect. The font sizes do not have hierarchy, the spacing lacks consistency, and headings do not stand out in the page.

Aesthetic and Minimal Design: The website uses more words rather than elements. The main categories section looked more like a bullet-point document, rather than an interactive sidebar.

Recognition Rather Than Recall: To summarize the issues noted above, unclear hierarchy and cluttered visual design requires more recall and memorization from the user.

This leads me to identify the problem I wanted to solve…

💡

How might we effectively reduce the user’s cognitive load, allowing for a more seamless and intuitive experience and engagement?

The Solution

💡

View prototype here.

An intuitive interface that is easy to navigate.

Before

After

A fixed double header was implemented in the page to give more emphasis to the main navigation links. The search icon was replaced with a search bar, minimizing the number of clicks the users needs to do, especially on an e-commerce platform.

Additionally, it didn’t make sense for the main categories to be displayed as a sidebar. To give one of the important features more emphasis, it was replaced with a dedicated section in the page.

To reduce visual clutter, design changes were also made to the Brands and Featured Products section in the page. The Brands section was compressed into two rows, and the Featured Products section was turned into a carousel.

Lastly, a dedicated Contact Us page was added to the home page. This wasn’t present in the current version, but would be necessary for the buyers to reach the company.

Before

After

The login and register pages were separated for an additional layer of clarity and consistency with other live websites. The copywriting in the page was improved, and a password visibility toggle was added in the password fields to minimize user errors and add accessibility. Additionally, the blog section was also removed in the redesigned version to reduce visual clutter.

View all products and specific categories with ease.

Before

After

The categories sidebar was converted into a dropdown, and the layout of both pages were made consistent with one another. The breadcrumb trail was also moved towards the upper left side of the page. These changes makes navigation more intuitive for the users.

Focus and emphasis given only to the main information

Before

After

To give emphasis to the main focus of the product page, the product itself, the categories sidebar was removed from the page. Since longer product titles extends within the width of the page on the current version, it can potentially overlap with the breadcrumb trail. Additionally, the previous and next buttons also overlap with the product titles. Hence, the solution to this problem was presented in the redesigned version, which involved repositioning these affected elements to improve visual clarity and navigation.

Accurate search results within the website.

Before

After

This was one of the more challenging parts of the redesign project. In the current version, the search function wasn’t working as intended. For the redesigned version, the page layout was aligned to the products and category pages to maintain consistency in the design. This also ensures that only products relevant to the search was shown in the page.

View and check out quoted items seamlessly.

Before

After

To minimize visual clutter and reduce confusion, the blog section was removed from both the Quote Cart and Check Out pages. Button texts were improved to enhance clarity. The check out form was also sectioned and categorized for the convenience of the user.

Increased user engagement.

Before

After

Lastly, the About and Services pages’ layout were improved from the current website design. This increases the engagement from the end users because it made the content more accessible and visually appealing, encouraging users to spend more time in the site.

Design Process

Heuristic Evaluation

To begin my process, I have first conducted a heuristic evaluation of the current website design using Jakob Nielsen’s 10 Usability Heuristics. This helped me identify the pain points of the website, and where I would focus on to solve these problems.

Comparative Analysis

Analysis of similar e-commerce websites was conducted to gain various creative and functional ideas for the redesign project.

Fully Booked, eBay, Zalora, and DataBlitz are reputable companies and all of them have a well-established online e-commerce platform, hence the reason why I have chosen and analyzed their websites as my main inspirations.

Low-Fidelity Wireframes

To visualize the redesigned website and establish a flow between pages, I began with drafting low-fidelity wireframes after conducting my website analysis. I have ensured that these wireframes solve the problems that were previously identified in the heuristic evaluation, and that they translate to a cohesive layout.

Mid-Fidelity Wireframes

After a few rounds of revisions, I have created the mid-fidelity wireframes of the website. While finalizing the layouts, I have also developed the style guide which would be used for the final designs.

Style Guide

Reflection

Working on Radiotroniks’ website redesign was a very insightful and enjoyable journey and process. As mentioned, this is the first time I have worked on and solved a real world problem under my internship. My previous works focused on the UI aspect part of the redesign, which lacked the in-depth knowledge and research required to equally understand the UX part of it.

Although there are still some improvements and limitations present, this redesign was done more meticulously and intensively than my past projects. Two of the more enjoyable parts include going through the process of researching and wireframing, to where I have underwent the process of continuous iterations. This ultimately helped me evolve my design and thinking to when it first started, thus making it possible to reach a final solution.

Overall, I have learned a lot and slowly solidified my design thinking and process throughout this project, which I believe are invaluable skills for my next design projects.

Limitations

Lack of User Testing: Due to limited resources and time constraints, the design process primarily relied on heuristic evaluation of the current website and secondary research methods, such as analyzing similar e-commerce platforms as reference.

Limited Design Iterative Cycles: The design currently lacks prototyping, which limits the possibilities for possible refinement. This risks implementing solutions that may not fully meet user needs.

Future Work

Create an interactive prototype from the high-fidelity versions

Conduct usability testing and analyze the results to identify areas of improvement and impact on user experience

Include possible end users in the evaluation process and use their feedback in implementing possible additional features or refinements