Introduction
Embarking on a mission for UnDigital, a forward-thinking client discovered through Upwork, I assumed the mantle of a UX/Product Designer. The assignment? To overhaul the "Analytics" page of their digital platform. This case study chronicles a voyage through design challenges, the execution of significant UI modifications, and the creation of a comprehensive 50-screen prototype, all aimed at enriching user interaction and streamlining the experience.
Project Overview
At the heart of this endeavor was a clear objective: to refine the "Analytics" page, targeting specific UI concerns and infusing the space with functional enhancements to elevate usability. The project unfolded across several dimensions:
UI Adjustments: Bridging unexpected layout gaps to ensure uninterrupted visual continuity.
Dynamic Drop Shadow Effect: A design choice that bolstered visual hierarchy, rendering the interface more navigable.
Responsive, Horizontally Scrollable Interface: Tailored for campaign data, this feature kept vital information at the user's fingertips.
Interactive Elements: From hover-enlarged thumbnails to sorting capabilities, these additions were engineered to cultivate an engaging user space.
Attribution Window and Expanding Calendar: These tools provided users with the flexibility to customize data analysis with precision.
Our Team
Brady Starr - Lead UI/UX Designer
Brady’s design acumen played a pivotal role in transforming interfaces across varied projects, always with an eye towards surpassing user expectations.
Brady’s design acumen played a pivotal role in transforming interfaces across varied projects, always with an eye towards surpassing user expectations.
Destiny Ripp - Project Lead and Design Director
Destiny’s strategic vision and leadership directed the project’s course, blending technical solutions with design execution to bring our collective vision to fruition.
Challenges and Solutions
UI Layout and Scroll Behavior
Challenge:
An unexpected gap appeared between columns due to text size adjustments. Additionally, the need for a horizontal scrollbar that moved with the content was identified.
Solution:
Adjustments were made to ensure visual consistency and connection between columns. A drop shadow effect was added to delineate "Run Dates," and the "Campaign" and "Run Dates" columns were set as static. A 50-screen prototype was built to simulate the scrolling behavior, ensuring only campaign rows scrolled, with table headers and the total row remaining static.
Interactivity and Accessibility
Challenge:
Enhancing interactivity by removing redundant elements and incorporating meaningful visual cues for campaign status.
Solution:
Removed the play button to declutter the interface. Introduced a color-coded edge system (green for active campaigns and gray for paused ones) to provide at-a-glance status recognition. Additionally, enabled thumbnail enlargement on hover to facilitate content preview without navigating away from the page.
Sorting Functionality
Challenge:
The sorting functionality was not intuitive, with users unable to sort by clicking on certain elements.
Solution:
Implemented interactive sorting triggers, allowing users to sort data in both ascending and descending order by clicking anywhere in the header box, including the arrow icon. The "Packages" column was set as the default sorting parameter.
Color Scheme and Design Consistency
Challenge:
Ensuring consistency with the brand's color scheme and addressing UI elements that were not properly displaying.
Solution:
Adopted colors from UnDigital's brand library, utilizing the brand green and shades of gray for a cohesive look. Adjusted UI elements, such as dropdown menus, to prevent cutoff and ensure full visibility.
Lookback Window Functionality
Challenge:
Implementing warning messages for inapplicable lookback window selections.
Solution:
Designed a pop-up warning message for selections of 6 months or 1 year that do not apply to the user's data. After acknowledgment, a static message remains on the page to remind users of their selection criteria, utilizing placeholder text for demonstration purposes.
Conclusion
The redesign of UnDigital's "Analytics" page marked the beginning of a transformative journey in the app's user experience and interface design. The success of this project led to the adoption of the newly established design principles as the foundation or template for the rest of the administrative sections within the app. This expansion included critical pages such as "Campaigns," "Audiences," and "Templates," ensuring a cohesive and intuitive user experience across the platform.
In response to the evolving needs of our mobile-first users, I further developed a responsive version of the design. This adaptation was crucial for the mobile prototypes, enabling seamless transitions between different device formats without sacrificing usability or aesthetics. As a result, the project's scope extended beyond the initial "Analytics" page redesign, encompassing a significant portion of the entire product's redesign. This holistic approach not only elevated the user experience across various touch points but also established a new benchmark for the product's design standards.
Through this comprehensive redesign effort, we have not only addressed specific UI concerns and improved data visualization but also set a new standard for the platform's UX/UI design. This case study exemplifies the power of user-centered design in creating effective digital solutions and underscores the importance of adaptability and consistency across an entire digital product ecosystem.