Overview

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.

  1. 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.
  2. 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.

  • 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.

Develop

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.

Wireframes

After finalizing the basic site map, I went to the next stage and created the rough wireframes for each page.

Mobile Responsive Wireframes

Skeletal framework

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.

Design System

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.

High Fidelity Mockups

Mobile Responsive Mockups

Learnings

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.

  • 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.