Dynamo - Auto Parts Price Search App Design Challenge

Welcome to Dynamo - Auto Parts Price Search Mobile App Design Challenge.

In this challenge, we are looking for your help to convert a demo web app to an app to allow searching and comparing prices of Dynamo auto parts with their peers. The app is envisioned as a cross-platform app, and will be implemented in React Native and deployed on iOS and Android Platforms.

For this challenge, we are looking for production level designs . And your solution must allow for interactive clickthrough using Marvel or Figma prototype.

Note: Dynamo is the code name we are using for client name.

Please read the challenge specifications carefully and let us know if you have any questions in the forums.

Challenge Objective

• User interface design
• 6-8 screens
• Cross platform Mobile and Tablet App

Round 1

Submit your initial designs for checkpoint feedback.

03 Product Search (Mobile-Portrait)
04 Product Search (Tablet-Landscape)
05 Product Price Comparison (Mobile-Portrait)
As part of your checkpoint submission, upload your designs into MarvelApp or Figma prototype so we can provide direct feedback on your designs. Please include the MarvelApp/Figma Prototype 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 initial designs for checkpoint feedback.

01 Login (Mobile-Portrait)
02 New User Registration (Mobile-Portrait)
03 Product Search (Mobile-Portrait)
04 Product Search (Tablet-Landscape)
05 Product Price Comparison (Mobile-Portrait)
06 Product Price Comparison (Tablet-Landscape)
As part of your final submission, you must replace your checkpoint submission with the final submission into MarvelApp or Figma prototype so we can provide direct feedback on your designs. Please include the MarvelApp or Figma Prototype URL in your notes.txt. Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Project Background

Dynamo is a large US based automotive aftermarket parts provider. The company operates 3000+ stores and branches across US and Canada. The company's stores offer a wide range of brand name, original equipment manufacturer (OEM) and private label automotive replacement parts, accessories, batteries and maintenance items for domestic and imported cars, vans, sport utility vehicles and light and heavy duty trucks.

Recently, they have been working on ways to facilitate their store associates, to help them search and compare prices of their automotive parts with their peers. At the moment, they have developed a demo web app that queries BigQuery to pull information on demand to demonstrate the proof of concept and through this challenge, we want your help to design interface for a new mobile and tablet app to offer an enriched experience that is aligned to best practices of cross-platform React-Native based app and the look and feel of the brand.

Note: Do not copy the demo web app design. The client is looking to convert their existing demo app to create a better user experience with their branding.

Workflow

Please make sure your design incorporates this workflow.

Step 1: The user launches the app.

Step 2: The first time user will have an option to register themselves on this app to access the price dashboard, which is the primary functionality of this app. They will need to provide their relevant store associate details and the mobile app will confirm the details from the information registered with Dynamo.

Step 3: User accesses Price dashboard. They will be able to search for auto parts from this screen.

Step 5: User types in the name of the auto part in the next field to search its price and other details. The interface also helps users by showing autocomplete results to allow quick selection.

Step 6: User presses the "Search" button and the app returns a pre-sorted list of results in a table with multiple relevant columns to view availability and other relevant details of the searched auto part.

Step 7: By default, the user will see a list of all auto parts from Dynamo across all its categories. But users should also be able choose to filter the result based on DynamoZ category or DynamoZ class at the least. These are types within Dynamo parts. Refer Table Reference for more information.

Step 8: The user selects "Peer" apart from Dynamo which is currently selected to compare prices with the same/similar parts from their catalog.

Step 9: On camparison page, user will have additional option to filter states and if they select a state there, they can see whether the price of an item in that state is different from the most frequently used price for that item.

Note: We are open to optimising the above workflow to provide better user experience.

User Goal

Please make sure your design supports the following user.

Store Associate

• Public access: Ability to enroll as a new user on the mobile/tablet.
• Private access: Price search dashboard where they can search for auto parts. Users will have further options to filter the search results based on categories and compare the prices with other peers.
• ���Goal: To be able to search for auto-parts and quickly access its price and other specs, and be able to compare them with Dynamo's peers to convince customers.

At the moment, this app needs to support only one kind of user, i.e Store Associate.

Glossary

Store Associate: A professional from the Dynamo store who interacts with a store's customers. These individuals welcome clients and assist them, such as explaining what products or services the company offers or answering a client's specific questions.
Dynamo Category: Dynamo category is a list of several categories under which their automotive parts are classified. Example: A/C Evaporator Core, A/C Compressor, A/C Hose Assembly, etc.
DynamoZ Class: Similar to Dynamo category, this is another filter/tag a automotive part can be tagged with. Example: 9037-Parts, 8777-Value Line, 8210-Cranking, etc.

