Clara Industries Official Website (The First Draft)
Embedded Files
Timeline
Mar 2024 - Mar 2024
(3 Weeks)
Role
UX/UI Designer
Deliverable
Website
Platform
Figma
Overview
The Clara Industries Official Website was my final project as a UX/UI Designer at Clara Industries, a robotics company. I was responsible for designing the company's official website, aimed at promoting and supporting Clara Industries' business goals. The website showcases the company's products and services, strengthens brand identity, and communicates the company's value and expertise to customers — helping them easily recognize the company's strengths and unique offerings.
My Role as UX/UI Designer
In this project, my role as a UX/UI Designer was to gather the CEO's requirements, ideate based on those needs, and design the website structure and high-fidelity prototype aligned with the company's corporate identity (CI).
Design Process
I was involved in this project through to the completion of the first draft of the high-fidelity prototype, ensuring that it aligned with the company's corporate identity (CI).
At this stage, the website showcased the overall structure, design system, and page layouts, although full product information and final images were not yet available.
🙋 Requirement
CEO's Requirement
The CEO’s primary goal for the website was to promote and support Clara Industries to clients in the corrugated carton box industry. The website needed to clearly showcase the company's vision, products (including robotics and custom controller software), services, previous client list, project portfolio, and contact information, in order to build credibility and attract potential customers.
💡 Ideate
Information Architecture
created an information architecture to provide a clear overview of the website, ensuring it fully addressed all of the CEO’s requirements. The content was carefully organized and grouped into distinct pages. The main pages of the website include: Homepage, Why Us, Our Products, Previous Projects, and Contact Us.
🖥️ High-Fidelity Prototype
Mockups and High-Fidelity Prototype
After gaining a clear understanding of the website structure, I began designing the mockups and high-fidelity prototype, following the organized information architecture and incorporating the company's corporate identity (CI) colors. To ensure the website conveyed a reliable and professional engineering image, I also referred to several engineering company websites provided by the CEO as design references, helping guide the visual tone and style of the final design.
However, I was responsible only up to the first draft of the website, which presented the overall structure and design. At that stage, the full product information pages, client list, and final images were not yet available.
Design System
In this project, I established the design system based on the company's corporate identity (CI), using Berkeley Blue (#013664) and Jasmine Yellow (#FED787) as the primary colors, and IBM Plex Sans as the main typeface for the website.
◆ Colors
◆ Typography : IBM Plex Sans
◆ UI Components
Key Takeaways
The Clara Industries Official Website was my final project as a UX/UI Designer at Clara Industries, my first company working in this role. Although I had designed a few websites before, this project was different in that it required a more professional, engineering-focused tone. The primary goal was to showcase the company's products and services, strengthen its brand identity, and clearly communicate its value to clients. In this project, I learned to pay closer attention not only to user experience but also to how design decisions impact brand perception and business communication.
However, I participated in this project up to the first draft of the high-fidelity prototype, during which much of the content, images, and final materials were still incomplete. If I were still working at the company, the next steps I would take to improve the second draft would be:
◆ Present the prototype to the CEO for feedback and decision-making.
◆ Complete the website with full information, finalized images, and all required pages.
◆ Establish a proper design handoff process for the engineering team.
Page updated
Google Sites
Report abuse