Variables
Management
As a the sole designer on this project, I worked along the Product Manager on the development of a cutting-edge interface that affords designers and developers full control over the styling of components and apps. One of the critical features of this interface was the ability to implement and manage the styling aspect independently within the actual source code.
Our project recognized the distinct approaches and requirements of designers and developers.
A central tenet of our design philosophy was the empowerment of designers to leverage the power of the source code independently. This means they can maintain complete control over the design process and execute changes without having to rely on developers. Ultimately, the project resulted in an intuitive interface that facilitated seamless collaboration between designers and developers, streamlining the workflow and enhancing overall productivity.
Project Type
Year
Role
Feature
2022
UX Design
Problems to address
-
Potential for inconsistency in the final designs of users’ components or product if the global styling aspect is not properly managed.
-
Risk of creating a tool with a steep learning curve, which could hinder adoption rates and limit its overall effectiveness.
-
Difficulty in creating an intuitive and user-friendly library for adding, editing, and deleting variables that satisfies both designers and developers and stay true to the code.
Research
At the onset of the project, I undertook a research process aimed at identifying tools with similar functions. This task proved particularly challenging given the scarcity of such tools on the market. I examined a range of tools, some of which had functions similar to ours but used different names, such as Mixins and Style Library.
My research also included a careful examination of how these tools implemented variable functionality. Through this assessment, I was able to evaluate the relevance and potential application of these features to our own tool. This research phase was critical in informing the design and development process and ensured that we were able to create a tool that leveraged the most cutting-edge and effective design practices available.
Goals
The goals of this project were to provide users, both designers and developers, with complete control over the styling and consistency of components and apps by implementing and managing the styling aspect independently in the source code. We also aimed to enable users to add, edit, and delete variables in a structured and user-friendly library.
To ensure the ease of use for both designers and developers, we aimed to create intuitive functions and maintain a moderate learning curve, while staying consistent with the logic used in our product.
Variables management flows
Functionality
Controller structure and behavior
I have compiled a manual detailing the appearance and functionality of the variable controller in each scenario, including the variable types, associated icons, the fundamental structure of the controller itself (which adjusts based on the variable type), and other relevant information.
Prototype
Create new variable flow
The following flow involves creating a variable based on the controller values.
Prototype
Edit variable flow
This flow demonstrates how to edit the values in the variable by clicking on the 'more options' icon and entering Edit mode and changing the values.
Prototype
Delete variable flow
By clicking on the 'more options' icon and choosing 'delete', the user removes the saved variable.
