top of page

TMX SD Mobile app wireframes and High fidelity Prototype

TMX SD high res-02.png

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.


Design the user flow of order taking for the sales agents

just in mind.png

Visual design was made in Just in mind


Wireframes were made in Balsamiq

material circle.png

Material design was used

Existing screens

So far, only the login screen and the dashboard were developed

1-Splash Screen.png

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.

outlet list - incomplete.png
outlet list - pending.png
outlet list - complete.png

A sales agent can look at all the routes and filter the sales channel and the retailer categories in the jouney plan

outlet list - route list.png
outlet list - change view - filter.png
outlet list - change view.png

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

outlet summary information - first time user.png
outlet summary information.png
outlet summary information - no outstanding balance.png

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

outlet summary options.png
outlet summary options - cannot take order.png

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

Brand view  - alternative view 1.png
Brand view - alternative view 2 - mandatory stocks .png
Brand view - alternative view 2 .png

4: Merchandising

After selecting the brands, the agent reviews the planogram of the brands in display and rearranges their placement for in-store promotion

Merchandizing - option 1  - planogram tab.png
Merchandizing - option 1 - capture view - more than 4 images.png

5: Inventory Check and Order Placement

After reviewing and rearranging display products, the sales agent enters the quantity of each brand's SKUs.

stock check and order placement - 10 sku's ordered.png
stock check and order placement - expanded view.png
stock check and order placement - remove 10 SKU's ordered copy.png

6: Cash Memo

The sales agent can review the cash memo/invoice of the orders taken

cash memo  - expanded.png
cash memo copy.png
select payment method - pay order selected.png
select payment method - capture signature.png

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

dash board filters.jpg

2: Journey Details

journey plan.jpg
journey plan 2.jpg

3: Brand Selection

brand selection copy.jpg
brand selection.jpg

4: Merchandising

merchandising 2.jpg

5: Inventory Check and Order Placement

inventory check and order placement 1.jpg
inventory check and order placement 2.jpg
inventory check and order placement 3.jpg
invoice 2.jpg

6: Cash Memo

Design System

Primary Color



Secondary Color



Typography Colors









Action Buttons





Material Boxes and Sections







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

bottom of page