Love train website design

Love train website design

Love train website design

Love Train was one of the projects that I designed in collaboration with Cube 10. The purpose of this product was to receive charitable donations from users by involving the users themselves, which was very successful in shaping this concept.

Product Design / Lead the design team

Product Design / Lead the design team

Product Design / Lead the design team

Apex Website in Framer
Apex Website in Framer
Apex Website in Framer

Client

Client

Love Train

Love Train

Industries

Industries

Charity

Charity

Duration

Duration

6 weeks

6 weeks

Date

Date

Mar 7, 2024

Mar 7, 2024

Desgin Process

The Love Train design process was done in 6 steps. The design process in this project was not linear, and we went back many times to make sure that we were going the right way.


Ideation & Brainstorming

During the ideation and initial formation stages of this project, I participated in several meetings with the clients along with the product manager, and after each meeting the product found a more complete shape. The output of each session was made in the form of a specific document, according to the obtained data. We created the stages of designing the initial user experience based on those data.

Image 00
Image 00
Image 00
User Research

To make this product, we did the required research and benchmarking in several phases. We started the first phase with the review and analysis of competitors and similar products; Websites like Flan and Flan, which were considered the main competitors of Love Train.
With the help of the clients of the project, we were able to meet 20 potential users of Love Train and share the designed questionnaire with them.
The result of this research and benchmark helped a lot with the creation of final product.


User Flow

In order to form the flow process and product structure, we designed UserFlow. The main reason for using UserFlow was to create a correct understanding of the product for clients and developers.

Image 01
Image 01
Image 01
Wireframe Flow

Due to the lack of experience of the clients in digital product management, we converted the wireframes designed after Userflow into the Flow wireframe, so that the flows be clearly defined and the behavior of the product be seen on different pages.


Final UI and Test

In the final design of this product, our effort was to create a design that in addition to the feeling of trust, also induces the feeling of modernity to the users. In this process, we got the most ideas from Airbnb.
Among the important issues of final UI design in this project, we can mention cleanliness, component basedc, harmony between graphic elements, and being up-to-date.

Prototype & Test

After the formation of each flow, we designed prototypes and explained interactions and microinteractions to clients and developers. After designing, usability testing was done in important flows with the help of the designed prototype with a number of possible users, and the result was categorized in regular documents. Some of the results of these tests caused changes in the flow of making wagons, donations, etc
In the process of the final implementation of the product, design and QA testing were done to implement the product in the best way!

And The Final Result 💚

And The Final Result 💚

And The Final Result 💚

All pages are designed for both desktop and mobile. Also, many icon sets and illustrations were specially designed

All pages are designed for both desktop and mobile. Also, many icon sets and illustrations were specially designed