PowerMenu UI Design Challenge

Welcome to the PowerMenu UI Design Challenge!
We are looking for a creative new UI Design for key displays within the existing PowerMenu menu planning application. The improved UI should focus on clear display of information. It is important to provide opportunities for customizing screen views. Our users need updated intuitive and flexible controls for their interactions.

CHALLENGE OBJECTIVES

• Desktop UI design (1440 x 900 pixels) for a responsive web application
• Redesign UI for sections within an existing frame to improve usability
• Approximately 10-12 distinct screen / feature views

Round 1

Submit your initial designs and any notes you might have for checkpoint review.
01) Planned Menu List
02) Plan Wizard, Create New Menu
03) Plan Wizard, Define Menu
04)  Planned Menu Management, A. Display Options
06)  Planned Menu Management, C. Manage Recipes
07) Swap Recipe

Round 2

Submit your initial designs plus checkpoint feedback implemented for the final review.
01) Planned Menu List
02) Plan Wizard, Create New Menu
03) Plan Wizard, Define Menu
04)  Planned Menu Management, A. Display Options
05)  Planned Menu Management, B. Modify Setup
06)  Planned Menu Management, C. Manage Recipes
07) Swap Recipe
08) Add Recipe
09) Create Your Own Configuration
10) Station Management
 

BACKGROUND
The existing PowerMenu application allows users to plan menus for their food service locations, based on their unique needs. Users, such as restaurant managers or chefs, create and define planned menus once or twice per year. They review, adjust and analyze their active menus on a daily basis and are looking for an efficient interface to make this easier.

The current PowerMenu application does NOT provide an intuitive user experience. Much of the common functionality is cumbersome, often requiring multiple interactions to complete simple tasks. Functional elements and workflows do not take advantage of current conventions. Many of the content views are inflexible and the information displayed is restricted to a standard arrangement for all users.

Expected Solution:

• A fresh creative solution to the workflow and layout to improve user experience. Controls and displays should be better and more effective than the current application.
• Simple and direct controls for completing common tasks.
• For example: drag & drop functionality to arrange items; easy single and multi-select of items to move or copy/paste; options to batch and repeat actions.
• Provide the ability to customize views of the menu information to allow desired comparisons. For example: Recipes within a specific station for the entire cycle, rather than a single week.
• Styling of text and elements to use UX best practices and encourage accessibility.
• Streamline user workflow to minimize the disconnect between views.

GLOSSARY

• Cycle = A period of time (3-4 weeks) that the user wishes to implement a planned menu.
• Station = An area of the food service location where a menu or item is grouped. Unique to each location. For example: Soups, Salad Bar, Grill, Deli, Desserts, etc. The number of stations per location could range from 5 to >10.
• Meal period = Period during the day when a specific menu is planned. For example: Breakfast, Lunch, Dinner, Brunch, Evening. Typical location will have 3-4 Meal periods.
• Recipe = An individual item that appears in a menu. For example: French Toast Sticks.
• CYO = Create Your Own. For example: Create your own burger.
• MTO = Made to Order. These are the individual components of the CYO recipes. For example: burger, bun, cheese, lettuce, tomato, etc.
• Effective Date = Date the menu will start

AUDIENCE
Menu planners for food service or dining locations (PowerMenu customers).

•    For example: Restaurant Manager, Head Chef, Business Manager

PERSONA
Jason McBride, Dining Manager for the Liberty Place Corporate Cafe

• This large restaurant location functions as an all day cafeteria. It is open to the large number of businesses who are tenants in the Liberty Place office complex. Jason is responsible for all menu planning and implementation.

USER STORY
Today Jason will plan and finalize a menu that the Cafe will offer for all weekday meals, beginning next month. Using the PowerMenu application, Jason chooses to create a new menu from a template that he has used in past planning. He knows he will want to make a few adjustments once it is set up.

• After entering some initial information, Jason easily maps the template menu to his location’s stations. He reviews the stations he has mapped, and sees that he has included all the required stations in his menu.
• Jason will be adding Saturday to his normal Monday - Friday operations. He is able to do that before saving this menu.
• He finalizes his new “Early Spring Cafe 2021” planned menu in the w izard.

Later that afternoon, Jason returns to the PowerMenu application to review and adjust some details in “Winter Cafe 2021,” which is the menu he is currently running. He selects that menu in his Planned Menu List to see the default weekly view. The three week cycle for this menu began yesterday. Jason begins making a number of small changes for Week 3, the final week of the cycle.

• Deactivates the Dinner Meal Period for that week as he knows the building is closing early for maintenance work that entire week.

The other changes he makes are for the Breakfast Meal Period for that 3rd Week.

