Project View

Role - UI/UX Designer
Team Size - 1

This is the Purchase Order Management System Application where the business associates and dealer have the permission to place their order by selecting product items and pay the bill amount directly via online payment gateway, RTGS or cheque details facility. In this app the manufacturer can view how and what products are order by the dealers as well as staff assist to help in delivery of orders.

Business Goals
  • Reduce the manpower efforts
  • Accuracy in Payment terms
  • Remove Creditability
  • Increase Revenue
  • Avoid Discussion inbetween Manufacturer and Dealers
  • View Staff Work Details
Dealers Goals
  • Dealer Can Place Order Online
  • View Price and Discount Schemes
  • Business in Cash / Instant Payment

Introducing AAPL Purchase Order Management System

Clear Information Architecture / User Simple Work Flow

Work Flow

Design Process

Ideation / Crafting Pixels / Supporting Developers
  • Requirement Gathering, business and user goals understanding
  • Use case analysis
  • Design Wireframes
  • Design Mockup and Prototyping.
  • Usability test and design modifications.
  • Design Component base Architecture
  • Develop FrontEnd in ReactJS
  • Manual Testing at Design and Client End
  • Live on Server
  • Support
design process of purchase order Management system

Wireframe

Simple UI / UX Design

A Screen 1 - Super Admin Login

Admin Login - Super Admin
A Screen 2 - List of Employee - Super Admin

List of Employee - Super Admin
A Screen 3 - Employee Profile - Super Admin

Employee Profile - Super Admin
A Screen 3-1 - Employee Profile - Super Admin

Employee Profile Edit - Super Admin
A Screen 4 - Add Employee Profile - Super Admin

Add Employee Profile - Super Admin
A Screen 5 - Add Employee Profile Fill

Add Employee Profile Fill - Super Admin
A Screen 6 - Deleted Employees - Super Admin

Deleted Employees List - Super Admin
A Screen 7 - List of Dealers - Super Admin

List of Dealers - Super Admin
A Screen 7-1 - Edit Dealers Profile - Super Admin

Edit Dealers Profile - Super Admin
A Screen 8 - List of Dealers Previous Order - Super Admin

List of Dealers Previous Order - Super Admin
A Screen 9 - List of Dealers Previous Order - Invoice - Super Admin

List of Dealers Previous Order - Invoice - Super Admin
A Screen 10 - Add Dealers Fill - Super Admin

Add Dealers Fill- Super Admin
A Screen 10 - Add Dealers - Super Admin

Add Dealers - Super Admin
A Screen 11 - Deleted Dealers - Super Admin

Deleted Dealers - Super Admin
A Screen 12 - Order Reports - Super Admin

Order Reports - Super Admin
A Screen 13 - Order Reports - Super Admin - Sort By

Order Reports - Super Admin - Sort By
A Screen 14 - Order Report - Invoice - Super Admin

Order Report - Invoice - Super Admin
D Screen 1 - Login - Existing User Dealer

Login - Existing Dealer
D Screen 2 - New User Sign up Dealer

New User Sign up Dealer
D Screen 3 - New Order Dealer

New Order Dealer
D Screen 4 - Payment Dealer

Dealer Payment Option
D Screen 5 - Payment Confirmation Dealer

Payment Confirmation Dealer
D Screen 6 - Order Reports Dealer

Order Reports Dealer
D Screen 7 - Order Reports - Sorting Dealer

Order Reports - Sorting Dealer
D Screen 8 - Cancelled Reason Order Reports Dealer

Cancelled Reason Order Reports Dealer
D Screen 9 - Invoice - Dealer

Invoice - Dealer
E Screen 1 - Employee Login

Employee Login
E Screen 2 - Order Report - Employee Section

Order Report - Employee Section
E Screen 2 - Sort Order Report - Employee Section

Sort Order Report - Employee Section
E Screen 3 - Invoice - Employee Section

Invoice - Employee Section
E Screen 4 - Profile - Employee Section

Profile - Employee Section
E Screen 5 - Previous Order Reports - Employee Section

Previous Order Reports - Employee Section

UI Design Elements

Meticulously Designed UI Elements
Grid Layout
Container Fluid
Container Fluid layout

Container
Container layout
Colors
Element Color Code Color
Text Color #212529 #212529
Background Color #343a40 #343a40
Success Notification #28a745 #28a745
Wrong Notification #dc3545 #dc3545
Typography
Used Description
Font Family -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif
Web Icon Font Awesome
h1. Heading 1 2.5rem
h2. Heading 2 2rem
h3. Heading 3 1.75em
h4. Heading 4 1.5em
h5. Heading 5 1.25em
h6. Heading 6 1em
p 1em
table td, table th .8rem
Buttons
Button type 1 dark button
Background Color #338feb
Border Color #338feb
Border Weight 1px
Font Color #fff
Font Size .875rem
Border Radius .2rem
Button type 2 Light button
Background Color #fff
Border Color #17a2b8
Border Weight 1px
Font Color #17a2b8
Font Size .875rem
Border Radius .2rem
Button type 2 dark-button
Background Color #fff
Border Color #343a40
Border Weight 1px
Font Color #343a40
Font Size .875rem
Border Radius .2rem
Button type 2 danger button
Background Color #fff
Border Color #dc3545
Border Weight 1px
Font Color #dc3545
Font Size .875rem
Border Radius .2rem

Tools Used

My Best Knowledge Skills Use to Design Project
Job Use Tools Version
Gathering Requirement Email, Phone, WhatsApp and Meeting Google Drive
Wireframing Axure RP9
Mockups Design Photoshop, Illustrator CS5.5
Development React Js, NodeJs, HTML5, CSS3, Bootstrap4.0.0, Javascript, ES6 Latest
Browser Testing (Desktop) Google Chrome, Mozilla Firefox, Internet Explore Edge, UC browser Latest V - Manual
Browser Testing (Mobile) Samsung Browser and Google Chrome Latest V - Manual
Server (hosting) Linux  

Additional Services

Setup today's very essential services which helps the website gets much more viewers on all search engine and social media

  • Setup Meta Tag Title, Description, Keyword of business on website
  • Generate Sitemap and upload to Google
  • Setup Google Analytic
  • Google Webmaster Search Console Setup
  • Google My Business Account
  • Create Social Media Accounts : Facebook, Twitter, Instagram, Google, Youtube, Location, Whatsapp
  • Website Link to Social Media
  • Email Accounts

Handling Services

Sign the AMC contract to serve the best to the customers

Website and its maintenance

Updation website and backup to save the data

Digital Marketing

Provide the all social media services

Hosting (Server)

Provided the linux base hosting along with email Id's

Other Projects

AAPL

Purchase Management System
Amrut Chaha

Responsive Website Design
ICICI Appathon

Mobile Contact Money Transfer
Caddybook

Golf Mobile App Design

Pixerea Solutions

“Always keen to serve and satisfy our clients”

Each business is different and has its own needs.

Address

36, Koshtipura, Behind Hanuman Galli, Sitabuldi, Nagpur - 440012, Maharashtra - India

Call Us

+91 7709804575 +91 8149018854

Mail Us

pixerea@gmail.com

Quick Links

Products

Services

Training Courses

2009 to Pixerea Solutions. All Rights Reserved