Problems 

As a UI Designer, have you ever faced difficulties in organizing design files for maximum efficiency? How do you hand off design files to developers and clients? Have you encountered situations where developers had to ask you many questions about your design, causing confusion for them? 

Solutions

After years of working on various projects as a UX/UI Designer and experiencing similar challenges, I have identified some methods that can help Designers address these issues they face. 

Let’s look at how I approach this.

Establish a clear folder structure  

First, divide the pages based on the intended viewers. In a common software development team, there are typically various stakeholders such as: 

• Developers: Include finalized pages to be handed off to developers. 
• Clients: Include pages, possibly prototypes, to be created and shared with clients. 
• Designers: A place to store unfinished designs, ensuring that no one other than you can see these pages. You can also place the design system file here. 

Next, add the pages that show the main features. Each page represents one main feature. 

Establish a clear folder structure. (Tool: Figma) 

Work on the detail feature page (important) 

A lot of UI Designers often focus on designing main screens and place them side by side, neglecting secondary screens within a feature flow. This can make it difficult for stakeholders to understand the complete flow and logic of a feature. 

To address this, I have some suggestions for UI Designers to improve: 

• Group screens based on functionality. Ensure that these functional groups are easily distinguishable and not mixed with other groups. 

• Create user flow charts (possibly in collaboration with Business Analysts) for each flow (major functional group). This helps you and stakeholders grasp the overall picture and logic of that feature. 

User flow diagram. (source: Justinmind) 

• Design all screens related to a feature flow comprehensively, including main screens, notification screens, screens with pop-ups, dialog pop-up screens, etc. Ensure that no screens are missing from the defined flow in the user flow chart. The more detailed your design, the easier it is to understand. 
• During the design process, remember to name each frame (screen) with a name or code. This helps you and stakeholders easily search for screens in the future when the number of screens increases. 
• Crucially, reverse-check with the drawn user flow chart and use arrows to connect screens to each other, including diamond-shaped blocks to represent true/false logic. 

Use arrows to connect screens to each other. 

• Mark important notes in your design file to ensure stakeholders have a clearer understanding of the flow in the design. 

Use prototypes  

Utilizing prototypes not only helps stakeholders understand the feature flow visually, as if using the final product, but also helps developers avoid missing small features. Prototypes are also an excellent method for sharing with clients when they want to provide feedback on your design. 

Mark changes in the design files  

During product development, updating designs is inevitable. In addition to discussing changes with Business Analysts or Project Managers in documentation, Designers should also mark these changes in the design file so that all stakeholders are aware of them. Once these changes are approved, we can remove these markings. To make these changes clearly visible, we can highlight them with red circles and number them. If possible, include a description of the changes here. 

Mark the changes in your design files.

Conclusion 

So, what are the advantages and disadvantages of this method? 

Advantages 

• Saves time in transferring design files between team members, thereby reducing development time for the team. 
• All stakeholders can understand your design in detail. 
• Easy to track changes. 
• Stakeholders can collaborate and work together on the same file, minimizing the need for excessive documentation. 

Disadvantages 

• UI Designers need to allocate additional time to perform these tasks. 
• Cannot completely replace documentation as it may not adequately describe the logic of the product due to the complexity of its features. 

This experience is personal and may not be suitable for all teams/projects. I hope these suggestions can provide additional insights to help UI Designers solve this problem.  

I look forward to seeing you in my future articles! In the meantime, check out other topics at zen8labs’ blog.

Kerry Tung Tran, UX/UI Designer & PM