Microbiz Website Redesign

Introduction

During my internship, one of my projects include redesigning the company's website. Since I have no experience and previous projects involving extensive prototyping, I made it one of my goals to learn how to by the end of this project. Additionally, this was also the time I have developed my own design system for a project. This document outlines my process in exploring powerful features in Figma, and how I have implemented them to make a cohesive and final redesigned version.

Project Overview

On my previous projects, I have only worked on static high-fidelity wireframes, skipped prototyping, and considered those as the final designs. However, this redesign project allowed me to explore prototyping, creating a more visually appealing, presentable design that and can be easily understood and viewed by the stakeholders.

Roles and Responsibilities

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

Conduct a heuristic evaluation of the website to identify the current usability problems, focusing on how the current website impacts user engagement and their time spent

Conduct comparative analysis of the websites of tech companies to get a grasp on how their website flows and how it was structured

Design additional pages to provide further relevant details; and

Redesign the website, focusing more on transforming the static, one-paged design into a more dynamic and engaging interface

What is Microbiz One Inc.?

Microbiz One Inc. is an Information Communications Technology (ICT) Services provider specializing in digital transformation, critical communications, and security and network infrastructure. The company empowers forward-thinking organizations, streamlining operations, enhancing connectivity, and securing vital systems.

The Problem

Upon first visiting the website, it can be noticed that it is a static, single-paged layout where all the content is already visible on the home page. It lacks dynamic elements and interactivity, resulting in a website that is visually repetitive and unengaging. The website violates the following heuristics:

Visibility of System Status, Error Prevention: The website lacks visible feedback for the user. One example is the that there are no hover effects on clickable images. As a result, they can be mistaken as plain images and can accidentally be clicked.

User Control and Freedom, Flexibility and Efficiency of Use: Due to its single-paged layout and the use of a static header, the website lacks dynamic navigation. Accessing different sections requires manually scrolling, disrupting overall flow and making movement and navigation less seamless; and,

Aesthetic and Minimalist Design: There is a lack of visual hierarchy and interactive or engaging elements, making the interface difficult to visually navigate.

Despite the issues mentioned above, there was also a lack of available company information that can be placed within the website. This posed an obstacle, as it created a disconnect between available content and helping users know more about the company.

Thus, this HMW statement was developed to solve the problem:

💡

How might we encourage potential clients to know more about the company?

The Solution

💻

View prototype here

A guided and engaging process.

The homepage is redesigned into a more visually dynamic and interactive interface, utilizing hover animations to help users engage more effectively with the content.

Before

After

Find relevant information faster with minimal effort.

A separate Solutions page improved the website's content organization, making it easier for users to locate specific offerings without feeling overwhelmed and confused.

Clear and transparent company information.

The addition of the About Us page gave users additional insight about the company, adding credibility to the company, and helping users feel connected to the brand.

Reach out to know more about the company.

The redesigned contact page allowed for a clearer layout and more accessible details, encouraging users to get in touch with the company.

Before

After

Overall, while the company lacked readily available information to be placed within the website, the real challenge was to ensure that the redesigned version increases user engagement, naturally leading to user seeking for more information, thus eventually reaching out to know more about the company.

Design Thinking

Research

Heuristic Evaluation

Using Google Sheets, my supervisor and I conducted evaluations separately, compiling them afterwards then narrowing them down to the most violated heuristics which had the greatest impact on user experience.

Comparative Analysis

Tech companies like Nexus Technologies, bneXt, Oracle, and Accenture were taken inspiration from. Similar features and structure have been identified and analyzed from the companies, which greatly helped in reconstructing the entire look of the website.

Ideation

Sketches

Initial sketches were made to visualize pages and information architecture more clearly, helping to outline the organization of the website's content. This encouraged me to experiment and be flexible with my design process, allowing me to make mistakes early and iterate more efficiently.

Low-Fidelity Wireframes

A series of iterations were made throughout the process of creating the low-fidelity wireframes. Some pages were rejected, and layouts were revised multiple times because of the lack of information to be placed within the website.

Design

Design System

Following this, I have developed a small-scaled design system to ensure that the design remains consistent and scalable all throughout the website. This also allowed for a more efficient design process.

Reflection

I have learned a lot while I was doing the redesigned version of the Microbiz website. This is the first time I have experimented with and created prototypes, and it was a delight to bring motion and life to the otherwise static company website.

Unlike before, when I considered low-fidelity wireframes as my first design draft, I utilized pen-and-paper sketches for this project. This approach gave me more freedom to make mistakes and allowed my thoughts to flow more naturally and easily onto the page. As a result, wireframing became easier since I have already finalized my ideas through sketching.

This project has been invaluable to me. Not only have I learned to develop and improve my skills in organization and prototyping, but it has also gave me the opportunity to contribute something to the company. Enhancing their online presence was both rewarding and fulfilling.

Limitations

The limitation of this project was the absence of user testing. Since I have only gotten feedback from my supervisor, it was not enough to validate whether the design addressed user needs, behavior, and pain points. This has resulted in the following:

Lack of verification for the assumptions. Interactions and design choices may not align with actual user expectations.

Accessibility issues may have been unnoticed. Testing with actual users could have helped in identifying problems that only affected a certain user group.

Lack of performance feedback. There was little insight to how engaging the redesigned version is; and,

Lack of user data to guide design iterations. As a result, improvements and areas for refinement were limited.

Future Work

Incorporating usability testing to the project to gather user feedback is the top priority. This would validate decisions, ensuring that the redesigned version truly enhanced the user experience and engagement