Beca | UX/UI Case study

About

The BECA app is the final result of a UX/UI design project for one of the visual design courses at the Industrial Design Engineering school. Read on to see the final result of this project.🔍

UX/UI design | Prototyping

Industrial Design Engineering, TEC

Roles

UX | UI design & Prototyping

Monserrath Abarca Weber

Angélica M. Rodríguez Delgado

Dayanna Rodríguez Sánchez

About the project

The Costa Rica Institute of Technology (TEC) offers several types of scholarships for its students with financial limitations. Therefore, it is of great value for the institution that students can easily access information about these financial aids.

Within this framework, the objective of this project was to design a tool that would provide students with the respective information about the scholarships offered by TEC, in a dynamic and understandable way.

Design thinking process

For this project, we used a methodology focused on Design Thinking and the process recommended in the Usability Cookbook. We took the user's needs as the central focus of the design, so we used different techniques to validate the design decisions taken at each stage.

Some of the tools we used to clarify user requirements and verify proposed solutions were as follows:

- Interviews
- Mind maps
- Benchmarking
- User personas
- Analysis of the needs
- Information architecture
- Card sorting
- Navigation paths
- Wireframes
- User Test
- Heuristic Evaluation

More about the process

Empathize and Define

The problem

For many students, one of the biggest concerns when deciding to pursue higher education is how they will afford the costs of attending college. As mentioned above, the Costa Rica Institute of Technology offers its students the possibility of applying for financial aid.

However, this information is communicated using vocabulary that makes it difficult to read and is usually displayed through boring websites or PDFs. The lack of clear and concise data can generate doubts and frustration in the population interested in obtaining a scholarship.

Therefore, the main challenge of this project was to generate, through an app, a more dynamic and attractive scholarship information system for the student population. In other words, the objective was to create a source of information where the data was presented in a clear language and the user's interaction with the platform was captivating.

The users

After we completed empathizing with potential users through interviews. And studied the current information system on financial aid. We were able to define two types of personas, who would be the users of the app.

Description of user prototypes: personas.

In the definition phase, we also conducted a benchmark study and a "needs & requirements" analysis, which allowed us to propose an initial information architecture.

Subsequently, we performed several card sorting tests and traced the main navigation flows to optimize the proposed information architecture of the app.

Third version of the information architecture.

Ideate, Prototype and Test

Then, we started to design wireframes until we came up with the proposals that seemed most appropriate. Then we asked people who met the profile of potential users to perform a test using a prototype of high-quality wireframes.

Low fidelity wireframes.

After making the necessary changes to avoid the deficiencies shown by the results of the previous tests, we designed the final prototype. Taking into account the appropriate graphic details to give it a dynamic and youthful look. Then, we conducted heuristic evaluations to check that the final changes were adequate.

Results

The Beca app

Beca will guide you about the financial aid options the Costa Rica Institute of Technology offers.

Test to recommend scholarships that fit the student's financial profile.

The app will show you the most relevant information about each type of scholarship in a dynamic and interactive way. In addition, it will provide you with extra data so you can know the average expenses of the students who attend the Costa Rica Institute of Technology.

Mauricio Campos scholarship description screen.

It has a section where you can easily find the forms to apply for the different scholarships. There's also, a phone book with the main contacts of the scholarship and social management department of each TEC campus. And it also includes a calendar that displays the periods of receipt of documents and notifies the deadlines.

Student's budget page.

What did I learn?

This project was developed during the start of the pandemic caused by Covid 19. For this reason, some of the requirements stipulated at the beginning of the course were modified during the development of the project, encouraging us to work adaptively.

We expanded our knowledge of convenient digital tools used in the user experience design process, such as Figma, Optimal Workshop, Adobe Photoshop, and others. Also, we had the experience of connecting and conducting evaluations with potential users only through digital platforms.

This was the first experience design project we developed in our career, and I consider that it has several points of improvement, both at the level of interface design and the final user experience. However, I think it was a good starting point that helped us to explore some techniques and activities that can be used to empathize with the user and generate better results through UX design.