Our Minimalized Wireframing Approach: Designing a Back Office Website

The Process

Our approach is broken down into clear stages, ensuring a smooth collaboration between us and the client, while keeping the design and development teams in sync from start to finish.

1. Initial Meetings: Understanding the Customer's Needs
We started by holding several meetings with the client to understand their workflows, goals, and pain points. Whether remotely via Google Meet or in-person, these discussions helped us extract key details about the entities they work with and their interconnections.

Using Markdown in a simple text editor, we documented these insights. We kept the information concise—just a list of entities, relationships, and bullet points outlining the requirements. This laid the groundwork for creating a scope for the user stories we would need to implement.

2. First Sketches in Figma
With the requirements in place, our designer began wireframing using Figma. At this stage, we prioritized functionality, user flow, and structure. Design elements were set aside for later. The goal was to ensure the flow worked smoothly before worrying about aesthetics.

For the first three to five rounds of revisions, our designer presented wireframes on a shared Miro board. We used these sessions to discuss how well the wireframes aligned with the user stories and requirements. Sticky notes were used to capture feedback directly alongside Figma screenshots, allowing us to document decisions and changes for future reference. This creates an efficient history of the project and helps answer questions like, "Why did we go this route?"

3. Client Collaboration
Once we reached a few rounds of internal review, we invited our client to the Miro board for a guided tour of the wireframes. We gathered their feedback using sticky notes, validating our assumptions, and adjusting the wireframes where necessary.

4. Moving Toward Design
Once the client approved the wireframes, we shifted focus to adding design elements. For back-office applications, Material UI is a natural fit, and our designer had already considered it while working in Figma. This ensures the transition from wireframes to design is smooth, and UI components are consistent.

Next Steps: Part 2

After finalizing the wireframes and design, we move on to development:

• Style Guide Creation: Our designer prepares a detailed style guide to ensure consistency across all elements (location: TBD).
• Development Tasks in GitHub: All development tasks are organized within GitHub. Developers, who have been involved from the start, understand the design rationale and are ready to execute.
• Task Closure: Each development task is auto-closed via PR with detailed comments to keep everything aligned.

This approach enables us to maintain transparency, speed, and clarity, ensuring a smooth process from wireframing to development.