LEARNERATOR WEBSITE REDESIGN
Skills: User Research, Adobe Photoshop, Wireframing
Learnerator (now Albert.io) is an online exam prep-website that helps students prepare for college entrance, AP, literature, and graduate exams. During the project phase of Designation Labs's UX/UI bootcamp, I worked with a four-person team to redesign the company's website.
My team began the project with an in-depth discussion with company's head designer about Learnerator's goals and vision for the future as well as what he thought could be improved about the current site. From there, we did our own mini-round of usability testing, observing new users trying to perform specific common tasks on the site and having them walk us through their impression of the platform as they arrived at different pages. Each team member then completed a heuristic evaluation of the main pages of the site which, in combination with our previous research, helped us figure out the most important areas to focus on over the course of our two-week redesign.
We narrowed our focus to four major goals which were:
1. Rethink the site's home page and design a call-to-action that quickly explains Learerator's purpose and draws users in.
2. Condense the sites's footer while maintaining the user's ability quickly jump to any section of the site they wanted.
3. Redesign the Course Explorer so that users could more easily discover the classes they wanted and track their progress through the testing prep.
4. Improve cohesion between the site's pages in order to create a uniform look and feel for the brand.
BrainStOrMIN' and WIREFRAMIN'
After coming up with our goals, the team began working on determining our direction for the project. After lots of pen and paper ideating and discussion over our different ideas, the team created a basic digital wireframe map of our site that would help us share our plans with the Learnerator team as well as provide our team direction as we split off to work on different parts of the redesign.
IMPROVING THE HOME PAGE
REDEsignING THE CALL TO ACTION
Our first objective for the project was updating the site's home page to do a better job of drawing users into the main content of the site. Learnerator's original home page had a a physics diagram with a small call to action button of "See all courses," which had left some first time users confused to the purpose of the site (some of our test users initially thought the site only offered technical courses, when in reality it offered tests on a much wider range of subjects). To solve this problem, we came up with the idea of having an interactive sample question module with some of the more basic questions from prep quizzes displayed on note cards as a sort of mini-quiz for first timers to the site. We also increased the size of the call to action and the "Score Higher" header to make the purpose of the page more clear.
The thinking behind this was that the notecards would not only indicate there was a wider range of subjects available than just physics, but would also do a better job of getting users to interact with the content and pulling them into the main page of the site, where courses were listed.
REDESIGNING THE FOOTER
Along with remodeling the top portion of the site homepage we also re-examined the site's footer. Originally, it had made sense for Learnerator's footer to link to every course they had prep material for. However, as their offerings had grown from a few subjects to over 50, the footer had become excessively long and distracted from the rest of the content. From our research, we had determined that most users were coming to Learnerator just to study for one specific subject, and and wouldn’t necessarily be need links to every other test available to them at all times. We devised a filtering system by test type, color-coded according to the rainbow scheme on the original front page (below) and cleaned up the rest of the footer by bumping the licensing and information section to an internal page.
When we brought this proposal to the client, however, he was very insistent on having all courses always be a click away, and asked us to return to a footer that displayed all courses at once. He was also unsure as to if the mini-quiz approach would really draw users in, though he did agree on the idea of trying to make the range of courses available more obvious. Taking these conditions into consideration, we went back to the drawing board and came up with another option for the front page, a static icon of the course page on a computer with the icons of different available courses in the background along with a section that displayed all of the courses but was much more clean than the original version of the footer.
FINAL CALL TO ACTION AND FOOTER
After working on the home page and defining a set style for the site as a team, we broke off and began working on bringing different interior sections of the site in line with the flat design style guide we wanted to site to follow. The main page I was working on was the course selection page, where students were taken to explore what courses the site offered.
Course Page Redesign
With my redesign, I focused on making the page cleaner and more intuitive to users and getting the page into alignment with my team's style guide for the site. Some of the changes I made included:
- Removing the campus banner image, which didn't fit in with the flat style of the rest of the site and left some users confused about the type of courses available to on the site.
- Bringing available course listings to the center of the page and color-coding course categories to provide more distinction between five test prep areas.
- Replacing original course category icons with a simpler set of custom icons (designed with one of my fellow student on DESIGNATION's graphic design track)
- Simplifying course cards by removing course descriptions, as we had realized most people studying for an exam already knew what the course was about.
- Exploring different ways of displaying progress through the course review, finally settling on a progress bar showed users how much of the course they had finished and turned gold once they had completed all questions.
Feedback from our client on our proposal was overall positive. He liked the idea of making the course buttons cleaner by giving them more space on the page and agreed that centering the course selection bar creating a visual distinction between the different types of courses helped make using the site more intuitive. However, he wanted to keep his original custom icons and wanted to keep the page background less colorful. He was excited about the idea of having students be able to track their progress on the course page and asked that I explore the idea even further. He also thought that without the course descriptions the page lost much of its unique "Learnerator" personality (the descriptions had been a bit humorous and he was very attached to keeping them.)
With these revisions in mind, I went back to the drawing board and further developed the page. In later rounds of editing, the biggest changes I made were creating a dual bar design so students could not only track their progress in the course, but also see how many questions they got right and wrong, removing the study button in favor of having a course progress bar on all course cards, and adding a course library banner to the page. Combining my work on the courses page with my team members pages we created a final version of the site which was incorporated into the next stage of iterations on learnerator.com