Google - Retail Store Survey Mobile App Design Challenge

Welcome to the Google - Retail Store Survey Mobile App Design Challenge. In this challenge, we are looking to create visualforce customs screen designs for a Salesforce1 mobile application.

The purpose of this app is to help Google representatives in the field coordinate their store visits and conduct their store surveys with an understanding of what was discovered on the previous visits.

We are looking for you to define the initial design direction for this application by using best UX practices.

Good luck!  We are looking forward to your designs!

Round 1

The following screens (See Design Guidelines)

1) Today’s Visits
2) Visit Details

- Readme.jpg: Provide notes about your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

All screens (See Design Guidelines)

1) Today’s Visits
2) Visit Details
3) Find a Store
4) Schedule a Visit
5) Visit Wrap Up

- Readme.jpg: Provide notes about your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Purpose of this challenge is to design five customs screens for a Salesforce1 mobile application.  These designs need to be compatible with a visualforce implementation. The Salesforce1 mobile application is to help field representatives survey and evaluate licenses treatment of product and product displays.  

Design Guidelines:
- All screens need to be compatible with a visualforce implementation to be used with the Salesforce1 mobile application.  
- All screens need to have a Google look and feel  
- Keep things consistent. This means all graphic styles should work together
- All of the graphics should have a similar feel and general aesthetic appearance
- Adhere to Material Design as the visual design framework *
- Focus on bold, graphic, typography with intentional use of white space to create simple and clean design
- Colour palette is mostly primary colors; unexpected and vibrant -- tied together with a theme
- Be delightful in the details, add an element of surprise in motion for user
- Focus on minimizing the number of clicks needed to complete a store visit
- Automatically populate call forms when possible
- Look to include multiple access points and shortcuts within the app to avoid going back to the home screen

* NOTE:  As per the Google material design guidelines: "Feel free to use, remix, and re-share the icons in your products. The icons are available under the CC-BY license. We'd love attribution in your app's 'about' screen, but it's not required. The only thing we ask is that you not re-sell the icons."  https://www.google.com/design/icons/

Required Design Sizes:
- In terms of viewport size for the Salesforce1 mobile app, use a 5-inch Android screen (Google Nexus 5 as an example): 1,080 x 1,920 pixels

Required Screens:
We need below screens to be designed for this application..

1) Today’s Visits Screen (Home):

