The ‘Design Review’ Between Designers and Developers

Reviews and feedback at each stage of the creative process are both useful and crucial to the success of a product or service. As designers, we review our design work a lot, especially in an agile context. The purpose is to maintain a consistent user experience as well as graphics and ergonomic quality while refining our production strategy

What is a ‘Design Review’?

Evaluate whether or not the developed product is in line with the creative vision and user experience communicated by the design teams

Review the developed project to verify all graphic and technical components display and function properly
Takes into consideration all devices currently on the market, using the most recent OS versions

How to perform a good design review

Before you start, check the OS version or the browser according to your target users’ habits.

During the design review, note all of the developers’ feedbacks to be able to follow up on the various graphical and functional bugs detected

How did we get there?

In an agile context, even the best design work can be impacted by things like limited resources, technical issues, and timing of releases

As the design gets passed on from the design teams to the product owners and development teams, each team makes changes according to various temporal or business issues, which can lead to significant misunderstandings

Prerequisite

References for making comparisons

For projects created using a Design System, it’s necessary to analyze all the components while considering various types of media
Design principles: brand values, product principles
Branding: logo, colors, typography, images, iconography, tone of voice
Features and user flows

Ensure everyone’s on the same page

Working together with developers early on in the project makes the design process and feedback delivery easier

Sharing the goals and constraints of each profile benefits the whole team in terms of time, resources and effort
The design review is not only the designer’s job

Use a checklist

Elements to check

Alignments: Text block alignments, images, buttons, logos or icons
Margins: margins, padding, optical alignments
Spaces: titles linked to paragraphs, numbered lists
Typography: Have the right fonts been used? Are the fonts used royalty free? Are they regulated?
Colors: Respecting primary colors and accents
Affordance: Component states (buttons, links, icons, checkboxes, etc.)
Micro-interactions in navigation menus or tab bars
Media: Check the pictures used
Check the size of illustrations, hero banners and icons in the case of a responsive display
Observe scrolling images of carousels

Identify real problems before considering solutions

Include designers early on in the design process to address these problems so that the design can be reworked to obtain a similar solution on both platforms and avoid jerky experience.

Example: iOS and Android developers couldn’t just implement a significant transition between two pages in a workflow as the design team had imagined – the user must have the choice to either continue or cancel