RIA - Mapping iPhone Application Design Concepts Challenge

Welcome to RIA - Mapping iPhone Application Design Concepts Challenge. In this challenge, we are looking for the the community to design mobile screens for an application that will help field agents to access information about households which they will be visiting each day and this will be shown visually within a map (like google maps), this will help them plan the order in which they visit these households.

We are looking for DESIGN CONCEPTS that highligt how the detail viewing and filtering could work. What should the user see and experience when using the application!

Good luck and we’re looking forward to your submissions!

Round 1

Initial Design Concepts of the below for checkpoint review

1. Map view, none selected, power name filter applied
2. Map view, one household selected

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Final Design Concepts with any checkpoint feedback implemented

1. Map view, none selected
2. Map view, none selected, show filters popup
3. Map view, none selected, power name filter applied
4. Map view, one household selected
5. List view, one household selected

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Task of this challenge is to come up with solutions for the below given design problem. We are looking for your thoughts on how best the solution can approached and it is more important to come up with the best user interface.

Design Problem:
What is the best way to turn several key data points about each household into a useful map interface that is simple to work with, on a mobile phone? The users will need to use filters to help them view important household details and plan their daily route. We are looking to you to help us solve this problem with a great interface.

User Scenario:
John is an new agent and works for client company (RIA). He is looking to sell insurance in a rural area and is staying with his sales team at a local hotel. It is morning and he preparing to start driving door to door, making contact with the people who live in this large farming / ranching community. He plans to make contact with at least 20 home owners today.

Through his sales team, he comes to know about app that his company provides for agents to plan their household visits.
- He downloads and installs the app.
- Within the app, he opens ‘my map’ to view the households in his area and start planning his day. 
- App provides lot of features, he is able to see the household closest to him/hotel (a hotel PIN is indicated unquiely from that of a household PIN)
- He decides not to necessarily just drive to each of the household closest to him as people under 65 are usually out working during the morning.
- He finds a useful filter feature that allows him to select an age criteria and it returns households with seniors (i.e. people above 65) on the map.
- Based on his preference, he is able to find a senior with a power name or a testimonial located near him and then he can plan a route from there. 
- He is also able to tap on to a household PIN within the map to see more information about the household.
- While being at a household, he is able to update the status based on the user's response.
- He is excited about this application as, whatever his preference are, he is able to easily get started with this RIA mobile app.

Design Considerations:
- Looking for modern, intuitive user interface
- Focus on the design for a great user experience
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application

Color:
- The overall “look/feel” of the app should be light (think Apple and Google map apps).
- Client’s primary colors are Red (#cd202c) and Blue (#1f427c) and White (#FFFFFF). Please use both the red and the blue in the design for smaller elements only (not large areas) and in a consistent manner.  
- You may add additional colors on the map, to indicate types of information, so long as they are complementary. Please do not use so many colors that it becomes confusing for the user.

Typography:
- The client prefers the Rockwell font family, but if you do not have this font, please use Helvetica or Arial family. Text should be easy to read. Please do not use a lot of bold text.

White Space:
- Please leave some padding around elements and use color / typography / icons styles that make the screen feel less cluttered. The idea is to take a lot of information and make it SIMPLE to digest, without overwhelming the user.

Options:
- It is up to you if you want to show some of the household information NEAR their location indicators on the map, before the user taps on one. You may also choose to only show any info on select / tap, and not near the indicators. Up to designer discretion as to what is the best way to keep this both useful and simple.

Design Size: 
- The submissions will be for iPhone 6, in portrait orientation.
- Please create your screens at 750px (width) by 1334 px (height), and do NOT include a device frame in your screens (we will drop the submissions into a device frame, using InVision).

Other Considerations:
NOTE: Please research popular map apps, if you have access. Our application will contain more information than a standard map app, but we want to reinforce use map app familiarity where possible and not create a UI that conflicts with that past experience. For example, popular map apps use a blue dot with a white outline to indicate the user’s current location. We would want to reinforce that common experience in this application, rather than confuse them with something entirely different.

Required Screens:
Based on the design problem and user scenario, we are looking for you to design five (5) screens, of which three (3) are notably unique. The other two (2) screens are simple alternative views.

IMPORTANT: If you have an idea/screen that we have not mentioned in the required screen content section below, please feel free to include an additional screen or two in order to present your idea.  This is a working app and client here is more interested in a strong user experience than “pretty” designs.  We assume it will be pretty and please make the usability amazing!

1) Map View, No Households Selected:
This will be the user’s default map view of households in their area. This screen will contain:
- Menu: a way to access the main menu 
- Search: a way to search for specific households
- Filter: a way to access the available map filters
- One (1) hotel indicated on the map where the agent is based - this must be visually different from households
- User’s current location (standard blue dot / white border)
- At least seven (7) households indicated on the map (see important notes, below)

