A mobile app to get quotes, track shipments and schedule pickup.

M&P

The Challenge for us

M&P (Muller and Phipps) is a well-established company which provides telecom distribution, financial and logistics services in Pakistan and also in the Asia pacific region.

The developers of this application, a company called NextGeni, approached us with an idea to design a mobile app where customers could schedule pick-up and delivery of parcels in a quick and easy manner. M&P outlined the following targets:

  • 1User sign-up should be quick and seamless.
  • 2UI should be easy-to-use so that we ensure continued business engagement with customers.
  • 3Ensure the app is in-line with the M&P brand image.

Step 1

Define

First, we identified what the user is trying to accomplish and the barriers they may face. Keeping all possible scenarios in mind, we came up with a process-flow containing every possible touch point. This enabled us to see the complete picture and flesh out a plan for how users would navigate the app.

M & P User Flow

wireframes

The four important parameters around which we designed the wireframes were:

  • 1 Tracking of shipments (via barcode, mobile number or account number).
  • 2Booking a pickup (from home, office or anywhere)
  • 3Calculating shipping costs (depending on time, location and network reach etc)
  • 4Locating and contacting nearby M&P Centers (for pick-up and delivery or for customer service related inquires)

We needed to design a user experience which allows our customers to perform bookings with ease. After a few iterations, we achieved the desired information architecture and wireframing.

M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe
M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe M&P wireframe

Step 2

Design

Next, it was time to focus on the visual design of the entire app. We adhered to M&P branding guidelines while choosing the color palette and form elements but improved the iconography and illustrations to give the app a modern, sleek and professional feel.

M&P icons
M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup
M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup M&P Mockup

Color Palette

M&P Color Palette
Great job! Can't remember the last time someone did 80 changes without error.
- Farzal Dojki, CEO - NextGeni
Web App

Xaqt

left-arrow previous
Mobile App

Lingviny

next right-arrow