Contest translated automatically. Log in or register, to view the original

Describe the project for which you need to develop the interface design:  

print-on-demand website from 1 copy


Closest competitors:  

https://printto.ua
https://www.ice-print.com.ua/calc_books.php


Main competitive advantages:  

printing books with hardcover


The target audience of the project – who and for what purposes will use it:  

people who use paper books


Main functions of the interface:  

preliminary calculation of the cost of printing a book


Brief scenario of interaction between the interface and the user:  

the client enters the parameters of the book (book size, page color, cover type (soft or hard), print run) and receives the cost of 1 copy and the total order amount 


Interface language:  

Ukrainian


Do you have a website and corporate identity?  

no corporate identity, name, and logo


Is there a prototype of the interface?

  

working prototype of the calculator

https://u000042.stepform.io/LR9L5Nx


calculator layout

https://www.figma.com/file/QDFNkRtWeFirV4JHJcVHkx/%D0%9A%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80-(Copy)?node-id=0%3A1&t=AOH4k5fvMufrLM6J-1


Provide any additional information that you consider important.  

Problem areas - too high Bounce % on the calculator, as the client sees that they are required to perform many uninteresting actions.

The design already exists, but we want to modernize it a bit, simplify it, so it looks more interesting, because currently, the client on this site is forced to fill out long tables.
When the client sees a long pop-up, they simply leave the site. And we lose in conversion.
Perhaps someone has a vision of how to make the interaction with the client more playful.

Therefore, whoever's vision of this interface turns out to be the most interesting for us, we are ready to offer to develop a logo and a website


Link to the website's technical specifications
https://docs.google.com/document/d/169myBWfyQIaNLtD68hNnEzyNgcH20KWfKUVrSDkSmdM/edit?usp=sharing


Example of a design that was liked
Elekomp Store


Updates
Update #1

Dear ladies and gentlemen, designers🙂

Thank you very much for responding to this project.
I have reviewed all your works and realized that my responses will be quite similar and that there was not enough specificity in the competition conditions. Therefore, I need to provide some clarifications and explanations.

Layout
The idea of spreading the calculator interface across three screens (stages) is quite suitable for mobile devices and possibly tablets, but for desktops, we would like to retain the ability to display the calculator on one screen. For example, choosing the display option of the calculator in the backend.
Perhaps this question is more for developers than for designers.


Order of blocks
First, the client chooses the file format from which the book will be printed.
The file format determines the size of the book and how many pages it will have.
Then the client chooses the binding (hard/soft).
And the color of the block of pages (color, black and white).

So the optimal order of blocks in the book parameters is as follows:
image

Minimalist design
That is, we refuse infographics that lack functionality.

Color scheme
We settled on:
light green - main color;
additional - at your discretion;

Stylistics
Less text, overly long dropdown lists, etc.

More icons, graphic solutions, animations, etc.

Example:
image


This menu will produce a list of 12! items when used, as the printing house can make books up to 1200 pages in increments of 100 pages. Such a solution will not be convenient on mobile devices and does not look attractive at all.


Among your solutions are the following:


image


This is better, but has certain drawbacks:
- takes up screen space, which is critical for mobile devices

- if the allowable number of pages increases, the interface will need to be redesigned


There is this solution (implemented on the site fozzyshop.ua):

image


It requires less screen space

Any number entered in the backend is automatically distributed across the slider


Such original and interesting solutions would be nice to see.
Perhaps there are some ideas regarding the animation of icons - rotation, transformation, highlighting, shadows, etc.

Log in or register, to view the original
20 March 2023, 13:40
Update #2

There was also no explanation regarding additional services:
File search
File cost

Already now, the number of additional services has increased, so this option also needs to be scalable.
That is, we have an icon "Additional services", clicking on it opens a pop-up with a list of additional services.
It is better to make the list in the form of icons with a tooltip than in the form of a text description.

Log in or register, to view the original
20 March 2023, 13:56
Update #3

Dear, I apologize for not notifying you earlier, but I would like to point out that, although the interface language in Figma is Russian,
the language of the competition interface is Ukrainian

Log in or register, to view the original
20 March 2023, 14:29
Update #4

Rating system:
5 stars - winner
4 stars - candidates for winner
custom design (icons, fonts, animations), all wishes from the contest description taken into account
3 stars - decent (2-3 flaws) recompositions of the basic (our) design or custom
2 stars - attempts to recompose the basic design or even custom with more than 3 flaws

Log in or register, to view the original
20 March 2023, 18:31
Update #5

Dear, in the process of working on the calculator, we found an interesting idea for the interface layout, so only work based on this mockup will be considered further.


image




Log in or register, to view the original
22 March 2023, 14:00
Update #6

Please use this color for the main theme tone,
#AEC670

Log in or register, to view the original
22 March 2023, 14:15