Redesign an app made by engineers
Infostud is the official app of La Sapienza University in Rome. With this app you can make many actions about University: reserve exams, watch the courses schedule, pay taxes, watch your grades, listen RadioSapienza, ecc.
This app was made by a group of students. It was the update of the previous version that, if memory serves, doesn’t works at all (we speak of the times of iPhone 4). The developer team did a great job, now every student use this app, without wasting time on website. The app works great and it is complete.
My redesign idea started from a reflection about the caption “138/180CFU”
(CFU are European Credit Transfer and Accumulation System)
One hundred thirty eight slash one hundred and eighty
This is an accurate description about my situation but what this means?
I’m near the finish line! I have given twenty hard-won exams. It’s been a long time since I first studied Calculus and just as long before I passed it.
But with a “scientific” expression like x/y you can’t feel almost nothing.
I started to analyze the app and I started to see it as a fantastic tool with which I can do everything, but I don’t like doing it! Like when you go to post office, you need to go there but you can’t enjoy the experience.
So I asked myself what the university experience is, how it is composed and how can be structured a companion app.
I start from the foundation: the tab bar.
The 3 most important part in the University are:
- Going to classes
- Make exams
- Look at the results
So these should are the 3 main tab bar sections. I call the fourth button Toolbox: a collection of all app’s functions that now are in hamburger menu and sometimes presented also like redundant buttons in the UI.
I know that the hamburger menu is highly used, but until now no one it has evolved a thumb that can reach the high left corner.
It could also give the user the opportunity to customize the proposed default tab bar, maybe it can be convenient for a student who wants to easily access university radio.
After a quick research, I found an huge PDF made by La Sapienza with all the informations about the “Brand”.
And the result is the next:
In the first Courses view, I kept only one button in the Navigation Bar. I give to the user to choose between Daily View and Weekly view. I removed all the separators and replaced them with negative spaces.
The main issue in that kind of apps with lists is the title layout. In this case the course’s name: it’s impossible to adapt an huge title like “Object-oriented programming” in nice cards. Can be more simple to use abbreviations like in real life: all the students are used to write “OOP”.
The Exams view give you the opportunity to reserve an exam and only when you reserved it will appear the chosen date. In addiction you can switch on a Calendar view with all the available dates.
In the Results page I replaced the huge amount of information with two sections:
- a visual representation of your progress, it gives you more emotions about reaching your goal
- a list of badges with your Exams and results…do you remember when you defeated Pokémon gyms?
I appreciated the logo that follows the guidelines provided by the Human Interface Guidelines. My proposal is not to modify the oval around the Official logo but to eliminate it for more space.
My point is: the official logo is that since it comes from the old hystorical logo that needed to be inserted in a badge that contained it, but the icon of the app is itself a container therefore an oval around the logo can visually weigh down the all.
Now I would like to venture more: make the logo even lighter by eliminating the writing.
After years of Engineering, I discovered Design and I love it. I feel more complete now, because the study of programming alone allows the creation of working programs but together with the design you can create a product.
It would be nice, in the future, to find a Product Design Exam among the Computer Engineering courses.
Sorry, now I go back to studying how to find the probability distribution of the random variable Z = log (X) — log (Y) knowing that X1 and X2 are two r.v. independent exponential parameters of respectively λ1 and λ2.
P.S.
I had a lot of fun creating the poster for this article. Looking at Illustrator as a monster of complexity, I never expressed my creativity in digital.
This year I was introduced to Sketch and it was love at first sight.
Having created the elements of Electrotechnics from scratch that then composed the poster was a great satisfaction as when I increased the index i in a cycle for the first time. Not to mention how I felt when I modeled the vector curve in the center of the drawing, just as I understood the recursion!
