Popover Interaction
Popover Interaction
Evocon is a visual and user-friendly OEE software designed to help manufacturing companies enhance productivity and eliminate waste. A key feature for Evocon customers is the Shift View. Shift View enables users to track and analyse the performance of all production shifts across various dates, stations, factories. As it monitors production and shifts in real-time, this screen is often busy and packed with information. This presents a challenge in maintaining user focus as well as any modifications to this screen must be meticulously considered, as any errors could be costly for our customers. Creating a more accessible UX across devices, addressing the user challenges with data marking precision.
Introduction

The primary aim was to create a more accessible UX across devices, addressing the user challenges with data marking precision on both desktop and mobile devices.

Date:

Desktop → Spring 2021

Mobile → Autumn 2022

Project team:

Product Designer (myself), Head of Product, Front-end developer.

My role:

Research - User Testing - Visual Design - Interaction Design

As the Lead Product Designer on this project, I formulated the idea based on my observations of customer interactions with shift view devices and unresolved past research findings. At the project's inception, the mobile experience was limited and lacked the functionality to mark data. With potential edge cases in mind for the Shift view, I proposed solutions to the Head of Product and conducted several validation tests with users. Finally, I collaborated closely with the developer to determine the optimal placement rules for the popover, ensuring it would never obstruct any actions on the Shift view.

First iteration / Desktop:

  • Conducted observations and gained a deep understanding of the problem at hand.

  • Engaged in solution ideation to address identified challenges effectively.

  • Thoroughly analysed various scenarios to ensure robustness and adaptability.

  • Established precise placement rules for optimal usability.

Second iteration / Mobile:

  • Building upon the success and smooth adoption of the desktop solution, the decision was made to extend the popover feature to mobile platforms.

  • Enhanced the functionality by incorporating a specific selection of signals tailored for mobile usage.

  • Defined placement rules tailored to the mobile environment, ensuring a seamless and intuitive user experience.

UX Challenges

Based on my observations I have identified several challenges in the Shift view, making it difficult for operators to effectively mark data:

Desktop Interface Challenges: Users encountered difficulties when dealing with smaller on-screen details while marking data.

Mobile Limitations: On mobile devices, the limited screen space presented challenges in visualizing signals, resulting in decreased functionality. This constraint hampered users' ability to make precise selections on the go, essential for accurate data marking.

Touch Screen Limitation: Some users faced challenges inputting data, even on larger touch screens, which are widely used in manufacturing facilities. Wearing uniforms, gloves in particular, impacted their ability to select specific signals accurately.

Understanding the significant impact of these issues on users' workflow, I was fully committed to addressing them to enhance your overall experience with Shift view, a key module of Evocon.

Process

  1. Research and Understanding:

    I identified areas for improvement, namely precise signal selection on mobile devices, signal navigation, and reducing mouse travel on desktops.

  2. Prototyping and Iteration:

    Through multiple iterations of paper prototypes, I ensured comprehensive coverage of edge cases and scenarios, guaranteeing consistent behaviour across various user interactions.

  3. User Testing and Validation:

    After rigorous testing internally and with selected users, I settled on a popover solution for both mobile and desktop, facilitating mobile signal selection with arrows for navigating between signals for accurate selection.

  4. UI Refinement and Implementation:

    Collaborating closely with the development team, we iteratively refined the user interface, with a focus on determining optimal popover placement rules for various devices and screen sizes. The main challenge was working out correct popover placement without hindering essential tasks.

Solution

  1. Improved Accessibility: The popover, incorporating chips, effectively resolved the challenges associated with marking signals on mobile devices.

  2. Arrows for Precision: By implementing the popover arrows, users gained a more precise and intuitive method for marking data, even on touch-based devices or while wearing gloves.

  3. Streamlined User Experience: The refined interface and placement rules ensured reducing mouse travel on desktops and seamless experience across various devices.

As a consequence of the successful implementation of these changes, customers not only embraced the new developments with enthusiasm but also expressed positive feedback.

Learning & Outcomes
  • Designers must observe and discover some problems, as not all are voiced by customers.

  • I've put a lot of effort into how we test the solution for all edge-cases. This was essential to ensure that the solution is scalable and doesn't require constant iterations and improvements. If we hadn't spent the time digging into edge-cases that detailed for desktop popover, the feature wouldn't have been adopted that well.

  • Dedicating extra time to position the popover paid off, leading to smooth adoption and eliminating the need for iterations.

  • The quality bar for shift view solutions is higher compared to other system modules.

  • Sometimes it makes sense to build the same thing on mobile and web, but sometimes it doesn't.