UI/UX Designer
Length
2 weeks
Team
Individual
Year
2023
Puckboard is a web platform that provides US Air Force schedulers with the ability to assemble aircrew by replacing manual process with event creation systems, replacing traditional whiteboards. This project involved designing for optimizing scheduling in Puckboard by leveraging AI capabilities to provide intelligent aircrew recommendations for schedulers to increase efficiency and accuracy.
The event scheduling process involves cross-checking multiple
platforms and spreadsheets to confirm crew members availability and trainings, leaving room
for frequent errors and wasted time.
The Problem
Our team collaborated on several design ideas that resulted in…
Displaying real-time information into one source of truth for to eliminate cross checking
Providing actions or suggestions to fix any impacts caused by assigning members
Real-time impact statements to notify schedulers of potential consequences while assigning certain members to an event
Allowing schedulers to undo their actions
Product Overview
Research & Discovery
Cognitive Overload When Scheduling Out Events
At a base visit, I had the opportunity to meet some Puckboard users in person to observe and interview them about their experience, including schedulers and crew members, getting the point of view of multiple personas. They showed their process scheduling out events on their computers on a typical day to day. This was on top of regularly scheduled weekly 1:1 zoom user feedback sessions along with asynchronous feedback on Mattermost channels.
These insights led me to understand more user problems for event scheduling:
Iteration 1
We went through user testing and iterative design cycles to achieve our final prototype
💡 In this design process, I prioritized maintaining consistency with the existing UI styles to ensure a smooth integration of the new feature into the overall interface. It was particularly challenging as the current page already had a cluttered layout, but we aimed to balance preserving the existing design elements and enhancing user experience with the new addition.
Balancing a lighter visual load and user's wants
💡 Users prefer to have important, relevant information shown to them at a first glance
💡 We wanted to provide detailed, important alerts for users but with the already existing visual clutter on the page, we leaned toward passive notifications to prevent fully disrupting their workflow
💡 Also wanted to prioritize the most relevant informational and visual hierarchy
Iteration 2
Designing Notifications to Appear in Context
With the user feedback gotten on the past iterations, we wanted to make improvements on how the notification details can be displayed more clearly. In the second iteration, we enhanced the sidebar to complement the dropdown notifications. This included refining the information hierarchy, adding visual emphasis to important content, and introducing a feature that suggests alternative members, recommended by AI, to replace those affected.
👀 See the sidebar flow in action!
Replace a Member
💡 We wanted to allow the user to replace a member that caused potential consequences with alternative members that could be better solutions already suggested by the algorithm instead of taking more steps to find another person. This was eventually considered out of scope but it's a nice feature users liked to have in the future!
Design Solution
The Final Stretch
In the final iterations, we prioritized a passive and non-disruptive approach to displaying notifications, avoiding an overuse of red error colors to prevent cognitive overload for users.
In the initial version, we included only the 'remove member' (to remove them from their assigned role) and 'dismiss' (for situations where schedulers confirmed they were available for the event) call-to-actions. Additionally, we introduced a conflict impact flow that displayed the member's conflict and offered 'waive' or 'remove member from conflict' actions that was well received by users.
Learnings & Reflection
Balancing Familiarity and Innovation
💫 Balancing limitations and innovation
In this project, I learned the art of blending familiarity and feasibility limitations with innovation. Maintaining the existing page's visual elements while introducing novel elements required thoughtful ideas. This demanded a deep
understanding of user perception and interaction within the page. Collaborating with developers, I adapted to feasibility limitations, finding creative solutions.
💫 Adapting to complexity and existing designs
Flexibility and adaptability in design were crucial in this project. I faced thechallenge of integrating a user-friendly solution into a cluttered interface. Although the ideal scenario would have involved reducing visual clutter through a
complete redesign, our primary goal was integrating the new feature. Given the familiarity of users with the existing page and the absence of standard design practices like auto-layout in the design system at that time, I learned to adapt my designs effectively within those constraints.
💫 The power of AI to save time and redundancy in users' lives
Engaging in AI-driven feature development helped me realize more of the transformative potential of technology in elevating user experiences to new heights. This experience showed the significance of incorporating AI as a strategic tool for taking in data and using it help users in real time, giving back more opportunities for users to focus on other things. It revealed how AI can be a catalyst for more informed and efficient choices, ultimately
enriching user interactions.
