Elevating Design for High-Tech Manufacturing
A Silicon Valley semiconductor manufacturing company, Total Wafer Systems, rests on the cutting edge of engineering technology, but retains an outdated appearance on their website. With a massive public funding initiative poised to boost the industry, my task was to update and elevate the external website, bringing Total Wafer Systems into a more competitive role.
Jump to:
My role:
Hueristic analysis, competitive analysis, market research, stakeholder interviews, user journey, wireframing, prototyping.
(Contracted as web designer, graphic designer)
Tools:
Figma, Adobe AI, Miro, Excel, MS Office suite (Visio, Word, Teams, PowerPoint etc)
Time:
Oct. 2022- Dec. 2022
Team:
-
Chief Operations Officer
-
Internal Website Designer
-
Technical Writer
Please note: "TWS" is fictional, but based on a web design contract for an extant corporation in the SC manufacturing industry.
The Challenge:
Total Wafer Systems, or "TWS", faces a critical challenge with an outdated website that looks and feels neglected. The dull color scheme of light gray and blue not only poses accessibility issues, but also seems rooted in a web design system of a bygone era. Absence of updates in product and company news sections for several years points to a larger problem. Built on WordPress, the site lacks critical security patches for plugins and themes, and the last update remains uncertain.
Product and other site photos are of poor quality. The absence of social proof, like partnership logos or testimonials is a necessity in a highly regulated industry.
TWS needed a stronger presence in the marketplace, which itself is under massive development and scrutiny in the 2020s.
Total Wafer Systems' site, before redesign
Companies that operate in the semiconductor supply chain strike a careful balance in international economic relations, cutting edge engineering development, and a marketplace where demand exceeds production.
With a website a usership that revolves around research, public image must be carefully crafted.
The Goals:
-
Competitive Positioning:
-
Highlight precision and engineering expertise to show product quality.
-
Address any "oversight" concerns for visitor confidence.
-
Tell a stronger narrative that communicates TWS's value.
-
-
Increase Transparency:
-
Go beyond aesthetics and emphasize open communication with engaging features.
-
Build trust through a clear legal section, not just a beautiful website.
-
-
Become a Strategic Asset:
-
Capitalize on industry scrutiny to attract better partnerships.
-
Use the website to speak to the right audience via direct search.
-
Some Context: The Biden-Harris CHIPS Act
The Biden-Harris CHIPS act earmarks $10 billion for large semiconductor supply chain construction projects. Notably, in 2024 an allocation of $300-500 million for smaller projects under "Chips for America” focuses on updating semiconductor-related facilities in the U.S.-- a funding source that TWS' competitors are most likely going to look into in 2024. This initiative aims to enhance supply chains, support smaller suppliers, create jobs, and boost domestic semiconductor manufacturing.
Read about the CHIPS for America Act >
Informed by my non-profit background, I can reliably say that it is critical to align mission and image, particularly in an environment where organizations are scrutinized by competitors, journalists, and government granting agencies. This scrutiny is constant, whether seeking funds or not, making a website update imperative.
Problem Statement:
Users researching TWS need to trust the company, so that they can be confident of the company's competitive position in the high-profile climate of domestic semiconductor manufacturing.
Design Process
Initial Learnings
-
Heuristic analysis
-
Competitive analysis
User Research
-
Stakeholder interviews
-
Industry research
Ideation/Design
-
UI/Design system development
-
Wireframing and Prototyping
Implementation
-
Shore up site security
-
Build on WordPress
Heuristic Analysis
__
Looking at the current website gave me a roadmap to what I needed to consider: the Pillars of the Redesign:
-
Revitalize Aesthetics and usability:
-
Update images, leverage a fresh design system, and get clear, high-quality visuals and assets.
-
-
Enhance Copy and Trust Elements:
-
Rewrite site copy for increased engagement from non-industry researchers, and include some science-for-the-layperson infographics /glossaries to increase SEO.
-
Launch sections fostering confidence and trust, including an updated legal/security compliance section, a career section, and a more engaging "About Us" page emphasizing TWT's position in California's tech innovation center, Silicon Valley.
-
-
Set Measurable Goals:
-
Track site traffic to get further insights in who is looking at TWS, and how we can address user needs
-
Upgrade site security, in both reality and perception.
-
Increase accessibility by improving WCAG scores, creating a site solid design system using appropriate HTML tags, and offer translation on appropriate features.
-
These pages are altered mock-ups to protect client privacy
Competitive Analysis
__
In the manufacturing industry 62.3% of all site traffic is research-based.
People are looking for competitive information, and a good potential partner. Very little traffic (in the case of TWS, 3%) is transactional. Direct competition especially tends to message a lot of growth and vitality through informational copy and images. In looking at several direct and indirect competitors, some patterns I found fell into two categories:
Getting Inspiration
I want to shout out one site in particular that served as a big inspiration to me.
Wirewerks, a Canadian manufacturer of advanced optical fiber and copper structured cabling systems, has similar challenges to the SC industry. And they have an absolutely stunning website designed by a Locomotive. I learned a lot from this design, and the animations and motion graphics show that you can have an elevated look on a "tech blue" site that looks elegant and professional.
Private and Secure
-
Buying a wafer processing tool is not an "add to cart" experience. Contact is done through forms, and products are better defined as customizable systems rather than discrete objects to be bought and sold.
-
Clear, indexed sections on legal compliance, including cookies and data policy statements
-
No partner names mentioned
Competitive and Vibrant
-
A robust recruitment section (careers, internships, employee spotlights)
-
Educational glossary/infographics
-
High quality photos and demonstration videos featuring employees, wafer production, and facilities
-
An engaging company history page
-
A multilingual interface when appropriate
-
Short case studies
User Data: Interviews with people who talk to the customers.
__
In a traditional UXR project, I would ask 5-7 users to complete a conversion-based task on the website. However, user access was unavailable for understandable security reasons.
But if you can't build a bridge, dig a tunnel. Research could still be done!
I spoke with internal stakeholders, from engineers to purchasers. Employees have great insights into how the company really works!
(It’s quite fascinating: many of the techniques in SC manufacture are identical to those from the fine arts, such as printmaking, photography, ceramics, and metalsmithing! I made an infographic about it here just for fun.)
“We want to be trust and transparency to be our guiding factor”
“[Putting a request for quote button (RFQ) in the nav bar] isn’t what we’re trying to do- buying a machine from us is like buying two Ferraris a year”
“We’re conservative, like a utility company”
“Everything is custom.”
“We don’t have the bandwidth for making posts and updates”
“We need a coat of paint on our site.”
Industry Research: Aligning with CHIPS Act Opportunities
It was at this point in the process I learned about the CHIPS for America act, a massive funding initiative for the SC industry mentioned in the introduction of this study. It became very clear that TWS needed to be responsive to the current market.
Positioning the redesign as a strategic response to the opportunities presented by the Biden-Harris CHIPS act, aiming for increased visibility, competitiveness, and alignment with industry advancements seems inevitable. Again, even if TWS chooses not to apply for funding, they will be researched. Eyes are on the industry!
To note:
There was a certain amount of internal resistance to updating the site. My answer to this resistance is as follows: updating the website:
🔐 Addresses crucial security issues,
💪 Provides a stronger, more competitive market presence.
.png)
User Journey- Alex
I chose to approach the user journey from the point of view of someone at a National Laboratory seeking partnerships. According to industry experts, partnerships with mid-size SC manufacturing companies is the most efficient type of partnership under the CHIPS for America Act.
.png)
A few features that came up in thinking through this user journey:
-
Emphasis on domestic HQ
-
A robust compliance and security section, including data privacy
-
An industry blog
-
Downloadable case studies
-
Interactive graphics
-
A secure contact form that offers multi-lingual communication
Ideation and Design
__
Mood Board
In keeping with the high-tech engineering feel of the industry, I wanted to lean into an industrial-inspired design look.
Square corners, ASCII style text and icons, outlines rather than fills are the vibe. Inspiration came from mid-century railroads, manuals, and manufacturing labels.
I used generative art in the background of some sections, emphasizing the connection between art and science.
Fonts and colors
The fonts I chose also reflect the Manufacturing/Engineering aesthetic, with monospaced label type (in Figma I used “Share”, which is pretty similar to Bahnschrift), a simple narrow sans-serif based on European signage typography. The color system is based on amber shielding, gold silicon wafers, and blueprints.
My favorite feature is a pixel-thin spectrum line, representing light glinting off of an etched wafer. (I had to make it thicker here so you could see it!)
Wireframing
Wireframing always helps to outline your project path, and I believe it was helpful for stakeholders to understand that even if they just wanted "a coat of paint", it's useful to sand the wood first- in other words knowing what kind of site assets like text, product descriptions, and photos needs to be updated so that the work can be done efficiently.
A Note on AI
It's no secret that AI can be extremely useful as a tool to support UX and UI designers. I've been using Chat GPT since day 1, and honestly, it's a game changer.
I had to create a LOT of updated, engaging text-- including taglines, headlines, and body text for this site design-- and I turned to both Bard and Chat GPT for help.
AI is also great for help in brainstorming. I was a design team of one, and I needed to be able to toss out problems and and get a few solutions back. Not every one made it, but I was really pleased with the experience!
Site Structure Features
Returning to the central pillars of building trust and transparency with Total Wafer Systems’ redesign, namely:
-
Content: More engaging copy, access to case studies, and a few powerful statistics, and a more engaging UI
-
Researcher-friendly features, like a well-written company history, links to glossaries, infographics, and case studies
-
Layout- a more clean and accessible design system, using correct HTML tags (H1, H2, etc) and better color contrast.
-
Navigation- a dedicated indexed menu featuring all data safety, legal and compliance documentation, robust jump-link menus that keep the user engaged
-
Functionality- a secure contact form, more accessible downloads, clearer visuals
Home Page
-
Eye-catching header animation
-
Competitive statistics
-
Silicon Valley as a selling point
-
Multi-lingual catalog download option
-
Updated blog
-
Engaging career section shows vitality and growth
-
A solid section on data, security, and privacy
-
Footer featuring indexed links to policies and legal compliance.
About Us Page
-
An extensive history on the company
-
Photos of the production floor, real people and employees
-
A menu connecting to engagement features
-
Password-protected case studies
-
Contact form
-
Links to legal and security sections
-
Links to glossaries and infographics for students, journalists, and less jargon-informed people (also great for SEO)
-
-
Interactive timeline
Product Page (Overview)
-
Shows high-quality photos of the wafers and a few simple diagrams, not just machines *Note- in order to protect IP, I chose to use artistic renderings in lieu of photographs- the final version would of course have good photos.
-
Categorizes the products as “systems”, emphasizing that there are many bespoke, customizable aspects, and that each client is treated uniquely.
Product Page (Individual)
-
Product pages focus less on serial numbers and tool types and more on the types of systems available
-
customer agency is centered, describing a customizable tool system
-
simple configuration drawings help inform (and can be edited to protect IP)
Legal, Data, and Security
Legal Compliance
**note- for the purposes of this prototype, I put all legal compliance on the same page, but in the final product there would most likely be separate pages for each section.
Legal section is thoroughly indexed.
New:
-section on security and data privacy
-contact form, rather than direct email- it’s more secure on both ends!
Results and Next Steps
__
Results:
Unfortunately my contract with “TWS” ended before I could fully develop this proposal. I completed about 50% of it on my own time, because it is such an interesting time to be working in the industry and a very intriguing case. Sites that aren’t focused on filling a shopping cart are a fun puzzle to research, and I hope to have the chance to work with high-tech manufacturing again.
Next steps:
In speaking with internal staff, many expressed that they had a difficult time communicating with customers. Other departments were working on customer and vendor portals, and that seems like it would be something very useful to the community.
Getting good photos has been a challenge on every project I’ve ever worked on, but it’s absolutely crucial to do in order to have an engaging website. Investing in a professional photographer is a good move for any start up!
This is pretty far down the line, but animated graphics showing the processes of wafer production would be a great project, and would increase SEO.
Feature Review
-
A stronger visual presence
-
A well-documented policy on security and legal compliance
-
Product section revamp: approach is more a customizable system rather than discrete tools
-
Contact forms make customer communication secure and easy
-
Increased accessibility with languages, color contrast, and site structuring