• Turns off the Continental Breakfast station for the entire week.
• Adds two fruit Recipes to the Cold Bar station for each day that week.
• Reviews what is offered in the Entrees station for that week, compared to weeks 1 and 2 of the cycle.
• Swaps two of the Recipes on Monday for other items in the Entree station. Then, copies the new Monday Recipe lineup to Wednesday and Friday.
• Reorders his listing for Entrees on Tuesday and Thursday so that the larger dishes are listed first in his view.
• Checks the MTO Recipes offered that week to confirm that he will have all the components available for them.
• Views the Create Your Own Configuration to check each CYO Recipe that is offered for the menu. Removes Avocado from all of the CYO recipes for that week.

Jason reviews the weekly view for the Lunch Meal Period to make sure it looks correct, Saves his changes, and exits the application.


SCREENS / FEATURES REQUIREMENTS
IMPORTANT: Solutions should redesign the UI and improve the workflow.
Use the sample screen images to understand the content and functionality.
We are looking for a creative redesign to offer a better user experience.

• Create a workflow according to the functionality described below, from the current application. Your solution should suggest improved interactions and added ability to control and customize.
• Focus on the Expected Solution notes listed above.

You can find in this document the existing screens of the application and additional notes.

00) Global Elements
The application will keep the existing visual frame from the current tool. The UI Redesign will only address content within this frame.

• Use header and navigation elements exactly as shown in the reference screen.

01) Planned Menu List
When the user selects “Planned Menu” from the main navigation. This screen displays a list of existing plans with key details.

• Name, Effective date, End date, Length (weeks)
• Pre-cost (link only, screen not in scope)
• Edit (links)
  • Weekly: Links to the  primary 04) Planned Menu management screen. Gives a weekly view and capability to maintain the menu items offered.
  • Daily: Links to daily analysis w/number of customers, consumption (screen not in scope)
  • Stations: Links to 09) Station Management. Allows users the capability to add/remove stations from the planned menu.
  • CYO Config: Links to 06) Create Your Own Configuration. Here the user can manage all the CYO recipes that are included in their planned menu, and determine which of the individual components will be offered.
• (new) Ability to add a meal period or operation days to existing menus
• Create Planned Menu: Link or button to create a new menu

02) Plan Wizard, Create New Menu
Upon selecting “Create Planned Menu” from 01) Planned Menu List, the user will choose initial settings for a new Menu.

• Service Channel (dropdown, defaults to the user’s Service Channel. For example: Retail, Corporate, Education, Correction Facilities, Healthcare)
• How to Create Planned Menu (dropdown, defaults to a general template group. For example: Fall Education Menu Template, Spring Education Menu Template, Healthcare FY21 Patient Menu)
• Effective Date (date picker)
• Menu Template Select (dropdown, choose a menu template from a list of templates that have been saved for that group)
• Menu Name (text input field)
• Cancel / Next Step (buttons)
  • Next Step > Loading - Menu populates the 03) Plan Wizard, Define Menu view

03) Plan Wizard, Define Menu
The user selects “Next Step” from 02) Create a New Menu, and is presented with a display of the stations that are included in their chosen Menu template. Each station contains all items included within that station group. The user will map the stations to their own, and may choose which recipes to include. This is done for each meal period, for each day, within each week of this Planned Menu.

• User is able to map each of the template stations to a station in their own structure, My Stations (dropdown)
  • My Stations = Each user has a set of stations they have defined that are unique to their location / clients.
  • Some of the template stations are required to be mapped. If they are not, the recipe may not be finalized. See notes with sample screens.
• All recipes (menu items) can be displayed within each station.
• Recipes have various edit options. See notes with sample screens.
  • Some recipes are required to be included in a station.
  • Some recipes may be swapped for another and some must stay as-is.
• Controls so user may interact with each:
  • Meal Period
  • Week
  • Recipe within each station
• Save Changes / Cancel / Finalize
  • Finalize > Loading - Displays the menu in Planned Menu Mode

04) Planned Menu Management, A. Display Options
The user sees the Planned Menu Management view after they “Finalize” from 03) Plan Wizard, Define Menu. Or, the user could select “weekly” from a saved menu in their 01) Planned Menu List.
As default, the Menu displays Stations and Recipes in a weekly view for the first week of the cycle. Users are able to do additional planning and make detailed edits in this mode. User should have the ability to customize their view by:

• Week of cycle
• Meal Period
• Stations (all or specific stations)
• (new) Flexibility to filter and view Recipes for various days / weeks / meal periods
• Option to show MTO Recipes and their components
  • MTO Recipes are displayed as a single Recipe item. If the Show MTO Recipes option is selected, the components would also display, grouped with that Recipe. (see sample MTO Item screens in pdf)
• Option to see/hide empty Recipe cells

05) Planned Menu Management, B. Modify Setup
The user sees the Planned Menu Management view after they “Finalize” from 03) Plan Wizard, Define Menu. Or, the user could select “weekly” from a saved menu in their 01) Planned Menu List.
Users will have control to modify some of the setup and configurations for their Planned Menu from this view:

