Role

UI / UX Designer

Year

2022 – 2023

Tools

Figma, Microsoft Teams, Zoom, Photoshop, Illustrator

UX Skills

Requirements Gathering, Wireframes, Prototype, Project Management, Visual Design

Team

Daniel Niasoff, Abeer Hatira, William Lau, Manoj Waikar, Vikram, Elly Murillo, Janelyn Co

Background

Qumulus offers managed private cloud at an affordable rate so that developers can build and scale their applications on dedicated hardware without bill shock. The company mission is to simplify DevOps with open source technologies.

Overview

I was the UX/UI Designer tasked to design their landing page and customer order process. The team composed of myself, a business analyst, content strategist and developers.

Problem

My task was to improve their prototype and bring their MVP into life. Based from initial feedback gathered:

  • Despite DevOps being a technical niche, the website needed to be approachable and friendly to a wide target audience.
  • The order process needed to address technical details required in building a private cloud.

Problem statement

How might we improve the existing prototype so that users can understand their options and customize orders according to their requirements?

Target Audience

Qumulus can benefit a wide target audience. This was narrowed down into the following:

  • Startups & SMEs with cloud workloads by providing a lower cost and simple alternative to run their compute and Kubernetes workloads.
  • Healthcare and research institutions by providing faster data processing potentially leading to quicker diagnostics and breakthrough research findings.
  • Online gaming and streaming platforms by providing seamless experiences that require high performance.
  • Financial institutions by providing dedicated hardware in used cases of high-frequency trading, risk modeling and real-time analytics.

Approach

The processes were done in the duration of this project:

  1. Requirements Gathering – Requirements gathering, daily catch up and ideation sessions helped align the team during the entire process.
  2. Information Architecture and User Flows – Used information architecture to organize content and help users find relevant information and reach their goals quickly and efficiently. Created user flows to visualize use cases and to ensure that no scenarios are missed. The diagrams were able to layout the order process flow.
  3. Prototyping and Usability Testing – Created wireframes, prototypes and usability testing as solutions to solve user needs and goals.

Planning

Microsoft Teams and Zoom were used to gather requirements from stakeholders, Figma and Figjam were used in daily catch up and ideation sessions.

Information Architecture and User Flow Diagram

Information architecture helped me organize, structure and label content in an effective way. This provided the foundation as I proceeded to creating my prototype. User flow diagrams helped me visualize, analyze and map how users will interact with the product as a whole. The diagram included paths and journeys that help understand patterns users will take. It allowed the team to gather feedback, make adjustments, and identify and fix user issues ahead of time.

Low fidelity wireframes and prototype

Low fidelity wireframes and initial prototype helped stakeholders visualize the concept and idea. It also let the team resolve basic questions about the content, layout and product requirements before committing to a higher fidelity prototype.

Rebranding

Rebranding created a new look and feel for the existing product. The direction to rebrand was made to make the look more modern and relevant to the target audience, and to create the space for meaningful engagement with the audience. Some outputs from the rebranding were: a new logo, new branding guidelines and design system.

Style Guide

To align with making the product approachable and friendly to the target audience, the following design decisions were made for the style guide: Light mode mode to help users with reading comprehension and speed, blue as the primary color to evoke the feelings of reliability, colorful tones as supplementary color to make the brand more approachable and friendly.

Empowering DevOps Through Open Source

To help users understand who Qumulus, what they offer and how it can be beneficial, these were the information presented in the product:

Snippets of articles online were included to show: (a) the significant increase of cloud service prices (b) a lot of users were overpaying for cloud services.

Explaining the relevance and benefit of Qumulus in a conversational tone.

The company mission, solutions, identity and processes were presented in the about page and the philosophy page.

The cascade of information explained how Qumulus achieves its competitive pricing while offering how high-quality cloud solutions.

Unique Value Proposition: Cost Efficient and Enhanced Performance

Because the nature of the business holds a lot of technical information, we utilized visual representation to strengthen communication.

Used case comparison: Tabs and charts were used to compare prices between Qumulus and its competitors in different used cases.

Budget comparison: Tabs and charts were used to compare the performance of Qumulus and its competitors in different budget ranges.

Package comparison: An overview of different packages offered by Qumulus with itemized features and specs.

Price comparison helped users have an overall idea of how Qumulus compares to other competitors.

Order process

The order process designed lets users select packages, select a location and provider, and select their desired specs. The step by step process was broken into chunks to aid in simplifying the technical details required in building a private cloud.

Select package: An overview of different packages offered by Qumulus helps users decide which package best suits them.

Select location: A page that lets users select their private cloud location. Choices were filtered by continent, made clickable above the selections and on the map.

Select provider: Users can select the provider of their choice, select their desired currency and which city they want the server to be hosted in.

Select specs: Users can design their own cloud by selecting their desired specs. As they make selections, a price breakdown calculator is updated real time to show the itemized list of their selection and the total cost.

A VM capacity calculator was ideated to help users view example scenarios.

Checkout: Users can select their desired duration, review their order summary, select their payment method and checkout.

Reflections and learnings

  1. Reaching MVP amidst scope creep – Many needs were uncovered during the process. Given the limited timeframe, I learned the importance of refining MVP, setting realistic goals and working on a project plan.
  2. Ensuring that technical information are easily understood – I appreciated the usage of images, infographics and visual representations to assist in keeping technical information concise and easy to understand.
  3. Collaborating with a remote team – One of the greatest lessons I learned with remote work is how to stay connected with the team. Staying involved is important to ensure you stay part of the progress.

Next steps

  1. Refining the order process – To include more providers and locations to expand the product.
  2. Micro interactions – Some high-level outputs was done to meet the MVP. Going deeper into refining micro interactions can help make the product more seamless.
  3. Recommendation wizard – Create wizards that help users decide which package best suits them based on their budget and requirements.
  4. Portal – Create a portal for users to manage their clusters, billings and payments, support requests, manage teams, order new clusters and more.