Live example 1 — Digital Agency
A small start-up agency of only five people. Usually, one designer worked on the project at the same time. There were exceptions — two or even all five people worked on a project at the same time. On average, the work was carried out over three projects at a time. By the end of the year, it was possible to count 3–5 fully completed enterprise projects plus 15–20 proofs-of-concept or smaller projects.
The main feature of working in an agency is to find new clients. It was necessary in the shortest time to provide the potential client with a spectacular result — to show him the presentation, to show the best screens, to lure him by animations.
We used this system, while each project was located at the top level. Since every project has it’s unique brand, we used an individual set of fonts, stock photos, and graphics for each. For some projects, micro-animation was practiced, for others — sounds when the user interacts with the interface. For some projects, 3D or video renders were created. Each project we showed to the client in the form of a separate presentation, a user journey map, a clickable prototype (inVision or Marvel). Because of these variations from project to project, we used to be agile. Depending on individual project’s specifics we used different combinations of middle and bottom level.
Our practice has shown that sometimes it is necessary to split folders by form-factors at the middle level. And the types of work (design of the app, animation, creation of presentation for the client, files with resources for the project) to the bottom. Such system (System #1, the pic above) is useful if:
- Project has enterprise scale
- Different designers works on different form-factors
- Each form-factor has it’s very large database of resources
- Animations, presentations, prototypes (etc.) needed for each form-factor
All because we are mainly used the same resources. Fonts and pics within the one project were re-used in the web, iOS, and Android. Delicious animations were prototyped to make an empathy impact on a client, so we limited ourselves to animations on one of the mobile platforms. And to collect the final presentation of the project was necessary, using screens, drawn for all form-factors.
Most projects are simple, at least at a very start. They usually requires only one form-actor (today iOS apps are most required by start-ups). To get a a new client and win a tender, you need to present cure animations and prepare an exciting presentations. Usually, it is enough to draw key screens only for one or two form-factors. For such projects we used the system #2. From a project folder you dig right into processes (middle level), while each process contains a form-factor separation or, more often, nothing. Such system is effective if:
- Project is only for one form-factor (obviously)
- Project is more or less small
- Project must be done as soon as possible: as a freelancer or an agency you are up to win a tender
Live example 2 — Product app with 40 000 000 clients
The work in the largest bank in Russia, counting 90% of the country’s population as it’s customers, is a sort of something unique. The bank’s mobile app is used by over 40 000 000 people (total of iOS, Android, WinPhone).
Within the framework of the business, each service of the bank was a separate product. Each such product has its target audience, statistics, its approach. It may be a simple screen or a system of functionality. Therefore, over each part or function of the app, a separate team worked. In such groups, of course, ui/ux designers work too. Sometimes these designers are freelancers.
Teams were dozens, and designers even more. In such a massive company, a strict catalog system is vitally required. The constant introduction of new employees, the need to use freelancers, the iOS, and Android out of sync releases, the reuse of the functionality of the other team, the need to roll back the versions… we’ve faced literally all the extreme situations that a well-thought-out hierarchy in a catalog can help.
Initially, when the functionality of the application was much smaller (accordingly, there were much fewer teams and designers), the most straightforward cataloging system was used.
The top level’s divarication was based on mobile platforms — iOS, Android, WinPhone. But the middle level was a strange and incomprehensible approach for me. It was not divided by functions or logical blocks. The separation at the middle level was based on “tasks.”
If the task was to develop a new functional, then all is well — a folder with the name of the new function appears. But we are talking about a product company. Most of the tasks here naturally sound like “change the input forms of the money amount” or “change the top part of the operation status screen.” As a result, many middle level directories appear. In which it was not possible to find something just because it is impossible to understand the actuality of a file. After all, one part of the same screen could be actual in one task directory (“change the upper part of the operation status screen”), and another part is stored in an inconspicuous task like “change the displays of the main bottom button”.
Whatever it was, we transformed the inefficient, outdated system accordingly a harsh reality. We defined two layers at the top level. At the very top level, the logical components of the application were taken out: home screen, user profile, bank products, onboarding system, chat system and so on. Under them, the second top level divides the system into Android, iOS, and winPhone.
The middle level was the components of the catalogs above in top level. So, the part of “Bank Products” in the middle level consists of the folders relative to bank products: deposits, credit cards, insurances and so on.
At the bottom level, there were folders based on a kind of work process: DESIGN, SHOWCASE, ANIMATION, inVISION, EXPORT, etc. Each contains respective files: origins of layouts, animations, and presentations; exported .pngs for inVision or presentations and so on.
Such division in all levels helped us manage access for freelancers, increase the speed of navigation for both newcomers and experienced employees. Also, it is much easier to work with files in such system when a feature exists yet only in one form-factor: app’s parts (top level) are the same for all platforms while functions of these parts (middle level) have desynch in production status.
The system might be the same if you switch second top level and middle level. This way is more logical for most cases:
In contrast to the experience in the agency, “RESOURCE” folder was shared between all products as separate folder out of the system. Because every function is still a part of the App and should legacies it’s elements and overall style.