I have been working as a front-end developer for about two years, participated in the creation of a variety of projects. One of the lessons I've learned is that the interaction between different groups of developers, united by the same goal, but with different tasks and degrees of responsibility, is not an easy task.
In consultation with other team members, designers and developers, I created a site building cycle designed for small teams (5-15 people). It includes tools such as Confluence, Jira, Airtable, and Abstract. In this article I will share the features of the organization of the workflow.
Skillbox recommends: Two-year practical course .
We remind you: for all readers of "Habr" - a discount of 10 rubles when enrolling in any Skillbox course using the "Habr" promotional code.
Why is all this needed at all?
The minimum team needed to create a website from scratch is a designer, programmer and project manager. In my case, the team was formed. But after the release of a couple of sites, I got the feeling that something was wrong with her. Sometimes we just did not fully understand our responsibilities, communication with the client left much to be desired. All this slowed down the process and interfered with everyone.
I started working on solving the problem.
Google search gives quite good results for our problem
In order to make the work done more visual, I created a workflow diagram that gives an understanding of how work is done with us.
Clicking on the image will open it in full resolution.
Goals and objectives
One of the first techniques I decided to test was the βcascade modelβ (Waterfall). I used it to highlight problems and understand how to solve them.
Problem: Most often, the client does not evaluate the process of creating a site in a modular way, as developers do. He perceives it as a regular site, that is, he thinks in terms of individual pages. In his opinion, designers and programmers create separate pages, one after another. As a result, the customer simply does not understand what follows in the course of the real process.
Task: It is not worth convincing the client of the opposite, the best option is to develop a modular process for creating a site based on a page model within the company.
Universal design tokens and components are managed by both developers and designers.
Problem: This is a common situation with a large number of strategies. There are quite a few interesting solutions, in most cases it is proposed to create a design system that is driven by a style guide / library generators. But in our situation, adding another component to the development process that would allow us to manage access levels for designers was simply impossible.
Task: building a universal system in which designers, developers and managers can work synchronously without interfering with each other.
Accurate tracking of the development process
Problem: While there are many useful tools for tracking issues and evaluating overall progress, most of them are not flexible or optimal. The tool can be useful by saving the team time that would normally be spent asking questions and clarifying specific tasks. It also makes life easier for managers by giving them a better understanding of the entire project.
Task: create a dashboard to track the progress of tasks performed by different team members.
Tool kit
After experimenting with different tools, I settled on the following set: Confluence, Jira, Airtable, and Abstract. Below I will reveal the benefits of each.
Confluence
Role of the tool: information and resource center.
The Confluence workspace is relatively easy to set up and has many features, integration with different applications, and separate customizable templates. It is not a one-stop solution for all problems, but it is ideally suited as an information and resource center. This means that any reference or technical detail related to the project must be entered into the database.
The tool allows you to correctly document each component and any other details about the project.
The main advantage of Confluence is the customization of document templates. In addition, it can be used to implement a single repository of specifications and various project documentation by separating the access levels of participants. Now you do not have to worry that you have an old version of the specification in your hands, as happens when you send documents by e-mail.
More information about the tool .
Jira
The role of the tool: problem monitoring and task management.
Jira is a very powerful project planning and management tool. The main part of the functionality is the creation of customizable workflows. In order to effectively manage issues (which is what we need), it is worth paying special attention to the correct use of the request and issue type (issue type).
So, to be sure that developers create components based on the correct design, they need to be notified every time something in the design changes. As soon as the component is updated, the designer needs to open a task, assign a responsible developer, giving him the correct task type.
With Jira, you can be sure that absolutely all participants in the process (let me remind you, there are 5β15 of them in our case) receive correct tasks that are not lost and find their executor.
Learn more about Jira .
airtable
Tool role: component management and progress board.
Airtable is a mixture of spreadsheets and databases. All this makes it possible to customize the work of all the tools discussed above.
Example 1: Managing Components
As for the style guide generator, it is not always convenient to use it - the problem is that designers cannot edit it. In addition, the decision to use the Sketch component library will not be too correct, as it has many limitations. Most likely, using this library outside the program simply will not work.
Airtable isn't perfect either, but it's better than many other similar solutions. Here is a demo of the component control table template:
When a developer accepts a design component, he evaluates the resulting ABEM by registering the component in a table. There are 9 columns in total:
- Name - the name of the component according to the ABEM principle.
- Preview - either a screenshot or an image of a component loaded from another source is placed here.
- A linked page is a link to a component page.
- Child component - a reference to child components.
- Modifier - checking for style options and defining them (for example, active, red, etc.).
- The component category is a general category (text, promotional image, sidebar).
- Development status - the development progress itself and its definition (completed, in progress, etc.).
- Responsible - the developer who is responsible for this component.
- Atomic level - the atomic category of this component (according to the concept of atomic design).
- You can refer to data in the same or in different tables. Connecting the dots will not get confused in case of scaling. In addition, the data can be easily filtered, sorted and changed its appearance.
Example 2: page development progress
To assess the progress of the page development, you need a template that is created specifically for this purpose. The table can serve both for the needs of the team itself and for the client.
Any information about the page can be marked here. This is a deadline, a link to an InVision prototype, a target, a child component. It immediately becomes noticeable that the operations are very convenient to perform, both in terms of documenting and updating the design, and the development status of the front-end and back-end. Moreover, these operations are performed simultaneously.
Abstract
The role of the tool: a single source of version control for design assets.
Abstract can be called a GitHub for assets in Sketch, it saves designers the hassle of copying and pasting files. The main advantage of the tool is that it is a design repository that acts as a "single source of truth". Designers must update the master branch to the latest approved layout. After that, they have to notify developers. Those, in turn, should work only with the design assets of the main branch.
As a conclusion
After we introduced a new development process and all the tools mentioned above, the speed of our work increased at least twice. It's not a perfect solution, but a very good one. True, in order for it to work, you need to make a lot of effort - it requires "manual work" to update and maintain it all in working condition.
Skillbox recommends:
- Practical course .
- Online course .
- Practical year course .
Source: habr.com