Oracle - Oil Product Directory Website UI Web Application Design Challenge

Welcome to the “Oracle - Oil Product Directory Website UI Web Application Design Challenge”! In this challenge, we are looking for your help to optimize the search and filter function of Oracle Product Directory to become more dynamic, robust and intuitive which would help find the product much easier. 

Round 1

Submit the following screen requirements for checkpoint feedback:
01) Welcome Popup
02) Homepage
04) Product Page
04A1) Product Comparison

• 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 the following screen requirements for checkpoint feedback:
01) Welcome Popup
02) Homepage
03) Product Search Results
04) Product Page
04A) Family
04A1) Product Comparison
04B) Product Range
05) Product Detail Page
06) Contact Form

• 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

• Create 9 screens UI designs for the web application.
• Design a modern and intuitive responsive web application that enables customers to search, find and compare product information (focus on desktop/web for now).
• Provide intuitive user journeys and seamless user experience.

• Overall idea and execution of designs
• How well does your design align with the objectives of the challenge
• The overall design and user experience
• Cleanliness of screen design and user flow

• Our client is a multinational company, and envisions to refresh and improve their existing product directory website to become intuitive and user friendly. 
• This product directory called Oracle will act as a starting point for customers to search a product, view detailed information and compare desired products and in the end customer will initiate an order in bulk (order is out of scope). 
• Currently, the product directory that clients have has limited search functionality. Users can only search using products name, port name, and country. Other than that no result will be shown. Navigating between search and result also causes confusion.

• Creativity: Conservative; barely new ideas, use what is already proven to work.
• 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: Strict; carefully follow the provided guidelines and stick to them.

• Name: Mike Simpson
• Occupation: Newly hired purchaser for industry
• Role: Purchase lubricants for machinery
• Pain Points:
  • Limited or low keyword acceptance when searching causes confusion when Mike wants to find products.
  • It will be very difficult if Mike doesn’t know what product name he is looking for.
• Wants: Smart and intuitive search functionality
• Proposed Solution: Allowing Mike to do the search using multiple keywords, products description, etc which will make the search much easier with or without help from product filters.

• Mike opens Oracle and is greeted by a pop up asking him to enter and set his business sector, country and language. He also needs to read the terms and conditions, accept it before he can continue
• After the initial tasks, he comes to the homepage which consists of a welcome banner to promote the latest launch of any new products. He can click on the banner to see more details about that product. 
• Mike also sees a list of frequently searched products in his country. In this list, he does not see the product he is looking for. So he then uses the search features to find the product he is looking for.
• There are 4 ways available for Mike to do the search.
  • First (desired), Mike doesn’t know the name of the product he is looking for and types the products criteria instead. Results then show a list of products based on the criteria. He can narrow it down to specific products by filtering the results based on available properties.
  • Second, if he knows the product name, he can type the product name and the result will show a specific product name. If he clicks on the product result, he will go to the product detail page.
  • Third, he can search using a country name which will show a list of ports available in the country. He can browse the port and see a list of products available in that port. If he clicks on any product, he will go to the product detail page.
  • Fourth, he can search using family or range names which will list the product inside the family or range. and he is also able to add up to 4 products into a comparison basket and compare product information in the family and range listing page. If he clicks on any product inside the list on range, he will go to the product detail page.
• In every way of searching and in the product page, Mike can see the Contact Us button. He clicks on it to initiate an order request by submitting a form.

• Hierarchy: Family →  Ranges →  Product.
• Family: includes lubricants that fall under a specific product category which is a broad classification. For e.g. Aircol Family –is a collection of Compressor Oils, Refrigeration Compressor Oils and Oils for Refrigeration systems.
• Range: includes a collection of lubricants that come in different grades and are categorized under one of the above-mentioned product categories within a family however used for a particular application
  • For e.g. Aircol family has the following ranges under them, and each range has a collection of  lubricant products that come in a different grade/ viscosity.
  • Aircol 200 Range (Mineral Refrigeration Compressor Oil) 
    • Aircol 266
    • Aircol 299
  • Aircol CM Range (Air Compressor Lubricants)
    • Aircol CM 100
    • Aircol CM 150
    • Aircol CM 32….
