TMX SD Mobile app wireframes and High fidelity Prototype
The Product
TMX-SD is a Cloud-based software product that applies the power of Mobility to streamline Secondary Sales and Distribution operations. It provides sales agents in the field with the complete range of functions run on smartphones that communicate with back-office systems in real-time.
Objective
Design the user flow of order taking for the sales agents
Visual design was made in Just in mind
Wireframes were made in Balsamiq
Material design was used
Existing screens
So far, only the login screen and the dashboard were developed
Low Fidelity Prototype
1: Journey Plan
The user navigates to the planned calls to access all its journey plans. The journey plan screen is populated with visits a sales agent is required to do.
A sales agent can look at all the routes and filter the sales channel and the retailer categories in the jouney plan
2: Journey Details
After selecting a store, the user can use the in-app navigation to locate the store as well as look at the last order details and a shortcut to call the point of contact in the store
After arriving at the store, the sales agent can
-
Take an order
-
Replace a previous order
-
Return an order
-
Not take an order due inaccessibility of the store
3: Brand Selection
In event that the sales agent is able to access the store, they select the brands of the SKU's that need to be ordered, replaced or return. For now we would be reviewing the flow of taking an order
4: Merchandising
After selecting the brands, the agent reviews the planogram of the brands in display and rearranges their placement for in-store promotion
5: Inventory Check and Order Placement
After reviewing and rearranging display products, the sales agent enters the quantity of each brand's SKUs.
6: Cash Memo
The sales agent can review the cash memo/invoice of the orders taken
7: Payment Details
The last step is to determine the payment method and capture the signature of the retailer placing the order
High Fidelity Prototype
1: Journey Plan
2: Journey Details
3: Brand Selection
4: Merchandising
5: Inventory Check and Order Placement
6: Cash Memo
Design System
Primary Color
#4CAF50
rgb(76,175,80)
Secondary Color
#0091EA
rgb(0,145,234)
Typography Colors
#424242
rgb(66,66,66)
#757575
rgb(117,117,117)
#9E9E9E
rgb(158,158,158)
#BDBDBD
rgb(189,189,189)
Action Buttons
#D84315
rgb(216,67,21)
#4CAF50
rgb(76,175,80)
Material Boxes and Sections
#F5F5F5
rgb(245,245,245)
#E0E0E0
rgb(224,224,224)
Typography
Roboto
Thin 100, Light 300, Normal 400, Bold 700
Page Title 18px weight: 700; font-size: 18px
Tabs font-weight: 400; font-size: 16px
Body font-weight: 400; font-size: 14px
Checkboxes and Radio labels font-weight: 400; font-size: 14px
BUTTONS font-weight: 400; font-size: 14px;
Field Floating Labels after focus font-weight: 700; font-size: 12px
Field validation and help labels font-weight: 400; font-size: 12px