Datagile – SaaS Admin Dashboard

Datagile – SaaS Admin Dashboard

Effortless efficiency. Unmatched insights. Datagile delivers a seamless project management experience with a design that prioritizes both ease of use and powerful data analysis.

Web App Design
SaaS
About Project
Our Task
Design Process
Wireframes
Visual Design
Key Features
Screens

About the Project

Datagile is a SaaS platform that optimizes project management through efficient data tracking and analysis. It offers a wide array of tools that facilitate project monitoring, performance evaluation, and data-driven decision-making.

Screens designed

12 screens

Clock icon

190 hours

Mobile messenger application design

Service:

Web App Design

Industry:

SaaS

Ordering country

Country:

USA

Black Clock icon

Partnership period:

2022

Our Task

The client approached us intending to create a project management platform that could compare past performance data and aid in future planning. Our task was to realize this vision by designing a SaaS solution that integrates detailed performance analytics and strategic planning functionalities.

Our Solution

We designed an integrated project management platform that streamlines project management processes, facilitates communication with team members and clients, and provides robust data analysis tools. This solution helps businesses maximize data utilization and achieve superior ROI.

Our Design Process

01
Research & Discovery
Initial research and discovery phase

We initiated our design process with a comprehensive research and discovery phase. This involved an in-depth analysis of the client's vision, objectives, and specific requirements for their project management solution. What is more, we conducted extensive competitor research to identify industry best practices and potential areas for innovation. Additionally, we performed a thorough audience analysis to understand the needs and pain points of project managers, stakeholders, and team members who would be utilizing the platform..

02
Wireframing
UX stage

Following the research and discovery phase, we transitioned to the wireframing stage. Here, we meticulously crafted low-fidelity wireframes that served as the foundational blueprints for the platform. These wireframes encompassed the main project dashboard, Kanban board for visualizing workflows, detailed analytics sections, and more. The focus at this stage was on establishing the core functionalities and user flows within the platform, ensuring an intuitive and efficient project management experience.

03
UI Design
UI stage

With a solidified UX foundation established through wireframing, we embarked on the UI design phase. In this stage, we translated the established UX principles into visually appealing and user-friendly interfaces. This entailed the selection of a font family and color palette that aligned with the client's brand identity and fostered a sense of clarity and efficiency within the platform. Additionally, we designed a custom set of icons that would intuitively communicate functionalities and enhance the overall user experience.

04
Adaptive Design
Adaptive design stage

Recognizing the importance of accessibility across various devices, we implement an adaptive design approach to ensure optimal usability on desktops, tablets, and mobile devices. By tailoring the design to different screen sizes, we guarantee that users can access and interact with the app efficiently, regardless of their preferred device. This adaptive design strategy is crucial in today's mobile-driven world, enabling users to manage projects and analyze data on the go.

05
Clickable Prototype
Clickable prototype stage

Finally, we developed a clickable prototype, which served as an interactive representation of the platform. This prototype allowed the client to experience the app firsthand and provide valuable feedback before the development phase began. By testing and refining the prototype, we ensured that the final product met the client's expectations and functioned seamlessly in real-world scenarios.

01

Research & Discovery

02

Wireframing

03

UI Design

04

Adaptive Design

05

Clickable Prototype

Wireframing

To ensure an exceptional user experience, we created a series of detailed wireframes, covering essential components. These wireframes served as the architectural blueprint, meticulously mapping out user interactions and workflows for seamless project management.

Initial screen wireframe of the Splash app
Wireframe of Splash app's phone number entry screen
  Wireframe of the Splash app's interface for entering a user name
 Wireframe of Splash app's messages screen
 Wireframe of the Splash app's search functionality
 Wireframe of the Splash app's new group screen

Visual Design

To create a visually appealing and intuitive user experience, we developed a contemporary design that incorporates a balanced color scheme, combining bright and neutral shades to convey energy and stability. The Poppins font adds a touch of modernity and legibility, complemented by custom-designed icons that streamline the user journey across various features.

 Splash app typography
 An example of using the Splash typography
 Splash app color palette
 Splash app icons set

Key Features

01

Dashboard

A centralized hub that provides at-a-glance insights into critical project metrics, urgent messages, and category-based project overviews.

 Splash private messaging feature
02

Projects Managing

A comprehensive project overview system that displays detailed information for each project, including client details, assigned team members, deadlines, and real-time status updates.

  Splash groups feature
03

Kanban Board

An intuitive visual management tool that allows teams to optimize workflow and track task progression through customizable columns.

 Splash contacts management feature
04

Messaging

A robust messaging system that enables users to communicate directly or within groups, fostering collaboration within the platform.

 TrackEasy subscriptions management feature

Screens Overview

   UI design of Splash app's welcome screen
 UI design of Splash app's phone number entry screen

More cases

View All

E-Booking

Learn more

E-Event

Learn more

Sliky

Learn more

Have a project in mind?

rocket-line
Rocket