Screens/Features

Please make sure your design includes the following screens:

01 Login (Mobile-Portrait)

• We do not have any existing screen reference for this.
• Include: Placeholder for Brand logo, App name: “Price Search Dashboard”
• Create a standard login screen with username and password.
• Also need to show the forgot password flow.
• Need to have an option to register as a new user.

02 New User Registration (Mobile-Portrait)

• We do not have any existing screen reference for this.
• This page should show a form to enter information about the store associate.
• Fields that needs to be included:
  • Full name
  • Dynamo Employee ID
  • Store location (ZIP code) Dropdown
  • Authorization Code
• Button to submit this information to generate app login. The app login will be sent to the store associates’ email account from where they can get the username, password to login into this app.
• This page also needs to have a link to access or contact the Support team in case of any help that may be needed by store associates to complete this step.

03 Product Search (Mobile-Portrait)
04 Product Search (Tablet-Landscape)

• Refer Page 1 and 2 from Existing Screenshots PDF.
• This is the main screen, which can also be referred as “Price Search Dashboard” from where the user can search for the auto-parts and find out their details to eventually compare their prices with of Dynamo’s peers in the market.
• Needs to have an search area in the app header or in the top portion, which will include:
  • Textbox field to enter search keyword(s). This textbox should also open a dropdown to show auto-complete suggestions to allow users to quickly select a keyword or auto-part name. 
  • “Search” button to perform a search based on search keywords.
• Search filters: We want the user to select upto one Dynamo category and/or one DynamoZ class to filter the search results. Please refer to step 7 under workflow and Glossary section to get an understanding of this part.
• Search Results: This section shows the results in a table along with support for:
  • Pagination and option to select number of results to be shown in a single page. A single page should have an option to show 25, 50, 100, 200 results per page.
  • Table fields - Refer Table Reference.
• Keep in mind that the table is very long horizontally. How do we best show so much information? How would it work if there was an option to hide a few columns.
• Research best practices around displaying tables and similar data on smaller screens. 
• This is the main aspect of this app and we want your help in creating the best user experience in simplifying this feature. 
• We are open to fresh ideas in displaying this information in a simpler way!

05 Product Price Comparison (Mobile-Portrait)
06 Product Price Comparison (Tablet-Landscape)

• Refer Page 3 from Existing Screenshots PDF.
• After the user has performed the search, the interface will display 3 to 4 tabs, each for one peer in the automotive industry. 
• Please label the tabs as “Peer 1”, “Peer 2” and “Peer 3”. 
• Selecting the tabs will show the same information as in the previous search screen but from the peer. 
• Include a field to filter based on state location. Refer Step 9 from Workflow section.
• Table fields - Refer Table Reference.

Form Factors

Please make sure your design supports these form factors:

In-scope:

• Mobile portrait
  • Design for iPhone 12 screen resolution: 390 x 844 pt
  • Export for native resolution (@3x): 1170 x 2532 px
• Tablet landscape
  • Design at iPad 12 Pro screen resolution: 1366 x 1024 pt
  • Export for native resolution (@2x): 2732 x 2048 px

Out of scope:

• Tablet portrait
• Mobile landscape

Operating Systems

App will be implemented using React Native and will be deployed as cross-platform app for both Android and iOS.

Branding Guidelines

• Use the provided brand look and feel from this document.

Design Assets

• Existing Screenshots PDF
• Table Reference
• Dynamo Brand

Judging Criteria

Your submission will be judged by:

• Presentation: Provide a thorough solution. It should simulate the workflow described, including linked screens, variations and behaviors of elements.
• Completion: Your solution MUST fulfil all the requirements or equivalent to achieve the given workflow.
• Exploration: Consider the screen requirements and guidelines as a draft or start point. Provide alternate experiences or workflows to achieve what we are proposing in the requirements and satisfy the user goals.
• Aesthetics: Provide production level designs that can be fed into development.
• ���Branding: Your solution MUST follow the provided brand look and feel.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file or Sketch or Figma.
• MarvelApp / Figma Prototype
  • We need you to upload your screens to Marvel App or Figma Prototype.
  • Please send your marvel app request in the challenge forum. Optional for Figma users.
  • ���You MUST include your Marvel app or Figma Prototype URL as a text file in your final submission labeled "MarvelApp URL" or "Figma Prototype URL" (in your app prototype, click on share and then copy the link).