Improving Navigation
Improving Navigation
Improving Navigation
Overview
Overview
Users faced challenges navigating Symend's content builder due to a layered navigation bar, which only displayed one layer at a time. This made it difficult to understand the content hierarchy and when navigating to specific sections. This project spanned 4 months — originating from my intern project proposal — aimed to enhance content organization and navigation, aligning the system structure with user expectations.
Users faced challenges navigating Symend's content builder due to a layered navigation bar, which only displayed one layer at a time. This made it difficult to understand the content hierarchy and when navigating to specific sections. This project spanned 4 months — originating from my intern project proposal — aimed to enhance content organization and navigation, aligning the system structure with user expectations.
My Contribution
My Contribution
As the main UX designer, I led the re-design from concept to implementation. I collaborated with product and engineering teams to integrate a multi-layered view, allowing users to see all layers of content at once. Additionally, I designed new UI components and defined new iconography for better visual communication that adhered to the existing design system.
As the main UX designer, I led the re-design from concept to implementation. I collaborated with product and engineering teams to integrate a multi-layered view, allowing users to see all layers of content at once. Additionally, I designed new UI components and defined new iconography for better visual communication that adhered to the existing design system.
Learnings and Outcomes
Learnings and Outcomes
I learned to balance business constraints with user needs, enhancing my skills in UI design and user research. The new feature significantly improved content creation efficiency, reduced errors, and increased user confidence by providing a clear view of the content hierarchy. This project reinforced the importance of user-centered design in complex systems.
I learned to balance business constraints with user needs, enhancing my skills in UI design and user research. The new feature significantly improved content creation efficiency, reduced errors, and increased user confidence by providing a clear view of the content hierarchy. This project reinforced the importance of user-centered design in complex systems.
Before
Before
After
Issues Identified:
Single Layer Navigation: Only one layer was visible at a time, causing the properties panel to hide the navigation.
Context Loss: Users lost context when navigating down layers.
Fixed Menu Item: The menu item was fixed at the bottom, causing it to be hidden when there were multiple sections.
No Collapse/Group Functionality: There was no ability to collapse or group items.
Limited Movement: Only parent-level items could be moved.
Issues Identified:
Single Layer Navigation: Only one layer was visible at a time, causing the properties panel to hide the navigation.
Context Loss: Users lost context when navigating down layers.
Fixed Menu Item: The menu item was fixed at the bottom, causing it to be hidden when there were multiple sections.
No Collapse/Group Functionality: There was no ability to collapse or group items.
Limited Movement: Only parent-level items could be moved.
Improvements:
Comprehensive Visibility: All layers of content are visible at once, along with the associated properties panel.
Hierarchy Identification: Users can easily identify groupings of items and their hierarchy.
Fixed Top Menu Bar: A fixed menu bar at the top allows users to add parent-level items at any time.
Collapsible Parent Levels: Parent levels can be collapsed to focus on specific areas.
Flexible Item Movement: Items can be moved at any level to any section.
After
Issues Identified:
Single Layer Navigation: Only one layer was visible at a time, causing the properties panel to hide the navigation.
Context Loss: Users lost context when navigating down layers.
Fixed Menu Item: The menu item was fixed at the bottom, causing it to be hidden when there were multiple sections.
No Collapse/Group Functionality: There was no ability to collapse or group items.
Limited Movement: Only parent-level items could be moved.
Improvements:
Comprehensive Visibility: All layers of content are visible at once, along with the associated properties panel.
Hierarchy Identification: Users can easily identify groupings of items and their hierarchy.
Fixed Top Menu Bar: A fixed menu bar at the top allows users to add parent-level items at any time.
Collapsible Parent Levels: Parent levels can be collapsed to focus on specific areas.
Flexible Item Movement: Items can be moved at any level to any section.
Key Features
Key Features
The interface displays all content layers and associated properties at once, allowing users to quickly identify groupings and hierarchies. Each level can be collapsed for focused work, and items can be moved between sections at any level.
The interface displays all content layers and associated properties at once, allowing users to quickly identify groupings and hierarchies. Each level can be collapsed for focused work, and items can be moved between sections at any level.
Quick Actions
Quick Actions
Three quick actions were surfaced to the navigation level, enabling users to add, edit, or delete items without navigating to the properties panel.
Three quick actions were surfaced to the navigation level, enabling users to add, edit, or delete items without navigating to the properties panel.
Tree List
Tree List
Content is broken down into three distinct layers held in a parent-child relationship. This allows users to expand and collapse sections for easier navigation and content isolation. Users can also move large sections of content or lower layers between sections.
Content is broken down into three distinct layers held in a parent-child relationship. This allows users to expand and collapse sections for easier navigation and content isolation. Users can also move large sections of content or lower layers between sections.
Process Work
Process Work
Wireframe Mockups
Wireframe Mockups
This project originated from my internship, where I proposed a vision for the content-building domain, including enhancements to content hierarchy and navigation. This vision was later developed into an epic and eventually evolved into the current project.
This project originated from my internship, where I proposed a vision for the content-building domain, including enhancements to content hierarchy and navigation. This vision was later developed into an epic and eventually evolved into the current project.
Concept Development
Concept Development
Referencing my previous wireframes, I worked closely with product and design teams to develop high-fidelity concepts. The initial focus was on how users were able to add content efficiently.
Referencing my previous wireframes, I worked closely with product and design teams to develop high-fidelity concepts. The initial focus was on how users were able to add content efficiently.
Iterations
Iterations
Feedback was gathered from users, product, and design teams to refine concepts and enhance interactions. The early focus was on core interactions covering CRUD (Create, Read, Update, Delete) operations.
Key Improvements:
Item Addition Workflow: The item menu was fixed as a toolbar at the top of the content, streamlining the item addition process.
Constant Properties Panel: The properties panel was made constantly visible for consistent and easy access.
Styling and Iconography: Enhanced styling and iconography were implemented to create a more intuitive and visually appealing interface.
Feedback was gathered from users, product, and design teams to refine concepts and enhance interactions. The early focus was on core interactions covering CRUD (Create, Read, Update, Delete) operations.
Key Improvements:
Item Addition Workflow: The item menu was fixed as a toolbar at the top of the content, streamlining the item addition process.
Constant Properties Panel: The properties panel was made constantly visible for consistent and easy access.
Styling and Iconography: Enhanced styling and iconography were implemented to create a more intuitive and visually appealing interface.
Low Fidelity Prototype
Low Fidelity Prototype
Developed mockups in Figma and refined concepts with feedback from Product, Design, and Engineering peers.
Developed mockups in Figma and refined concepts with feedback from Product, Design, and Engineering peers.
User Testing & Feedback
User Testing & Feedback
After refining each feature, we needed to test how these features behaved with other areas of the application. A final group of users was gathered for testing sessions to identify gaps in workflows and friction points.
Key Outcomes:
Quick Actions Confusion: Users often tried to perform quick actions within the settings panel rather than the tree list. This highlighted the need to make actions accessible from both the tree list and the settings view.
Iconography Issues: Confusing iconography for Sections and Columns indicated a need to improve visual communication.
Inconsistent Addition Flow: Inconsistent addition flows, particularly at the column level, underscored the need for consistency across new item menus and addition processes for each layer.
After refining each feature, we needed to test how these features behaved with other areas of the application. A final group of users was gathered for testing sessions to identify gaps in workflows and friction points.
Key Outcomes:
Quick Actions Confusion: Users often tried to perform quick actions within the settings panel rather than the tree list. This highlighted the need to make actions accessible from both the tree list and the settings view.
Iconography Issues: Confusing iconography for Sections and Columns indicated a need to improve visual communication.
Inconsistent Addition Flow: Inconsistent addition flows, particularly at the column level, underscored the need for consistency across new item menus and addition processes for each layer.
Visual Design
Visual Design
As I introduced new components, it was necessary to define the style guide. This ensured that all elements were consistent and aligned with the overall design principles of the application.
As I introduced new components, it was necessary to define the style guide. This ensured that all elements were consistent and aligned with the overall design principles of the application.
Demo
Demo
Last updated 06/2024
© 2024 Ty Summers
Last updated 06/2024
© 2024 Ty Summers
Last updated 06/2024
© 2024 Ty Summers