The making of the Mili website layouts
Diving into the topic: studying the competition, watching videos and reading interviews.
![mili process fedose 01](mili-process-fedose-01.jpg)
To get a start with the design concept, making first sketches and showing them to the art director.
![mili process fedose 02](mili-process-fedose-02.jpg)
Deciding to go with an idea of a drum and a live broadcast of issuing of loans. Clarifying the idea further.
![mili process fedose 03](mili-process-fedose-03.jpg)
No go. The idea doesn’t have much life to it and is more suitable for mobile devices. Starting to work on the card and placing a compact slider with a calendar on the main screen to create a visual representation of a payment schedule. Trying various backgrounds and visiting the client to have a discussion.
![mili process fedose 04](mili-process-fedose-04.jpg)
Simultaneously making the first attempt at designing the account page.
![mili process fedose 06](mili-process-fedose-06.gif)
Returning to the concept. Piling more ideas and formats: an interactive story with a treadmill; tiles with clients; main page as a construction kit with articles, facts and links to other sections; a chat dialog that explains the service; two hands doing two things at the same time; using macro photographs to explain the name Mili.
![mili process fedose 07](mili-process-fedose-07.jpg)
The client likes the hands: the right one fills out an application while the left one receives the money. The client also asks to show a design with a simple photo. Preparing a couple of other versions as well.
![mili process fedose 08](mili-process-fedose-08.jpg)
Inviting another designer who makes new sketches.
![mili process 00](mili-process-00.gif)
![mili process 01](mili-process-01.gif)
![mili process 02](mili-process-02.jpg)
![mili process 03](mili-process-03.jpg)
![mili process 04](mili-process-04.jpg)
![mili process 05](mili-process-05.jpg)
![mili process 06](mili-process-06.jpg)
![mili process 07](mili-process-07.jpg)
![mili process 08](mili-process-08.jpg)
All bad. Breaking down the application process into parts and creating yet another design.
![mili process 11](mili-process-11.jpg)
![mili process 12](mili-process-12.jpg)
![mili process 13](mili-process-13.jpg)
![mili process 14](mili-process-14.jpg)
![mili process 15](mili-process-15.jpg)
![mili process 16](mili-process-16.jpg)
Showing to the client. The client doesn’t like it. Another designer comes to rescue by suggesting to connect the application form with something interesting and visual to make sure getting a loan is a pleasant experience.
![](mili-process-slider2-01.jpg)
![](http://img.artlebedev.ru/;-)/x.gif)
![mili process 21](mili-process-21.jpg)
![mili process 22](mili-process-22.jpg)
The art director agrees, the client approves. Developing the idea further. We need to limit ourselves with one object only to make sure the idea is easy to understand. Deciding to go with cakes, and on top of them... How about the creation of the universe?
![mili process 22 01](mili-process-22-01.jpg)
![mili process new 01](mili-process-new-01.jpg)
Deciding to show growth instead.
![mili process new 02](mili-process-new-02.jpg)
The client says the cakes are no go. Microcrediting is a serious business. The art director suggests to replace cakes with coins, and on top of them... The service allows customers to fulfill their dreams, right? What if we use fairy tales? A genie, a magic goldfish, a four-leaf clover? Sketching.
![mili process 25](mili-process-25.jpg)
The art director approves. Elaborating.
![mili process 27](mili-process-27.jpg)
![mili process 28](mili-process-28.jpg)
Trying another style, inviting more designers to join the effort.
![mili process 29](mili-process-29.jpg)
![](mili-process-slider-01.jpg)
![](http://img.artlebedev.ru/;-)/x.gif)
![mili process 36](mili-process-36.jpg)
![mili process 37](mili-process-37.jpg)
![mili process 38](mili-process-38.jpg)
Art director: You need to remove the slogan from the coin and move logo to the bottom. It’s also better to check the result on a screenshot. You need to take the bottommost chicken, genie number 5 and the bottommost fish.
Making corrections.
![mili process 39](mili-process-39.jpg)
![mili process 40](mili-process-40.jpg)
![mili process 41](mili-process-41.jpg)
Thinking how coins will interact with the form.
The client says that their beauty distracts from the main element of the page, which is the form. Simplifying down and adding more usefulness.
![mili process 42](mili-process-42.jpg)
![mili process 43](mili-process-43.jpg)
![mili process 44](mili-process-44.jpg)
![mili process 45](mili-process-45.jpg)
![mili process 46](mili-process-46.jpg)
Moving on to simpler things. To get a loan, customers need an account and a passport. Let’s make it clear: get your passport, fill out a form, get your money.
![mili process 47](mili-process-47.jpg)
We need to show that clients use the service and trust it. Placing borrower reviews right on the main screen.
![mili process 48](mili-process-48.jpg)
The art director suggests to broadcast issuing of loans live on the website. Right this moment people all across Russia are borrowing money.
![mili process 49](mili-process-49.jpg)
Getting ready for The New Year and creating new alternative backgrounds for testing.
![mili process 50](mili-process-50.jpg)
![mili process 51](mili-process-51.jpg)
![mili process 52](mili-process-52.jpg)
![mili process 53](mili-process-53.jpg)
![mili process 54](mili-process-54.jpg)
![mili process 55](mili-process-55.jpg)
Taking note of all the bugs.
![mili process 56](mili-process-56.jpg)
![mili process 57](mili-process-57.jpg)
While the work on the main page is under way, we draw layouts for the approved project of the account page.
![mili process fedose 09](mili-process-fedose-09.jpg)
Assembling a lorem ipsum page.
![mili process fedose 11](mili-process-fedose-11.jpg)