Challenge Overview
Welcome to IBM - Self Help ReactJS Prototype Challenge.
In this challenge, you need to use ReactJS to create a responsive prototype based on the provided designs.
The storyboard is hosted on Zeplin.
Please post your email on the challenge forum to grant you access to the Zeplin project.
Let’s discuss any questions you have on challenge forum.
Final Submission Guidelines
Supported Devices
You need to support:
-
Mobile <768px
-
Tablet 769px - 1365px (Use fluid layout of mobile storyboard)
-
Desktop >1366px (Use fixed layout with fluid backgrounds for larger screens)
Typography
You need to use IBM Plex font (https://ibm.github.io/type)
Code Requirements
You need to use ReactJS with ES6 and follow the latest best practices.
Write clean reusable components to avoid code duplication.
Use React Router to handle route management.
Data should be stored in JSON files. Do not hardcode any data in your source code.
Please use SVG for icons. If an icon is not available in the SVG format, you can use PNG but make sure it looks good on retina.
Feel free to choose between CSS3/SCSS. Use flex instead of floats.
Screen Requirements
Splash screen
Storyboard: 01_00-Web-Landing-Page - 01_02-Web-Landing-Page
-
The bees are NOT part of the background image.
-
You must show a random number of bees (between 2-4) in random places of the screen.
-
The bees should move around and leave a dashed line as a trail behind them.
-
After ~1 second, the 4 circles should be fade in with the size/position/opacity from image 01_01-Web-Landing-Page and should animate to match the size/position/opacity in image 01_02-Web-Landing-Page.
-
The Search option should take the user to the search page. The rest of the buttons can be dead links.
-
Add more shadow as a hover effect.
Mobile note: In the mobile storyboard, the splash screen looks a bit different. You need to follow the desktop version for both.
Search screen
Storyboard: 01_03-Web-Landing-Page - 02_02-Web-Searching
-
The 3 buttons/links below the search box can be dead links.
-
Search should have autocomplete functionality and should highlight the text typed by the user.
-
Each suggestion may have multiple product categories. The user should be able to toggle the categories.
-
Clicking on any suggestion or in the Search button should hide the search input, the 3 options and the “Hello, how can we help you?” title and show the searching message.
-
When showing the Searching message, the bees should be shown similar to the splash screen (Show them in random positions in the screen and they should move around).
-
Keep the user in the Searching message for 2-3 seconds and then take him to the Search results page.
Mobile notes:
-
The 3 buttons/links should not be visible on mobile. Those are accessible from the dropdown menu at the top of the page. See: 10_00-Menu-Navigation in mobile storyboard.
-
Clicking the mic icon should hide the search box and show the Speech recognition (07_01-Mobile-Searching). This should not be a different page.
-
The sound wave can be static image but is highly desirable to make it animated. Clicking it should show 07_02-Mobile-Searching and after 2-3 seconds should take the user to the Search Results page but if the user clicks the CLEAR button, it should show the speech recognition again.
-
Clicking ABORT will show the search box again.
Search Results screen
Storyboard: 03_00-Web-Search-Result - 03_02-Web-Search-Result
-
The search box should work the same way as in Search page (autocomplete etc).
-
The product categories are based on what the user chosen during search.
-
The resource tabs should work and should filter the results.
-
Sorting options are:
-
Best Match
-
Date
-
-
Sorting is NOT in scope.
-
Collapse all should collapse/expand all cards.
-
Each card should have a collapsed/expanded state. In storyboard it’s a bit inconsistent. Please check this screenshot for clarifications: http://take.ms/KFTKh
-
Clicking the (+) icon should expand the card and clicking (-) should collapse it.
-
Bookmark and logo are dead links.
-
The maximize icon should be hidden on mobile/tablet (ignore storyboard)
-
Clicking the maximize icon on desktop, should switch to 2-column view (See image 03_02-Web-Search-Result)
-
Title is dead link.
Web Browsers Requirements
-
IE11
-
Microsoft Edge
-
Latest Firefox version
-
Latest Safari version
-
Latest Chrome version
-
Latest Safari version on tablet/mobile
-
Latest Chrome version on tablet/mobile