• (new) Ability to turn stations on/off for a specific day or Meal Period. For example: The user may wish to not offer Salad Bar at Dinner on Wednesdays.
• (new) Ability to add a meal period, days of the week, and stations to the existing menu.
• Screen should include link to Ingredient Wizard (screen not in scope)
• Undo / Save Changes / Discard Changes

06) Planned Menu Management, C. Manage Recipes
The user sees the Planned Menu Management view after they “Finalize” from 03) Plan Wizard, Define Menu. Or, the user could select “weekly” from a saved menu in their 01) Planned Menu List.
Users will have the ability to order and arrange Recipes in their display. They will be able to change the mix and schedule of Recipes offered in the Planned Menu.

• Organize the Recipe items:
  • Reorder Recipe items within a station per week or per day
  • Move individual or multiple Recipe items to a different station
  • Copy / paste individual or multiple Recipe items into other stations or days
  • (new) use Drag & drop functionality for organizing
• See basic details for each Recipe item: Portion size, unit cost, link to Recipe card. (screen for the full Recipe Card details is not in scope)
• Select a Recipe item to Swap with another (link to 07) Swap Recipe)
• Add Recipes to the menu (single instance or repeated) (link to 08) Add Recipe)
• Delete a Recipe from the menu (single instance or repeated)

07) Swap Recipe
User selects a Recipe item to “Swap” from 06) Planned Menu Management, C. Manage Recipes. This display will allow the user to replace the current Recipe with another from all the recipes available to them (hundreds of Recipes organized and grouped by various attributes).

• View the list of recommended replacement Recipes based on the original recipe
• (new) Ability to view list to include All Items
• Ability to Search for a  recipe (by name or ID number)
• Ability to filter available choices by categories and subcategories
• Keep Original Recipe / Replace Recipe (single or multiple instances)

08) Add Recipe
User selects an empty cell from 06) Planned Menu Management, C. Manage Recipes to Add a Recipe. This display will allow the user to add one or more Recipes to the menu, from all the recipes available to them (hundreds of Recipes organized and grouped by various attributes). Note: This is very similar to the functionality for 07) Swap Recipe.

• View a list of recommended replacement Recipes based on the station and original menu template used.
• (new) Ability to view list to include All Items
• Ability to Search for a  recipe (by name or ID number)
• Ability to filter available choices by categories and subcategories
• (new) Ability to add multiple Recipes at one time
• (new) Ability to add more open slots to the menu
  • Note: This is related to adding multiple Recipes as each uses a slot in the menu. Consider if this is best solved here or in the 06) Planned Menu Management view.
• Cancel / Add New Recipe (single or multiple instances)

09) Create Your Own Configuration
The user selects “CYO Config” from 01) Planned Menu List, for the specific Menu they wish to adjust. This interface will allow the user to manage the ingredients for any CYO Recipe item included in that menu.

• Allow selection of a CYO Recipe item that is included in the planned menu.
• Select / deselect individual ingredients to be part of the Recipe they offer at their location.
• Select the date this customization will be in effect (date select)
• Save Changes  / Discard Changes

10) Station Management
Currently, the user selects “Stations” from 01) Planned Menu List, for the specific Menu they wish to adjust. The user should also be able to reach this functionality from 04) Planned Menu Management as a “new” feature. For available meal periods, the user will be able to add or reassign a station from the template to a station in My Stations.

• Select a Meal Period
• Add a new station to My Stations:
  • List of stations defined in template (dropdown)
  • My Stations (dropdown)
  • Effective Date (date select)
• Display list of the template stations included in the current menu, with map to My Station
  • Reassign: select a different My Station to reassign
  • Delete: remove station from the Meal Period
• Undo / Save Changes / Discard Changes

EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

• Creativity: 5
  • 1: barely new ideas
  • 10: a utopic product with features not proven to be able to be fully implemented
• Aesthetics: 10
  • 1: low-fidelity design, wireframe or plain sketch
  • 10: finished looking visual design
• Exploration: 10
  • 1: strictly follow an existing reference or production guideline
  • 10: open to alternative workflows/features not listed here that would help the overall application
• Branding: 5
  • 1: don’t care at all about the branding just functionality
  • 10: without a properly branded product there is no success

SIZE
Responsive Desktop: 1440 x 900 pixels (width x height)

BRANDING GUIDELINES

• Palette: Base on corporate colors, open to additional colors
• Black, Hex: #211F20
• Crimson, Hex: #EB2034
• Fonts: Open to the designer and must follow the Topcoder Fonts Policy

STOCK ARTWORK

• Stock Artwork (icons, fonts and photos) is allowed as per Topcoder Guidelines

MARVEL PROJECTS

• Use the forums to ask for Marvel projects and don't forget to add the Marvel presentation link in your notes files