Zectos is an innovative fast-growing software company, specializing in Multi-Cloud, Big data, AI-powered technology solutions, software development, and modern digitalization. With their services, they help other enterprises in achieving their goals.
The company is specialized in 3 industries
- Automotive: They integrate smart applications and digitalization into the various production processes of the automotive industry
- Oil and Gas: Their digital twin solutions are propelling oil and gas companies across the US into a digital transformation that will shape the future of oilfield operation optimization.
- Retail and Ecommerce: Utilize large-scale software applications to streamline online shopping and delivery processes across many sectors.
Challenge and Objective
Zectos is a high-tech company with a team of highly skilled professionals and has a solid foundation. The UI design of the website from ground zero to high fidelity interface came up with the following challenges.
- To exhibit their expertise and specialties throughout the website however the experience should be user-friendly and easy to understand.
- The primary consumers of Zectos are B2B companies, CEOs, CTO, and upper-level management. So the design should harmonize with the targeted audience but at the same time should be clean and playful.
- To showcase the relation between high-end technology with the human-centric approach for a bigger goal.
By keeping the above objectives in mind, I interacted with the stakeholders and discussed certain things. On the behalf of that, I created a site map for the website.
After finalizing the basic site map, I went to the next stage and created the rough wireframes for each page.
Before jumping onto the next stage, I shared the wireframes with the rest of the team and gathered some feedback, suggestions.
Mobile Responsive Wireframes
The skeletal frameworks helped me in structuring all the required elements. This stage also helped to declutter the unnecessary information and worked as a basic framework for the website.
For building the design system, I followed the Atomic Design methodology which a hierarchical way of organizing design patterns. This approach helped me for finalizing the necessary elements such as colors, typography, type scales, buttons, forms, etc.
The benefit of building a design system are two ways. Firstly, it helps in maintaining uniformity throughout the design and also helps other designers and developers for better understanding.
High Fidelity Mockups
Mobile Responsive Mockups
This project was a fun project with a lot of learnings. I collaborated with the rest of the team and with the stakeholders. For me, It was a completely new experience in a different vertical.
1) Creating a design system from scratch was a great learning for me and I also understood this evolving process better with this project.
2) For Zectos, the imagery part was quite a challenge for me.
- I understood and discussed the brief with the stakeholders. To incorporate their thoughts, I did some research and tried to reflect the same through the images.
- It was completely illustration-based and required to follow the brand colors. So in the illustration, I understood better, how to maintain consistency throughout the project.
- The images section should incorporate the amalgamation of technology with a human-centric approach. So for that, I tried multiple options and explore new ideas.
Special Thanks to Parveen Yadav for the support and guidance