CSCI 588Fall 05

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Project Status Review IProject Status Review I

Team 26David Jeng (0653)

Sophia Yang (3163)James Chan (4777)

On-Campus

Sales Management System

Topic DescriptionTopic Description Windows-based sales management system that Windows-based sales management system that

allows users to track orders in the system in allows users to track orders in the system in real-real-timetime..

Interactive map allows users to manipulate icons on Interactive map allows users to manipulate icons on the screen to display order and vehicle information in the screen to display order and vehicle information in greater details.greater details.

Provides basic sales management functionalities (all-Provides basic sales management functionalities (all-in-one) such as managing orders/RMAs, customer in-one) such as managing orders/RMAs, customer database, inventory, and tracking capabilities.database, inventory, and tracking capabilities.

Enhanced feature to current technologyEnhanced feature to current technology– Real-time tracking system compared to static text-based Real-time tracking system compared to static text-based

tracking system (www.ups.com).tracking system (www.ups.com).– System integrates with GPS and vehicle tracking systems.System integrates with GPS and vehicle tracking systems.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

System RequirementsSystem Requirements PerformancePerformance

– System shall take no longer than 2 seconds to authenticate and log in System shall take no longer than 2 seconds to authenticate and log in a user.a user.

– System shall automatically log off idle users after 10 minutes.System shall automatically log off idle users after 10 minutes.

FunctionalFunctional– System shall allow users to manage customer orders, RMAs, customer System shall allow users to manage customer orders, RMAs, customer

database, and inventory. database, and inventory. – System shall allow real-time tracking of orders/RMAs in the system.System shall allow real-time tracking of orders/RMAs in the system.– System shall allow the user to interact and manipulate the icons and System shall allow the user to interact and manipulate the icons and

map itself.map itself.

InterfacesInterfaces– System shall display a graphical map for real-time tracking and System shall display a graphical map for real-time tracking and

geographic location of customers.geographic location of customers.– System shall interface with GPS and vehicle tracking system to retrieve System shall interface with GPS and vehicle tracking system to retrieve

real-time information.real-time information.– System shall be designed as a Windows application using the .NET System shall be designed as a Windows application using the .NET

framework.framework.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Navigation MapNavigation Map

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Main Menu

Order Management Tracking Return Material Authorization(RMA)

Add new order

Current order

Cancel order

Order status

RMA status

Add new RMA

Current RMA

Cancel RMA

Login Page

InventoryCustomer Information Management

Inventory information/status

Add new customer

Check customer Information/Order history

Delete existing customer

Modify customer information

User Analysis DiscussionUser Analysis Discussion

User ProfileUser Profile

Cognitive:Cognitive: Spatial/intuitiveSpatial/intuitive Attitude:Attitude: NeutralNeutral

Motivation:Motivation: ModerateModerate Reading Level:Reading Level: Above twelfth gradeAbove twelfth grade

Typing skill:Typing skill: LowLow System System experience:experience:

Moderate/NoviceModerate/Novice

Education:Education: High school High school degreedegree

Task experience:Task experience: ModerateModerate

Application Application experience:experience:

SomeSome Native language:Native language: EnglishEnglish

Use of other Use of other system:system:

Little/noneLittle/none Computer Computer Literacy:Literacy:

ModerateModerate

Frequency of Frequency of use:use:

LowLow Primary training:Primary training: Mandatory formalMandatory formal

System use:System use: MandatoryMandatory Job categories:Job categories: Manager/SalesManager/Sales

Turnover rate:Turnover rate: ModerateModerate Other tools:Other tools: Telephone/E-mailTelephone/E-mail

Task Task importance:importance:

HighHigh Task structure:Task structure: High/ModerateHigh/ModerateIntroduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes –

Conclusion

User Analysis Discussion User Analysis Discussion (continued(continued))

User CharacteristicsUser Characteristics- Sales people at Wintec- Managers who are responsible for the sales

department- Familiarity with interfaces of Windows

applications - Familiarity with the sales ordering processes- Familiarity with reading maps

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

User workloadUser workload- Regular usage by sales people at Wintec- Regular usage by sales people at Wintec

- Generally adding new information into the - Generally adding new information into the system and checking the status of themsystem and checking the status of them

