Ukraine Front Line - Website Redesign

The Overview

Ukraine Front Line serves as a unique platform facilitating the procurement and swift delivery of essential supplies directly to Ukrainian troops on the front lines. While not a traditional eCommerce site, it operates similarly, bridging the gap in aid by offering targeted assistance such as medical supplies and tactical equipment, ultimately enhancing the operational capabilities and survival of those fighting for freedom in Ukraine.

The Problem

The existing Ukraine Front Line donation website struggles with poor user engagement, a lack of trust, outdated UI design, and information overload. These issues have made it harder for the website to receive contributions.

The Solution

The solution involved a full redesign of the website to improve its performance. Modernized the design, ensuring consistency in visuals like images, icons, and text style. This not only enhanced the website's appearance but also made it easier to use on different devices. The aim was to make the website more appealing to visitors, encouraging greater support for Ukraine's frontline troops.

Wireframe

UI Design

1. Home Page (Desktop Version)

1.1 Home Page (Mobile Version)

1.2 Video Pop-up (Mobile Version)

1.3 Side Bar (Mobile Version)

2. About Page (Desktop Version)

2. About Page (Mobile Version)

3. Merchandise Page (Desktop Version)

3. Merchandise Page (Mobile Version)

4. Product Detail Page (Desktop Version)

4.1 Product Detail Page (Mobile Version)

4.2 Sharing Option Bottom Sheet (Mobile Version)

5. Size Guide Pop-up (Desktop Version)

5. Size Guide Bottom Sheet (Mobile Version)

6.1 Shopping Cart Page (Desktop Version)

6.2 Remove Product Popup (Desktop Version)

6.1 Shopping Cart Page (Mobile Version)

6.2 Remove Product Popup (Mobile Version)

7. Checkout Page (Desktop Version)

7. Checkout Page (Mobile Version)

8. Contact Page (Desktop Version)

8. Contact Page (Mobile Version)

9. Donation Page (Desktop Version)

9. Donation Page (Mobile Version)

10. Donation Page (Desktop Version)

10. Donation Page (Mobile Version)

Colors

Typography

Components

Thank you for watching! 💖