LIBERTY ELECTRONICS

Responsibilities

Sketching, UX/UI Web Design, Web Data Design, Prototyping, Wireframing, Web Development, WordPress Theme Development

Tools

Figma, Adobe CS, Slack
HTML, CSS, PHP, Local

Timeline

Sep 2024 - Feb 2025 (Ongoing)

Disciplines

User Interface Design
Web Development

Challenge

Liberty Electronics, a trusted provider of electrical cable assemblies and wire harnesses for defense and commercial OEMs, sought to modernize their outdated website. The primary challenge was to transform Liberty Electronics' website into a dynamic, engaging, and professional interface while aligning it with a refreshed branding identity.

Our Vision

Develop a bold and futuristic brand personality that resonates with modern audiences.
Convert the website into a professional, user-friendly platform that highlights Liberty Electronics’ offerings, expertise, and values.

01. Branding Guidelines Update

Expanded the color palette to include more vibrant, futuristic options
Redesigned key visual elements to align with a modern aesthetic
Selected new typography to enhance readbility

Updated Color Pallette

02. Website Planning

Developed a comprehensive site map to organize and streamline information flow

03. Low Fidenlity

Here are some of my initial thought processes reading the goals for our web. The low-fidelity designs provided us with the first glimpse of how our web could potentially work.

Team Section

Although I constantly updated the UI to accommodate functionality changes, I began exploring high-fidelity design concepts to envision the potential appearance of the app. Drawing inspiration from renowned companies such as Apple, Tesla, and others, I developed my own unique style while staying updated on the latest UI trends.

04. High Fidelity

Incorporated the updated branding elements into the web design
Developed prototypes to demonstrate navigation, interactions, and dynamic elements.

05. Next Steps

1. Develop custom theme in WordPress with HTML, CSS, and PHP
2. Create user guide for client to manage their website with WordPress

Group+22.jpg
Group+24.jpg
Group%2B23.jpg
Group+23+%281%29.jpg
Group+25.jpg
Industries+Served+%281%29.jpg
Group+27.jpg
Group+26.jpg
Join Team Benefits (1).png

My Key Takeaways

1. It is always important to be specific with client’s expectation

2. Taking inspiration from other companies is okay

3. How time consuming the wireframing process is