Diego Prieri

New Street Teams Dashboard Redesign New Street Teams Dashboard Redesign Which were the requirements? Include detailed information in the list view for all the sections Show the rejection reason for rejected proof Add a “reject” button for pending enrollments Add a “add to favorites” button and a filter for selected items Add a message with the enrollment status information 2 New Street Teams Dashboard Redesign What we propose to improve Get better graphic integration between header and side menu. Simplify menu texts and improve consistency with the titles of the corresponding sections. Update style filters search criteria and parameters of the dashboard. Differentiate the items from the list of recent enrollments and status box on detail section. Change the color palette to differentiate the pending status of the secondary action, and at the same time separate the secondary from the primary action 3 New Street Teams Dashboard Redesign Header & Menu Current status The menu and the header does not operate within the same graphic system. 4 New Street Teams Dashboard Redesign Header & Menu Proposals We propose to integrate the header and menu applying the same graphic system to both. Also we simplify the menu labels and make it more consistent with the page content. 5 New Street Teams Dashboard Redesign Enrollment card and detail Current status The enrollment details are in a separated view, so the agent needs to get in that view to check the current status of the uploaded proofs. 6 New Street Teams Dashboard Redesign Enrollment card Unification We combine both views in one single module containing all the necessary information. At the first look to the enrollment card, the agent can get a quick aproach to the current status of the enrollment. We keep using the same color pattern to identificate each status. 7 New Street Teams Dashboard Redesign Recently created enrollments Flow interaction When the agent opens the “Recent” page, he/she finds the recent created enrollments listed by time creation order. In order to see the detail, the “View Detail” button must be pressed. 8 New Street Teams Dashboard Redesign Recently created enrollments Flow interaction Once the detail panel is open, the agent can get a full detailed list of the proof, with color references for each status. Tapping in the “close detail” button, the detail is hidden. The main action can be performed by pressing the “take photo” button, that opens the device camera. 9 New Street Teams Dashboard Redesign Recently created enrollments Flow interaction After taking a picture of the proof, the app returns to the “Recent” view, where a thumbnail of the proof picture recently taken is displayed. Now, in order to submit the uploaded proof, it is required to click the certify checkbox. Then, the “submit” button is displayed and the action can be performed. 10 New Street Teams Dashboard Redesign Recently created enrollments Flow interaction Finally, the agent needs to confirm the proof submision by pressing the “submit” button. After confirming, the app returns to the list view, and displays for a few seconds a toast with feedback about the process status. 11 New Street Teams Dashboard Redesign Recently created enrollments Cancel submission When the agent perfoms an action that gets the submission canceled (e.g. pressing “close detail” or “menu” buttons), and has not checked the “certify” option, a cancel confirmation modal is showed. If the agent confirms and leaves, the app returns to the list view and displays for a few seconds a toast with feedback about the process status, with a text button to undo the action. If the agent chooses to stay, the modal is closed and can continue with the proof upload normally. 12 New Street Teams Dashboard Redesign Recently created enrollments Pending submission On the other hand, if the “certify” option is checked, and the agent perfoms an action that gets the submission canceled, a multiple option modal is opened. If the agent chooses to continue, the modal is closed and can continue with the proof upload normally. Pressing on the “discard” button, the app returns to the list view and displays for a few seconds a toast with feedback about the process status, with a text button to undo the action. Finally, the “submit” button uploads the proofs and the app returns to the list view. 13 New Street Teams Dashboard Redesign Recently created enrollments Reject enrollment When the agent presses the “reject enrollment” button, a confirmation modal is opened. The “cancel” button closes the modal and returns to the list view. The “reject” button also returns to the list view, but now the enrollment changes the status to “Rejected“. 14 New Street Teams Dashboard Redesign Recently created enrollments Favorites If the agent presses on the “star” button at the upper right corner, the enrollment is selected as “Favorite” 15 New Street Teams Dashboard Redesign Recently created enrollments Favorites If the agent switches on the “show favorites” filter, it only shows the enrollment cards that were selected as “favorites”. 16 New Street Teams Dashboard Redesign Search & Dashboard Current status Both pages need an style update, principally to fit with the new Enrollment card. The segmented control look and feel is too similar to a button, but has a different function, so, it is necesary to make a disambiguation of styles. 17 New Street Teams Dashboard Redesign Search Proposal We propose to update the filters look and feel to fit the new enrollment card; and change the “all fields are required” message position to get a better understanding of it. 18 New Street Teams Dashboard Redesign Search Results Add the new enrollment card as the search result, and also add a message in case the search does not return. 19 New Street Teams Dashboard Redesign Dashboard Criteria selection As in the “Search” section, we propose to update the filter criteria style. Also, we propose a change in the status box selection, keeping the color references and labels. 20 New Street Teams Dashboard Redesign Dashboard Results and drilldown We propose to show the enrollments cards sorted by status. Also, on the “pending” status, we keep the drilldown that already exists, but, like in the other status, we propose to add the enrollments cards. 21 Thank you for your attention Any ideas, questions, or follow-up activities, please contact-