Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



How to create product UI prototype in record time.

Client: theBuildingStuff, Seattle 2002.  Objective: to create a sales force calendar/organizer UI, that's very different from MS Outlook.


02-06-2002 Ken B.

No copy, just lift it from the sites referenced, or make up bogus data as you need it. This is totally a mock-up.
Realistic, meaning don't gloss over too many details. Some mock-ups forget simple things like when scroll bars will be needed, or navigation buttons, space/size/screen considerations, etc. Nothing like a photograph. And art only in the sense that it needs to look creative and sharp.

Wow, do I stink at communicating requirements, eh? Non-html is like the difference between yahoo and msn. Yahoo uses borders and obvious HTML elements. MSN has cool tabs and colors, rounded corners, etc. It needs to look like a very rich, stylized, non-html interface. Not like some html coder was just printing tables and cells with borders.In terms of how you present the images, just static screen shot-looking. No extra layout or framing. Keep it simple.



Let's clarify what these are:
a. Calendar - calendar of events, news, etc. something like: February 4, 2002
(Name here) And Research In Motion Team Up To Provide Access To Critical Sales Data Anytime, Anywhere January 30, 2002
Clicklogistics Deploys (Name here) Across Entire Field Sales Team or is this a tool:
Maximize efficiency and communications with team scheduling. With Salesnet's Calendar you can easily schedule group meetings and conference calls; input recurring appointments; and share individual calendars and information across the sales team. Scheduling conflicts can be minimized, boosting your team's productivity. The Calendar offers views by day, week, or month, and is fully integrated with Deal Management so that all Steps due in the Deal pipeline are highlighted within any Calendar view. The Calendar is a true global application with time zone defaults and settings for all time zones worldwide.

And I'll need to mock up some sort of calendar here?
>>>>>> More the first option in terms of data and presentation. It's really a view of when things happen are or supposed to happen. So I expect it to look much like outlook's calendar with a daily view, and a month (or two) snapshot. But it is also a tool so everything that is in your second point is valid. Obviously from the screen shot not everything will be evident, but for example, it's more than just events (like meetings) but events (like when a deal is due). I wouldn't get into all the timezone stuff. If you've ever used the journal functions in outlook you'll get what I mean about the type of data, but in an outlook calendar sort of view.

b. Task list. - is this where product/process/application parts are? Something like:

Sales Force Automation
Customer Service & Support
Marketing Automation
Reporting & Analysis

Or this is more like a home page with chapters: Our approach Technology tools Customer Support and Services Partners

>>>>>> This is like the outlook tasks view. Literally a list of things that need to be done in your day. Think of the steps in closing a deal as individual tasks and they would be the entries in the list. A specific task has all the detail information like in outlook but even more because it is specific to a sales process so it is linked to the opportunities, issues, contacts, accounts, etc. You pretty much would never have any task that isn't related to any of these things and they are all related to each other.

c. Issue list - explaining what the CRM/SFA issues are and why CRM/SFA are needed? Sort of like 3P's of The Three P's of Sales Success - People, Process & Protocol?

Basically, imagine if you were a sales guy and all your customers, peers, boss, everybody was on the same huge Exchange system using Outlook. Have you used outlook in a corporate environment before? Or maybe Lotus Notes or some other groupware? When everyone is on the same platform you can just send them meeting requests, assign tasks, etc. You can view the same folders and chat boards and so on. An online CRM is like that only including your customers in the loop too. So the issues list would be a list of complaints, problems, questions from other sales people, or yourself, or your customers.

Each issue has an answer and can either be visible to just people inside the company or also visible to the customer. Like a knowledgebase or faq or something. A place to track both the issues and the answers and the discussion leading to the answers for each opportunity (possible sale), or account (company that has opportunities).

