The ultimate Automation solution for developers

Jitera is a developer workflow tool that allows small and midsize companies to minimise resource costs by implementing an automated coding process encompassing databases, APIs, modules, front-end, back-end, and deployment.

elfie logo

Role:Senior Product Designer

Year:2022

View more details:

jitera.app jitera.com
jitera-banner

My role

As the sole Product Designer at Jitera, I played a crucial role in enhancing the interface and user experience of our web application. Working closely with the Product Owner, we collaborated with a team of skilled developers to quickly gather feedback and iterate in short periods of time.

Understand Competitor research

When I initially joined the product team, I believed it would be more beneficial to understand how other products tackle the same issues we aim to resolve rather than immediately overhauling the entire user interface design. Our discoveries were collected as an Excel sheet where we reported each value proposition, how they sold the product, and each competitive advantage. This document was regularly consulted throughout the whole project.

jitera-banner

User journey and information architecture

We directed our attention to the main tasks for user journeys: mobile and web editors, API endpoint integration, and source code export. These tasks helped us understand how the product's core features should operate. Furthermore, I established the information architecture before sketching new ideas for the product. Through brainstorming workshops, we mapped out the primary and secondary functions of the product, along with existing and new areas.

jitera-information-architecture-photo

Dogfooding current product and sketching new design

Since I have no coding experience, I decided to utilize not only Jitera but also other no-code tools to construct my own website or mobile app. This experience has enabled me to empathize with developers and understand their requirements. It also sparked ideas for improvement when I used our product and compared it with others, leading to valuable enhancements.

jitera-dogfooding1-photo
Initial Jitera product designed by developers before I joined them
jitera-dogfooding2-photo
I held a few sketching remote workshops with developer and PM team where we discussed our ideas and came up with initial sketches

Prototyping and user testing

We had multiple iterations during this process due to the specific target audience who practised working with their development tools. We observed developers using familiar tools such as VSCode, Postman (a back-end tool), and FlutterFlows, among others. Additionally, I regularly organize meetings with developers to gather their ideas for the Jitera tool and allow them to share their pain points and expectations for an ideal tool.

jitera-prototype-photo
We observed developers using Jitera and analyzed their feedbacks to define problems and improvements.

Atomic components and design system

My primary focus was to keep it as simple and flexible as possible. I rebuilt a large part of it based on the principles of the Atomic Design System. I connected these components to the existing library of components and layouts, allowing for effortless switching between market themes. Additionally, I designed the dark mode, improved the system's usability for other designers, and successfully created the initial design system for Jitera.

jitera-Atomic-components1-photo
We observed developers using Jitera and analyzed their feedbacks to define problems and improvements.
jitera-Atomic2components2-photo

Other projects