Web Design

Context & Problem Statement

A significant shift in the company’s business model transformed it from a B2C platform for DIY car repairs to a B2B provider of a comprehensive AR suite and experience. Even before this transition, the website needed a redesign to better appeal to investors and users.

How can I redesign the website to reflect the new product offerings and effectively convey the updated brand image?

‍

Below, is the original state of the website

‍

My Role

Researcher and designer

I spearheaded this website overhaul. I worked with the CTO to guide the brand image they had in mind, as well as developers tobring it to life and prototype it, but I did the designs and research into understanding how companies of similar product present themselves as well as how users vieweech prototype.

‍

Tools Used

Figma, Procreate, and Adobe Dreamweaver/HTML

‍

Let's Empathize

My ability to conduct user research was limited, but I aimed to empathize and better understand the CTO’s perspective, particularly what he wanted to achieve with the brand image.

I also discussed the current website with peers and conducted competitor research, examining successful start-ups, particularly those within VC portfolios or Y Combinator, to gain inspiration on website organization and key design trends.

‍

Key Takeaways/Goals:

The goal was to position the company as an innovative AI/AR leader.
Successful competitors used dynamic hero sections with bold graphics. Clear calls to action that communicated product and value immediately were common.
The design needed to be clean to effectively communicate processes.
The CTO emphasized simplicity and interaction in the design.
Numerous discussions with the CTO focused on breaking down complex processes into simple terms. The aim was to configure and present these processes in an interactive way.
Peers found the current website too dark and overwhelming. They preferred a lighter, more attention-grabbing design.
Whitespace and simplicity were identified as key design elements for success.

‍

INITIAL DESIGN APPROACH

Before I began iterating, I translated the ideas in my head into sketches. This initial sketching process was crucial for logically laying out the page flow and representing complex technological processes in a digestible way.

Below, I outline my drafting process, focusing on how I structured the website to include all the selling points the CTO wanted and highlighted the key takeaways.

‍

PROTOTYPING

Next, I used Figma to iterate on different designs and layouts to represent the ‘How It Works’ process. I explored several approaches, laying them all out to effectively A/B test with peers and the CTO.

This process helped us determine the best configuration. I created multiple prototypes of the pages, focusing on the ‘How It Works’ section.

‍

Design Process

Essentualluy emulated a design process of draft, prototype, feedback, and iterate process

Drafting on orocreate, translating my ideas to prototypes that test out different design layouts, and essentailly doing A/B testing wiuth peers and comoany leadership to figure out which version was the best, and then iterating to land on the preferred version.

‍

When I went to make the high fidelity mock-ups I made sure to keep HCI bst practies in mind and all the feedakfrom peers in the testing.

‍

Results

A cleaner, more cohesive, and relevant design that aligns with the new brand image and stays competitive in the market.

‍

I made sure to maintain several HCI best practices in the design. First, consistency is key here—colors, fonts, and buttons are uniform across both pages, reducing user confusion.

The clear CTA (“Request a Demo”) is prominently displayed, following the principle of visibility of system status by guiding users effectively.

Next, the icons and card layouts on both pages embrace recognition over recall, making information easy to process without users needing to remember previous content.

The design is also aesthetic and minimalist, with plenty of white space and no unnecessary clutter, helping users stay focused on key actions.

The interactive cards (e.g., “How Our Technology Works”) and comparison table make navigation flexible and efficient, letting users engage without scrolling through excessive content.

Lastly, the language and visuals align with real-world metaphors, helping users instantly relate to the product.

‍