Enhancing Onboarding
Enhancing Onboarding
Overview
Overview
Symend aimed to provide users with the ability to import and export individual pieces of content and playbooks, which are orchestrations of content. This feature was designed to facilitate moving content between organizations and support the export/import of playbooks with all their underlying dependencies.This project was executed in two phases over a span of three months.
Symend aimed to provide users with the ability to import and export individual pieces of content and playbooks, which are orchestrations of content. This feature was designed to facilitate moving content between organizations and support the export/import of playbooks with all their underlying dependencies.This project was executed in two phases over a span of three months.
My Contribution
My Contribution
As the UX designer, I led the design process for the import/export feature, collaborating with cross-functional teams to develop a seamless user experience. I created intuitive interfaces for exporting playbooks into JSON files and guiding users through the import process, ensuring clear visual cues and efficient workflows. My work included user research, wireframing, and high-fidelity mockups.
As the UX designer, I led the design process for the import/export feature, collaborating with cross-functional teams to develop a seamless user experience. I created intuitive interfaces for exporting playbooks into JSON files and guiding users through the import process, ensuring clear visual cues and efficient workflows. My work included user research, wireframing, and high-fidelity mockups.
Learnings and Outcomes
Learnings and Outcomes
I learned to design for complex data dependencies and streamline user workflows within business and time constraints. This project significantly improved content management efficiency and enabling cloning and import/export functionalities. This addressed significant user pain points and enabled templated playbooks.
I learned to design for complex data dependencies and streamline user workflows within business and time constraints. This project significantly improved content management efficiency and enabling cloning and import/export functionalities. This addressed significant user pain points and enabled templated playbooks.
Before
Before
After
Key Issues Identified:
Step Identification: Users struggled to identify the number of steps and what to prepare for each step.
Progress Tracking: It was hard for users to track their progress as the checkmark would replace the step number.
Content Size: Content was often too large for the dialog, causing constant scrolling.
Key Issues Identified:
Step Identification: Users struggled to identify the number of steps and what to prepare for each step.
Progress Tracking: It was hard for users to track their progress as the checkmark would replace the step number.
Content Size: Content was often too large for the dialog, causing constant scrolling.
Improvements:
Step Visibility: Users can view every step and its label, allowing them to anticipate what is next.
Consistent Step Numbers: State adjustments ensure that step numbers remain constant during different states.
Full Screen Experience: A full-screen design replaces the modal, comfortably containing more information.
New Requirements: Newly identified requirements have been implemented.
After
Improvements:
Step Visibility: Users can view every step and its label, allowing them to anticipate what is next.
Consistent Step Numbers: State adjustments ensure that step numbers remain constant during different states.
Full Screen Experience: A full-screen design replaces the modal, comfortably containing more information.
New Requirements: Newly identified requirements have been implemented.
Process Work
Process Work
Divergent Concepts
Divergent Concepts
Developed divergent low-fidelity concepts to explore the behavior of navigating between steps and to test the visual communication of future and past steps.
Developed divergent low-fidelity concepts to explore the behavior of navigating between steps and to test the visual communication of future and past steps.
User Testing Guided Decisions Made
User Testing Guided Decisions Made
Due to time constraints, user testing for divergent concepts was not feasible. Instead, research was conducted on common applications that users frequently work with to establish consistency.
Key Outcomes:
Visible Steps: Users needed to see all steps at once to prepare the required material during the process.
Backward Navigation: New requirements allowed users to navigate backwards but not forwards, necessitating state adjustments to manage user flow.
Fixed Footer Actions: Certain steps contained more information, requiring "Back" and "Next" actions to be placed in a fixed footer to prevent users from getting lost.
Warning Badges: Additional space for warning badges for each step needed to be considered.
Due to time constraints, user testing for divergent concepts was not feasible. Instead, research was conducted on common applications that users frequently work with to establish consistency.
Key Outcomes:
Visible Steps: Users needed to see all steps at once to prepare the required material during the process.
Backward Navigation: New requirements allowed users to navigate backwards but not forwards, necessitating state adjustments to manage user flow.
Fixed Footer Actions: Certain steps contained more information, requiring "Back" and "Next" actions to be placed in a fixed footer to prevent users from getting lost.
Warning Badges: Additional space for warning badges for each step needed to be considered.
Converged Concept
Converged Concept
Based on recommendations from research and feedback from product and design teams, concepts were refined by pulling key components into a converged final concept.
Based on recommendations from research and feedback from product and design teams, concepts were refined by pulling key components into a converged final concept.
Refined Interface and Tested Edge Cases.
Refined Interface and Tested Edge Cases.
Contents were added and tested to ensure functionality. Interactions were refined for better user experience, and edge cases were thoroughly tested to address any potential issues.
Contents were added and tested to ensure functionality. Interactions were refined for better user experience, and edge cases were thoroughly tested to address any potential issues.
Demo
Demo
Last updated 06/2024
© 2024 Ty Summers
Last updated 06/2024
© 2024 Ty Summers
Last updated 06/2024
© 2024 Ty Summers