SHIPITO SHIPPING CALCULATOR PAGE REDESIGN - CASE STUDY

Redesigned Shipito’s Shipping Calculator with a mobile-first focus, improving usability through interactive UI, unit conversion, and visual enhancements for global users.

See the Live Page

ROLE

• Webb and Mobile Design
• Visual Design
• Created UI elements and content, including draggable sliders to replace input-only fields.
• Implemented units conversion (U.S. and Metric systems)
• Solved UX and usability challenges

INTRODUCTION

This is a mobile-first redesign of Shipito's Shipping Calculator page. I redesigned and optimized the page while adding new features to improve usability and international support. The goal was to make the shipping calculator easier to use, more intuitive, and more visually engaging for users.

JUMP TO SECTION

DESIGN CHALLENGES

The previous shipping calculator was outdated, difficult to use, and required manual input for many variables. It also lacked a units conversion feature. To address these challenges, I focused on solving key usability issues: Replaced original input fields with draggable sliders for shipping weight and package dimensions. Added a units conversion button for U.S. and Metric systems to better serve international users.


See the Live Page

ANIMATED PROTOTYPE

This is an animated prototype to showcase the mobile version's calculator page.

ADDED FEATURES: Draggable Sliders

Instead of using input fields, I added draggable sliders in shipping weight and package dimensions functions, plus a units conversion button for international users.

ADDED FEATURES: Map Selection & Auto-Sort for Country Selection

I added the warehouse location to the graphic selection, incorporated a map, and implemented an auto-sort for the country list.

REVAMPED RESPONSIVE DESIGN

QA (VISUAL AND TECHNICAL): SHIPPING CALCULATOR TESTING & FEEDBACK

Before the page went live, I conducted a QA review of the staging version to ensure accuracy. All issues were fixed, and the page successfully launched. After translation, I conducted another round of QA for the translated pages.