Enhancing Code-to-Cloud Workflows with Seamless User Experience

Amnic, a Software-as-a-Service (SaaS) platform, was launched in 2021 by Co-founder and former CTO of Ola, Ankit Bhati, along with former Ola execs Nimish Joshi (former VP and Head of Strategy and Business Development) and Satya Nagarajan (former VP and Head of Software Engineering and AI).

The platform offered by Amnic addresses complex cloud infrastructure challenges by establishing a robust engineering foundation, resulting in faster, improved, and cost-effective product development. It enables cloud efficiency to reduce expenses and offers secure infrastructure provisioning templates. Amnic also fosters collaborative development, provides environment visualization, and ensures compliance with standards such as SOC 2, ISO, GDPR, HIPAA, and PCI-DSS.

Challenge

Successful deployment and management of applications in the cloud requires a development team to do a lot of activities such as configuring cloud infrastructure, packaging code, integrating version control and CI/CD, deploying to staging/production environments, monitoring, logging, automation for scaling and backups, and collaborating among developers. 

AMNIC aimed to design a platform that will offer a consolidated view of all services, workloads, and resources involved in the code-to-cloud process and provide a clear and intuitive visualization of environments and cloud resources and enable all teams to work with a shared context. Additionally, AMNIC sought to establish a centralized design system that would serve as a valuable asset for designers and developers, ensuring consistency in visual and functional elements while expediting the design and development workflow.

What We Did?

User research and ideation

We began our research by conducting workshops with Developers, DevOPs Professionals and Project managers to better understand their workflows, pain points, technical constraints, product goals and their expectations. We gained valuable insights into their needs and preferences. We also brainstormed with the AMNIC product team to understand the business goals and the core customer expectations. 

Based on our learning, we segregated the user journey in following key features : 

1. Connecting code hosting services
2. Inviting Team Members
3. Creating Applications & track version control
4. Managing Environments
5. Deployment on the Cloud

Wireframes

Our main objective was to simplify the complexity of each process by presenting it in a simple and intuitive manner. We designed the visual representation of the platform that outlined the basic structure, layout, and functionality that helped us to effectively communicate our design intentions, validate user interactions, and ensure a solid foundation for the subsequent stages of the design process.

Design language and theme

Initially, we established a design language as the foundation. For typography, we opted to utilize the “Poppins” font due to its excellent legibility and smooth rendering across various devices and screens. Recognizing the preference of many developers for dark mode, we developed both light and dark themes. In order to ensure consistency, we devised distinct color palettes comprising primary and secondary colors for each theme.

Design System

While creating wireframes, we figured out different use cases and for all those, we identified different design elements and created components. These components were combined together to form a design system which works as a single source of components. Setting this foundation makes the product design process very fast as if sometime some component has to be updated, it automatically gets reflected in all screens. 

We created the components and design language in both dark and light themes as a lot of developers prefer dark themes since it helps them in focusing on code. The engineering team coded this system so that they can also leverage the efficiency of the components framework, making the design and development scalable from a future perspective.