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:

  1. Visible Steps: Users needed to see all steps at once to prepare the required material during the process.

  2. Backward Navigation: New requirements allowed users to navigate backwards but not forwards, necessitating state adjustments to manage user flow.

  3. 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.

  4. 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:

  1. Visible Steps: Users needed to see all steps at once to prepare the required material during the process.

  2. Backward Navigation: New requirements allowed users to navigate backwards but not forwards, necessitating state adjustments to manage user flow.

  3. 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.

  4. 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