DS-MATT needed a new app design and created a contest on 99designs.
A winner was selected from 22 designs submitted by 3 freelance designers.
We are developing a Customer Relationship Management application (CRM), that will integrate into Opencart (an open source PHP shopping cart). The system will track interaction with our sales team and various businesses, show quotes and order history, as well as contacts at the business/organization.
We are looking for an efficient use of visual communication (colors/icons/layout) to properly guide a user through the software, making it easy to use and obvious what each feature of the UI is for and does.
We like Material Design and Flat UI, but want to our application to still work with Opencart's admin design (https://demo.opencart.com/admin/).
CRM for Opencart
The Mains Screens for the app are:
1) Business/Organization Form - The form that the user will input a business or organization's information into. The form will have the following form fields and form field types:
Business Info section -
Name - Text input
Website - Text input
Facebook Page - Text input
Account Manager - Select Dropdown (I recommend styling similar to https://selectize.github.io/selectize.js/ --> email contact example)
Phone Number section -
Label/title for the phone number - text + number input
Button to allow adding multiple phone numbers
Tags - Select Dropdown with autocomplete ( similar to https://selectize.github.io/selectize.js/)
Brands - Select Dropdown with autocomplete ( similar to https://selectize.github.io/selectize.js/)
Contact's Section -
Select Dropdown with autocomplete (I recommend styling similar to https://selectize.github.io/selectize.js/ --> email contact example)
Probably a table below showing all the contacts that have been added to the business/organization (since there can be multiple people associated with an organization).
Addresses Section -
Similar to an address book for an eCommerce system, this will have the following inputs:
Label/Title
Address Line 1
Address Line 2
City
State
Zip code
Country
Select box/Radio Button/Checkbox to indicate if this is the primary/default SHIPPING address
Select Box /Radio Button/Checkbox to indicate if this is the primary/default BILLING address
---
2) The Business/Organization View - The main page that shows the businesses/Organization's information. This is the main screen with all the relevant information/interaction. This will include a timeline of interactions/activities.
Info on this view includes:
Business Name + Icon/Logo
Website URL
Phone Numbers for business
Address (also maybe show a google map with pin)
Labels
Contacts at the business (Name + Business title, Phone number and email)
Sections for Main View:
Activity Feed - Similar to a Facebook Wall but shows recent activity for the Business/Organization (such as "Quote created" or "Phone Number Updated").
Quotes - A table listing out all the quotes created for the customer, the table should have the following columns of information - Quote Number, Quote title, Total Value of the Quote, Quote Date, Quote Status. Also include a stat for total number of proposals and a stat showing the percentage of quotes they end up converting on.
Sales - A table listing out all the sales for the customer, the table should have the following columns of information - Order Number, Total Value of the order, Order Date, Order Status.
Locations - This is an address book for the Organization and lists all the addresses.
Payment Info Section - This will show all the payment methods this business has, such as Net 30 Terms, Credit Card on File, and who the main contact is for payments/accounting.
Stats Sections - The totals sales for this customer, the rank of this customer based on sales total vs. other customers (with a toggle to be life time vs. year to date).
-----
3) The Record/Schedule Activity Modal - This is a modal that will allow the user of the application to schedule a meeting or record an interaction with a customer. This is essentially a web form.
the Form will start with a drop down having the user select what type of activity they want to record. The modal might start with some text saying "What would you like to do?" and a select drop down with options like:
- Record a Note
- Record a phone call
- Record a visit
- Record an email
- Schedule a phone call
- Schedule a visit/meeting
- Assign a task
Each activity will have various inputs but they are:
- Title (required)
- Description (optional)
- Assignee(s) - can be multiple admin users (at least one admin user required)
- Associated customer(s) - can be multiple customers (optional)
- Associated organizations (optional)
- Due date/scheduled date (optional)
- Duration/scheduled time (required)
- Ability to sync to Google calendar and send invites to customers and admin users associated with the activity. (Optional check box)
----
4) Business/Organization's List View - shows a list of all the organizations in the application, along with information about each organization in a table format. The table columns should include:
Logo/Image
Business Name
Default Address
Total Sales
Customer Rank
Account Manager
There needs to be a toggle on this form to switch between life time and year to date, along with a button to add new businesses/organizations, and a button or way to delete businesses/organizations. Finally there should also be a way to filter the list of businesses/organizations.