• - When a user starts the app he is shown the “Today’s Visits” screen.
  • - The main purpose of this screen is to give the user a schedule of the stores he is going to see today in the order he is planning on visiting them and the notes associated with each store from his previous visit.
    • - Stores are identified by name (i.e. Best Buy, Target, Walmart) and city.
    • - In the case of a chainstore having multiple stores in one city, the stores are also identified by a “nickname” (i.e. Target Westchester East)
      • - Store names (15 characters)
      • - Store city (15 characters)
      • - Store “nickname” (20 characters)
    • - Notes from the previous visit to the store are included with the identification information
      • - Notes (250 characters per store)
    • - Clear indicator of the position of the store in the route (Stop #1, Stop #2, etc.)
    • - Visual indicator of the status of each stop (Completed, Not Completed)
    • - NOTE: users typically visit 3-5 stores per day
    • - User can drill into each store to go to that store's visit detail screen.
  • - The secondary purpose of this screen is allow the user to see a list of unscheduled stores and the distance from the current location so that the user has the option of adding additional stops to his route via the “Schedule a Visit” screen.
    • - Stores are identified by name (i.e. Best Buy, Target, Walmart) and city. [Note: Store identification is handled in the same way as it is in the Today's Visit section.  See above.]
    • - Distance from current location in kilometers, 2-3 digits (e.g.: 9.4 km, 11.3 km, etc.)
    • - Corresponding to each store is a button that will take the user to Schedule a Visit screen
  • - Other functionality to include
    • - Date Navigation - Screen should default to “Today”, but user should have the ability to very quickly navigate to the next calendar day.  They should also be able to select a past or future date via a date picker.
    • - Map My Route - Based on the order of stops, user should be able to view their route on a map.
    • - Reorder Stores - User should have the ablility to reorder the stores on their route
    • - In addition to the already outlined navigation, the user should also be able to navigate to the Find a Store flow (My Retailers screen) from this page.

2) Visit Details Screen:

• - When a user selects a store that is scheduled for a visit that day from the “Today’s Visits Screen,” he is taken to the “Visit Details” screen which lists out all the information about the store including data captured from previous visits.
  • - Ability to start the visit from this page
  • - Store identification information
    • - Store name, city, and nickname (if applicable)
    • - Button or icon to start the survey for that store
      • - Note: Starting the survey initiates a geolocation verification to ensure the representative is actually at the store location.  Once verified, the “Clicktools” survey will commence.  
    • - Store Info
      • - Statistics
        • - 3 Compliance measures (four digits - i.e. ##.##%) Note: This is a read only number that is created from survey results
          • - Chromecast Compliance
          • - Nexus Compliance
          • - Chromebook Compliance
        • - OSA (four digits - i.e. ##.##%) Note: This is a read only number that is created from survey results
      • - More button and/or icon that expands to show:
        • - Store Address (varies depending on country - Using UK for this example)
          • - Building Name (10 characters)
          • - Number of building and name of thoroughfare (20 characters)
          • - Locality Name (10 characters)
          • - Postal Town Name (15 characters)
          • - Postal Code (8 characters)
        • - Google Map Navigation (ability to navigate to the address via Google Maps)
    • - Store Contacts (initially fully collapsed; expandable -- could be 10+ contacts per store)
      • - First Name (10 characters)
      • - Last Name (10 characters)
      • - Title (10 characters)
      • - Phone number (16 digits for EU phone numbers)
      • - Email address (20 characters)
    • - Visit History.  Notes and pictures from past visits.  Text notes should be limited to 250 characters per note (i.e. missing endcap, need POS on Nexus, etc.).  Pictures ((unlimited scroll for pictures taken from previous visit) will be associated with each visit.
      • - Visit history should be sorted by date descending (most recent visit at the top)
  • - In addition, the user can navigate back to the Home screen.

3) Find a Store (My Retailers > My Stores > Store Details):

• - When a user selects the “My Retailers” screen, he is shown a display of all his retailers logos (i.e. Best Buy, Target, Walmart, etc.).  By selecting a retailer logo, all stores the user is associated to for that retailer are returned.  The user can further reduce the list of stores by searching by city or store nickname.  
  • - City search field (15 characters)
  • - City search button or icon
    • - The user is presented with the store or list of stores that meet the search parameters  
      • - Stores are identified by name (i.e. Best Buy, Target, Walmart) and city. [Note: Store identification is handled in the same way as it is in the Today’s Visit section.  See above.]
  • - User can drill into one of the stores returned to get to a Store Details screen.  This should be very similar to the Visit Details (see details on Screen 2 about Store name, Store Info, Store Contacts, and Visit History), with the following modifications
    • - If the corresponding store is scheduled for a visit today, user has the option to start the visit from this screen (same as on the Visit Details screen).
    • - If the corresponding store is not scheduled for a visit today, user has the ability to navigate to the “Schedule a Same Day Visit” screen.
  • - In addition, the user can navigate back to the Home screen.

4) Schedule a Visit:

• - When a user selects to “Schedule a Visit,” the app will prompt the user to select the day to which they wish to add a visit.  Once the date is selected, the Schedule a Visit screen will display the planned visits for that day.  The user should have the ability to select where within the day’s schedule they would like to add this store (e.g. - after Stop #3, after visiting Best Buy Westchester East, etc.)
• - Store visits for the day should be displayed on a map, with the new store displayed as a different pin color to help a user understand the best time to include the store.
• - In addition, the user can navigate back to the Home screen.

5) Visit Wrap Up Screen:

• - Once the “Clicktools” survey is concluded, the user can add notes and capture photos to add the record for that date’s store visit.
  • - Store identification information
    • - Store name, city, and nickname (if applicable)
    • - Start time of visit
    • - End time of visit
  • - Ability to add General Notes (250 character field)
  • - Ability to add multiple photos from the device’s gallery
  • - Ability to add Qualitative Insights
    • - User must first select type / category of feedback (possibly from a drop-down) [For example: Chromebook End Cap Display]
    • - User enters data for that specific category
    • - User can enter multiple insights as individual records
  • - In addition, the user can close/same this current visit and return to the Home screen.

Target Audience:
- The Salesforce1 mobile application is for field representatives taking surveys and evaluating in-store treatment of product and product displays.  

Judging Criteria:
We will be judging on:
- How well does your design align with the objectives of the challenge
- Creativity of your visualization
- Cleanliness of your graphics and design
- Overall Design and User Experience

Submissions and Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback. See more information about Final Fixes.