Year
2023
My Role
Research, Interaction Design, Visual Design
The AT&T Digital Guide streamlines the onboarding process by breaking complex tasks into intuitive steps, covering phases like Welcome Screens, Equipment Check, and Setup Completion. Built with a modular design system, it ensures scalability, consistency, and alignment with AT&T’s brand.
Challenge
AT&T’s onboarding process for new agents lacked a cohesive and user-friendly setup experience, leading to confusion and inefficiencies. Unclear instructions, insufficient visual guidance, and a lack of ergonomic considerations made equipment assembly and connection challenging. These issues not only delayed setup but also failed to reflect AT&T’s brand values of professionalism and care, impacting new agents’ confidence and their initial impression of the company.
Solution
The primary goal of the AT&T Digital Guide was to create a seamless and user-friendly onboarding experience that empowered new agents to set up their workstations with confidence and ease. Key objectives included:
Streamlining the setup process to reduce confusion and improve efficiency for new agents.
Enhancing usability and clarity through a visually engaging, step-by-step digital guide with consistent navigation.
Promoting AT&T’s brand values by delivering a polished, professional, and welcoming experience.
Optimizing workstation ergonomics to prioritize agent comfort and long-term productivity.
Driving adoption and engagement through interactive features, such as color-coded visuals and responsive guidance, to foster agent confidence and independence.
Approach
To address the challenges of AT&T’s onboarding process, I conducted stakeholder interviews and audits to uncover pain points, including unclear instructions and a lack of visual guidance. Using these insights, I designed an intuitive digital guide that streamlined the setup process with color-coded checklists, detailed instructions, ergonomic tips, and a consistent card-based interface. This approach ensured the solution was user-friendly, efficient, and aligned with AT&T’s values of innovation and employee empowerment.
Outcome
The AT&T Digital Guide organizes the onboarding process into a clear, structured user journey, covering phases such as Welcome Screens, Equipment Check, and Setup Navigation. Each phase is designed to prioritize user clarity, efficiency, and ease of use.
The modular design system ensures consistency and scalability, allowing for seamless updates and expansions. Annotated flows provide transparency into the decision-making process, demonstrating how user research and business goals informed the design.
Ideation & Concept Development
The goal was to develop a user-centered digital guide that addressed key pain points in AT&T’s onboarding process. The concept needed to provide clear, intuitive instructions while maintaining consistency, scalability, and alignment with AT&T’s brand values.
Brainstorming & Early Concepts
I began by exploring solutions that simplified the onboarding process into manageable steps. Early concepts included:
Color-Coded Visuals: To help agents quickly identify and organize equipment.
Card-Based Navigation: Swipeable cards for each phase to ensure consistency and ease of use.
Interactive Features: Checklists and animated visuals to enhance engagement and reduce confusion.
Wireframes & User Flows
Using Figma, I created low-fidelity wireframes and user flows to map out the onboarding journey. This covered each phase of the process, from Welcome Screens to Powering On Equipment. The designs focused on:
Breaking complex tasks into simple, step-by-step instructions.
Ensuring logical transitions between phases to reduce cognitive load.
Incorporating ergonomic guidance to promote user comfort.
Refinements
Stakeholder feedback and usability testing informed iterative improvements. Key refinements included:
Enhanced visuals for assembly and connection steps to ensure clarity.
Scalable, modular designs to accommodate future updates or additional workflows.
By focusing on these elements, I developed a concept that was intuitive, visually engaging, and aligned with AT&T’s commitment to innovation and employee support.
Design Execution
The design execution phase translated research-driven concepts into a practical, user-friendly digital guide that enhanced AT&T’s onboarding experience.
Visual Clarity: High-fidelity designs utilized AT&T’s branding to create a professional and cohesive interface. Color-coded visuals and clean typography were incorporated to ensure accessibility and ease of understanding.
Interactive Simplicity: A swipeable card-based navigation system provided consistency across all setup phases. Interactive elements, such as animated assembly diagrams and checklists, empowered users to complete tasks with confidence.
Actionable Content: Step-by-step instructions were crafted with clear, concise language to reduce confusion. Ergonomic guidance and troubleshooting options were included to support user comfort and efficiency.
Prototype Testing: Interactive Figma prototypes simulated the user journey, allowing for usability testing. Feedback from these sessions guided refinements, improving clarity, flow, and overall user experience.
Scalable Design System: A modular framework ensured consistency and scalability, enabling efficient updates for future iterations or expanded use cases.
This comprehensive execution process resulted in a polished, impactful digital guide that empowered agents while reflecting AT&T’s values of innovation and care.
Prototyping & Testing
To validate the effectiveness of the AT&T Digital Guide, I developed interactive prototypes in Figma that simulated the full user experience. These prototypes included all key phases, from the Welcome Screens to Powering On Equipment, ensuring a comprehensive representation of the onboarding journey.
Usability testing was conducted with participants representing new agents and other potential users. The sessions focused on identifying pain points, evaluating the clarity of instructions, and assessing the ease of navigation through the card-based interface. Feedback revealed opportunities for refinement, including adjustments to visual hierarchy, improved labeling, and enhanced ergonomic guidance.
Through iterative testing and refinements, the prototypes evolved into a streamlined, intuitive guide that met user needs and aligned with AT&T’s goals. This process ensured that the final design reduced friction, empowered agents, and delivered a seamless onboarding experience.
Implementation Readiness
To prepare the AT&T Digital Guide for launch, I delivered detailed design specifications through Figma, including all screens, components, and interactions. These assets ensured the development team had a clear roadmap for implementing the design consistently and accurately. I also created scalable and reusable components to streamline future updates and iterations.
Collaboration with the development team was key to addressing potential challenges, such as ensuring the accuracy of color-coded visuals and maintaining the integrity of the swipeable card-based interface. This approach ensured a smooth implementation process, aligning the final product with AT&T’s technical and brand standards.
The Home Screen welcomes users to the AT&T Digital Guide with a warm, branded introduction. It sets a positive and professional tone for the onboarding experience, featuring the AT&T logo and a message of encouragement: "We are so excited to have you join the team. Let’s get started." This screen serves as the entry point to the setup process, immediately establishing trust and clarity for new agents.
The Setup Home Screen acts as the central hub for the onboarding process, displaying an overview of the setup journey. It provides a clear breakdown of all phases, including Equipment Check, Assemble Equipment, Connect Everything, Optimize Workspace, and Power It On. Each phase is accompanied by a progress indicator, showing the number of steps remaining, allowing users to track their progress with ease. The screen’s expandable sections and a link for product-specific manuals ensure accessibility to additional information, empowering users to navigate the process confidently and efficiently.
The Welcome Screens guide users through an introductory phase that sets the tone for the AT&T Digital Guide and ensures they are prepared for the setup process.
Supportive Introduction: The first screen reassures users with a welcoming message: “We are here to help you set up your workstation.” This message establishes a friendly and supportive tone, reducing anxiety for new agents.
Preparation Guidance: Subsequent screens provide clear, actionable steps to prepare for the setup. Users are advised to ensure adequate desk space, access to an ethernet port and power outlet, and proximity to their router. These instructions minimize potential delays and create a stress-free starting point.
Time Management: Users are informed of the estimated setup time (25–50 minutes), helping them plan appropriately and set realistic expectations.
Process Overview: The final screen offers a breakdown of the entire setup process, outlining each phase and its approximate time to complete. This step-by-step preview enhances clarity and builds confidence, ensuring users feel in control of the experience before starting.
Together, these screens deliver a smooth and professional onboarding introduction, aligning with AT&T’s values of care and innovation.
The Equipment Check phase ensures agents have all necessary items before starting their workstation setup, providing a seamless and efficient experience.
Unboxing Guidance: The process begins by instructing agents to open Box 1 and familiarize themselves with its contents. Clear visuals, including a labeled image of the box, set expectations and simplify the task.
Interactive Checklists: Agents are presented with an interactive checklist for each box, featuring color-coded visuals for every item. This system enables users to quickly identify and confirm the presence of essential components such as headsets, webcams, and power cords.
Error Prevention: In the event of a missing item, the checklist includes an integrated link for reporting issues, ensuring minimal disruption and a quick resolution.
Positive Reinforcement: Upon completing the Equipment Check, users are greeted with a motivational message: "Great job! Now let’s assemble your equipment." This message transitions users to the next phase with confidence and encouragement.
This phase emphasizes organization and clarity, setting a strong foundation for the subsequent steps in the onboarding process.
The Equipment Assembly phase provides clear, step-by-step instructions for setting up essential components, such as the thin client and monitors, ensuring agents can complete this task efficiently and confidently.
Focused Assembly: The process begins with assembling the thin client, breaking down the task into small, manageable steps. Agents are guided to unpack the thin client and its base, securely attach the base, and place the assembled component on their desk.
Visual Clarity: Each step is supported by detailed illustrations, showing the exact placement and alignment of parts. This eliminates confusion and ensures accuracy, even for agents with minimal technical experience.
Interactive Navigation: Using a swipeable card-based interface, agents can move through the assembly instructions at their own pace, revisiting or previewing steps as needed to build confidence.
By emphasizing simplicity and providing detailed visual support, the Equipment Assembly phase empowers agents to successfully complete this critical part of their workstation setup with ease.
The Connecting Equipment phase guides agents through the process of assembling a functional workstation by connecting all peripherals to the thin client.
Step-by-Step Guidance: The process begins with clear instructions on how to connect each component, including monitors, keyboard, mouse, headset, and webcam. Each step is broken down to ensure agents can follow along with ease.
Detailed Visuals: High-quality diagrams highlight the correct ports and connections for each accessory, ensuring accuracy and reducing the chance of errors. Each cable is labeled with color-coded indicators for quick identification.
Interactive Navigation: The swipeable card-based design allows agents to proceed at their own pace, revisit previous steps, or preview upcoming ones, creating a flexible and user-centered experience.
Completion Focused: With each connection, agents are given clear confirmation and encouragement, building confidence as they progress toward a fully operational workstation.
This phase prioritizes accuracy and usability, ensuring agents can complete their workstation setup without confusion or frustration.
The Optimizing Ergonomics phase ensures agents can set up their workstations in a way that promotes comfort and long-term productivity.
Monitor and Keyboard Placement: Agents are guided to position their keyboard between the monitors and adjust the monitors to face them directly. This setup minimizes strain and ensures an efficient workflow.
Adjusting for Comfort: Clear instructions encourage agents to adjust their chair and monitor heights so that the tops of the monitors are level with their eyes. This alignment reduces neck and eye strain during extended use.
Accessory Placement: Agents are shown how to place the webcam on top of the left monitor, ensuring proper positioning for virtual meetings or interactions.
Detailed visuals accompany each step, making it easy for agents to follow and implement the guidance. By focusing on ergonomics, this phase supports agent well-being and ensures their workstation is optimized for both comfort and efficiency.
The Powering On Equipment phase marks the final step in the workstation setup, guiding agents through activating their equipment with ease and confidence.
Connecting to Power: Agents are instructed to connect the power strip to a nearby outlet and plug in the power cords for the thin client and monitors. Clear visuals ensure each component is connected correctly.
Activating the Equipment: Step-by-step instructions detail how to turn on the thin client and monitors, with visuals highlighting the location of power buttons. This ensures agents can activate their devices without confusion.
Confirmation and Success: Once powered on, agents are reassured by seeing the monitors display a blue desktop screen, confirming a successful setup. This visual feedback reinforces confidence and signals the completion of the setup process.
This phase provides a straightforward, user-friendly conclusion to the onboarding experience, ensuring agents are ready to begin their roles with a fully operational workstation.
The AT&T Digital Guide was rigorously tested with a group of new agents to ensure its effectiveness in addressing user needs and delivering a seamless onboarding experience. Agents from diverse technical backgrounds participated in usability testing sessions, where they followed the step-by-step instructions to set up their workstations using the guide.
The feedback from agents was overwhelmingly positive. Participants praised the clear visuals, interactive features, and logical flow of the process, noting that the guide significantly reduced confusion and made the setup experience intuitive and stress-free. Agents with limited technical expertise highlighted how the detailed instructions and color-coded elements boosted their confidence in completing the setup independently.
Through these tests, minor adjustments were made to improve clarity, such as enhancing visual cues and refining specific steps to further streamline the process. The testing validated the guide’s design, confirming that it met user expectations and aligned with AT&T’s goal of delivering a professional, supportive onboarding experience.
The AT&T Digital Guide successfully transformed the onboarding process, creating a seamless, user-friendly experience that empowered new agents to set up their workstations with confidence and efficiency. By breaking down complex tasks into manageable, step-by-step instructions, the guide minimized confusion and frustration, significantly improving the setup process for agents of all technical backgrounds.
Key results included enhanced clarity through detailed visuals, increased engagement with interactive features, and improved efficiency through a streamlined, consistent design. Agents reported higher satisfaction with the onboarding process, while AT&T benefited from a scalable, branded solution that reinforced its commitment to innovation and employee support. This outcome not only addressed immediate onboarding needs but also established a solid foundation for future improvements and scalability.
