Web design for Micro Engineering Tech Inc.

Project Summary

Micro Engineering (METI) approached me to update their website and web presence. Their existing site had far too much text, and navigation was difficult. The firm also looking for a visual update that could set them apart from their competitors and represent their services (Digital Transformation) cleanly and effectively.

Project Summary

Project Summary

Micro Engineering (METI) approached me to update their website and web presence. Their existing site had far too much text, and navigation was difficult. The firm also looking for a visual update that could set them apart from their competitors and represent their services (Digital Transformation) cleanly and effectively.

Micro Engineering (METI) approached me to update their website and web presence. Their existing site had far too much text, and navigation was difficult. The firm also looking for a visual update that could set them apart from their competitors and represent their services (Digital Transformation) cleanly and effectively.

Project Role

Project Role

Project Role

Web Designer

Web Designer

Web Designer

Final Deliverables

Final Deliverables

Final Deliverables

High Fidelity Designs

Wireframes

User Research

Component Libraries

High Fidelity Designs

Wireframes

User Research

Component Libraries

High Fidelity Designs

Wireframes

User Research

Component Libraries

Project Team

Project Team

Project Team

Product Owner

Business Analyst

UX & UI Designers

Developers

Product Owner

Business Analyst

UX & UI Designers

Developers

Product Owner

Business Analyst

UX & UI Designers

Developers

Project Duration

Project Duration

Project Duration

2021-2022

2021-2022

2021-2022

Objectives

Objectives

Improve User Engagement - Increase time spent on the site and reduce bounce rates.

Refine voice & tone - improve content to engage both technical and non-technical audiences

Boost Conversion Metrics: Drive more inquiries through a better user journey.

Project Outcomes

Project Outcomes

-40%

-40%

-40%

Navigation time

Navigation time

Navigation time

Increased

Increased

Increased

Conversion Rate

Conversion Rate

Conversion Rate

Initial Assessment

Initial Assessment

Evaluating the Current Site

Evaluating the Current Site

I conducted a comprehensive site audit, analyzing the overall user experience and visual design of the website. My primary focus was on the content—how it was presented and how it could be optimized for maximum impact. I identified key areas for improvement in visual design and layout, enhancing readability and creating a stronger visual presence. Additionally, I established success metrics to track progress, ensuring the website effectively attracts users and engages its core audience over time.

Design Approach

Design Approach

Visual Design

Visual Design

I collaborated with the Micro Engineering team to plan the updated layout and designs, focusing on how to refresh existing content while preserving the core messaging and highlight their offerings. I presented several layout and design samples, each tailored to enhance visual clarity and deliver a more engaging and dynamic user experience, ensuring the final design aligned with both user needs and METI's brand goals.

Refining Voice & Tone

The site’s content was overly technical and lengthy, a common user complaint. With many visitors from finance or government sectors, we needed to simplify messaging for broader accessibility by distilling complex ideas into concise language. I aimed to create a consistent tone that aligned with Micro Engineering’s brand identity.

Simplifying Navigation

The original menu structure was cluttered, with too many options and redundant pages. Most services could be consolidated into four main categories. With this in mind, I prioritized emphasizing "Services" and "Contact"—highlighting Micro Engineering's unique selling points and guiding users toward reaching out.

Results

Improved Layout & Design

I enhanced content-heavy sections with visuals for clarity and interest, condensed written content, and linked to technical pages only when necessary. Typography was updated with adjusted font weights for better readability and hierarchy. Generic stock photos were replaced with high-resolution images and custom illustrations. The color palette was refreshed with bright, bold tones, including METI's signature deep blue, to create a vibrant, on-brand design.

Simplified Structure

All services previously scattered on the site are neatly organized into 4 main categories - allowing visitors to quickly get to the sections they want, reducing frustration and improving overall usability. A prominently displayed call-to-action (CTA) now stands out on every page, encouraging users to take action—whether booking a service, submitting an inquiry, or learning more—making it easier for customers to connect with the business and achieve their goals.

Takeaways

01

Implementing Analytics

I would have liked to incorporate at-a-glance heatmaps of user interactions and activities. We could use this information to keep updated the pages and see what we can improve.

02

Draft content guidelines

Creating a set of content documents could help in further redesigns and content creation. Providing a voice and tone for future iterations would ensure a smoother transition between designers and content writers.

Nathan Chan © 2025

Nathan Chan © 2025

Nathan Chan © 2025