top of page

SmartAdap

Designing a GUI Editor for Responsive Layouts 

Responsive GUI

Introduction

SmartAdapt is a design-led project developed in collaboration with the VVISE lab, where I worked alongside a team of designers and developers. The project aims to assist GUI designers by automating the adaptation of layouts across different screen sizes.

MY ROLE

I conducted comprehensive user research, facilitated co-workshops, and contributed to synthesizing research findings to produce viable ideas.

I contributed to the overall design process and oversaw product scoping, user flows, rapid prototyping, and usability testing aspects.

PROJECT SCOPE

A squad of designers, developers, and project manager. 18 months (Hybrid)

TOOLS

Figma, Miro, AirTable, Zoom, Slack, Photoshop

Problem Discovery

Designers struggle with creating consistent and resizable GUI layouts

across multiple screen sizes.

During my interviews with expert GUI designers, many expressed frustration with having to manually create separate layouts for each screen size, leading to inefficiencies and potential mistakes in resize behaviors.

How Might We simplify the design process and help designers create adaptable GUI layouts efficiently?

The Solution: SmartAdap

A GUI editor generating responsive layouts for multiple screen sizes.

Simplify your design steps through layout suggestions


The Process

Researching the Problem Space

Subject-matter research showed the effective use-case of the "Reverse-ORC" to

minimize designers' efforts in designing responsive GUIs.

To build a solid understanding of a subject, we delve deep into layout design behaviors, to gather in-depth knowledge, through literature reviews, and studying the state of the art in this field, particularly the ReverseORC method. This method refers to a reverse-engineering generative approach used to suggest layouts for different screen sizes to the GUI designer.  As a good starting point, we would later validate this finding further via exploratory research (mixed-method).

reverseORC workflow.png

ReverseORC WorkFlow

Analysing Market and Competitors

Competitive benchmarking revealed a Significant Gap in the Market for Supporting Music Freelancers

Looking at the popular players within the space, we identified a similar approach to designing responsive layouts, with a focus on drag-and-drop functionality, automatic resizing, and manual constraints. We hypothesized that these features are crucial for creating adaptable designs across various screen sizes, and there may be an opportunity to differentiate by improving ease of use or standardizing responsive behaviors.​

protopie-icon-filled-256.png
png-clipart-macos-app-icons-sketch-2-thumbnail_edited.jpg
Adobe XD.jpg
bootstrap-logo-shadow.png

Protopie

Figma

Sketch

Adobe XD

Bootstrap

Validating Our Assumptions

Mixed method research shared the struggle of adapting a layout to different screen sizes.

I conducted an observational study with Expert and Junior GUI designers, aiming to examine how designers approach the creation of responsive layouts by observing their decision-making process during the design flow. This includes tracking how they utilize layout editors, set constraints, group objects, and adjust for various screen sizes. This study helped me understand common practices and pain points in designing responsive GUIs, providing valuable data for improving design workflows and tool functionality.

​​

After the observational study, we conducted semi-structured interviews with users to explore their approaches to designing responsive GUIs and validate our findings about utilizing the generative method for designing responsive layouts. This helped refine our understanding of their workflows and the tools and techniques that could improve responsive design processes.

2.jpg
1.png

The biggest theme we discovered:

Designers struggle with creating separate layouts for each screen size but want control over generated layout to simplify the process.

What are your typical challenges when designing a responsive GUI? 
While Figma's Auto Layout is powerful, it can feel limiting due to its lack of flexibility, often requiring workarounds to achieve the desired layout.
Anna
UX/UI Designer
In Adobe XD, I frequently use manual workarounds for responsive design and wish the software offered more advanced features to control element resizing and behavior across breakpoints.
Xinti
Product Designer

Identifying the Pain Points

Manual Adjustments and Lack of Standardization

Current responsive GUI design tools require frequent manual adjustments to constraints, which is time-consuming and error-prone. The lack of a standardized method for resizing elements across platforms adds to the complexity, making it harder for designers to create consistent, adaptable layouts.



Affinity Map
 

affinity map2.png

 

 

 

Key insights found for applying

the  generative responsive layout design approach

Defining Persona and Goals

Consolidating our key insights into 2 goal-oriented personas.

Alex Carter

34- Senior UI Designer

  • Seeks a more intuitive way to define and manage responsive behaviors.

  • Needs a tool that reduces the manual workload while maintaining design flexibility.

  • Wants real-time previews that accurately reflect how layouts will adapt to different screen sizes.

Jamie Lee 

26-Junior Product Designer

  • Wants a tool that simplifies the process of creating adaptable designs.

  • Needs more built-in automation to assist with resizing behaviors.

  • Prefers a solution that provides intuitive recommendations for handling dynamic content.

Brainstorming and Ideation

How do we support for the ideal solution scenario?

To facilitate our generation phase, we further reframed our design requirements into design guidelines and key actionable statements that are broad enough to allow multiple solutions, but narrow enough to set focus.

How might we...

SmartAdap Brainstorming.png

SmartAdap Key Features

Automatic Widget Grouping

Feature 1

Regarding the first design guideline:

When widgets of the same type are adjacent at different layout sizes and the designer keeps it as it is, the SmartAdap groups them, and the grouped widgets will move together.

L3- Grouping.png

Iteration From Usability Tests

2 rounds of moderated tests informed iterations that helped refocus hierarchy and navigation.

We asked the participants to complete several scenarios and observed their movement patterns, mental models, and ability to complete their goals. Through multiple rounds of feedback, we were able to:

  • Reduce the design effort

  • Reduce design iterations

  • Increase consistency

  • Reduce cognitive effort

  • Improve the designer's control over the layout by adding the Power Tab Pane feature

 

Power Tab Pane

Feature 6

Regarding the second design guideline:

A novel type of resizable tab pane that adapts to the screen size. This type of pane enables the user to customize complex tab pane windows to adapt to the available screen size efficiently.

Project Takeaway

Our Solution streamlines Responsive Layout Design for Improved Efficiency

The iterative design thinking process in this project significantly streamlined the design effort for GUI designers, allowing them to focus less on selecting layout models and more on solving the design problem itself. By minimizing the struggle with specific layout models and their parameters, designers can more effectively reach their goals.

Furthermore, SmartAdap reduces the need for multiple design iterations by visualizing key constraints, layout patterns, and errors, empowering users to make informed decisions on how to address issues. The tool also enhances layout consistency across different screens, lowering cognitive effort for designers with its intuitive, easy-to-learn interface.

Overall, SmartAdap simplifies the process of designing responsive layouts, improving efficiency and reducing the complexity of specifying layouts for diverse screens.

What's Next?

Accommodate More Complex Layouts

Incorporating appropriate constraintss.

 

Pattern Modification
 

Enhancing the overall flexibility and adaptability of the system.

Precise Control Over the Layout Behaviour

Increasing the consistency while dealing with the optional widgets

Aesthetic Design Principles
 

Include objective functions that consider aesthetics

More Projects

ConnecTune

A MOBILE APP FOR MUSICIANS PROFESSIONAL NETWORKING

Touch the Wall

A PLATFORM FOR TRAINING ATHLETES

Let's Connect!

©2025 Portfolio by Elham Sadr

bottom of page