iBUILD Website

iBUILD Global Inc., known for providing logistical solutions to the construction industry in emerging industries, needed to update its outdated website to better reflect its growth and improve user interaction, supporting the company's expanding services across the world. Working closely with iBUILD's Founder and CMO, I conducted UX research to identify the original website's shortcomings and recommended a restructured information architecture and visual design improvements. I worked with the client through initial wireframes, high-fidelity mockups, and finally the development of a responsive website using Webflow to build and launch over 18 page.

Contracted in October 2022, the goal was to redesign iBUILD's website to accommodate its growth and deliver a polished, modern look. The new website, launched in mid-February 2023, incorporated all original content in an improved format, with plans for future additions such as a blog, extra information pages, and a video archive.

Watch this video to get a preview of the original iBUILD website that I was handed to redesign and rebuild. This will give you an idea of the organizational and visual improvements that I was tasked with.

The first step in the redesign was to figure out all of what information was being communicated on the website and what structure it was being organized in. With this product being so multifaceted, there was a plethora of information that needed to be communicated over this website.

I believe that this structure might have been adequate in the beginning stages of the company, but as the company grew and evolved, the website structure did not and in short order, became overwhelmed and cluttered. Below, I’ve highlighted some of the pain points in the user experience.

Upon reviewing the original website, I was able to recommend some blanket improvements that could be made for the new website. In addition to the improvements to the pain points in navigation as mentioned above, there were many visual improvements that could be made as well.

Visual improvements that I recommended were:

With the goal of making the site highly accessible, having a clear system of navigation was key. In addition to this, it was important to make sure that each page had a reasonable amount of information on it and didn’t seem cluttered or overwhelming to the user.

In order to better organize the large amounts of information, I split the ‘About’ and ‘Products’ page into bite-size subpages accessed through a dropdown menu. As I will expand upon later, cohesion between the products was clarified through the implementation of the honeycomb diagram as found on the main platform page as well as each of the product pages.

The next step to making this website accessible and easy to navigate would be the structure and layout of each page.

A principle that would guide each step of this process was the “3-30-3 Rule” which specifies that you have just 3 seconds to grab a reader's attention, 30 seconds to engage them, and roughly 3 minutes for them to spend reading the content.

The final development of the website would have a total of 20 pages; however, I would be able to save a good amount of energy in the design process in the 12 ‘Product’ pages as they are near copies of each other.

One piece of the original homepage that I wanted to improve that would make a big difference was the partners section. This section is significant to users because it shows the reliability and legitimacy of the company.

This section was a bit of an eyesore on the original website as it was a low quality composite image of all partner logos in a misaligned arrangement. What I had in mind was infinite horizontal marquee of monochromatic logos. Acquiring some of these logos was simple, but others were not available in high quality forms with transparent backgrounds.

I gathered 28 logos for this section, 9 of which needed to be traced and formatted from scratch as adequate files were not available. I was very happy with the end result and believe that the investment paid off in the end.

The existing iconography on the original website was a bit dated and overly complex, not to mention minor inconsistencies in style. For many of the diagrams and elements on the website, iconography proved to be a vital part of the user experience.

As a significant part of the design, I introduced a consistent style to common icons as well as iBUILD-specific icons. I designed 88 icons in total for this project, 35 of which were custom icons specifically for iBUILD.

One of the most effective graphics from the original website was a honeycomb diagram that visualized an overview of the product that iBUILD offers including the stakeholders and services that they have access to. We decided to make this a centerpiece throughout the website.

To begin, I improved the original diagram to be more visually coherent as well as up-to-date with the current product. In addition to the main diagram, I created 12 complimentary diagrams that corresponded specifically with each stakeholder and could therefore be used within there particular product page.

Taking the designs from wireframes to mockups was fairly seamless and gave me the opportunity to define stylistic guidelines that would provide continuity from page to page. Here I was able to define balance of colors and typography as well as the layout of each page.

I also began to implement design decisions that would create a cleaner and more enjoyable user experience. One significant example of this is in the video element. The original website simply featured embedded YouTube videos and here I designed video element that is more integrated into the design of the website as a whole.

It was also at this stage that I began to seriously consider the structure and hierarchy of each individual component, group, and section as this would be fundamental in the development stage.

Webflow was the platform of choice for developing the website as iBUILD already hosts another website there and I am familiar with the platform. Webflow is a good choice for me as I am not a professional developer and at this time my knowledge of HTML and CSS is limited. This allows me to develop the website on a flexible and efficient platform that would be accessible to necessary staff of iBUILD as well as future web developers that they might employ.

Webflow is a strong tool that utilizes CSS to streamline the development process; because of this, hierarchy and organization was vital from the first moment. Translating the website from Figma to Webflow lead me to make some minor changes to the design, but this was only for the improvement of the website. I began by designing the desktop version of the website and then after formatted each element for lower breakpoints including tablet, landscape mobile, and portrait mobile.

In this video, I preview the first iteration of the new website as it was launched in mid-February of 2023. This will show you the implementations that I’ve reviewed in this case study.

I have had many opportunities to practice web design and development, but often times only in part. This project was definitely my largest and most complete web design project encompassing user experience research, user interface design, and web development. Having the opportunity to craft something form beginning to end was a pleasure and also offered so many learning experiences.

I find this project to be an overall success. Is it the most pristine and beautiful website on the web? No! But, I am proud with the end result and the concerned leadership of iBUILD is very satisfied with the improvements to the website and we all anticipate the positive impact it will have on user engagement.

There are definitely some lessons I’ve learned from this project that will influence my approach in future projects. There were points of miscommunication throughout the project that could have been prevented in earlier stages which would have streamlined the process even more. I also have a much better grasp of the time commitments for each stage of the project which will allow me to give a better timeline of completion on future projects.

If you’ve made it this far in the case study, thank you so much for investing your time! I am happy to share this with you and would love the opportunity to talk more about this project and others like it. Feel free to reach out!