IMPORTANT HOUSEHOLD INFO
- There are three (3) types of households that must be easy for the user to visually differentiate : Active, Terminated, and New. You must show at least one example of each type on the map.

2) Map View, No Households Selected, Show Filters Popup:
This will be the user’s default map view of households in their area, where the user has tapped the “filter” option. This screen will contain:
- A popup menu which shows the available filters  (see important notes, below)

IMPORTANT FILTER INFO:
The five (5) available filters are: 
- All Prospects (default filter / shown as active in this screen)
- Not Contacted
- 65 and Over
- Power Names
- Testimonials

We would prefer that filter does NOT work in the standard way. Instead, on tap the filter menu will display fully / all options> the user will tap to  select one filter (only one filter may be applied at one time) > on tap the filter menu may tuck away (?) but maybe not (maybe there is some other state change?>  but, most IMPORTANTLY, the user still sees ALL households on the screen. The filter does not hide households, but instead it visually changes the screen so that the filtered households “stand out” / are visually different from the other households. Perhaps the other households “fade” or some other effect.  

The filter is one of the most important tools in this app, because the user needs to see all households, but also use filters to make the information useful. This is the most import screen in the challenge, so if you are unsure about this screen, please ask questions in the forum!

3) Map View, No Households Selected, Power Name Filter Applied:
This will be the user’s default map view of households in their area, where the user has applied the “Power Names” filter option. This screen will contain:
- All of the elements listed for screen 1a, EXCEPT with a simple / easy to comprehend visual distinction between the two (2) households which are “power names” and the other households.  NOTE: Do not remove the other households from view, but rather use the filter view to simply “call out” the power names as different from the non-power name households, while still showing all households.
- Some way for the user to know which filter has been applied.

4) Map View, One Household Selected:
This will be what the user sees when he taps on one of the households on the map. This screen will contain:
- Some visual indication that the household is “active” / has been selected.
- Household details element, which will display additional data and options (see important notes, below.)

IMPORTANT SELECTED DETAILS INFO
Display this data for the selected household / layout and order up to designer:
- John Snow-Longnamus 
- 65+ 
- Somelongname Avenue, #8642 
- Power Name
- Testimonial
(retain some indicator for type - ie “active / terminated / new” household)

Display these options for the selected household (layout and order open to designer):
- icon or button, option to view more information about this household
- icon or button, option to add a note to this household
- icon or button, option to get driving directions to this household
- CAPSR status change options (see important details about this CAPSR, below), this needs to show each of the alphabet in CAPSR as a tappable letters and when tapped it changes / becomes visually “active” (changes color, or some other change - we are looking for your thoughts on this)

IMPORTANT CAPSR INFO:
The agents use a system they refer to as “CAPSR” to capture the status of their interactions with a household. They equate to :
“C” = contacted,
“A” = appointment set,
“P” = presentation made,
“S” = sale made, and
“R” = referral received.

For this element, we ask that you literally show each letter as a tappable option i.e. user will see all 5 tappable letters, but once a letter is tapped it changes / becomes visually “active” (changes color, or some other change - we are looking for your thoughts on this). It is fine for these letters to be turned into individual elements (squares / circles, etc), horizontal or vertical display , etc so long as they all appear in this order (CAPSR) and all caps.

Please show “C” and “A” as visually different (have been tapped) from the others.

5) List View, One Household Selected:
- This will be what the users sees when they decide to leave the map view and view households in a listview. 
- IMPORTANT: the list view will contain one additional screen option, which is the option to “sort” the list (not available in map view).  
- This list view should have all of the same data and options that the user sees in screen #4, for the selected household, but the other households in the list (not selected)  may only show some of the options. You may hide some of the options for the unselected households and show the additional options for the selected household, only.
- Also, it will need to scroll of course (there may be 50 households), so it’s okay to show only some of the households on the map (at least 3, but no more than 7) on this screen. 
- The view should be simple to read / nor cluttered and have some white space contained in it.

Target Audience:
- Users of the application are rural insurance agents, who are familiar with using map applications on their phone, in order to navigate. 

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as an application

Submission & 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.