User EnvironmentUser Environment- Office and warehouseOffice and warehouse- Working alone and sometimes with othersWorking alone and sometimes with others- Desktop computer systems, handheld Desktop computer systems, handheld

computers and laptops connected to the computers and laptops connected to the company networkcompany network

User Analysis Discussion User Analysis Discussion (continued(continued))

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

User Analysis Discussion User Analysis Discussion (continued(continued))

Dialog Style SelectedDialog Style Selected– MenusMenus

Task selectionsTask selections Ease of useEase of use IntuitiveIntuitive

– Fill-in FormsFill-in Forms Order/Customer information inputOrder/Customer information input Ease of useEase of use

– Direct manipulationDirect manipulation Map Map IntuitiveIntuitive

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Task Analysis Task Analysis

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

OrderManagement

Sales Personnel

Orders

Inventory Management

Send request

Item number

Item info &

status

In/Out of Stock

Add/Check/Remove Order

Inventory

Inventory

Section

Order info & confirmation

Order i

nfo &

confirm

ation/fa

ilure

Item number

Item info & status

Order & Inventory ManagementOrder & Inventory Management

Task Analysis Task Analysis (continued)(continued)

Tracking & RMA ManagementTracking & RMA Management

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

TrackingManagement

Sales Personnel

Orders

RMA Management

Send request

RMA num

ber

RMA inform

ation

Order number

RMA

Send request

Order information

Order/R

MA

informatio

n

Add/Check/Remove RMA

RMA info & confirmation

RMA info & confirmation

Task Analysis Task Analysis (continued)(continued)

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Customer ManagementCustomer Management

Sales Personnel CustomersCustomer

ManagementCustomer

information

Customer number

Customer information

Customer selection

User Analysis Discussion User Analysis Discussion (continued(continued))

I/O DevicesI/O Devices– InputInput

KeyboardKeyboard MouseMouse

– OutputOutput LCD/CRT MonitorLCD/CRT Monitor

Visual DesignVisual Design General Style GuideGeneral Style Guide

– All interface designs will be viewable on a minimum All interface designs will be viewable on a minimum screen resolution of 640x480.screen resolution of 640x480.

– Standard Windows controls will be used.Standard Windows controls will be used.– Upper left corner of each screen will have the Wintec Upper left corner of each screen will have the Wintec

logo.logo.– Upper right corner of each screen will have a “Back” Upper right corner of each screen will have a “Back”

button with the exception of the main menu.button with the exception of the main menu.– Center top displays name of the system.Center top displays name of the system.– Each sub-menu will have a bar across the top that is Each sub-menu will have a bar across the top that is

color-coded with the navigation button’s color.color-coded with the navigation button’s color. A sub-title of the current task will be displayedA sub-title of the current task will be displayed

Navigation buttons will contain an icon of Navigation buttons will contain an icon of approximately 48x48 pixels to denote the approximately 48x48 pixels to denote the task/action.task/action.

Tooltips will be used on all navigation elements.Tooltips will be used on all navigation elements.Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes –

Conclusion

Style GuideStyle Guide(continued)(continued)

ColorsColors– All interfaces should maintain the Wintec theme All interfaces should maintain the Wintec theme

and colors (e.g. blue, gray, white) at the least.and colors (e.g. blue, gray, white) at the least. FontsFonts

– Consistent fonts are used throughout all screens Consistent fonts are used throughout all screens (e.g. Sans-Serif).(e.g. Sans-Serif).

– Avoid hard-to-read or non-standard fonts such as Avoid hard-to-read or non-standard fonts such as Calligraph, Papyrus, Script MT Bold, etc…Calligraph, Papyrus, Script MT Bold, etc…

– All titles and headings should use a font of size 16 All titles and headings should use a font of size 16 while all other contents should use font size 10.while all other contents should use font size 10.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Icons/Symbols UsageIcons/Symbols Usage

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Task iconsTask icons Orders, RMA, Inventory, etc…Orders, RMA, Inventory, etc…

Vehicle Vehicle identification/markersidentification/markers UPS, FedEx, and DHLUPS, FedEx, and DHL

Destination markerDestination marker Denote delivery locationDenote delivery location

Map navigationMap navigation Zoom in and outZoom in and out

Main Screen DesignMain Screen Design Screen divided into three parts:Screen divided into three parts:

– Upper: logo, name of system, log out Upper: logo, name of system, log out button, and welcome message for button, and welcome message for user.user.

– Left: message box that provides Left: message box that provides notifications of important messages.notifications of important messages.

– Right: navigation elements.Right: navigation elements. Simple use of colorsSimple use of colors

– White background makes reading White background makes reading easier for user.easier for user.

– Black text on light color background.Black text on light color background.– Navigation buttons are color-coded.Navigation buttons are color-coded.

Big buttons for easy selection.Big buttons for easy selection.– Avoids accidental clicks.Avoids accidental clicks.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Login ScreenLogin Screen

Initial screen Initial screen displayed by displayed by system.system.

User enters login User enters login information.information.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Main MenuMain Menu Provides access to Provides access to

all functions of the all functions of the system.system.

User clicks on User clicks on tracking tracking management.management.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Tracking ManagementTracking Management

All processed orders in the system are displayed.All processed orders in the system are displayed. Status bar shows total number of orders, orders in delivery, Status bar shows total number of orders, orders in delivery,

and orders that have been delivered.and orders that have been delivered. User can go back to main menu by clicking on the “Back” User can go back to main menu by clicking on the “Back”

button on top right.button on top right. Switch between orders and RMAs using buttons on left side.Switch between orders and RMAs using buttons on left side. To use real-time tracking, user clicks on “View Map” button.To use real-time tracking, user clicks on “View Map” button.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Real-Time TrackingReal-Time Tracking Selected item is displayed Selected item is displayed

on mapon map– Main icon represented by Main icon represented by

actual vehicle appearanceactual vehicle appearance Green and gold dot Green and gold dot

represent other deliveries represent other deliveries in progressin progress– Use simple icon to reduce Use simple icon to reduce

clutter on mapclutter on map Delivery destination is Delivery destination is

represented by blue icon represented by blue icon with outline of a house.with outline of a house.

Vehicle status is updated Vehicle status is updated via GPS and vehicle via GPS and vehicle tracking system.tracking system.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Options MenuOptions Menu

Right click on icon Right click on icon to display drop-to display drop-down menudown menu– Cancel deliveryCancel delivery– Send message to Send message to

delivery driver’s delivery driver’s handheld devicehandheld device

– Hide destination Hide destination icon on mapicon on map

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

ZoomingZooming

User can view map at different zoom User can view map at different zoom level using icons.level using icons.

Automatically recalculates vehicle Automatically recalculates vehicle positions with respect to map view.positions with respect to map view.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Customer Relations Customer Relations ManagementManagement

Retrieves list of Retrieves list of customers from customers from database system.database system.

Retrieves GPS Retrieves GPS location of location of customers and customers and displays them on displays them on the map denoted the map denoted by red dots.by red dots.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Tooltips UsageTooltips Usage

Mouse over red Mouse over red dot (customer) dot (customer) to display to display customer customer information in information in greater details.greater details.

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Edit Customer InformationEdit Customer Information

Fill-in forms used Fill-in forms used to edit customer to edit customer informationinformation

Drop-down menus Drop-down menus for easy selectionfor easy selection

Large buttons to Large buttons to avoid accidental avoid accidental clicksclicks

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion

Closing RemarksClosing Remarks ToolsTools

– Programming languages: C#, .NETProgramming languages: C#, .NET– Development environment: Visual Studio .NET 2003, Adobe Development environment: Visual Studio .NET 2003, Adobe

PhotoshopPhotoshop Lessons learnedLessons learned

– Not as easy as it seems when designing interfacesNot as easy as it seems when designing interfaces– Design from user’s perspectiveDesign from user’s perspective

Remaining plansRemaining plans– Improve upon and complete tracking and customer management Improve upon and complete tracking and customer management

functionalitiesfunctionalities Add 3D map feature possiblyAdd 3D map feature possibly

– Implement rest of functionalitiesImplement rest of functionalities Ordering/RMA and inventoryOrdering/RMA and inventory

– Add more icons and visual elements.Add more icons and visual elements.

Slides available online at:Slides available online at:http://www-scf.usc.edu/~jameswch/csci588review1.ppthttp://www-scf.usc.edu/~jameswch/csci588review1.ppt

Introduction – Description – Requirements – Navigation – User Analysis – Design – Main Screen – Prototypes – Conclusion