Challenge Summary
Welcome to the Real Estate Business Plan Wizard UI Design Challenge!
For this challenge we are looking for user experience designs for four screens of the Real Estate Business Plan Wizard. This application is used by residential real estate brokers or agents, who are looking to manage their business plans. We will be providing you with existing screenshots and some basic design guidelines, and are looking for you to help us design the application user experience.
Only TWO screens required for checkpoint, looking forward to your participation!
Round 1
Please submit your initial designs for checkpoint review, for the following screens:
Any TWO screens out of:
1. Basic Agent Information (Desktop)
2. Channel Plan Details (Desktop)
3. Business Plan Details (Desktop)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: 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
Please submit your initial designs for checkpoint review, for the following screens:
1. Basic Agent Information (Desktop)
2. Channel Plan Details (Desktop)
3. Business Plan Details (Desktop)
4. Any of these screens for mobile (iPhone 5)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Goal:
We are looking for a User Experience design in Salesforce.com based platform, that streamlines the workflow already built (see screen shots). The business is residential real estate. The application is for an agent to manage their “business plan”. A business plan sets an agent’s productivity goals based on several parameters such as experience, income goals for the year, etc. All agent activities for an agent are then captured in Salesforce.com to track against their goals.
The users will be real estate agents so the UX/UI design needs to be as simple and as user-friendly as possible.
We are leaving the UX decisions up to you - what is the most effective way to collect this data? As one single form, or as three steps between which the user can navigate? This is open to any solutions you may think of. Currently the user has no way to know how many steps they have to navigate between. We'd like some kind of design element that lets the user know there are only 3 steps. eg. the "next" button could say "go to Step 2 of 3". Or any way that you think would best illustrate the concept of different form sections?
Basic Workflow and Target User:
For example, new Agent Joe joins the company, he will go through this business planning process in Salesforce.com which collects input from Joe such as # of deals, # of listings, how he likes to find Real Estate leads to gauge him what experience level he is in and what channel he will use to work his leads/deals. This will be input the first time they log in. Then the system will calculate a business plan (i.e. think of some concrete goals) based on his input. To put simply, the process is a guided way to collect input from agent then output some goals for the agent to focus on during the year.
The target user is a residential real estate broker or agent, or a real estate manager, who will be using Salesforce.com to manage their real estate business. This is called a “business plan”.
There are 3 levels of Agents - New, Mid-Level, and Senior. An agent will initially build their business plan in Salesforce.com using a “business plan wizard”. They will then log their daily activities in Salesforce, and as they do so they will automatically track against their business plan. For example - in order to make $100,000 in a year they will need to sell 10 houses.
The Real Estate Manager will be able to oversee the Agent’s business plan (multiple agents) and monitor their performance over time.
Design Requirements and Guidelines:
- Please design all three screens for desktop size (1100px width)
- Additionally, at least one screen should be designed for mobile. Show this at iPhone 5 size (640 x 1136 px).
- Leave a placeholder for the client logo (see client colors below)
- Note that the client likes rounded corners and the “gloss” look on buttons, from early iOS (iOS 6.0)
- Note that we would love to see some nice large / clean icons on this.
Screen Requirements:
3 main screens in the wizard:
The current application has three (3) distinct steps :
1) The user sees on the top/first portion of the form until he clicks “next”
2) then sees the second portion of the form as well, until he clicks “next again”
3) then finally sees the entire form
You must submit all three storyboards, which illustrate this concept and content. The client would like to see this in a “wizard” style ie where each step has it’s own screen and there is a step indicator. Note that the user can go “back” and edit a previously completed acreen, but he cannot go forward without completing the current screen and hitting “next”
IMPORTANT NOTE: Currently the user has no idea how many time he/she will have to click “next”.. we want some design element that lets the user know that there are only 3 steps
1) Basic Agent Information:
See 01-agentinfo.png in attached current-screenshots.zip
- User will input the basic Agent Information.
- There are some error messages that might display if the entered information does not meet the validation rules.
2) Channel Plan Details:
See 02-channel-plan-details.png in attached current-screenshots.zip
- User will provide additional info.
- The sum of the values in the 6 fields on the left side will equal to the Total Closed Deals on the top right. So we need some user friendly ways of showing the sum of currently input values so user does not need to do the calculation.
3) Business Plan Details:
See 03-business-plan-details.png
- This outputs a table for each channel that was selected in 2nd step.
Fonts and Colors
Typography:
- Use Helvetica fonts only (you may use Arial if you don't have Helvetica)
- Large, easy to read text
- No bold or italic text (use font color and size to define hierarchy)
Colors:
- White or very light grey for overall background color
- Shades of grey should be the primary color
- Client’s red should be used for strong action driving
- No text should be darker than #333333 or lighter than #999999
- Client colors are:
— Red : #74344b (gradient to #94154d is common on their site)
— Grey(s) : #EEEEEE through #222222
— White : #FFFFFF
Target Audience
- Real estate brokers and agents
Judging Criteria
- Improvements on current workflow
- Cleanliness of your graphics and design
- User Experience
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.