• OEM: original equipment manufacturer (OEM) is generally perceived as a company that produces parts and equipment that may be marketed by another manufacturer.

When users arrive at the site, they will see a pop-up overlay on top of the homepage which will ask them to choose industry sector, country, and language, accept terms and conditions: 

• Industry sector: this is a simple selection and will impact product text and filter-based search results are focused on the user sector.  It will contain: Choice A, Choice B, Choice C
• Country selector: users can choose a country and only products relevant to the selected country are shown. It will contain a list of countries.
• Language selector: user can choose the language to use (English, German or Japanese). 
• Terms and Condition: users must read and accept the terms of conditions that contain legal rights and liabilities before using the site
• Checkbox to save their selection and continue button.
• A brief text with a button “Already have an account? Login”.

• Breadcrumbs: showing relative position in the product content.
• Top navigation: placeholder logo, sector dropdown, language dropdown, home, contact, and log in.
• Welcome Banner: this is a new feature that clients wanted to have in their product directory.
  • The desired welcome banner will be placed on the homepage which serves as a promotional banner for latest activities, such as holiday promo, special offering, or launching new products
  • And a simple CTA button to navigate to the latest launched product page.
• Product Search Results: This is the most important part of the homepage. Keep it simple and more versatile. Users can search products not only by generic keyword, product, port, country. They can also search by Product Category and Application. 
  • Product Categories, eg: compressor oils, corrosion preventives, engine oils, etc
  • Product Applications, eg: air compressor, cooling systems, corrosion preventive, etc.
  • For example when you choose a category as Engine Oils and Application as Cooling Systems, then it should list products just based on these too. We do not want it to be categorized separately as shown in the screenshot. They should all work as one search entity.
• Most Searched Product: show frequently searched or the most searchable products section on the homepage.
• Cookies Pop-up: users will be asked a standard cookies agreement and can give explicit consent for cookies to be used on their browser 
• Footer: a standard footer contains privacy statements and legal notices so users can access this information.

• Search suggestion: First thing as users type the keyword on the search box, there will be a dropdown suggesting based on products, port/country. Users can click on a suggested item (port or product) and view the details or click “View all” to show all the results.
• Search result: Next step is when the user clicks View All from the Search suggestion, the search result only displays family and range names and users need to click on that to view the products inside. This is not intuitive as users cost multiple clicks before viewing the list or product. Now, we want to propose a new approach by listing all the products that match the keyword.
• Product filter: From search results, users can narrow the results by filtering based on category and sub-category, applications, and sub-applications.

• Family name with brief description and number of range in the family.
• Contact Us button where users can initiate the order from here by submitting a form.
• There will be a filter section and search on this page. 
• Product family consists of a product range with short description for each range 
• Product range will list all products available in the family with different viscosity. 

• From search results, product family, product list, users are able to select and compare product specifications up to 4 products.
• Plan in advance on how users can initiate the comparison. 
• Users also can remove or add any product to compare.
• Show robust and detailed information such as product name, applicable sectors, product descriptions, viscosity, type, details a, details b, details c, details d, and details e.

• Range description and high-level details such as number of products in the range.
• List of products within a range and their viscosity
• Users are also able to compare product specifications up to 4 products from the product range page.

• On clicking product from search result, or product range, users will land on this page.
• Product details such as description, product-related data sheets, product specifications such as viscosity, availability in users country, product replacement info if product is discontinued. 
• Users can access contact forms to ask for purchasing information from this page.
• As a United States user, show ‘Find a distributor’ site from the product listing page. This will be a simple link or button which will bring the users to another page.
• Show OEM approvals against the product and share buttons.

• If users want to ask questions or make any request, they can use this contact form.
• Include these details on your contact form: customer name, email address, company name, country of business, line of business, subject, description to their queries, submit button.
  • Subject contains product supply & delivery, technical, sales, general inquiry, request login.
• Upon submitting, the user will know if the contact was delivered successfully or not.

• Font:
  • Bebas Neue for caption, heading, navigation and button.
  • Arial for body.
• Colors: See attached color guideline for complete color.
• Icons: you may create icons from scratch or use any free for commercial use stock icons in your design. 
• Logo: please use a placeholder. Please avoid using any real logo in your design or you will failed screening.

• Adobe XD
• Figma
• Sketch

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

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• 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