XD review: How to Communicate Designers' Ideas to Front-end Developers

One of the essential tasks for a UX designer is to review and provide feedback on how their ideas are implemented in the real world. Ensuring a smooth and effective review process is crucial for delivering exceptional user experiences.

In this article, I’ll share my experience and insights on how designers can utilize Android Studio to conduct comprehensive reviews of tablet and mobile applications for Android platform. By leveraging the power of Android Studio’s tools and features, designers can provide valuable feedback to developers and contribute to the overall success of the app.

With the variety of Android devices available, ensuring that the application is responsive and adaptable across different screen sizes is vital. Use Android Studio’s device preview feature to simulate various screen sizes and orientations, allowing you to identify any layout or design issues that need attention.

Why Choose Android Studio for XD Reviews?

Android Studio, often regarded as a tool for developers, can be a game-changer for designers during XD reviews. It offers several advantages that make the review process more efficient and insightful:

1. Test Without an Android Device Nearby: Android Studio provides a convenient Android Emulator that allows designers to test their application on various virtual devices.

2. Precise Dimension Measurement: With Android Studio, you can accurately measure the dimensions of elements and fonts for specific screen sizes.

Navigating the Drawbacks:

1. Sometimes it can be very buggy.

2. Not all design properties can be fully tested or measured in Android Studio.

Preparation Stage

Before diving into the review process, you need to complete some preparation steps and become familiar with Android Studio’s interface and tools.

1. Install the Android version

To simulate an Android application, install the latest version of Android (or the latest for the application).

2. Install the tools

Navigate to the SDK Tools tab to verify and install essential tools. Typically, the following tools are automatically installed: Android SDK Build, Android Emulator, Android SDK Platform-Tools. Additionally, install the Layout Inspector (I use the latest version) to test layouts.

3. Install the devices

Install necessary devices based on our design screen sizes.

4. Install the app build

Download the End of Sprint build => Launch the required device => Drag & Drop the build onto the device.
Drag the Android menu from the bottom and open the application using your credentials.

Establish a Review Checklist to check elements in Layout Inspector

Create a structured review checklist to ensure that you cover all crucial aspects of the application. Include design-related items such as typography, color schemes, spacing, and alignment, as well as usability considerations like navigation, user flows, and accessibility. A comprehensive checklist will help you maintain consistency and efficiency during the review process.

Now you can start testing. The general testing process could look like this: Launch the application => Open Layout Inspector => Select a device.

What valuable features can be discovered within the Layout Inspector

The Layout Inspector offers three useful ares:

1. Component Tree

I use it to select components.

2. Layout Display

• Displays the app’s layout as it appears on the emulator, including layout bounds.

• In the example, you see so many bounds because it’s modal;

• You can adjust the view by clicking on the eye icon.

3. Attributes

A magic place where you can check sizes, positions, and other properties.

Below, I’ve marked the most useful attributes for designers with a green checkmark. However, I couldn’t find attributes for font family, font weight, font style, strokes, borders, and background colors, as they are stored in variables that are not displayed.

You also have the opportunity to test behavior. To do that, you must turn on Live Updates: Launch your application => Open Layout Inspector => Select a process => Choose your application process => Turn on Live Updates => Turn off Live Updates on the desired screen (note: sometimes this feature can be buggy).

You have an option to test applications using the camera and sound, but these features sometimes don’t work well. For instance, I was unable to launch the camera on my MacOS, but it worked on Windows, only upside down.

To turn on the sound of the app, you need to turn off Bluetooth on the laptop and restart the application. More complex methods didn’t work for me.

To provide clear and concise feedback, take screenshots of specific sections or screens that require attention. Use annotations and comments directly on the screenshots to highlight problem areas or suggest design improvements. This visual feedback ensures developers understand design issues better and make necessary adjustments.

Android Studio is a powerful tool for designers to review and provide feedback on tablet and mobile applications effectively. By familiarizing yourself with the platform’s features and tools, establishing a review checklist, and collaborating closely with developers, you can contribute to the success of the app and deliver a delightful user experience. By employing Android Studio in your review process, you can streamline your design workflow and ensure the final product is optimized for various devices and accessible to all users.

Read also: Smooth Animation Handoff: Tips to Prepare and Transfer Animations from Designers to Developers