PRODUCT DESIGNER, 2017 – PRESENT
In October 2013, I joined Greenqloud, a cloud computing software company offering cloud computing software and services. In May 2014, the company was pivoted to a pure software company with 100% focus on building and developing the cloud management platform Qstack. In August 2017, Qstack has been aquired by NetApp, a Fortune 500 company that provides solutions for hybrid cloud environments.
One of my first big projects was to design from ground up the UI for the cloud management platfrom. The idea was to create an easy way to view, create and manage cloud resources in the Web UI. We introduced the first running version of an app for an upcoming demo in crazy short 3 weeks which later has been served its purpose for the next several months a few minor redesigns, until June 2015, when the second iteration of the Web UI has been developed.
The third iteration of NetApp Cloud Orchestrator is currently in development.
This page is still under development
NetApp, Inc. is an American multinational storage and data management company headquartered in Sunnyvale, California. It has ranked in the Fortune 500 since 2012. With the advent of cloud and white box, NetApp now extends its services to cloud and white box servers. NetApp's Cloud Unit is incorporating QStack into its own hybrid cloud data services system that will be complementary to its existing cloud and data offerings.
Tasks and Problems
May, 2014 – Initial design and implementation of the web app for an upcoming demo in with 3 weeks of given time. having only one dedicated front-end developer.
June, 2015 – Complete design overhaul with new features with unification of our visual style and a brand new design. Our design system wasn’t equipped to to provide standards that unified the look and feel of all the system need across the many tabs and categories. As a result, our UI became inconsistent between old and new designs, making it difficult to use, scale up, adding new features, etc.
October, 2017 – Complete UI redesign (currently in progress).
Sketch App, Abstract, MeteorJS, InVision, Jira, Slack.
The current UI has taken a lot of hard work, trial and error and a lot of rewrites and redesigns. But that is the hallmark of a good UI/UX, never settle for anything but the best and always strive for perfection. You’ll never get there, of course, but you have to try anyway.
Have you ever wondered why all those cloud computing interfaces are so darned complicated? Why is the action to launch a new instance sometimes a seven step wizard? I mean, you just want to start up an instance, assign it an IP number and open up a few firewall ports to be able to setup and launch your WordPress site.
The actions required to perform all the tasks mentioned are complicated in essence but the beauty of a well thought out and easy to use UI is to make all these complicated tasks simple to execute for the end user. So, when we started developing our front end for the UI we decided that Cloud Computing should not be hard at all .
We started by laying down a few ground rules for the UI. It should be:
- Easy to learn and intuitive
- Simple to use
In the instance creation form, you can basically open it and click the “Create instance” button at the bottom of the form straight away. That will start an instance with preselected values for all required fields, keypair, firewall, image, zone and service offering. It will even reserve and attach an IP for you as well! You can tweak the values, of course, but it’s just that simple. On top of that you’ll get notifications and visual indication of the status of the instance creation, updated in real-time.
And for every new feature we add into the UI, we try to make sure that the ground rules apply for every new view and action. A good example of that is our Kubernetes integration, where you can, with a few simple clicks, get a Kubernetes cluster up and running and then easily add new applications, with the world’s first Helm UI integration, and monitor, scale and/or update them, all inside the UI.
We’ve tried to pinpoint the most common tasks needed to perform for all those resources so they are readily available to you at the click of a button. Need to add a data volume to your instance or snapshot the root volume? That’s an easy single click action. What about adding a new reserved IP to it? Again, single click action. And that’s just to name a few, whereas the UI is loaded with these single click tasks that make your cloud life that much easier.
The same philosophy applies to the administration parts of the UI, for domain and/or infrastructure admins. Same list structure, the same simple forms, everything to make the experience of maintaining and administering your cloud setup as smooth and easy as for the day-to-day users of the system.
But even though we have, in our opinion, a superior UI we don’t want to exclude all the power users out there that want to automate everything via APIs, so everything you can do through our UI is available through API automation as well.
Design system is bringing everything together, from typography, layouts and grids, colors, icons, components and coding conventions, to voice and tone, style-guide and documentation, in a way that allows your entire team to learn, build, and grow.
For the last 2 years, having a design system have been a way for our product get designed, developed and deployed more efficiently. I've started with something that I called a Sketch UI Kit that included brand, colour palette, typography and a suite of symbol based modules, cards and elements, which later evolved every time our feature or component requirements couldn’t be met by the existing system. Continuous improvement became a methodology, where every update was absorbed into the overall design, development and documented ecosystem.
In the section below, you can see Version 2.0 of the design system developed in 2016, and Version 3.0, started in 2017, which is continuosly improving and adopting to our development process.