top of page
Modern Data
SaaS Design and Development for a Data Engineering Tool
The project aimed to design a SaaS platform that streamlines the API development lifecycle by facilitating collaboration between data scientists/ engineers/ architects. The original design went through a comprehensive overhaul, offering more intuitive, streamlined user flows, data security, and granular control over datasets, including access, editing, exporting/ downloading, or sharing data.
[ SaaS implementation completed using WordPress | CSS | JS React]
My Role
Solution Designer
Team size: 3
1 PO/PM (CEO), 1 Designer (myself), 1 Engineer
I was charged with running competitive analysis, ideating design concepts, and rapid prototyping to build visuals that optimized the information architecture and user flow. The team primarily used Linear to collaborated over an Agile development framework, while also using Slack for instant updates and quick turnaround feedback.
My prototyping process primarily following a lean design-thinking mechanism leading to iterative crafting of interactive prototypes, starting with low-fidelity sketches and transitioning into medium- to high-fidelity interactive wireframes in Figma.
Deliverables
Design Milestones
-
High-fidelity, interactive mockups (desktop)
-
Design Library
-
Complete prototype for MVP
Performance Evaluation
-
Checking performance optimization vis-a-vis predefined parameters
Version Control
-
Tracking product updates
Approach
01.
Requirements definition and competitive analysis
02.
Defining information architecture
03.
Rapid Prototyping (MVP build)
04.
Implementation & version control
Tools Used
Design/ development:
Figma | Photoshop | CSS Tailwind | JS React
Project Management:
Linear
Collaboration:
Slack | Zoom
Prototyping
1
Crafting the MVP started with ideating a low- to medium-fidelity visual for the software dashboard. The first version retained most of the key features (user flows and visuals) of the original design and required further research and streamlining.
2
The next redesign added a second level to the navigation, expanding the information architecture and opening up a workspace for data engineering and collaboration.
3
In the third iteration, I proposed maintaining a single navigation bar and streamline the data levels in dropdowns, instead of adding multiple trays for each IA level. With one part of the user flow resolved, there was yet the issue of excess white space.
4
In the final iteration for Phase 1, I optimized the visuals even further, this time introducing tabs and tags to seamlessly toggle between data classes. I also built a Dark Mode look accounting for accessibility in design (awaiting development).
Mockups: Tablet
Mockups (Dev.)
Let's Connect!
bottom of page