About the Product

The Development Data Platform (DDP) is a platform created by ProjectTech4Dev to leverage the power of data to optimize processes and program operations for social impact organizations. DDP can help organizations optimize internal processes, satisfy donor reporting requirements, and ultimately help them better serve their beneficiaries in a cost-efficient, engaging, and possibly targeted manner. It also aims to provide a low-maintenance, low-cost SaaS data platform composed of open-source software elements to tackle data ingestion, transformation (cleaning, aggregation, etc.), data quality, and governance. It mirrors a modern data stack found in the private sector while specializing in integration tools and being tailored to the needs and goals of the development space.

Think201 is one of the software partners & are active contributors to DDP on the technology & design front.

Our Design Approach

When we embarked on the DDP project, our first step was to immerse ourselves in understanding it from a user’s perspective. We thoroughly reviewed the product requirement to gain insights into the user’s needs and expectations. Simultaneously, we delved into the technical aspects to understand the underlying system and its limitations and constraints that would influence our UX solutions.

Taking a user-centric approach, we aimed to ensure that our designs not only met the technical requirements but also provided a seamless and intuitive user experience. We wanted to create a platform that addressed the unique challenges and workflows of social impact organizations while keeping their users at the forefront of our design decisions.

UX First, UI Next

It all started with knowing the product technically as well as functionally.  We created the user flows based on the feature requirements provided, and based on that, we started to set up foundations for the designs. All of this by asking these questions over and over

1. “What does the user need?”
2. “How can design make it easy for the end user to achieve the goal?

Defining Design Systems

The very next step that we embraced was to define the design system for the product. Typeface, colors, and the stylescape itself.

Stylescapes weaves the typefaces, colors, and images that are artfully and intentionally arranged. A style scape gives direction to the final product & not to be mistaken as a final prototype

We experimented with various style scapes with different sets of color combinations to visualize the look and feel of the final product output and we decided on the typeface and the color palette for the product.

TypeFace Selection

Rajdhani typeface has modular letterforms and supports the Devanagari and Latin writing systems. The square and condensed appearance may be interpreted as technical or even futuristic.

The stroke terminals typically end in flat line segments that are horizontal or vertical, rather than diagonal. Their corners are slightly rounded, giving stroke ends a softer feeling rather than a pointy one.

Detailed Visualisation – Full-Fledged Wireframes

With all the major decisions done, we moved towards achieving clarity on how would the UX lead UI by designing full-fledged, interactive wireframes. This step not only brings clarity on functionality, it also challenged us (the design team) to simplify the interface. We have done our best to do so by extensively iterating over grouping & compositions that helped us to visually craft a technical product. It is in fact true that grouping and composition can make/break the UX.

The grouping and composition of elements are key concepts for creating an efficient and user-friendly interface. The composition of the elements is done based on the priority level as well as the use case of certain actions. Detailed attention to elements such as color, alignment, type choice, contrast, consistency, and layout led us toward an effective UI.

Another key element of design that we emphasized was the right usage of “Whitespace” in designs. As highlighted in the image below, the white space created intentionally around the components adds value to the action or data provided and creates a better design. Aligning the components and elements to either be left-aligned or right-aligned creates white space and gives the information the clarity to be differentiated accordingly.

White space can be used to emphasize the most important elements in a design, create organization and clarity, and draw the user’s eye to the most important parts of the page. Furthermore, by leaving extra space around elements such as buttons, headings, and paragraphs, we create an environment that feels less cluttered and overwhelming.

White space should not be thought of as wasted design space; white space can add value to your content and elevate the user experience.

Alignment

Choosing the appropriate alignment also makes a significant difference to the designs. All the elements and components are aligned with the reference alignment, either left-aligned, right-aligned, or center-aligned, depending upon the composition and grouping. The icons and the title are left-aligned as the first priority level, which works as an identity for the content. Secondly, the type label is center-aligned, which holds a lower priority level, and the actions that are frequently used are highly prioritized to be right-aligned in the composition, which provides better accessibility of actions to the user.

We knew that our approach of UX first and UI next definitely worked when we received great feedback from the DDP team. With the foundation laid well, it has become intuitive to design further modules in DDP and we look forward to how we shape this better and better for the large set of organisations to use.

We appreciate the support and feedback from the DDP team in the overall process.

Stay tuned to hear the next update here!