Designed By
Eden Efraim
Role
UI Designer
Platform
Mobile App
Industry
Delivery
Year
2022
On-demand Delivery App
Designed a user-friendly delivery app that improves logistics for businesses and individuals, focusing on packages, envelopes, and items.
SOFTWARE USED
Content Research
Shipping
Moving Packages and loads from one location to another
Delivery Guy
Individual transporting shipments or goods between locations
Shipper
One seeking to relocate their shipment between locations
Delivery Order Process Steps
Start
Entering Pickup and Delivery Addresses
Selecting Transportation Method
Selecting Transportation Method
System-generated Order Output
End
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
STAGE 1
Choose delivery option
STAGE 2
Input package details
STEP 4
The system suggests a preferred type of transportation, but the choice is ultimately up to the customer
STEP 5
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
Insights
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.
Strengths
A video captures user attention, creates a positive initial impression and a strong CTA button.
Weaknesses
-
Title placement distracts from video focus
-
Action button wrongly leads to registration instead of place an order
Conclusions
-
Video implementation: Grabs user attention
-
CTA button: Requires clarification of its purpose
Recommendation
-
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
User Verification through Mobile Validation
Entering Pickup and Delivery Addresses
Shipping Preferences
Divided into 2 stages
Selecting Transportation Method
Picking Date and Time
System-generated Order Output
Managing Payments
A clear validation message will then be displayed, confirming successful processing
Delivery Status Screen
Typography
For English I used
Inter
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
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
Explore My UI Design and Prototype
