CRS - Master Data Portal UI Framework Design Challenge

Welcome to "CRS - Master Data Portal UI Framework Design Challenge". In this challenge, we need your help to improve our CRS application UI design screens to become more user friendly and to create a standard UI design framework that we can use later in the future for other modules.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial designs for checkpoint feedback
00) General Requirements
01) Front Page 
02) Table Search/Data Search Page
03) Creation Forms Page
06) Hamburger Sidebar
07) CRS Product Logo

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
00) General Requirements
01) Front Page 
02) Table Search/Data Search Page
03) Creation Forms Page
04) Request Page
05) Approval Page
06) Hamburger Sidebar
07) CRS Product Logo

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

CHALLENGE OBJECTIVE

• Improve and Redesign our CRS application to be more user friendly 
• 5 Desktop screens (Main Modules) + GUI KIT and Design Components + App Logo
• Proposed improve layout and design framework including logo, color scheme variation combination, and iconography

BACKGROUND OVERVIEW

• Many master data/reference data governance tools in the industry (ie Informatica, SAP, pimcore, Semarchy) are built with a lot of complexity and high-learning curve, requiring its users to have high data expertise before they are able to use such tools to achieve value
• The Consumer Reference Services (CRS) is a portal meant to simplify and automate as much of these data governance standards as possible - making it almost "brain dead" and incredibly simple for any user, regardless of their data skillset. The intent is that someone with a mainly business-focused background should be able to go into the tool and navigate it without feeling intimidated
• Today, the tool has been built using an UI auto-generate tool but has had no professional UX designer for its key visual elements
• We are looking for a general UI design language and framework that we can use across multiple similar modules to streamline our user journey

PROJECT GOALS

• The goal is to UI Design Framework that able to offer an incredibly user-friendly design for our master data management portal

TARGET AUDIENCE

• They are marketing technologists, who are meant to be the bridge between more technical IT and platform teams, and our brand managers. While they have some basic IT capability, they are more focused on helping brands with marketing campaigns and building such campaigns in digital solutions.

SCREEN REQUIREMENTS

00) General Requirements

• We need set of complete GUI KIT created as part of the design deliverables, for example: Text Fields, Drop down, Radio Button, Checkboxes, Textareas, Slider, Toggle, buttons, tabs, Charts, Menus, date picker, typography, Grid, cards, dialog, lists, links, and any other design elements that will be useful for the application in the future
• Set of complete icons (can be create from scratch or select icons set from 3rd party that has been approved by topcoder)
• The design needs to consider Colors dynamic combination selections (color palette) where user can choose their own colors which can be applied to the GUI KIT
• In this challenge, we've chosen several main modules as shown in the below spec - other modules may be added in future. When designing the UI screen, please design in mind that the real estate should be scalable to account for new modules and/or adding new design elements
• The design needs to have visual language and functionality consistent across all pages

01) Front Page 
Screen Reference 01 - Front Page.png

• Streamlined page offering top-level modules and a view of the logo
• The product owner has a strong preference for "white space and big buttons" in overall UX functionality - the fewer amount of info we bombard with users at a time, the better it is
• Think "dummy proof" - being able to easily navigate to specific sections on first website load is critical
• Needs a major visual enhancement to make this page interesting and engaging, yet easy to use and easy for user to understand the page content, navigation and features 

02) Table Search/Data Search Page
Screen Reference 02 - Table Search/Data Search Page.png, 02.1 - Table Search/Data Search Page.png, 02.2 - Table Search/Data Search Page.png, 02.3 - Table Search/Data Search Page.png, 02.4 - Table Search/Data Search Page.png

• Specific data modules each have their own search pages and search box to filter (02 - Table Search/Data Search Page.png, 02.1 - Table Search/Data Search Page.png)
• Even with these tables, it is important that visually/functionally, the users are not bombarded with a crazy amount of information. There are modules that can be opened or expanded for further information (02.2 - Table Search/Data Search Page.png). To open this modal window, the user can do it by clicking the blue text within the tables. The content in the modal window is hidden because we are trying not to bombard the user with a lot of information at once. We need a better way to present the content.
• This page is the "landing page" for the next module wherein a user may want to create a new entry for this particular data entity they are searching. It is important that users are required to pass through the search page before they are allowed to move forward with creation (02.3 - Table Search/Data Search Page.png, 02.4 - Table Search/Data Search Page.png)

03) Creation Forms Page
Screen Reference 03 - Creation Forms Page.png, 03.1 - Creation Forms Page.png, 03.2 - Creation Forms Page.png

