Ngena Quicksizer
Web Design
2021 - 2022
UX/UI Designer
Project Overview
Problem
The company’s interface has become outdated, making scalability difficult due to obsolete technology. Its complexity and lack of clarity result in employees taking a long time to adapt and become proficient with the system.
Task
Redesign the platform to improve scalability, enhance user experience, and modernize the underlying technology stack, making the interface more intuitive and efficient for users.
Solution
Redesigned the interface based on the existing version, updating the design system to align with the company’s branding and marketing materials. This approach ensured a seamless transition while modernizing the platform to improve scalability and usability.
Настройка сети с отображением на карте
Ревью созданной сети со статусами
Dashboard
The dashboard displays a list of Quotes with settings and company assignments. Each Quote is assigned a status to help track its progress.
Network Configuration
In the network settings screen, users can specify parameters for countries, operators, and device models. This helps optimize the cost of network installation.
Network Configuration on the Map
Users can also configure network parameters using a map, providing a visual representation of where networks will be placed and how to best distribute them.
App Flow
To align with the company and development team, we prepared an App Flow of the wireframes. This allowed us to clearly demonstrate all user interaction scenarios within the interface.
Dashboard
Проектирование сети
Ревью сети
Отображение сети на карте
App Flow
Design Concept
Versions
To align with stakeholders, we prepared several design concepts, drawing inspiration from the company's branding and marketing materials.
Concept #1
Concept #2
Concept #3
Concept #4
Design System
Components and Styles
To enhance scalability, we developed an extensive design system of components and styles. This enables the company to grow the product and add new features using a unified design language.
Colors
Font
Icons
Components
Dashboard
Dashboard
The dashboard displays a list of existing Quotes and allows users to create new ones. The logic is straightforward, similar to Figma, where there are projects, and each project can contain multiple files for different company offices.
File Import
File import is a crucial part of the platform’s workflow. Since the platform was rebuilt from scratch, it’s necessary to import all existing materials into the new tool. The import feature, with flexible settings, enables this to be done in just a few clicks.
Onboarding
Dashboard
File Import
Setting of imported file
Quotes
Preliminary Quote
During the quote creation process, users select all necessary parameters based on the client's requirements. They can also view a summary of the network and the total cost of its setup.
Preliminary Quote - Globe View
The globe view visually demonstrates how the network will operate, showing connections between offices and countries.
Advanced Settings
Each country can have multiple locations, such as different company offices or branches. Users can configure network parameters, taking all required locations into account.
Preliminary Quote
Advanced Settings
Preliminary Quote - Globe View
Advanced Settings - Globe View
Quote Review
Quote Review