ExamRevision...an Irish success story.

Contracting for ExamRevision

I saw a role advertised for an Irish startup called ExamRevision who were looking for a UX Designer to do a short term contract for them.

I reached out to them and after being interviewed by 2 of the 3 founders of the company and explaining how I had approached other projects I was offered the role of Lead Designer.

The company was founded by 3 teachers and it offers online revision and grinds for the Junior Cycle and Leaving certificate by way of videos, pdf's, self correcting tests and study notes and its customer base are Students, Teachers, Schools and Parents.

As I have a son going into the final year of school this year, this was a project I was very interested in being involved in.

The site had been designed by a junior developer and whilst it was functional there had been no UX influence involved in the design process and as such was falling behind its competitors in terms of ease of use, aesthetics, navigation, presentation as well as having unnecessarily complex User journeys for critical functionality such as registration.

My brief was clear and straightforward, revamp, modernise and redesign the Homepage in such a way that it stood out from its competitors.

In the beginning...

My initial approach was to carry out a heuristic evaluation of the site. My experience as a QA came into its own here and I came across various issues and Bugs as well as bad UX practises.

I created a spreadsheet to document any and all issues I discovered to pass on to the developer. Some of the bad UX practises I came across during this evaluation included, multiple buttons scattered throughout the site which all did the same thing yet had different titles. Convoluted and complex user journeys for important processes such as registration. Dead ends where users could not unselect a choice if they inadvertently chose something in error and had to start at the beginning.

Once the evaluation was complete it was time to have a look at how our competitors solved these problems.

Competitive Benchmarking

I started my research by identifying a number of companies that were in the online learning space for schools and expanded on this slightly to include companies that provided online learning outside of the school curriculum to see how they approached the user experience.

I identified areas I felt they had handled in an excellent manner and also areas I felt could be improved upon so as not to make the same mistakes or to improve upon.

I took copious notes which I later transcribed into pointers for use in my Card sorting exercise later in the process.

Usability Testing

For the next stage of my research, I had a look at the breakdown of customers and noticed that 60% of users were students. So I bribed my son and a few of his friends to sit in with me to conduct some usability testing sessions.

I then contacted 2 teachers I knew and arranged for a zoom usability test session and finally I contacted some friends who have children to also do some zoom usability test sessions.

I took plenty of notes and had to bribe some people with beers but by the end of the sessions I had a good set of Data ready to be entered onto cards for the next stage, the analaysis of the results.

Analysis & Card Sorting

Armed with my data I opted to use Miro as the tool to conduct my card sorting affinity diagrams. I have used Miro a lot in the past and always found it to be perfect for these exercises.

I split the sections into what I learnt from Benchmarking and what I learnt from Usability testing. I further split each of these sections into Positives and Painpoints.

From here I then grouped the cards along the lines of what were positives and could therefore be included or kept in the newly designed Homepage and also grouped all the Painpoints, to avoid making the same mistakes or to improve upon them.

Click here or on the image to access and view the Miro board containing sorted and unsorted data.

Userflow Diagram

One of the areas I identified immediately as an issue and bad UX was the registration process. This was later reinforced as a problem during Competitive Benchmarking and Usability testing. (It was raised by nearly every person who participated in the testing)

Firstly there were 5 different buttons to access registration but every one of them was called something completely different which resulted in a great deal of confusion from our users.

And secondly there were seven different steps required from the time you accessed the site. Unnecessary steps like a separate page for email followed by a separate page for name and password.

I decided to simplify the whole process as you can see in the Userflow diagram opposite by creating one clearly defined CTA registration button and making sure registration consisted of 3 steps.

My thought process was that registration is such a critical part of any eCommerce site that you must avoid having a process that people are unlikely to complete due to boredom frustration and annoyance, that you want it to be as painless as possible.

After all, incomplete registration means no new customers which means no new revenue streams.

Once I was satisified with this process it was time to start designing and developing my interactive prototypes.

Interactive Prototype

When redesigning the Homepage I took into account the fact that 60% of users were Students, so I wanted to make sure that the site was fresh and attractive looking whilst still getting across all the information without being too overpowering. This breakdown of users was also the reason I moved the social media icons from the footer up front and centre.

The original Homepage takes 10 scrolls of a mouse wheel from top to footer, whereas my design takes just shy of 3.

I made the CTA login and Registration buttons immediately indentifiable and by locking them in at the top, I did away with the need to have additional registration buttons sprinkled throughout the Homepage.

I also moved a link to the Prices (which is what we are all interested in when purchasing online) up to the top alongside a link to a contact form. And as a lot of the feedback mentioned the size of the video as a painpoint, I made it a lot smaller but when played will automatically pop up in a larger format for easier viewing.

Check out my Interactive Prototype designed using Figma. The next step is to demo the redesign to the stakeholders and once I get the sign off I can move to the wireframe stage to be handed off to the developer.