• When new entries are required for certain data entities, users are then led to creation forms/modules which allow them to fill out different dropdowns, text fields, etc to create new entries with quality (03 - Creation Forms Page.png)
• There are some variations based on data governance requirements, where some modules have modal pop outs to allow for multiple entries (3.1 - Creation Forms Page.png, 03.2 - Creation Forms Page.png), find a better way to present the content and make it consistent with other pages 
• Product Owners (PO) have a strong preference against multi-column forms/grid-based layout forms, as these could potentially bombard users with several fields for fill up. PO would prefer scrolling.

04) Request Page
Screen Reference 04 - Request Page.png, 04.1 -  Request Page.png

• For users who are not admin users, any new entries they try to create are pending for approval and saved as requests in their "My Requests" page (04 - Request Page.png)
• Note that this table structure follows similar thinking with searching - only core information is shown, with additional information appearing via modals that pop out upon clicking certain parts (04.1 -  Request Page.png)

05) Approval Page
Screen Reference 05 - Approval Page.png, 05.1 - Approval Page.png

• For admin users, they are able to review and approve any new entries from non-admin users via a "My Approvals" page. (05 - Approval Page.png)
• Note that this table structure follows similar thinking with searching and requests table - only core information is shown, with additional information appearing via modals that pop out upon clicking certain parts (05.1 - Approval Page.png)

06) Hamburger Sidebar
Screen Reference 06 - Hamburger Sidebar.png, 06.1 - Hamburger Sidebar.png

• CRS portal has persistent header at the top of its page with a hamburger icon on the upper left, which leads to a sidebar of the different modules that can be expanded like an accordion (06 - Hamburger Sidebar.png)
• The language and functionality of the sidebar should be consistent with the front page of the UX to create consistent behavior for the users. Also note that the sidebar elements should be collapsible to only show the user relevant information at a time (06.1 - Hamburger Sidebar.png)
• Screen 06 - Hamburger Sidebar.png and 06.1 - Hamburger Sidebar.png show collapsed/non-collapsed elements
• We are looking for visual UI optimization for this section

07) CRS Product Logo
Screen Reference 07 - CRS Product Logo.png, 07.1 - CRS Product Logo.png

• The current logo of the application as shown on the front-page was currently designed within the team but without professional help. This can further be improved in terms of overall design, colour palette, fonts, etc - as long as below important elements are incorporated (07 - CRS Product Logo.png)
• Overlapping textboxes forming an open book:
  • CRS is meant to become a global “data dictionary” across different applications’ datasets and data models to create a single source of truth
  • Thus, two differently coloured chatboxes come together to form one book – essentially unifying two different ways of speaking about data. This icon is also used for the favicon of the webapp (07.1 - CRS Product Logo.png)
  • This symbolism and meaning is important for the product, but PO is open to other suggestions that could also symbolize this meaning
• PO is open to CRS or Consumer Reference Services being part of logo

DOCUMENTATION

• Screenshot of existing app

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=841134

DEVICE SPECIFICATIONS

• Web/Desktop: Min 1400px Width with Height adjusting accordingly

DESIGN GOALS AND PRINCIPLES

• Follow best practice for Responsive web design
• Modern, simple, easy to use, and clean design
• Material UI design language preferred - especially from reusable reactUI elements from https://mui.com/ 
• Seamless Navigation and enhanced Features
• Reduce the number of interactions required from users as much as possible
• Use color or great visual comparison to highlight a comparison of important information
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information
• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance

BRANDING GUIDELINES

• Open to Designer!

JUDGEMENT CRITERIA

• Creativity: Impactful - the solution is different or unique from what is already out there and can be implemented
• Exploration: Flexible - follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals
• Aesthetics: Hi-fidelity design - provide a top-notch finished looking visual design
• Branding: Open -  propose a fresh new branding option

MARVEL PROTOTYPE

• We need you to upload your screens to MarvelApp
• Please request your MarvelApp prototype in the respective thread in the challenge forum
• You MUST include your Marvelapp URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload)

FINAL DELIVERABLES

Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• Declaration files document contains the following information:
• Stock Photos Name and Links from allowed sources
• Stock Art/Icons Name and Links from allowed sources
• Fonts Name and Links source from allowed sources
• Full Details of the Topcoder Policy can be found in this LINK

Source Files

• All source files of all graphics created in Adobe XD and saved as an editable layer

FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your files, add or remove screens or combine details to create a final presentation