Challenge Summary
Topcoder is cooking something up for US Foods:
Topcoder has always a fresh approach to tackling design and UX problems and now it’s time to sharpen your skills and dish up some serious designs that will improve user experience for US Foods employees. It starts with you, inspiration, exploration, creation. User Experience design reimagined. From Desktop to mobile we’re going to transform how the US Foods workforce conducts business. We’re talking ideas, applications, and tools that will connect and impact every US Foods employee. It’s going to be fun.
At the end of this challenge, we are looking for the Topcoder Design Community to help us plan and design the user experience of our new application
Round 1
Submit your initial designs for Checkpoint Feedback02 Leader Dashboard - New User
03 Leader Dashboard - Return User
04 Create New Project Screen
05 Project Details Screen
08 Report View Three - Share
10 Action Plan / Management
You must upload your submission to InvisionApp so we can provide direct feedback on your designs.
- Please request an InvisionApp link from the Copilot through the challenge forum.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.01 Homepage Screen
02 Leader Dashboard - New User
03 Leader Dashboard - Return User
04 Create New Project Screen
05 Project Details Screen
06 Add a Report / Commenting
07 Report View Two
08 Report View Three - Share
09 Create Tasks / Actions Flow
10 Action Plan / Management
- Please request an InvisionApp link from the Copilot through the challenge forum.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
About US Foods:
US Foods is one of the USA’s leading foodservice distributors. From the corner diner to the five-star steakhouse, US Foods has helped shape how people eat in America for more than five generations. With a team of more than 25,000 people spanning 60 locations nationwide, they serve independent and multi-unit foodservice operations including healthcare, hospitality, government and educational institutions. They’ve been helping their customers take a fresh approach to food and helping their customers “make it” for a long time, and now here’s your chance to take a fresh approach and help US Foods employees “make it” for their customers.
Challenge Assets:
- See provided branding guideline (USF-BrandGuidelines-V2.pdf)
- See provided design direction brief (USF-Brief-2.pdf)
- See provided stock images (Google Drive)
- Also reference their website: https://www.usfoods.com/makeit/index.html
- Overall Application Flow and Idea sketches (US Foods-Idea Sketches.pdf, USF-Application-Flow.pdf)
Design Guidelines:
- We would like to have designs of size Desktop: 1366 × 768px
- Make sure to all UI as scalable vectors, so we can resize it any size as required.
- Think about responsive solutions.
User Story:
For this challenge we will be focussing in on the reporting tool that US Foods sales leaders use to manage strategy and their teams. Currently their reporting tools are a mix of different analytics platforms, spread sheets, and manually updated forms that are compiled and shared on different platforms such as email, excel, and powerpoint. Our goal is to improve the user experience for the sales leaders by providing them with a collaborative, intuitive, sales reporting tool where they can build, collaborate, and share the strategic reports that help guide their regions. Using the US Foods branding guidelines to create a custome look and feel, we are looking for you to use user experience guidance from Salesforce Lighting to create our new dashboard reporting tool experience.
It is also important to add that not only will we be improving on how our sales leaders view this data, but how they will create action plans and tasks for their team based off of their data. The value from the tool is more in providing a clear communication channel within the application that helps drive strategy, communication, transparency, and management all the way through the organization.
James - Leader:
James is a leader at US Foods. His days are spent digesting countless reports and data and from that data he needs to find key insights and strategy that will help him manage his team.
Bright and early on Monday morning the reports from various different field operations start coming in. From James’s dashboard he is easily able to view each report as he filters and drills down into key metrics that he is looking for. Without having to move from screen to screen James is able to view the data in various different arrangements. From Region to market, down to Manager and all the way to a Territory Manager, James can view sales and account performance across different time periods and year over year. This gives him a clear and accurate picture of what his current state is and allows him to take action to help manage his team.
James has a meeting coming up and he’d like to start pulling some reports to illustrate the current state of his market. From his new reporting tool, James creates a new report project from his dashboard and invites several members from his sales leadership staff to collaborate and work on the report project for the upcoming meeting.
From the dashboard, James is able to click into a specific reporting project to view that item in more detail. He is taken to a reporting project details screen where he is able to view detailed information about that reporting project, project status, tasks, task status, team communication, as well as data visualizations for multiple reports and artifacts housed within the reporting project. In a “tabbed” interface, James is able to toggle between reports as well as use intuitive filter UI to start to disect, view, and gain insight from the reports. He is able to note, comment, and collaborate with team members on these reports with the goal of gaining valuable insight that he will use to help manage customer strategy and create action plans for his team.
Once the team has been invited, they get to work on collecting and analyzing the data. As they digest the data from within Salesforce, they also have to import other data sources to build their report project story. James needs some data from another system, and decides to import that data into his report project. By clicking on the “add report” button from his report project detail page, James is able to upload a new data source. James selects from a drop down tab to import data from System ONE to add to the overall story for his meeting. The result of this guided action is the creation of another data visualization within the project. James has a few questions for his a team member about what the data is showing him. Within the collaborative reporting tool, James comments on a data item asking his teammate for clarification on the data. The comment triggers a push notification for the his team member. The team member adds a coment to the comment thread within the reporting application clarifying and resolving the issue for James. This takes all of the communication out of email and consolidates it into a single collaborative space.
There can be several reports and assets associated within a report project. From a simple tabbed interface, James is quickly able to jump into another report view from with the reporting project detail screen where he can gain meaningful insights from the data visualization.
The report project is shaping up nicely now that all of the key team members are able to collaborate, and build in one space. Now it’s time to share it out with other key leaders for review leading up to the meeting. James is able to save, export, and share out the report with anyone in his leadership team.
After the meeting it is clear that there are several initiatives, tasks, and plans that need to be created in order to address the findings from the meeting. From the reporting tool, James can easily start assigning tasks, building plans, and share them out with his team. He is able to assign tasks at a team level, down to an individual level...giving him the flexibility and visibility that is necessary from a leadership position. James is also able to track the effectiveness of his leadership by following up on assigned tasks and initiatives from within the system.
Use Cases:
- Use Case 1: I want to analyze account performance over last two weeks
- Use Case 2: I want to view the number of prospects by districts with the percentage chance to win those prospects as well as the number of those prospects that are
currently being worked by a Territory Manager
- Use Case 3: I want to view the net accounts for 1 month. I want to view how many new accounts we need to close in order to meet our sales numbers
- Use Case 4: I want to view the key prospects of all of my Territory Managers and see what stage that prospect is in.
- Use Case 5: I want to view the accounts that need help and create tasks and coaching tips to help my team.
- Use Case 6: I want to view my team’s performance by viewing all of the Manager's "work with" reports with their Territory managers, view their notes, and track their effectiveness
Screen Requirements:
01 Homepage Screen:
The goal of this page is to give a quick overview to the new reporting tool for the leadership group. The page should provide high level benefits, screen shots, and demo’s or gettings started guides to showcase the benefit and use of the new reporting tool.
Be sure to emphasize:
- Create
- Build
- Collaborate
- Analyze
- Share
- Manage
- Track
Consider what a new user experience is like for a first time visitor to this appplication. This initial landing page should serve as a one page overview/ onboarding experience that familiarizes the user with what the Reporting tool can do as well as how the user can start creating projects and assigning team members to start working with The Reporting Tool.
For a good example of a intro page, please view this reference design.
02 Leader Dashboard - New User:
- After a user logs into the application, they will be taken to their default dashboard. At a glance the dashboard should contain some default data visualizations around key business metrics, tasks/ notifications, calendar events, current reportign projects, archived reporting projects, project activity stream, and quick access to team members who the leader works with.
- Consider what this dashboard would look like for a first time user who DOES NOT have any projects running with The Reporting Tool. In addition to the default elements listed above, show a clear UI element with a tile, button, or other call to action that would get the new user to start a new project and add it to their dashboard. Perhaps this element is in the current projects section of their dashboard.
- Clicking on this element will launch the user thru a guided experi- ence of creating a new report project. The user will be walked through selecting their data sources, if necessary...uploading data sources, inviting other team members to the reporting project, and creating tasks around completing the reporting project.
03 Leader Dashboard - Return User:
- For this version of the dashboard, we want to explore how this page should be appear for user that has a number of reporting projects underway with The Reporting Tool and their dashboard should focus mainly on access to these reporting projects. It should be similar to the new user dashboard with the exception that they have already created, and or archived reporting projects.
Other items to consider for reporting projects section of the dashboard:
- Ability to add a new project.
- Activity stream about current collaboration on reports - Team Comments
- A Project list with high level details about each project
-- A project has metadata: The name of the project and other attri- butes.
-- Team members on the project
-- Data Sets/ associated artifacts
-- Should display Created Date and Last Modified Date of project.
04 Create New Project Screen
- From the project section on the dashboard a user has the ability to create a new project. This will launch a flow where a user will fill out a form with the following information for creating a project within The Reporting Tool.
- Here are the necessary fields for add a new project:
Project Report
-- Name
-- Description
-- Project owner
- Upon new project creation, user will be asked to choose a data set up upload to the project
04 Project Details Screen:
- User should view detailed information about that reporting project, project status, tasks, task status, team communication, as well as data visualizations for multiple reports and artifacts housed within the reporting project.
- In a “tabbed” interface, James is able to toggle between reports as well as use intuitive filter UI to start to disect, view, and gain insight from the reports. He is able to note, comment, and collaborate with team members on these reports.
Elements to consider including:
- Created Date, Last Modified Date, Team Members, Reports tab(s)
- Report 1, Report 2, ect Add a report, Filter UI for the report data visualizations that allow leaders to drill down for more detail on each report.
For example....the default view might be for the entire region. Include filter UI that allows a user to filter from Region > Market > District > Manager > TMs > Account - Other filter options should include year by year comparison, performance over a specific date range
- Data visualizations should show target numbers and performance to target
- Team comments
- Share/save/ export options options
05 Add a Report / Commenting:
- From Report Project details page, should have the ability to add a report and import new data source
- Should be able to comment on a data which triggers a push notification to other team members
06 Report View Two:
- There can be several reports and assets associated within a report project.
- From a simple tabbed interface, user is quickly able to jump into another report view from with the reporting project detail screen where he can gain meaningful insights from the data visualization.
- For this screen we would like to see an alternate view to the report- ing detail screen showing a different tab selected that also shows a different data visualization. Consider showing a different style of data visualization, bar chart, pie chart, graph, ect than you are showing in your first vesion of the screen. Be sure to also include the filter UI elements for this view as well.
- Consider showing an activity/ comment stream in the right hand column of the screen that tracks the communication and progress on this reporting view.
07 Report View Three - Share:
- Show how the user would share/ save/ or export button and show the options for how he can save/ export the report. (PPT, Excel, PDF).
- Also consider showing how the user can invite other collaborators to the report project.
08 Create Tasks / Actions Flow:
- Show the flow from a report project details screen in which a user is able to create/ and assign tasks to individuals or groups.
- This should be a dynamic builder allowing for leaders to build in step by step action plans with associated task lists associated to each step
- Tasks should include due dates, collaboration notes, as well as objectives, and next steps providing a clear path for employees to follow leadership direction
- Tasks should be associated with the Report project for easy organizing and follow up.
09 Action Plan / Management:
- The action plan created by James and the leadership team shows up as a work flow for the designated team members who are responsible for action items within the plan.
- Need to have a Trello-like user experience, the step by step segments of the action plan are laid out in a collaborative work flow for team members to interacte, work on, and complete.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Focus on the user experience! Focus on the navigation experience. Keeping consistent visual elements.
Stock Artwork:
We are allowing stock photos and stock icons for this challenge
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Target Audience:
- Territory Manager, Sales Coordinator, Food Specialist, DSM
Judging Criteria
Your submission will be judged on the following criteria:
- Cleanliness of screen design and user flow
- Overall design and user experience
- Simplicity of design/strong, clear design concept
- How well your design align with the objectives of the challenge
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file or as Sketch!
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.