Design systems
Prototyping
0 to 1 Design
Driving 10x Productivity Through Streamlined Backend Development
Timeline
12 weeks (Mar 2023 - May 2023)
Team
Product Designer, Project Manager, 3 Developers
My role
Product Designer
Tools
Figma, JIRA, Rive
In a nutshell
Impact
x10
productivity in designing backend
↓13%
drop-off rate
↑18%
User engagement
↓38%
coding time for Cosmocloud developers
Background
The Challenge: Navigating through multiple frameworks leads to frustration and delays.
Teams often have to navigate through multiple frameworks and languages to build their backends, leading to confusion, delays, and frustration. When I joined Cosmocloud as a Product Designer, I faced the challenge of transforming a complex backend development process into an intuitive, no-code experience.The company aimed to create a platform where users could build backend systems without writing a single line of code.
Problem statement
The Real Challenge: High user drop-off despite a straightforward drag-and-drop interface for the API builder.
The stakeholders noted a high user drop-off rate despite the backend system’s simple drag-and-drop interface. My role was to identify the gap and address it through research and design.
Stakeholder prompt
Discovery
Developer Insights: Key issues with current backend systems and Cosmocloud’s Design
I interviewed 5 developers to understand two aspects:
Breaking down the current design
The current design featured a single card used for multiple functions, creating confusion and hindering understanding, particularly for non-developers.
Design process
Ideation
Leveraging my technical background, I researched essential functionalities that users would need for backend creation. I also brainstormed the components with the developers in my team to get a deeper understanding.
Refining the designs
After brainstorming the designs with the developers, I started categorizing the components to separate them by type and got 5 categories.
I then moved to Figma to design the components for these elements. This included designing cards, finding icons and deciding the colors and laying out the design system for the canvas.
On completing the design system, I prototyped the API builder canvas.
Expanding the Solution: Templates and deployment screens
Along with the API builder, I designed and prototyped several other screens to make the application a complete end-to-end solution for backend developement.
Documentation and design hand-off
I meticulously documented the fonts and colors used in my designs and handed them over to the developers in the form of JSON files to maintain consistency.
Impact
Users can code backend within 15 minutes by simply dragging and dropping elements, making the process 10 times more productive.
The intuitive layout of cards increased user understanding of the platform and reduced the drop-off rate by 13%.
Learnings and outcomes
Collaboration is Key
Working closely with developers taught me the importance of cross-disciplinary teamwork in achieving a shared vision.Simplicity in Complexity
Stripping down complex backend processes into intuitive drag-and-drop components reinforced the value of simplicity in design.Prototyping Iteration
Rapid prototyping and testing allowed for quick adjustments, demonstrating the effectiveness of an agile design approach.
Bonus work: Elevating brand identity
In addition to my core responsibilities, I had the opportunity to contribute to Cosmocloud’s visual identity and public-facing website. While not a primary focus of my role, this allowed me to apply my design skills in a broader context.
Logo design
Iteratively designed a logo to align with brand identity.
Website design
Designed company website along with interactive animations designed in Rive.
I designed the company's public website, including landing pages, animations for product overviews, and a pricing page informed by competitive research.
Animations
To enhance user understanding, I created animations in Rive. These animations were converted into GIFs to visually explain the app's functionality, making it easier for users to grasp the concept.
To summarize
Successfully delivered designs for a no-code backend service platform reducing user drop off rate by 13%.
Throughout my time at Cosmocloud, I successfully redesigned the no-code backend platform to be more intuitive and user-friendly. My contributions not only simplified the user experience but also significantly impacted the efficiency of both developers and end-users, demonstrating the power of user-centered design in achieving business objectives.
