SmartAdap
Designing a GUI Editor for Responsive Layouts

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
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
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.


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

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 Key Features
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