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

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