UX/UI Designer
Yearly, thousands of students compete to get into one of the best Brazilian public and free schools, IFPR. The chance to study there is life-changing for many low-income families.
IFPR needed a website for the student’s admission process that was more efficient, accessible, and easy to use, helping the candidates to focus on what matters: getting selected for the following year’s courses.
Before acting on the project, I needed approval from the committee responsible for running the admission process. To them, I had to advocate a human-centered design approach and present the steps we would follow to develop the website project.
I got the approval, but with a caveat: I had six weeks to do the entire project and deliver the product in time for the beginning of the admission process.
Since we already had a previous website, I started looking at it for improvement opportunities. My data sources were google analytics, the support contacts, and the economic and social questionary all candidates had to answer in the previous year.
I also spoke with people from IFPR that knew someone that made the process last year to get their feedback.
The main problems noted in the support data and the talks with colleagues and users were:
From the last year's questionaries and Google Analytics, we had a good amount of quantitative data that allowed the construction of a target user profile.
RELEVANT DATA
Since this project is a new iteration of an existing product, I started revising the site map to see if there were any opportunities for improvement in the information architecture.
Here are the changes I made:
One of the problems users related to using the previous version was getting lost while searching for the information they needed.
To address this, I went through all the task flows, examining how to make each one more straightforward and intuitive.
I used Miro to have all the information on one big whiteboard. Using my iPad, I sketched the ideas for each website screen and explored how the user flow would work.
I changed the interface structure and how it works. The intention was to address the problem the users had to find information after the first stages of the process.
I built the visual design on Adobe XD and Adobe Illustrator. It was an adaptation of the design and branding from the marketing campaign.
I defined the color palette and typeface based on the marketing branding. The Style Guide is direct and concise. I was the only person working on the project, so I could make adaptations on the fly while building the prototype or writing the code.
Typography
Colors
Icons
Illustrations
Based on the site map, task flows, and wireframes, I built the interfaces on Adobe XD. The next step was to make a functional prototype and test it with users.
I tested the main tasks the candidates would have to perform. The tests showed that we were in the right direction. I had only a few adjustments to make.
Working in all the project's phases allowed me to see how coding can heavily impact the experience.
In this case, usability is severely affected by low-speed access and computational power. Thus, the website needs to be lean and lightweight.
I built a responsive website using HTML, CSS, PHP, and JavaScript. I used JSON files as a repository for the data. I Didn't use any frameworks or other libraries that could add to the weight.
A negative impact of the older versions was the use of PDFs. I implemented a way to present the information in HTML, filtering the results to show only relevant data to the user.
In the end, the size was reduced from 85,1MB to 19,3 MB compared to the last version.
In the end, the overall website size was reduced from 85,1 MB to 19,3 MB compared to the last version.
The website was made available to the public on December 15th, 2021. On May 17th, 2022, at the end of the process, it had received 58 thousand users, 38% more than the 42 thousand of the previous version.
The number of views rose from 367 thousand to 703 thousand, 91,5% more. The engagement time grew from 2 minutes and 23 seconds to 3 minutes and 40 seconds, a growth of 54%.
Users
Views
Engagement
The user's behavior also improved. The visits peaked at the start of each phase. It indicates that the users kept returning and using the website during the admission process. In the last version, the user's engagement fell more sharply.
It's important to note that the number of contacts to our support fell noticeably. Therefore, the website achieved its goal of helping the candidates of the IFPR's admission process, being more accessible, handy, and easy to use.
Previous version
New version
