Redesign for university management system
Universities are now not only huge organizations with hundreds of thousands of students and workers, but also business units that strive to make education work smoothly.
The objective of Highpoint is to efficiently optimize the process of education for both students and universities.
Web App design
Highpoint is built on the product from Oracle — People Soft. This software dates back to the age when User Experience was not as the first priority as it is now. To put it simply, the interface was not too clean and logical.
The first month was the most challenging, as we had to invent a visual style from scratch. We were lucky to work with the client who understood well the need for numerous iterations to get the best result.
To make their work more efficient, universities need modern tools that automate the processes and ease the communication between students and administration.
Highpoint is a white-label solution for higher education management. The basic design of the solution can be customized to fit the visual style of each university that uses the system.
To make a good white label product, Eleken team had to come up with a design that is both universal and flexible to adjust to the requirements of different universities.
Working with them, we learned how education institutions work from the inside and how tech can assist them in solving everyday problems.
Highpoint contained different tools, each responsible for different parts of high ed management: enrolment system, internal messenger, degree planner, and so on. All these modules can be combined in a custom scheme on request.
Clients can build their own management system like a Lego constructor.
For all the interfaces we used IBM Plex Sans font, the winner of the 2018 Typeface Design Competition. This is the official font of IBM, and it is very universal, which is necessary for such a huge product as the university management system.
The product is quite complex by itself, but on top of that, it had to comply with the governmental standards, as the solution is used by state universities. And these standards influence many aspects of the software, including the interface colors.
The regulations didn’t make us refuse bright colors: in the end, the color palette had many bright and pastel shades.
When you have to deal with governmental restrictions, even picking colors is not that easy. This is where Itten’s color circle was of little use.
The shade of “warning” yellow that looked harmonic with the overall palette turned out not to be contrasting enough to comply with the state standards. So, we had to change shades. We ended up with this darker shade, which became a compromise between contrast restrictions and visual harmony.
To bring users' focus to the most important information, we made a “To-do’s”. These are the cards on the dashboard that contain the latest notifications. For example, notifications related to the latest updates on the request for financial aid.
Complex product doesn’t mean there is no space for a little fun touch
Prevailing classic blue color with shades of grey did not stop us from adding a bit of illustrations. Have you noticed a waving emoji at the top of the dashboard? On some pages that were free from loads of information, we left fun illustrations.
To-do’s contain direct buttons that encourage users to take action right away. When they can respond to a request just by choosing one of the options on the side screen, it is more likely that they give feedback faster than if they had to write an email or so.
Working on complex SaaS products often means having to fit lots of information on screens. For this particular case, we used a few tricks:
This is just a part of the tools that we have been working on. After redesigning some of the existing products, we started working on the design of a brand new product with a very brief technical task: basically, our designers had to suggest the logic and features based on their previous experience.
The card design makes design work in all app versions: desktop, tablet, and mobile without cutting off the necessary information.
However, not all Highpoint products are adapted to mobile devices: some of them that are for administration use have desktop versions only. In our design, we go from users’ real needs: as employees don’t need to read analytics from their phones, we didn’t spend time on that.
A tool for choosing classes and creating an individual degree plan. It also allows making alternative, backup plans in addition to the priority one.
To fit the classes into a comfortable schedule.
Allows university administration to enter information about courses to be reflected in the Degree Planner.
The structure is similar to e-commerce: students can add selected courses and books to the “shopping cart” and pay online.
Helps students find funding for their degrees.
Direct communication between students, professors, and university administration.
Different parts of the dashboard, such as exams, class schedule, grades are placed on separate cards.
Shades of grey
Create separation between blocks of information and text.
In settings, each user can select which widgets they want to see on the dashboard.
Analyzes the data about message answers and reading rates in order to facilitate communication between students, professors, and administration.
A comprehensive list of all courses is available for prospective students as well.
Schedule Builder Analytics
Provides university administration with data on the course demand that can be used to optimize the program.
Product is what unites all modules in a complete system of university management.
The all-in-one solution was not a single product.
Design vs government regulations
Due to the very open and quite large white spaces between stems and shoulders, the entire Plex family is very readable in small sizes and at a distance
Typeface Design Judge, designer Verena Gerlach
As it often happens with SaaS products, the units were subject to constant changes.
With white label products, customization adds up to that. When a university wanted to change something in the product, or add a small element or feature, we had to make the changes rapidly on demand.
During our work, we were talking to the managers from PeopleSoft, and in some cases, with the representatives from the universities.
We worked with Highpoint for over two years. At first, only one designer was working on the project.
The size of the design team on our side was changing: sometimes, up to five designers were involved. In some cases, the team had to switch back to one designer due to the changing number of tasks.
By the end of our collaboration, we can say that our task of updating the design of an old product was completed.
What’s more, the software has evolved and we got to work on the new Highpoint products, suggesting our own ideas. And for all designers who will work with Highpoint in the future, we have prepared a handy UI kit with guidelines.
This is when our retainer pricing model works best compared with hiring in-house designers. Such flexibility is important for optimizing the work on SaaS products.
New design — new logo
As UX designers, we don’t get to make logos often, but when we do, we make it with all the rigorousness.
Apart from working on the design of separate products, sometimes we had to work on changing one of the modules to fit specific requirements of the client university.
For Highpoint’s new logo, we used IBM Plex Sans as well, and created text and graphic logo, which can be used without text as well. We started with a grid and then created dozens of options until they evolved into the final version.