Blog 17: Wireframes for an early visual understanding of each screen

Wireframes are simple yet powerful. They usually are black and white outlines on how each screen should look like.

For our product wireframes, we divided each screen into sections and sub-sections. We highlighted the different buttons, CTA (click-to-action) items, and the information for each screen. We used the tool Balsamiq.

Wireframe samples:

Source: Wireframe samples

Benefits to creating wireframes:

· Helped us identify how each screen looks like.

· Wireframes are generally devoid of any jazz or distractions. Its main objective is to visually specify the purpose of a screen.

Once wireframes were finalized, we designed a prototype using Figma. We shared this prototype with a few pilot users for feedback. We can’t emphasise enough the importance of early feedback.

The prototype was also shared internally. To ensure everyone was on the same page.

• This helped us avoid multiple reworks

• The finalisation of design, meant that the developers could better estimate the development time

While designing in 'Figma', we referred to Dribble for design ideas

(https://dribbble.com)

Jump to blog 100 to refer to the overall product management mind map.

All the best! 😊