Neat Folders & Files


Tutorials - Folders Files Cover

Creative cleanup

Designers like to work in a creative mess and that’s totally fine when you work as a one-man band (“badum tish”). If we add a client, developer, developer from the client, second designer, project manager and other people things must be well defined and organized (“badum tish”).

1. Project_folder_structure_1200x800

Single platform project

Start with this. What you see here is the main structure for any project. Create an empty folder structure as a template and use it for every project. Single platform project means that you have either Mobile app or Website only.

Main structure for single platform project
2. Project_folder_structure_1200x2290

Single platform project

Whaaat? In case you were wondering what’s inside every folder – this is a detailed view. The image is long so you can easily download it as one image. Below I will focus on each folder individually to reduce your cognitive load.

Detailed main project structure
3. Resources_1200

Single platform project

Identity – the client’s visual identity (with all licenses and legal stuff).
Photos – used for designers proposal photos and final photos that are used in production.
Project Manager’s documentation – PM (or whoever is responsible for the project) keeps all technical documents and other important files for the project here.

Resources folder
4. Research

UX designers zone

Discovery workshop – consists of preparation for and outcomes of the workshop.
User research – all insights about the user. Here you can place a Quantitative data folder (where we usually place statistical data) and other folders depending on which method you use.
Personas – can have one or multiple folders. If you create proto-personas and you additionally validate personas with real data from research (you should do this), then you will have Proto personas and Final personas folders.
Customer journey – storyboard and/or customer journey mapping is placed here (all artifacts from the workshop with the client and cleaned version of the same thing – usually translated to digital).
Moodboard – I divided this folder into two types of mood board – functionalities or visuals.

Research folder a.k.a. UX zone
5. Design

Designers island only

No one should go here except people with the word Designer included in their title.
Keep here: all source files from magical Concept design, abstract IA, grey and ugly Wireframes, gorgeous UI design and super smooth Animations.

*We keep .sketch design files in Abstract. It is mandatory to export files to the project folder every few weeks. Folders should contain the latest source files (.sketch in our case) from Abstract.

Design folder – a creative mess
6. Testing


Keep all things necessary for the testing here. If it’s usability testing, visual appeal testing or other. 

If this folder is not empty then good for you (and for the project). This is one of the most important parts of the project – design validation with real users.

Testing folder
7. Export


When it comes to design/developer collaboration we use Zeplin.

Export – is usually for the app icon and promo store graphics. If you need to export some assets that can’t be exported easily from Zeplin (or any similar collaboration tool), use this folder.

Export folder
8. Presentations


Presentations – store every presentation that you have (for the internal team or for the client) here.

Presentations folder
9. Screenshots


Screenshots – for rare occasions when the client needs export in .pdf or .png. 

Back in the days when Zeplin (and similar tools) didn’t exist, we exported screens into this folder.

Screenshots folder
10. Mobile_app___Web_site_project

Multiple platform project

Setup of a folder with multiple platforms (Mobile app and Website or other platforms) for the same project. 
General resources – general visual identity, brand book, fonts, etc. here. 
General research – I rather use Research folder in the specific platform because data might be platform specific. If you have global research, keep it here.

Project folder with multiple platforms
11. Mobile_app_details

Multiple platform project

This is what a folder looks like when you have Android and iOS apps.

Mobile app folder details
12. Web_details

Multiple platform project

Separate mobile from desktop design and store them in the Design folder.

Responsive Website folder details
4. Research

What about Design Sprints?

Well, in our case they are also part of the Research folder. Just create a new one named Design Sprints and add sprints by numbers. 

In Design folder create Design_Sprints.sketch or .fig or whatever and add pages Sprint 1, Sprint 2,… Sprint N.

When you are done with the sprint feature, copy–paste it to the final design file. Something like they do it at the Microsoft Outlook team.

Final_final_v05a words 

This type of folder structure is good for our type of agency work. We have months or years-long projects and sometimes we don’t fill all folders with data. But this guide keeps us all on the same page. Do you have any suggestions or different experiences how you keep project folder organized? Feel free to send us your thoughts.

Here is the folder template to make your life little easier and keep those folders clean and tidy ?
Quick Text Style Setup in Sketch
More treasures ahead
A true explorer like you is always in search of new quests and gems. How about we send you one every month?
Ahh, the cookie banner 😩. The first of website frictions, the breaker of UX, mother of privacy lawsuits. State your preference or
manage cookies.