Daniraykova
The aim is to incentivize dealers to boost their sales of auto parts while generating excitement for them to check the bracket promo app daily.
The collaboration on this project was remarkable, resembling the components of a well-functioning machine. Everyone actively engaged in every phase of the solution, contributing to the creation of flows and wireframes. Both development and account team members actively participated, sharing ideas, critiques, and proposing alternative solutions. We managed to research and conceptualize the app's design within an incredibly tight deadline of just one month.
We conducted research on top websites that feature March Madness bracketing, including CBS, NCAA, ESPN, Yahoo, and others, to identify common UX patterns:
Although our research provided insight into how bracketing functions, it didn't offer all the solutions we needed. Traditional March Madness brackets typically involve users betting on playing teams. However, in our unique scenario, we had participating dealers who tracked their own progress in the competition. We needed to devise an original solution that catered specifically to these users - the dealers - and simultaneously met our business objectives of enhancing competitiveness among the dealers to drive increased sales.
The app's entry point is accessed via the prominent bproauto landing page banner hosted on the Mopar Dealer Site. Users fall into two categories: those already engaged in the competition and those who are not. For participants, upon accessing the app, they encounter a modal that outlines the rules of the competition. After reviewing and accepting the terms, they proceed to the brackets. This modal serves as an on-boarding tool, providing a comprehensive understanding of the bracketing promo mechanics and detailing potential winnings through a payout chart.Non-participants attempting to access the app are promptly notified that it is exclusive to competition participants. They are courteously informed that the app's features are intended solely for those actively engaged in the game.
Users access the team page by clicking on their personalized team user icon labeled "My Team: Name, Division, Sales." This interactive feature seamlessly directs them to the section displaying comparative statistics amongst their teammates. The intention behind this design is to foster healthy competition within the team, motivating users to increase their part sales. Notably, the inclusion of the division alongside their team reinforces the notion that they are competing within their league, instilling a sense of familiarity and camaraderie.The home/team page offers two distinct versions: pre-game and during game play.
The pre-game version features a captivating full-screen video at the top, strategically designed to introduce and explain the promotion while igniting enthusiasm among users for their upcoming participation.
In contrast, the version available during gameplay presents a dynamic top carousel, guiding users to explore the latest bproauto news on the Mopar Dealer Site. Below the carousel, users find comprehensive team statistics. Concluding the page is the promotional video, strategically positioned to maintain user engagement and reinforce key messaging.
Within the team section, the team status bar showcases essential details including the logo, seed, name, total payout, total current sales (indicating whether they're up or down compared to the competitor team), and the average bracket sales for the ongoing game.
By default the chart arranges data from highest to lowest sales, akin to musical scales, enabling users to effortlessly compare their performance against their peers. To streamline the user experience, we optimized the table by focusing on key data points. Additional information such city, state, and business center are consolidated with the dealer name into a single cell that is accessible via an expandable accordion row, providing users with the flexibility to view details at their discretion. Moreover, an option to expand all accordions is included for users seeking a comprehensive overview.
On mobile devices, we condensed dealer information (name, city, state, and business center) to conserve space and improve readability. The accordion feature was eliminated to facilitate ease of use, as it posed challenges for scrolling and accessing content. Instead, users can scroll both horizontally and vertically within the table, ensuring seamless access to information on smaller screens.
The application featured intricate datasets, posing the challenge of presenting them in a user-friendly manner that avoids overwhelming the user. The objective was to ensure ease of understanding while maintaining visual appeal. We streamlined the experience by concealing certain information within accordions and incorporating visual indicators to signify the user's position within the competition.
The bracket page serves as the epicenter of the action. The users come to this promo app the see the brackets. At the top, a dynamic status bar displays the weeks and corresponding payouts, with the current week highlighted in orange for immediate reference.Next, the division of the competing teams is showcased. A dropdown menu adjacent to the division is exclusively accessible to high-level Stellantis officials. Additionally, a print option empowers users to generate a hard copy of the full bracket view. The bracket page offers two versions for desktop and tablet users. The full view provides a comprehensive overview of the entire bracket, while the quadrant view allows users to zoom in on specific sections. Visual cues, such as orange-colored-bracket indicating the user's position, bold typography and an orange line denoting winning teams, and gray for losing teams, enhance readability and comprehension. The full view enables thorough exploration of all brackets across all four quadrants, presenting all information at once. Conversely, the quadrant view employs progressive disclosure to focus on specific areas of interest, preventing information overload and ensuring users receive only pertinent details. Interactive buttons represent each quadrant, facilitating easy navigation.
At the phone breakpoint, a mixed approach combines elements of both full view and quadrant view. Users can horizontally explore the full bracket by selecting a week and quadrant from the top navigation bar. The view smoothly transitions left to right with sleek animations.Inspired by CBS bracketing, our approach enhances user experience by introducing quadrant navigation tabs in the top area. This simplifies navigation and ensures a seamless mobile experience.
The game page is seamlessly accessed via the bracket as a modal, allowing users to delve deeper into the brackets without losing their current position. Upon clicking or tapping on a bracket representing two competing teams, a modal window opens, presenting the game stats in detail. At the top section of the modal, each team is elegantly showcased through a banner. This banner encompasses the team icon, seed, team name, score, and an icon indicating whether the team is leading or trailing. The countdown timer shows how much time is remained until the next data update. When the user clicks on the competitor's card, it redirects them to view the statistics of the competitor's team.
To ensure optimal space utilization, data is presented in rounded numbers, with ellipses used for longer dealer names. Clicking or pressing on the dealer name triggers a tooltip, revealing the complete information. Similarly, interacting with the numerical data triggers tooltips, providing users with detailed insights. The data indicated in bold is the most currently updated in the table. Moreover, users find themselves highlighted in the table with a distinct light blue color, enhancing visibility and facilitating easy identification.
The majority of app users accessed it via desktop, with Chrome being the dominant browser at 65.34%, followed by Microsoft Edge at 24.43%. Notably, the Bracket page emerged as the most visited, garnering the highest traffic. A scroll depth of 94% indicates high engagement, with users exploring the entirety of the page content. Furthermore, 85% of users are returning visitors, showcasing sustained interest in the game's progression.
Such was the success of the campaign that the client has commissioned another bracketing initiative spanning seven months. It not only heightened awareness but also fostered significant engagement, ultimately driving up sales. Notably, users accessed the app through the Mopar Dealer site, with the broauto page, serving as the app's launchpad, ranking among the platform's top five pages.
After the promotion concluded, we conducted a survey among the participants, with over seventy percent indicating their willingness to participate again in the next promotion scheduled for September.
I am a passionate T-shaped UX/UI designer and creative. I create beautiful and easy-to-use digital products.
