The making of the Mili website layouts

Overview• Process

Diving into the topic: studying the competition, watching videos and reading interviews.

mili process fedose 01

To get a start with the design concept, making first sketches and showing them to the art director.

mili process fedose 02

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

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

Simultaneously making the first attempt at designing the account page.

mili process fedose 06

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

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

Inviting another designer who makes new sketches.

mili process 00
mili process 01
mili process 02
mili process 03
mili process 04
mili process 05
mili process 06
mili process 07
mili process 08

All bad. Breaking down the application process into parts and creating yet another design.

mili process 11
mili process 12
mili process 13
mili process 14
mili process 15
mili process 16

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 21
mili process 22

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 new 01

Deciding to show growth instead.

mili process new 02

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

The art director approves. Elaborating.

mili process 27
mili process 28

Trying another style, inviting more designers to join the effort.

mili process 29
mili process 36
mili process 37
mili process 38

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 40
mili process 41

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 43
mili process 44
mili process 45
mili process 46

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

We need to show that clients use the service and trust it. Placing borrower reviews right on the main screen.

mili process 48

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

Getting ready for The New Year and creating new alternative backgrounds for testing.

mili process 50
mili process 51
mili process 52
mili process 53
mili process 54
mili process 55

Taking note of all the bugs.

mili process 56
mili process 57

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

Assembling a lorem ipsum page.

mili process fedose 11