d. Account list - partners? clients? Who should be place there (aside of Enron, of course)? Any realistic sounding ones? >>>>>> Let's say it's a field service company called The Building Stuff Company. They sell a/c and heating equipment. Their customers are Mom & Pop Diner, Big Bank on The Corner, The Internet Startup, Retail Clothes 'R' Us, and Fandango Brokerage Services. Or whatever. Realism isn't important. e. Contact list. This one is more less clear. Why details has to be a separate page? It may not need to be. Just think Outlook. Don't you have a separate page for the details of your contacts there. There can be a lot of information linked to a contact. The company, the account, the opportunities, the issues, and all the actual contact information. f. opportunities list and details - Job opportunities? Partnership opportunities? >>>>>> Sales opportunities. The target for this is a sales person who is supposed to be just selling. This system helps him do it and gives the boss visibility into who is making what sales call, which calls are generating opportunities and how much are the opps worth, which opps are turning into deals and how much they made. So image outlook on steroids. With all this information specific to selling and tracking the whole sales process from initial targeting, to calling on them, to assessing opportunities, making proposals, closing deals, and servicing the deal. g. forecasting of opportunities. This one I can't guess. >>>>>> You had to get opportunities for this to be useful. An opportunity is possible work or sales you've identified for a particular account or contact. The salesman assigns it a number like ($50,000 or $500 or whatever). Then that is tracked all the way through to the final deal and payment. Forecasting is where you look at the numbers to see who is successfully selling ($$ per person), who is selling efficiently ($$ per call), who are the good accounts ($$ per account), etc. This way they can forecast their revenue and make sure sales people are going to hit their targets and not just messing around.

02-06-02 Ken B.

Am I completely out of touch?
No. But you may not have ever done hardcore selling before.

Why details are separate pages?
Because everything is related to everything else and they all have LOTS of properties. Again, think of Outlook. You can store tons of information about a contact. And that is before you start to link in all the sales specific information like opportunities, or accounts.

What's the name of the Co?
The Building Stuff Company is the brand applied to the snapshots. The company doing the presentation is Ardent Endeavors.

What's the logo?
For the Building Stuff Company. Don't care, just the words I guess. It isn't branded for Ardent because I want to reuse this. What's the presentation size? 800x600? 781x441 (with browser chrome)? >>>>>> 1024x768 minus the browser chrome (as you put it). Will you or somebody else putting the actual copy instead of the fake one later on? >>>>>> We can help with more data after the layout and look and feel shakes out. In reality the data isn't important. The standard latin text would be just fine for anything involving text. And bogus (non-profane or dirty) names you can just make up. However provide us the Photoshop or whatever with text layers and we'll fill in as needed.

Would you need a Photoshop file for that?
This would be good so we can adjust the data as needed for the presentation. I need answers ASAP, of course?


Dang.† You are GOOD. Iíll have to show this around to my clients as what they can get if they work with a professional. Their presentations never look that well put together. kb


Iím just floored.

A) I canít believe I did such a lousy job communicating needs to you.† I really need to have my head examined.† I feel just awful.† Too much time around the techies and not enough with the creatives, I guess.

B) What you produced really was incredible.† No guidance (or lame guidance anyway) and you come up with this for a presentation.† You are definitely getting every referral I can get my hands on.† Truly amazing.† Iíll make it up to you. My word. 02-09-2002 Okay. The details page needs to reflect more than just the text. It is a form much like when you open an appointment in Outlook.

So keep all the header stuff from the page, but replace everything below the menu bar.
It needs to show inputs for modifying and viewing the detailed attributes of the appointment. Since we're just doing the one screen, let's use the meeting for the example. The start and end times for the appointment with little date picker pop-up buttons. Don't show the pop-up just the buttons. A section to list the contacts. In this case just the one guys name.

But it needs a 'lookup' button so you could lookup additional contacts and add them, and a delete so you could remove him from the list. The location "Fandagos Restaurant" with the address below it and with a map it button. It also has a change button so you could change the location. Joe Bob works for...Catsong Construction So there is an attribute labeled: "Account: Catsong Construction" There is an attribute labeled" "Opportunity: New Compressor Unit for Midtown Project" this has a change button next to it. The category of the appointment (sales call, personal, etc.) which is a drop down list. An input box for the notes which shows the long description. An input box for the title which is the same as what shows up in the day view. A section to list the tasks which has "Draft Purchase Order #22" in it. This has an empty checkbox with the label "complete". It also has a delete button for this task entry. The section header has an add button so you could add a new task. A section to list the documents which has "Purchase Order #22" in it. This entry has a sub-entry that says "Checked Out By: Frank Turner" and another one "Checked Out On: February 6, 2002". It also has a button to delete the document and a section header to add documents.

Oh, and on the main calendar, you need scrolling arrows so you could scroll through the hours in the day and also through the months. And you need a button for adding a new event. I've got to work on the presentation for this and for Bridgeport tonight and this weekend, but I'll try and slam out some examples of the other pages. Hopefully you are getting in the groove more with this UI. ken


We've got high-fives all around! The presentation was VERY well received. We got the letter of intent from Gusto! Assuming everything in the due diligence goes okay, we'll have the deal signed next month and we'll be starting development 10 days later. Just wanted you to know the UI went over big and they really like it. Well done!