Enroly
Product Design & Redesign for a Student Engagement App
The year 2020 has brought some tectonic shifts to the education sector. The world went remote overnight, accelerating digital transformation even in the most conservative universities. For edtech startups, it was a window of opportunity.
Services
UI/UX design
Year
2021
For startups like Enroly
Enroly is a SaaS app that helps universities in the UK to automate their student engagement processes. In 2020, the Enroly team took a clear-eyed view of the market situation, appraised their strengths and opportunities, and concluded that the timing is perfect to drive the big change. That is, to have 30% of UK universities using Enroly software and pursue expansion to Australia and New Zealand by the end of the year 2022.
The bottleneck limiting Enroly’s growth was within product design. 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 fit into a window of opportunity, Enroly needed some work on product design.
That sounds great, except for one thing.
Enroly hadn’t got enough designer hands on deck. The company needed to augment its design team, and here 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, at least. 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. We started by improving the UX of existing pages. Using the example of our favorite filtering tool, we’ll show you how it was.
Redesigning "Filtering"
feature for better usability
Triggering the feature became more intuitive
As we open a workspace, we can notice it lacks some “you-are-here” navigation signs. The top navigation menu is empty, and chances are users will quickly become disoriented without any markers in place.
Another visible issue is that users can’t even find how to activate a filtering feature. Pretty counterintuitive, it is hiding under the search button.
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.
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 you just look at that long messy list of additional filters. It is asking for a redesign.
In the revamped version, the Action menu stopped hovering around and confusing users by its inactive status. The feature is only needed when students are selected, so we removed it from the toolbar. 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.
As for the long list of filters, we broke it into more readable columns grouped by meaning. The way of working with filters has also changed for the better, but more on that later.
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.
A chosen filter appeared on a control panel as a tag, which is good. It’s easy to understand and manage a system of tags. What is not so good is the way tags were organized, one on top of another. Filter tag layering took lots of space and minimized a working area. Users could hide tags but in a counterintuitive way. Again, by using the search button.
Filter manipulations became effortless
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.
We’ve preserved a system of tags but arranged them in one row. As for the minimizing command, we created a separate button for it.
Designing Google Analytics for student engagement
Designers, like any professionals, don’t usually reinvent the wheel. When we have to create a feature, we first run user interviews, examine common UX patterns for such features, and research competitors’ successes and failures in similar situations.
It was going to be Google Analytics for student engagement, and no competitors had anything comparable in scale. So we invented the wheel.
But the killer feature Enroly had in mind was going to be the coolest in their field and unique by its 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?
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).
For instance, we wanted to create a report on students’ arrival dates. For that, we had to show how many students arrive on each day of a selected time period. A bar chart was a perfect visualization here, but we had to consider how timescales would change as users choose different timeframes.
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.
Five months since Enroly started its design project in collaboration with Eleken design agency, the company has raised £1.5m in funding to empower its international expansion. Enroly also reports it currently onboards a new UK university every three weeks. That’s a dynamic that takes the team closer to its 30%-of-the-market target.
Results are promising, but the project is not over yet. The bulk of the work on user experience improvement and new features creation is done. Yet, Enroly intends to set up a design system as a single source of truth about design principles and visual elements to make their interfaces more consistent. We at Eleken would be happy to help.