UFRJ
Landing Page
Redesign Study
Briefing
I was told to redesign a known institution landing page, like big banks, universities, gaming companys, etc. without making user research, only desk research.
Initially I was going towards the university that I graduated in, UFF (Universidade Federal Fluminense) but, while benchmarking, another one cought my eyes: the UFRJ (Universidade Federal do Rio de Janeiro) home page.
Discover / Research
Initially, I started out by looking at other university pages from Brasil and abroad to make out what were the primary elements that the pages had. After that, I started some desk research online.
Most of my research was composed of articles on private universities from around the world. Even though UFRJ is a public university, some aspects could be considered for this redesign.
​
The basic insights found were:
-
In Latin America, social media was very important and used "all the time"
-
90% of International students that apply have the website as their only source of information
-
The first impression is what sticks, and the most important aspects of the page are programs and courses, location, and credentials.
-
The "about us" part of the page is very important for applying students and we should be careful about language use and trying to make the page "cool"
Self notes
Who are the main users?
- Future students, current students and teachers
​
User goals?
- Information the programs and courses, get to know the university and keep informed on bulletins and oficial notes.
​
Secondary user goals?
- Read about academic and scientific research, academic calendar and other more specific information
​
Company goals?
- Share scientific projectes and research, give information about the university, programas and courses.
​
Secondary company goals?
- Give acess to secondary pages, share information on Covid-19 and publish events infos and dates.
Heuristic Evaluation
As I analysed the page, I searched for mostly visual and structural flaws, but one thing I was sure of: the UFRJ home page had an overall outdated design and there was no clear information about the university, the programs, and courses.
The other basic problems I found and tried to solve were:
-
1) We can find a lot of information stuck together on the main section of the page and the dropdown menu overlaps with other menus and buttons.
-
2) There are almost no white spaces and also a lack of information on programs and courses.
​
Benchmark and Moodboard
My benchmark is usualy what I use as a moodboard, because I like to use other pages with similar context to inspire myself.
As for the color scheme, I used the base colors of the university page and the help of a material design tool to find the right shades for good contrast and visual coherence and accessibility. I also thought about the possibility of a mobile page, but that was not the focus of this exercise.
I also created a sheet where I could see the characteristics of each page and what content they show, compare them and with the help of my desk research, define the main components that my redesigned page should have.
Wireframing
The main idea here was to mash up landing page fundamentals with the needs of a university home page while guided by my art direction.
When wireframing, I like to start always on paper because I find it easier and faster to show my ideas.
Then I always try to move on to a low-fi digital wireframe, refining it a bit more before starting a hi-fi or a prototype.
Even knowing the importance of accessibility, I found no research or needs for the use of sign language, mostly because the page does not have videos.
​
I also chose not to have a specific alumni button because it's not a common use in Brasilian university pages, and I found no research showing its importance.
Final Interface
The main menu was moved up close to the header, making space for the dropdowns.
Graduation and Post-Graduation where united to a single Graduations link, making space for a cleaner menu
Cleaner visual with more white space
The left side menu was basically turned into the quick links, giving the page a cleaner visual while still being easy to access
An "about us" section was created to give initial basic information on the university itself like campus, numbers, and programs and links to more if required
The bottom menu was incorporated with the footer
