Product Design - Desktop, Mobile, Web | Branding
Overview
Supernova is a groundbreaking design collaboration platform that enables users to generate production-ready code for app UIs from imported Sketch or Adobe XD project files. It allows the creation of pixel-perfect UI components, animations, and navigation, exportable to React Native, Flutter, Android, and iOS. Additionally, Supernova Cloud facilitates project sharing, including documentation and design systems, with team members and stakeholders.
My Role & Contributions
As one of 5 total team team members and the only designer, I collaborated with the founding team to:
Evolve the brand and contribute to marketing strategies.
Develop user flows and wireframes to map key interactions.
Design responsive UI/UX interfaces optimized for various devices.
Create prototypes to test and refine workflows.
Problem:
Upon joining the Supernova team, the desktop app was still in beta, and design had not been a major priority. The existing interface had a complex information architecture with multiple levels of navigation, vague iconography, and alignment issues, leading to a suboptimal user experience.
We adopted an incremental approach to enhance the design, updating various components such as the sign-in/up screen, welcome screen, panels, toolbar, and modal windows. Additionally, we introduced new features to enrich functionality.
The above screenshot could use some polishing. The information architecture is overwhelming. There are at least 3 levels of navigation. Some of the iconography is vague. The alignment of the field titles is difficult to read. There could be more contrast in the colors and more of them. Overall, it could be better.
Sign In/Up Screen
We redesigned the sign-in/up screens to align with the desired aesthetic, incorporating options for email or social account access and user data collection
Welcome Screen
The welcome screen, the user's first interaction with the app, was revamped to improve information architecture and visual appeal. It was designed to function seamlessly across various backgrounds, considering its subtle transparency.
Old Welcome Screen
New Welcome Screen - Dark Background
New Welcome Screen - Light Background
Left Panel
Initially, the left panel featured five tabs: Screens, Components, Animations, Navigation, and Assets, each further divided into multiple sections. To simplify the interface, we consolidated the Animations and Navigation tabs into a hierarchical structure within the Components tab. While our ideal solution was a unified list, technical limitations prevented full implementation at this stage.
To improve clarity, we replaced the tab icons with spelled-out labels, updated the color scheme, and refined the iconography for a more cohesive look. The most significant changes were made to the Screens and Components tabs, ensuring they were streamlined and user-friendly.
Screens Tab: We improved the Screens tab by removing unclear iconography and replacing it with updated, intuitive icons. To enhance usability, we introduced screen preview images and organized navigations by nesting them under each screen. We also implemented a filtering feature to help users quickly locate specific content.
Components Tab: The Components tab underwent a comprehensive update, including refreshed iconography and color schemes. We also restructured the information architecture to make it more logical and user-friendly.
Right Panel
Significant reorganization of the right panel improved information architecture. We introduced a new color scheme, updated icons, and redesigned fields and titles for better clarity.
The right panel underwent a major transformation to enhance usability and clarity. We reorganized elements to create a more intuitive information architecture and introduced key features such as behavior settings. The panel's appearance was refreshed with a new color scheme, updated iconography, and refined wording for better communication. Also, fields and titles were completely redesigned to improve their visual hierarchy and overall accessibility.
Center Panel
The center panel received one of the most significant updates in the redesign. To accommodate the simultaneous overhaul of the toolbar, we ensured that all features were appropriately reorganized and retained their functionality. The "Compare" feature was removed entirely due to advancements in import accuracy, which had become nearly pixel-perfect.
We redesigned key features such as zoom level and preview for improved usability, while the Screen/Navigation view was relocated to the toolbar for better accessibility. A notable addition was CodeX, which introduced powerful capabilities to the platform (detailed below). Lastly, we updated the center panel's background color to provide better contrast with the screen and adjacent panels, enhancing the overall visual clarity and user experience.
The Toolbar
The toolbar underwent the most extensive and necessary transformation in Studio. The original toolbar was cluttered with an overwhelming number of rarely-used options, creating confusion and inefficiency. It required a comprehensive overhaul of its information architecture, iconography, and overall design.
By prompting users to select their project type when opening a file, we eliminated the need for the iOS/Android/React Native/Flutter toggle. The redesigned toolbar now displays the project type, project name, and the name of the screen the user is working on, ensuring users have clear context at all times. Switching between editing and navigation views has also been streamlined with a dedicated toggle for ease of use.
Additionally, we integrated buttons for the newly designed Style Manager (details below), as well as key functions like Project Details, Refresh Design, Export, and Documentation. This reimagined toolbar not only declutters the interface but also frees up valuable vertical screen space and significantly reduces cognitive load, making it far more user-friendly and efficient.
Modal Windows
In addition to the primary user interface, Supernova features several modal windows and popovers, each designed to enhance functionality and user interaction. We'll delve into these in detail below. It's worth noting that Supernova supports multiple color modes, so not all screens will appear in the Obsidian color mode. This flexibility ensures an adaptable and visually consistent experience across different settings
Import/Export/Refresh
The import, export, and refresh windows share a consistent design and functionality. For brevity, we’ll focus on the main import window.
When importing a document, users first select the target platform—Flutter, iOS, Android, or React Native—and assign a name to their project. Next, they are presented with a preview of all the screens within their document. This preview allows users to select specific screens they wish to import while retaining the flexibility to refresh their document and add additional screens at a later time. This streamlined process ensures a seamless and user-friendly workflow.
Localizations
Supernova offers robust localization support, including both manual localization and automated localization through the Google Machine Translation API. Enabling this feature is simple and allows users to seamlessly adapt their projects for different languages and regions with minimal effort.
Style Manager
The Supernova Style Manager is one of the platform's newest features, serving as the foundation for building a comprehensive design system within your project. As the first iteration, it provides essential tools to streamline design consistency and organization. While already a powerful addition, future updates will continue to enhance its functionality and usability.
Color Picker
The color picker, like other components, required a redesign. However, this was no ordinary color picker—it needed to integrate seamlessly with the color tokens that Studio allows users to create. Balancing functionality and user-friendliness presented both challenges and opportunities for creativity. The result is a robust and intuitive tool designed to enhance the color management workflow. The complete flow can be viewed here.
Solid view
Solid/Gradient Dropdown
Color space selector
Shared colors open
New shared color
Gradient view
Shared gradients
Publish Popover
Studio allows the user to Share their project with a team, manage access rights, and embed the project.
Share your project with your team or keep it private. Post it to a public URL and see how many versions you’ve uploaded to Cloud.
Manage your team, set permissions, or invite new team members.
Grab the embed code for your project and change the device border
Preview Mode
During the app creation process, users can activate Preview Mode to see their app live on a virtual device. This feature functions as a built-in device simulator within Studio, allowing users to validate their changes in real-time and ensure their designs work seamlessly as intended. See the full flow here.
Preview Mode - open
Preview Mode - settings
Preview Mode - popped out
Preview Mode - popped out - settings
CodeX
CodeX is one of Supernova's most powerful features, offering users the ability to preview the complete interface code directly within Studio. This real-time functionality supports all platforms, providing seamless integration and instant feedback to enhance the development workflow.
CodeX - Open
CodeX - Popped Out
CodeX - Popped Out - Dual
Animation Mode
Mode is an exciting feature currently under development. While updates have been made, the feature is still a work in progress. Below is a screenshot showcasing its current state, offering a glimpse into its evolving capabilities.
