Artboard 8.png

Learnerator Website Redesign

LEARNERATOR WEBSITE REDESIGN

Skills: Research, UX Design, UI Design
Tools: Photoshop, Illustrator, Adobe XD

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. 

DIVING IN

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'

Once we finalized our goals, the team got to work determining our direction for the project. After some whiteboard ideation and discussion over our different ideas, we divided to create a basic digital wireframe of our site. We each took on different parts of the wireframe and used our agreed upon header/footer styles and standard colors/font sizes to test out our initial concepts and create a primitive site layout.   These designs provided an opportunity to receive effective feedback Learnerator team and provided our team direction as we split off to further flesh out different parts of the redesign.

 

 

 

IMPROVING THE HOME PAGE

 
 


REImaGINING THE CALL TO ACTION

Our first objective was improving the home page's effectiveness at showcasing the site and drawing in new users. Learnerator's original home page had a physics diagram alongside a short site description and a call to action of "See All Courses", which didn't spark much excitement for Learnerator's content left some first-time users confused about the purpose of the site. (A few of our test users initially thought the site was only for technical courses, when in reality it offered tests on a much wider range of subjects.)  

 
Quiz Cards.png

Interactive prototype of our mini-quiz concept coded by my team member Angela

MINI-QUIZ CONCEPT

To solve this problem, we decided to create interactive flashcards covering a variety of subjects as a sort of mini-quiz for first timers to the site. Our thinking was that the notecards would not only showcase the wide range of subjects offered, but would also get users interacting with the content and pull them into the main page of the site, where they could browse courses.


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. In talking with users, we discovered that most student were coming to Learnerator just to study for one or two specific subjects, and didn’t necessarily need links to every subject available to them at all times.  We devised a filtering system color-coded according to the rainbow scheme on the original front page and cleaned up the rest of the footer by bumping  the licensing  and information section to an internal page. 
 

 

CLIENT FEEDBACK AND REVISIONS

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. 

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. 

Course Page Redesign

 

With my portion of the redesign, the course selection page, 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 level of courses available to on the site.
  • Bringing available course listings to the center of the page and color-coding categories to provide more distinction between the five test prep areas.
  • Simplifying cards by removing course descriptions, as students studying for an exam already know what the course is 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.

Final Edits

The client's feedback on our proposal was overall positive. He liked the idea of making the course buttons larger and less complex and agreed that centering the course type selection bar helped make using the site more intuitive. He was also excited about students being able to track their progress on the course page and asked that I explore the idea further. However, he wanted to keep his original custom icons and preferred to keep the page background less colorful. He also thought that without the course descriptions —which were casual and a bit humorous—the page lost much of its unique "Learnerator" personality.

Learnerator Screens Mockup.png

With these revisions in mind,  I went back to the drawing board and further developed 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 (now Albert.io).

Learnerator Prototype.png

An interactive prototype of our final design.