A Meteoric Redesign for an eLearning App
In the lives of reputable established startups, there’s a moment when their customer support representatives say something like, “I'm sick of this. You either fix the app or pay for my therapy.” That’s a red flag you shouldn’t ignore.
If your support agents can’t deal with a growing number of tickets, it means some flaws have accumulated in your app, and they prevent users from doing the jobs they need to be done. Those flaws usually can’t be fixed with an interface facelift — they require a hardcore user experience redesign. One day, Acadeum noticed this kind of red flag. They needed a redesign, so they turned to Eleken.
Imagine you are an American college student interested in a subject your alma mater doesn’t offer. Or you failed a class and want to retake it, but in the next semester, your college will no longer read this subject.
The education system in the United States is relatively flexible: students can take or retake classes online in other learning institutions, but here some friction arises. You have no idea where to look for the desired subject. It is not clear what classes are available for you. Even less clear is how to enroll in the chosen course.
Acadeum is the platform that reduces the friction between the elements of the American education system. It helps universities to establish connections with each other so that students can take online courses they need wherever they want.
Web App design
What is Acadeum?
The redesign process
The student app has been fixed recently by the client's in-house designer. Acadeum hired Eleken agency to redesign the admin app. Thereby, we had to use and expand the design system that was already created for the student app, to maintain the look and feel of the product.
Acadeum platform consists of two parts: the admin app and the student app.
In the admin app
Сolleges publish information about their upcoming courses and approve other colleges’ courses that are suitable for their students.
What made our work with Acadeum challenging is a strict time limit. We only had three months to detect UX problems, decompose the big complex admin app into molecules, and reassemble the app into an intuitive version of itself. That sounded almost unrealistic.
What facilitated our work was the fact that Acadeum has been operating for several years already. That means we could collect feedback from actual users and team members that worked with complaints of real users. With all that data, we proceeded to design in a truly informed way that is difficult to achieve when you create UI/UX from scratch.
First of all, we explored the app’s user flows. On the screenshots, we noted questionable areas and discussed all the functionality during the numerous calls with the client’s product team. As a result, we got a list of UX troubles that need to be addressed.
The client sent us recordings of several in-depth interviews with the clients, and those conversations became our second source of insights. Our list of UX troubles has grown significantly.Last, but not least source of invaluable information became calls with Acadeum’s support officer. He spent hours in calls with our designers, moving screen by screen, pointing out passionately to areas that caused difficulties for users.
Running a discovery
During interviews, users told us that they have to check new suitable courses' availability many times because teaching institutions upload them at a different time. To simplify the task, we enabled users to save filter presets that would trigger notifications if new suitable courses appear.
Using and expanding the existing Acadeum’s design system, we turned our wireframes into ready-for-coding mockups. Here’s how the mockup looks on the course search screen.
In the last few days, we felt like Cinderellas running to meet a tough deadline. However, we redesigned the application, kept the design consistent, and finished the project on time. So we can conclude that this project was a success.
Even running out of time, we wanted to understand whether our solutions would be clear for users. So we made quick prototypes and conducted a series of tests for the primary flows of the application and some secondary flows that we had doubts about.
Let us show you the wireframing process on an example of one screen responsible for finding the right courses on Acadeum. Below, you can see the original design of the screen.
We started our redesign with black-and-white wireframes to concentrate on the logic behind elements and don't mess around with the visual components. Wireframing was the most time-consuming step in our design process since it required multiple iterations and negotiations with the client’s product team.
Deciding on an information architecture
Adding a saved search feature
Turning wireframes into a complete visual design
The complaints about this screen boil down to three main points:
As a result of conversations with the product team, with users, and the support representative, we got a list of issues that tended to infinity. Based on this list, we created a modified value proposition canvas. We tied pain points to specific user tasks and generated ideas that could address those problems.
After that, we had a workshop with a product team, where we mapped out the possible solutions using the Impact/Effort prioritization matrix. Now everything was ready to start the work according to the selected priorities.
The data from the discovery phase proved that the structure of the app was counterintuitive, so we needed to come up with a new structure. To cope with this task, we chose a card sorting research method.
We conducted a series of open card sorting workshops with users. Users received cards with the names of the application’s structural units, and we asked them to arrange the cards in meaningful categories. Based on the received insights, we created the information architecture of the application, which matched the mental model of our users in the best possible way.
The screen was cluttered, but still, there wasn't enough information for rational decision-making.
We’ve fixed all three points and even added a little extra. On the wireframes below you can see the skeletal framework of our solutions.
In the Courses tab, you can see cards with courses and corresponding sections available for each separately. For instance, the course MATH110 may have sections available in Fall and Winter that will be listed twice in the card.The Sections tab shows all the courses separately, now displayed in a list.
As the final touch, we created a UI kit with visual elements we used for developers to work with. With a UI kit, developers can compose all UI components in advance, in all colors, sizes, and forms needed. Later, when they will work on pages, they’ll be able to insert all the UI components in a couple of clicks.
But the main proof of success was that the client and client’s support representative didn’t want to say goodbye to us.
After the redesign project ended, Acadeum extended their cooperation with Eleken for another three months — so that we helped them finalize ongoing design tasks.