Visily - Microsoft Internet Explorer
File
Edit
View
Favorites
Tools
Help
Back
Forward
Stop
Refresh
Home
Search
Favorites
History
Address
https://www.frankvo.me/98/work/visily
Visily
I was part of the team that built Visily, a collaborative platform designed to empower non-designers to create professional-quality wireframes and mockups.
Joining Visily early in its development, my work focused on establishing the software's foundational design system and later expanded to cover all aspects of the platform’s design, including the editor and various user-facing functionality.
Design system and the Editor
The system focused on simplicity and consistency. My goal was to create one that is easy to scale, where elements work well together while remaining user-friendly. This approach helped streamline the design process and smooth out the overall experience for users.
The Editor is quite complex, consisting of multiple components that are not visible or accessible until certain conditions kick in. For example, if you don’t have permission to edit a file, you’ll see a different UI and some changes to the canvas tools and interactions that focus more on inspection and feedback.
There’s also a version history viewer, settings for sharing and permissions, theme options, prototype mode, and so on.
Feature development
Along with the Editor, large part of my time was focused on feature development, figuring out with the team what we should build and how we should build it.
Smart Components were one of my most important contributions at Visily. They allow users, especially non-designers, to quickly and consistently create complex design components with easy customization. This feature also speeds up the process for content contributors, enabling them to create new templates more efficiently.
My design process for these types of features typically focuses on identifying the most common use cases that also reach a certain level of complexity. I then concentrate on the underlying mechanics and logic, rather than UI details.
One of the more complex features is Theme Settings, an auto-generated design system for users' projects. The goal is to help users kick-start their projects with a basic design system (colors, typography, shadows, radius) that they can easily modify while seeing changes in real-time. We also visualized these configurations in the UI to keep them user-friendly and easy to understand.
The challenge was defining various levels for each property while creating underlying rules to ensure everything fits together seamlessly, all while meeting accessibility standards for contrast and readability.
The complexity of a design tool like Visily runs deeper than what’s on the surface. Every aspect of the user experience is backed by extensive product development, often requiring days, weeks, or even months of iteration and refinement.
This role played a key part in my growth, where I learned so much through iterations and from collaborating with many people. It offered valuable insights into building design systems, the maturation of user-centered design skills, and optimizing for web platforms.
Internet
