Overview
zCloud, a flexible and user-friendly Cloud hosting service, found its beginnings in the autumn of 2022 when Quave, Ltd. embarked on the ambitious journey to build it from scratch.
Determined to simplify Cloud services, zCloud envisions cost-effective app and database deployment with full transparency. Compatible with various technologies, it supports JavaScript, Java, PHP, Ruby, Python, PostgreSQL, MongoDB, and Redis. Empowering users with Docker, zCloud ensures precise configuration.
A standout feature is zCloud's unwavering dedication to customer support, promising less than 1h response time within working hours. Clients experience unparalleled service and reliability at a fraction of traditional costs.
My contribution
As the sole designer at Quave, I designed the entire product from the ground up. This encompassed everything, from choosing the color scheme and typography to developing the component library, creating user flows, building prototypes, and conducting research. I also supervised all the front-end work, designed and created the marketing website and banners.
Design challenges
Starting a design project from scratch is never easy. My journey with zCloud presented unique challenges that demanded creative solutions.
One of the first hurdles I encountered was the need to create a comprehensive color scheme and ensuring it would be visually appealing and consistent across the platform.
Building a component library was the next big task on my list. With no existing product or clients to provide feedback, I had to lay the foundation for the library myself. I aimed to make it optimized for swift development, easy maintenance, and accessibility. Finding the right solution was critical as it would heavily influence the design of my components.
Designing the MVP (Minimum Viable Product) proved to be a unique challenge. Without direct client feedback, I had to rely on competitor analysis and social media discussions to understand user expectations. This allowed me to identify the features that would be most valuable to our clients. Fortunately, zCloud's CEO extensive industry experience and expertise provided a valuable resource to validate my design decisions.
My iterative design process revolved around early sharing of my work, collecting feedback, and making necessary iterations. This collaborative approach ensured that the entire team was aligned with the design direction, leading to fewer surprises along the way.
Product design
Let's explore the creative process behind zCloud's design. We'll delve into each challenge I mentioned in the previous section.
Color scheme My first hurdle, the color scheme. The process started with my two primary brand colors: lime and teal. I knew I would use a dark theme, (because the CEO requested it) so I used this as a starting point. From there, I expanded the palette by creating four shades and four tints from each color. The result was not only a visually appealing scheme but also a versatile one that could be applied to different elements within the app. Lime became the primary color for buttons and links, while teal was used as an accent color. I also addressed neutral, light, and supporting colors. The process of creating the color scheme involved laying down 9 empty blocks (named 100-900), choosing a color to go in the middle block (500), and then creating 4 shades and 4 tints from that color. Once I had all the variations for all the colors, I harmonized and balanced them out.
Component library When it came to building the component library, I carefully considered my options. I aimed for a solution that would allow for quick development and easy maintenance. After evaluating several options, I settled on Radix, an open-source component library. One of the advantages of Radix was that it provided components without any predefined styles, allowing me to customize them according to my design preferences using Tailwind. This flexibility was a significant asset as it allowed me to create basic components in Figma and expand the library as I progressed, aligning with my evolving needs.
Designing the MVP Given the absence of an existing product and clients in the early stages of my work, designing the MVP posed a unique challenge. To bridge this gap, I embarked on extensive competitor analysis to gain insights into what users were expecting in the market. By monitoring social media discussions, particularly on platforms like Reddit and Twitter, I tapped into the problems and frustrations users were experiencing with my competitors. This valuable information guided me in shaping the features I would incorporate into my MVP. With my CEO's wealth of industry experience, I could trust his judgment in validating various flows and design decisions.
Simple solutions to complex problems One of the most significant challenges I tackled was making the complex process of deploying and managing apps as straightforward as possible. I had to come up with some pretty interesting solutions to keep things simple for our users. One of my solutions addressed a common issue faced by users -- knowing when to redeploy or build a new image after making changes to environment host, vars, or settings. I designed a feature that enabled users to review all changes before applying them with a single, easily visible button. This not only eliminated confusion but also improved the review process and prevented misconfigurations that could result in downtime. Furthermore, this feature allowed users to track changes made by other team members, enhancing collaboration and transparency.
This prototype shows the basic flow of making a change and applying it:
A sticky bar appears when you scroll the 'Apply Changes' button out of view but that's not visible in the prototype. Here's how several changes would appear in the "See changes" section:
Other features from this project This is just one of the many features I worked on. I've added a a few more prototypes below that you can browse to get a feel of the product but you should zCloud for yourself go to zCloud.ws.