Eleken joins Enroly's product design team to help the company deal with increased workload and reach 30% of UK universities using its software

The company got a bit off-track with visuals and usability. The growing potential also happened to be within the design — the team came up with a killer reporting feature able to make Enroly an ultimate student engagement app. 

To successfully reach its grand aim, Enroly needed to redesign the existing screens plus create an effective design for its new game-changing feature from the ground up. 

But, at that time, Enroly had only one person responsible for UI/UX design — their head of product. Additionally, their tech team was rapidly growing and it was impossible for one designer to cope with all the design workload alone. 

To fit into a window of opportunity, Enroly needed someone to support them with the product design tasks, and here is when Eleken appears in this story.

We specialize in UI/UX for SaaS apps, and we have experience with apps for the educational field — take our redesign case for Acadeum, for example. So we were able to get up and running in no time.

For seven months, our designers became a part of Enroly’s team to help the company achieve its ambitious goals.

From the very beginning of the project, we kept in touch with the head of product who helped us understand the Enroly app better. Together, we agreed on the steps for the design process.

Proper distribution of responsibilities and regular communication allowed us to have a perfect sync: while the head of product finally received enough time to work on important strategic tasks, we were covering his back by doing ongoing UI/UX design jobs. Together we were moving towards one goal - spread Enroly to 30% of UK universities and get the software ready to expand to Australia and New Zealand. 

We started by improving the UX of existing pages. Using the example of our favorite filtering tool, we’ll show you how it was.

Enroly’s filters are a great tool to narrow down high volumes of students in a database and to surface the most relevant lines. But in some cases, this feature was more confusing than helpful.

Triggering the feature became more intuitive

As we open a workspace, we can notice two majoir shortcomings:

The top navigation menu is empty. It lacks some “you-are-here” navigation signs and chances are users will quickly get lost without any markers in place.

Users can’t find how to activate a filtering feature. Pretty counterintuitive, as it is hiding under the search button.

We put all the proper markers in place to help users orient themselves within the app. Also, we added a separate button to call filters, obvious at a glance.

Choosing a filter became faster

Let's move on and see what happens when the filtering tool is finally open.

The Action menu, which arrives in the top right corner, was a tough nut to crack for users. Visible but inactive, it activated only after users chose some students in the list. And just look at that long messy list of additional filters.

Here’s what we did to improve the situation: 

We removed the Action menu from the toolbar, as it is only needed when students are selected. It arrives in already active status only after you tick a box in the list.

We added three dot menus with additional options on the right. While earlier users had to open a student card to make any changes, now you can manage cards from a workspace screen.

We broke the long list of filters into more readable columns grouped by meaning.

Filter manipulations became effortless

If users wanted to filter students by date or nationality, they had to read through the list trying to find the right line, and then manually write the needed nationality to the search bar. Misspell it, and nothing is going to work.

For every filter, we tried to reduce effort by anticipating the user’s intention: 

If users want to filter students by date, they can quickly enter dates by clicking a small pop-up calendar. The nationality filter now activates a dropdown list with all the options.

If users start typing, the list opens at the letter they typed, so they can quickly find the item they are looking for.

As we mentioned earlier, Enroly came up with a unique for its field feature that would distinguish them from competitors and help reach the aim of 30% of UK universities using their software as well as expand to the new markets.

It was going to be Google Analytics for student engagement, and no competitors had anything comparable in scale. They thought that if their application was already automating student interactions data, why not offer comprehensive analytics on top of that data to help users make better decisions?

Feature ideation

The entire squad of designers, developers and product owners came together to brainstorm the future capacities of the app's reporting tool. As a result of the discussion, we’ve got a list of components we were going to design. 

In the table below, you can see the fragment of the list in the "Component" column.

The next step was to think of the way the feature is going to work (see in the "Description" column) and the way the feature is going to visualize data (the "Example" column).

Restructuring features into pages

Now when we had a long list of metrics, we had to organize them somehow. We grouped related features to shape the pages and then grouped the pages into four categories:

Pipeline — the data on students’ acceptance-to-enrolment process. How many students applied, from which countries, how they cope with their arrival milestones, and so on.

Market — the place to analyze the industry dynamic, compare results of different universities and discover the opportunities for growth.

Agents — the data on agencies that bring the most students, agent conversion rates, and similar.

Team — internal data on staff members’ targets, plans and progress.