top of page

Designed By
Eden Efraim

UI Designer

Mobile App



On-demand Delivery App

Designed a user-friendly delivery app that improves logistics for businesses and individuals, focusing on packages, envelopes, and items.

Figma Icon.png
Miro Application_edited.png

Content Research


Moving Packages and loads from one location to another

Delivery Guy

Individual transporting shipments or goods between locations


One seeking to relocate their shipment between locations

Delivery Order Process Steps


Entering Pickup and Delivery Addresses

Selecting Transportation Method

Selecting Transportation Method

System-generated Order Output


Providing User Information

Shipping Preferences

Divided into 2 stages

Picking Date and Time

Managing Payments

Further Information

STEP 1 to STEP 2

User Verification through Mobile Validation


Choose delivery option


Input package details


The system suggests a preferred type of transportation, but the choice is ultimately up to the customer


The current time and date are automatically entered, but they can be modified if needed

STEP 6 to STEP 7

A clear validation message will then be displayed, confirming successful processing

Competitive Analysis



Visual Trends

  • Homepage video: Showcases order process and delivery journey

  • Alignment with company values: Emphasizes optimism and speed

Defining Concept

A CTA title describing the service, along with an CTA button and chat option.


A video captures user attention, creates a positive initial impression and a strong CTA button.


  • Title placement distracts from video focus

  • Action button wrongly leads to registration instead of place an order


  • Video implementation: Grabs user attention

  • CTA button: Requires clarification of its purpose


  • Break ordering into smaller steps.

  • Make sure CTA is working

  • Consider using video/animation for a user-friendly ordering guide

  • Enable a quick delivery order

Low-Fidelity Wireframes

Providing User Information

Group 99.png

User Verification through Mobile Validation

Screen - 01-07.png

Entering Pickup and Delivery Addresses

Group 101.png

Shipping Preferences

Divided into 2 stages

Group 103.png

Selecting Transportation Method

Screen - 01-10.png

Picking Date and Time

Screen - 01-09.png

System-generated Order Output

Screen - 01-03.png

Managing Payments

Screen - 01-08.png
Screen - 01-02.png

A clear validation message will then be displayed, confirming successful processing

Delivery Status Screen

Screen - 01-11.png


For English I used

Designed by Rasmus Andersson

Titles (Headers)

  • Font: Reforma

  • Weight: Bold (700)

  • Size: 18pt

  • Line Spacing: 1.2

Subtitles and Highlights

  • Font: Reforma

  • Weight: Medium (500)

  • Size: 15pt

  • Line Spacing: 1.2

  • Color: #045CB8 (Blue)

Body Text

  • Font: Reforma

  • Weight: Regular (400)

  • Size: 14pt

  • Line Spacing: 1.4

Color Palette

#FF9305 (Orange-Yellow)

This color is a lively and vibrant shade of orange-yellow, that stands out and grabs your eye.

#056CCA (Bright Blue)

This color is a vibrant shade of bright blue, evoking feelings of clarity and trustworthiness.

Gradient #056CCA to #0085FF

Transitions from a vibrant shade of bright blue to a lighter and more saturated shade of blue.

Gradient #056CCA to #056CCA

This gradient demonstrate the mix of the two main colors associated with the brand

Style Guide

Components and BTN's

Primary Button

Secondary Button

Ghost Button

Social Sign-In

Google BTN.png
FB BTN.png

Progress Indicator

Brand Motif's

Page Indicator

Icons and Pictograms

Delivery Icons and Indicators

Feedback, Info and Confirmation Icons

Transportation Icons

Progress Bar Incomplete Option

Progress Bar Completed Version

Showcasing Key UI Screens

  STEP 1  |  Providing User Information  

  • User initiates a 5-step process.

  • Progress bar at the top displays the steps.

  • Step titles guide the user through the process.

  • User provides personal details.

  • User agrees to terms and conditions.

  • Initial price of 20 shekels is communicated.

  • Options to sign up via Facebook or Google

  STEP 2  |  Pickup & Delivery Addresses

  • User enters the pickup and drop-off addresses.

  • The application calculates and displays the distance between the two addresses.

  • The price at the bottom dynamically adjusts based on the distance.


  STEP 3  |  Delivery Type Selection

  • User defines the delivery type:
    Envelope, Package or large package.

  • User specifies wether the delivery is valuable that requires extra security or a regular delivery. 

  STEP 3  |  Input Dimension Details

  • User is presented with pictograms that indicate the chosen delivery type.

  • User inputs dimensions, including weight, length, width, and height.

  • The price at the bottom of the screen updates dynamically based on user inputs.

  STEP 4  |  Selecting Transportation

  • Users view three categories of transportation methods.

  • The system emphasizes a recommendation based on the user's input.

  • The user has the freedom to choose any method according to their preference.

  STEP 5  |  Picking Date and Time

  • User inputs pick-up and drop-off dates.

  • User selects pick-up and drop-off times.

  • By default, the system displays the current date and time for user convenience.


Payment Confirmation Screen

  • Successful payment redirects to Payment Confirmation Screen

  • System displays a reassuring success message

  • Generates and presents a unique security code

  • Conveniently share or copy the security code

Delivery Status Screen

  •  Track your delivery order with ease

  •  Reference your order using the displayed delivery number

  •  Visualize delivery progress via a dynamic progress bar

  • Contact the delivery person via WhatsApp for real-time updates

  • Stay informed about the estimated arrival with delivery date and time

  • Follow the delivery route on an interactive map

Payment Method Selection

The user can choose from various payment options, such as credit/debit card, Apple Pay, or other secure methods.

Order Confirmation Screen

  • The screen presents a visual summary of the order using intuitive pictograms, making it easy for the user to comprehend all order details visually and contextually

  • The user can easily review and confirm the order with confidence

Mask group-2.png
New Mockup for UI.png
Last Mockup.png

Explore My UI Design and Prototype


Thanks for watching

Let's Connect!

Your message has been received.

I look forward to connecting with you soon!

bottom of page