A further look at the creation of Studio Editor
Visualizing key functionalities
Defining features & how they intertwine
Elements: items that would appear in the published Story (Text, Image, Video, Button, Animation, & Code)
Menus: groups of options relating to the backend of a Story (Editing, Settings, Metadata, & Export)
Global controls: inputs that determine positioning, appearance and element specific controls
Initial concepts
Early conversations & low-fidelity wireframes
Initial concepts were presented to team members across departments to dial in layout. The findings from those reviews are below.
Duel sidebars: reasoning from the marketing team was that this layout felt the most similar to products they had used before. Reasoning from our developers was the lack of programming concerns for a tight turnaround
Tabular menu: the agreed upon approach to make menus always visible and expand to fill the left sidebar
Drag and drop: to avoid using a speed dial so that all element categories are visible within the default screen to promote utilization of off-the shelf elements
Visuals below ↓
Concept voting results
Which concept was preferred the most?
Dual sidebars: 57%
Expandable sidebar: 14%
Tabular menu: 14%
Floating windows: 14%
Other concepts: 0%
Presented concepts
Refining visuals into a detailed prototype
Visual design
Using the dual sidebar layout as a starting point, the visual design was further fleshed out by using the chosen color palette, typography, and visual styles from the design system to create a cohesive and visually pleasing interface
Adapting the design system
UI elements
Forking off the design system, custom UI elements were designed and implemented, such as action panels, input fields, and navigation menus, to ensure a consistent and intuitive user experience
UX adjustments
User flows
With review of the high-fidelity prototypes, the user flows primarily around establishing animations and analytic tracking, were reconsidered and adjusted
Process images below ↓
Heading into the development process
Product handoff
The handoff process was designed to facilitate a seamless transition from design to development, ensuring clarity, efficiency, and accuracy in bringing Storysoft’s Studio to life. By providing detailed documentation, including annotated designs, interaction specifications, and style guides, developers had a ample references to accurately translate the high-fidelity design into functional code