Problem description:

The Costa Rica Institute of Technology (TEC) needed to create a system that allows to request and manage the student scholarships. The client hired a development team that had to learn everything about the business logic, the learning curve was huge. Without a design phase, their work would have taken twice as long and also the budget, not to mention the numerous mistakes that the interface would have incurred. This is why the system needed validated wireframes for the interfaces.

The design solution:

The change from working for years on excel sheets to managing the information in a whole system is huge, so the wireframes must show all the steps that are required to accomplish a process from the beginning to the end. They must transmit confidence to the user in all the possible scenarios, and for doing this it is necessary to analyze all the cases of use that may occur, to translate them into an interface.

Since this is information design, all the elements I used are needed on screen and play a role. There is no decoration in the system, that is not needed when the information is dense and the content is everything that interests the user. This wireframes are hight fidelity and already have the visual appearance for the interface, they also have the real content according to each module, this is very helpful for the development team, because they have a quite realistic guide. All of them passed trough the testing phase and a finale focus group for discussing the design.

Here you can see a flow of wireframes designed for files consultation. They are very detailed and have all the information needed to be implemented, for example, the parameters that will be a part of a combobox. They also show some possible scenarios that will happen in the interaction.

The more specific the wireframes are, the better the user experience will be, because there will not be gaps of design that should be assumed by others.

Projects

Scholarship system design part III - Wireframes