Skip to content

Load Management Platform Design

UI Design

Overview

Stanza is an app which manages the site’s ups and downs, improves scalability and performance while managing multi-tenant or spiky traffic.

Our aim was to create a UX/UI design for the platform taking into consideration the initial proof of concept.


Tasks

  • Analyze existing proof of concept, consider new features, and make competitors’ research
  • Create a design for Sign-up, Billing flows
  • Design the dashboard representing the most key data related to your product’s website load management
  • Create UI for the configure function and other pages
  • Design Guards that control requests to external services and monitor request metrics
  • Create design for profile and team management
  • Prepare a clickable prototype
  • Level up branding identity
  • Create a marketing website to show the product features, pricing, and resources, and implement it via Webflow

Tech-stack

Figma LogoFigma
Webflow LogoWebflow
Illustrator LogoIllustrator

Solutions

Proof of concept vs Stanza platform

To prevail in the ever-changing market and grow business revenue customers identified that it’s time for a pivot. Based on the initial proof of concept, we created a platform allowing to manage site’s ups and downs efficiently, monitor downtime, and ensure recovery processes.

User interface displaying story details
Dashboard displaying tasks and actions

Sign up flow

One of the steps of our work was the creation of a sign up flow including password reset and email verification as it's the first point of contact for users and shaping their initial impression.

Sign up flow including password reset and email verification

Real-Time Updates

We created the dashboard that presents the latest FYIs and real-time status updates on essential functions and services. Users can easily filter the data and save their preferred filters directly on the dashboard, ensuring a more personalized and efficient interaction with the platform.

Dashboard that displays a list of tasks and actions

Dashboard with filtering options displayed

Dashboard displaying content using saved custom filter

Notifications & Timeline

We've designed the notifications and timeline pages to help teams identify functions disabled by the system based on traffic and priority, and instances where functions are manually disabled by team members.

Dashboard with FYI tab selected which displaying notifications

Dashboard with timeline tab selected displaying timeline of updates

Features configuration

With the feature configuration, which provides info about unexpected problems, users can establish the feature state automatically, or they can easily configure manual settings with one click.

Features tab displaying different features and statuses

Settings tab displaying configuration settings

Guards

Decorators (Guards) control requests to external services and monitor request metrics. We created these graphs to help users grasp decorator functionality and configure settings effectively.

Application interface for "Inventory Integration" displaying performance metrics on the left, and a form to add a new decorator with JSON configuration on the right

Dashboard interface with guard tab selected decorator, displaying details for the "github guard" decorator, showing its health, priority, and average QPS by priority in a bar graph

Dashboard interface with details for the "github guard" decorator, including its health and priority, and graphs displaying QPS granted over time and latency

Profile and Team management

We designed the Profile and Organization settings pages to ensure users can create an organization, update their profile, see which organizations they belong to, invite new members, or import them using a CSV file.

Settings page showing profile settings with linked organizations and personal info sections

Organization settings page showing team members with roles and permissions, options to download CSV, invite members, and update organization profile details

Workflow process for creating a new organization and inviting new members

Billing

We created a Billing flow, so users have the flexibility to select their preferred payment method, opting between invoices or credit cards. Additionally, they can secure their payment information for future transactions or easily add new payment details as needed.

Pricing page showing two plan options

Payment information page with options to pay using Apple Pay or a credit card

Order summary showing plan selected, payment details, and total

Billing settings page displaying plan, payment method, and billing history

Branding

To enhance brand recognition we integrated the corporate colors and additional branding elements for a cohesive and impactful representation on the market.

Stanza logo and brand assets

Front and back design for Stanza business card with employee information on one side and logo on the other

Marketing site

We incorporated illustrative product features on the marketing website, allowing users to understand how the product works and its solution for the end users. We implemented the website via Webflow making it fully responsive and adaptive.

Stanza's services and features including adaptive capabilities, compute power adjustment, third-party API load control, and sample code, including options to book a demo and watch a video

Stanza team members, company information, investor details, and a contact form, with options to book a demo and connect on LinkedIn

Stanza's blog, featuring various articles on topics like load management, site reliability engineering, and health checks

Four mobile phone screens displaying different sections of the Stanza website, including intelligent load management, the blog, the team, and about

Design System

Understanding the importance of the atomic approach, we created the design system providing a set of reusable components, and foundations to provide consistency and ensure a unified look and feel across all platforms.

A typography guide for the Lato font, displaying various class names, text previews, font styles, font sizes, and line heights for headings and body text

A color palette guide featuring various shades of greyscale, primary and secondary colors, background colors, and additional helping colors

Component guide showing various elements such as navigation menus, buttons, select and multi-select dropdowns, icons, input fields, date pickers, tabs, and upload functionalities

Outcome

As a result, we've created a a powerful platform for managing product's traffic. With clear filters, effective notification system and data sorting, users can easily handle their platform load, minimizing downtime and maximizing recovery processes.

Let's see how This Dot can help you

Are you looking for a development consulting firm that can provide staff augmentation, architectural guidance, and consulting to your company? Look no further than This Dot Labs. Our team of experienced developers and managers can help you implement and teach modern web best practices, and deliver your projects on time and within budget. Contact us today to learn more about our services and how we can help you achieve your development goals.

You might also like

Portfolio

Our clients are building for the future. Explore This Dot Labs' portfolio, and see how we have helped them achieve their diverse technical goals.