Agile Collaboration with Mid-fidelity

In the fast-paced world of agile development, the collaboration between designers, developers, and product managers can be a significant challenge. Sagar and I had been struggling with low-fidelity and high-fidelity wireframes to facilitate alignment between stakeholders.

The gap between low-fidelity wireframes (quick idea dumps) and high-fidelity prototypes (time-consuming, UI-focused) often led to misaligned expectations, delayed feedback, and extended timelines. We thought there must be another approach that offered the best of both worlds. Enter mid-fidelity wireframes - a game-changing approach transforming our agile process at Innovaccer.

The dilemma

In agile teams, engineers often deliver work in 2-week development sprints, and design is frequently expected to follow the same approach.

However, agile doesn’t accurately represent the design process. Designing requires time to understand the problem and develop a solution. The problem-solving phase must occur upfront, and only then can the solution be executed within the agile framework.

Both wireframes and prototypes are methods for arriving at a solution and aligning on the approach. Each has its advantages and drawbacks.

Low-fidelity wireframes

Goals —

• Validate the proposed features, approach, and ability to solve the problem.
• Understand foreseeable blockers and challenges in implementing this solution.

Low-fidelity screen

Benefits —

• Allows designers to explore ideas quickly.

Challenges —

• The wireframes are not symbolic of the final product's appearance, making it hard for stakeholders to visualize.
• Based on the feedback, the solution can change a lot from here to the final designs.

High-fidelity wireframes

Goals —

• Help developers plan the HLD and APIs and determine the exact scope of work.
• Feedback at this level is required for the screen’s look and feel.

High-fidelity screen

Benefits —

• Clear visibility of components, interactions, and required resources.

Challenges —

• It takes a lot of time to detail out high-fidelity designs.
• Stakeholder feedback on this screen focuses heavily on UI.
• Developers are blocked on bandwidth estimations and planning till the final designs are ready.

Getting the Best of Both Worlds (Mid-fidelity)

Goals —

• Allows designers to explore and validate ideas quickly.
• Understand foreseeable blockers and challenges in implementing this solution.
• Help developers plan the HLD and APIs and determine the exact scope of work.
• UI-agnostic feedback from stakeholders.

Using community libraries

Challenges—

• We still faced issues when those mockups were converted to high-fidelity.
• Some elements might look perfect in mid-fi but would take up too much focus in high-fi.

Building a Mid-fidelity Library Overnight

To solve this, we wanted to utilize our Masala Design System for mid-fidelity.

• We shortlisted the most used components from our DS and overrode the colors to monochrome.

Making the palette

• We also removed shadows in cards and went with the outlined style.

Mid-fidelity library

• Instead of getting into the final copy or using “Lorem Ipsum”, we will use “Skeletons” to reduce the visual distraction.

Benefits—

• These minor changes gave the mid-fidelity aesthetic to the same components without making extensive customizations.
• No state management was required since these components would bring ideas to the screen rather than serve as a final output demo to customers.
• The mid-fidelity wireframes are self-explanatory; if you make them on Figma, you can prototype some interactions, and getting async feedback becomes a piece of cake.
• Using the feedback, we designed the pre-aligned and pre-scoped requirements in high fidelity.
• We then created custom components and patterns with all required states and variations, bringing more structure to our Figma files.

Creating custom UI patterns

The Magic of Mid-fidelity

Having personally gone through multiple rounds of feedback and changes on the final screens, I can say it’s as time-consuming sometimes as the first time you made them, if not more. Getting the same quality of feedback early on can save you time, effort, and probably a lot of frustration.

Additionally, where your engineering teams had to wait earlier for the final screens to start working and report any challenges, mid-fidelity allows them enough visibility to work alongside you.

From my experience of working with them in the last few months, they have effectively reduced the time of our feedback loops from 3–4 weeks to just 3–4 days.

That’s it!

I hope it helps you as much as it helped me. If you try this for your design work and there is anything more you find out, I would love to hear about them and add them to improve my process.

Co-authored by — Sagar Jagga