Mark is a UX designer at Fulcrum company. He’s a usability geek, who loves simplicity and his beautiful canine Houston.
This text is a case research of how a UX audit impacts a UI. It explains how a well-known academic platform may be analyzed edX towards Jakob Nielsen’s usability guidelines. To get began, Mark Lankmiller shares all the standards and metrics he used for his UX audit.
The enterprise world right this moment is obsessive about consumer expertise (UX) design. And for good purpose: Every dollar invested in UX brings $100 in return. So, having some free time in quarantine, I made a decision to verify whether or not one of many most evolving industries right now, education technology (EdTech), makes use of this potential of UX.
My plan was to decide on one EdTech platform, audit its UX, and, if obligatory, redesign it. I first checked out some main EdTech platforms (reminiscent of edX, Khan Academy, and Udemy), learn consumer suggestions about them, after which narrowed my scope to edX. Why did I select edX? Just because:
edX critiques on TrustPilot (Large preview)
Even from my fast UX verify, I acquired an summary of the UX ideas and UI options adopted by world EdTech platforms proper now (in my case, edX).
Total, this UX audit and redesign idea could be of nice use to UX designers, enterprise homeowners, and advertising individuals as a result of it presents a strategy to audit and repair a product’s most evident usability points. So, welcome to my edX audit.
This audit consists of two elements. First, I surveyed edX customers, discovered their wants, and checked whether or not the platform meets them. Within the second stage, I weighed edX’s web site towards the 10 usability heuristics identified by Jacob Nielsen. These heuristics are well-recognized UX pointers — the bible, if you’ll, for any UX designer.
Ideally, a full-fledged UX audit would take weeks. I had a hard and fast scope, so I checked the platform’s dwelling web page, consumer profile, and search web page. These are a very powerful pages for customers. Simply analyzing these few pages gave me greater than sufficient perception for my redesign idea.
Good UX interprets into glad customers.
That’s the place I began: figuring out consumer wants. First, I analyzed statistical knowledge in regards to the platform. For this, you need to use such well-known instruments as Semrush and SimilarWeb and critiques from Trustpilot, Google Play, and Apple’s App Store.
Take SimilarWeb. The tool analyzes edX’s rank, site visitors sources, promoting, and viewers pursuits. “Pc Electronics” and “Expertise” seem like the most well-liked course classes amongst edX college students.
SimilarWeb analytics for the edX platform (Large preview)
For consumer suggestions on edX, I went to Trustpilot (Google Play and the App Retailer are related just for analyzing cellular apps). I discovered that the majority customers reward edX’s programs for his or her helpful content material, however complain in regards to the platform’s UX — most frequently in regards to the onerous and time-consuming verification course of and poor buyer assist.
edX consumer evaluate on Trustpilot (Large preview)
Executed with the analytical verify, I moved on to consumer interviews. I went to design communities on Fb and LinkedIn, searching for college students of on-line programs, asking them to reply a few of my fast questions. To everybody who responded, I despatched a simple Google Form to seize their primary wants and what they worth most when selecting an schooling platform.
Having obtained the solutions, I created two consumer profiles for edX: potential consumer and long-time consumer. Right here’s a fast illustration of those two varieties:
Two consumer profiles for edX (Large preview)
I recognized these two sorts of customers based mostly on my survey. In keeping with my findings, there are two widespread eventualities for a way customers choose an academic course.
Learner 1 is principally targeted on selecting between completely different schooling platforms. This consumer sort doesn’t want a selected course. They’re visiting varied web sites, searching for a course that grabs their consideration.
The second type of learner is aware of precisely what course they need to take. Supposing they’ve chosen edX, they would wish an efficient search perform to assist them find the course they want, and so they’d want a handy profile web page to maintain observe of their progress.
Based mostly on the edX consumer profiles, their wants, and the statistical knowledge I gathered, I’ve outlined the 5 commonest issues that the platform’s clients would possibly face.
Quite a few elements decide a web site’s credibility and trustworthiness: the brand, critiques, suggestions, displayed costs, and many others. Nielsen Norman Group covers the theory of it. Let’s give attention to the apply.
So, what do we’ve right here? edX’s present dwelling web page shows the logos of its college companions, that are seen at first look and add credibility to the platform.
On the identical time, the house web page doesn’t spotlight advantages of the platform or consumer suggestions. That is usually a deciding issue for customers in selecting a platform.
edX dwelling web page (Large preview)
It’s good to study from rivals. One other EdTech platform, Khan Academy, demonstrates fairly a special strategy to web site design. Its dwelling web page introduces the platform, talks about its advantages, and reveals consumer suggestions:
Screens of Khan Academy dwelling web page (Large preview)
Many a time, customers simply need to rapidly scan the record of programs after which select one of the best one based mostly on the outline.
edX’s course playing cards show the course identify, establishment, and certificates degree. But, they might additionally present necessities reminiscent of pricing, course score, what number of college students are enrolled, begin date, and many others.
Correct description of parts is a vital a part of UX, as talked about in Jacob Nielsen’s sixth heuristic. The heuristic states that each one info helpful to a consumer ought to at all times be accessible.
Taking a look at one other EdTech platform, Udemy’s course playing cards show the course identify, teacher, score, variety of critiques, and worth.
edX and Udemy course playing cards (Large preview)
In keeping with a study by Mirjam Seckler, completion time decreases considerably if a signup kind follows primary usability pointers. Customers are virtually twice as probably to enroll of their first attempt if there aren’t any errors.
So, let’s have a deeper have a look at edX’s kinds:
Dashing up the registration course of is yet one more essential UX precept. To learn extra about it, have a look at Nielsen Norman Group’s usability guidelines for website forms.
Screens of edX’s signup (Large preview)
Many web sites let customers enter knowledge manually to hurry up the appliance course of. One other EdTech web site, Udemy, has an possibility to point out and conceal the inputted password by request:
Udemy’s signup (Large preview)
Search is likely one of the most used web site options. Thus, it ought to be useful, easy to make use of, and quick. Numerous usability studies present the significance of useful seek for large on-line open programs (MOOCs).
On this regard, I’ve analyzed edX’s search. I began from web page loading. Beneath is a screenshot from Google PageSpeed, which reveals that the platform’s search velocity has a grade of 12 out of 100.
edX evaluation on Google PageSpeed (Large preview)
Let’s now transfer to looking out in a selected class. In its present design, edX has no filtering. After selecting a class (for instance, electronics programs), customers must scroll via the record to search out what they need. And a few classes have greater than 100 objects.
Class web page for electronics programs on edX (Large preview)
EdTech platform Coursera has seen filtering on its web site, displaying all the choices to filter from in a class:
Enterprise class web page on Coursera (Large preview)
Researchers don’t stop stressing that EdTech platforms have, on common, greater retention charges than different web sites. Subsequently, monitoring consumer progress and motivation is vital for on-line programs. These ideas are fairly easy but efficient.
That’s what edX’s consumer profile appears like:
edX’s consumer profile (Large preview)
Khan Academy’s consumer profile shows varied statistics, reminiscent of be a part of date, factors earned, and longest studying streak. It’d encourage the consumer to proceed studying and to trace their success.
Khan Academy’s consumer profile (Large preview)
We’ve completed analyzing the commonest consumer wants on edX. It’s time to maneuver to the 10 usability criteria recognized by Nielsen Norman Group, a UX analysis and consulting agency trusted by main organizations worldwide.
You are able to do a primary UX checkup of your web site utilizing the ten heuristics even if you happen to aren’t a UX designer. Nielsen Norman Group’s web site offers loads of examples, movies, and directions for every heuristic. This Notion checklist makes it much more handy. It consists of very important usability standards required for any web site. It’s a device used internally at Fulcrum (the place I work), however I assumed it could be good to share it with the Smashing Journal viewers. It consists of over 100 standards, and since it’s in Notion, you may edit it and customise it nevertheless you need.
The primary heuristic is to at all times hold customers knowledgeable. Merely put, a web site ought to present customers with suggestions at any time when an motion is accomplished. For instance, you’ll usually see a “Success” message when downloading a file on a web site.
On this regard, edX’s present course playing cards could possibly be enhanced. Proper now, a card doesn’t inform customers whether or not the course is on the market. Customers must click on on the cardboard to search out out.
edX web page for mechanical engineering programs. (Large preview)
If some programs aren’t accessible, point out that from the beginning. You would use vivid labels with “accessible”/“not accessible” messages.
The system ought to converse the consumer’s language. It ought to use phrases, phrases, and symbols which might be acquainted to the common customer. And the knowledge ought to seem in a logical order.
That is the second criterion of Jacob Nielsen. edX’s web site just about follows this precept, utilizing widespread language, usually accepted symbols, and acquainted indicators.
edX web page for electronics programs (Large preview)
One other good apply could be to interrupt down programs by sections, and add easy-to-understand icons.
This heuristic stresses that customers at all times ought to have a transparent method out after they do one thing by mistake, one thing like an undo or return possibility.
edX makes it not possible to alter your username as soon as it’s been arrange. Many web sites restrict the choices for altering a username for safety causes. Nonetheless, it is likely to be extra user-friendly to make it changeable.
edX account settings (Large preview)
Some web sites permit customers to avoid wasting knowledge, a standing, or a change at any time when they need. A very good apply could be to supply clients various choices, like so as to add or take away a course or to avoid wasting or edit their profile.
In keeping with this fourth UX criterion, design parts ought to be constant and predictable. For instance, symbols and pictures ought to be unified throughout the UI design of a platform.
Broadly talking, there are two varieties of consistencies: inner and exterior. Inside consistency refers to staying in sync with a product (or a household of merchandise). Exterior consistency refers to adhering to the requirements inside an business (for instance, procuring carts having the identical logic throughout e-commerce web sites).
edX generally breaks inner consistency. Working example slightly below: The “Discover” button appears completely different. Two different-looking buttons (or some other parts) that carry out the identical perform would possibly add visible noise and worsen the consumer expertise. This challenge may not be vital, but it surely contributes to the general UX of the web site.
The “Discover Programs” buttons on edX (Large preview)
Good design prevents consumer error. By serving to customers keep away from errors, designers save them time and stop frustration.
For example, on edX, if you happen to make a typo in your electronic mail deal with, it’s seen solely after you attempt to confirm it.
Creating an edX account (Large preview)
Granted, stay validation isn’t at all times good for UX. Some designers consider it problematic, arguing that it distracts customers and causes confusion. Others consider that stay validation has a spot in UX design.
In any case, whether or not you’re validating stay or after the “Submit” button has been clicked, hold your customers and their objectives in thoughts. Your activity is to make their expertise as clean as potential.
Customers shouldn’t must memorize info you’ve proven them earlier than. That’s one other UX guideline from Nielsen Norman Group. Colours and icons (like arrows) assist customers course of info higher.
edX’s dwelling web page shows college logos, however not the schools’ full names, which illustrates this level. Additionally, the consumer profile web page doesn’t inform you which programs you’ve accomplished.
edX consumer profile (Large preview)
The platform’s UX could possibly be improved by exhibiting programs that customers have already performed and recommending comparable ones.
In keeping with this UX precept, velocity up interplay wherever potential by utilizing parts known as accelerators. Principally, use any choices or actions that velocity up the entire course of.
edX doesn’t present filtering when customers seek for a course. Its absence might enhance the effort and time customers take to search out the course they want.
edX search web page (Large preview)
Search is likely one of the vital levels of consumer conversion. If customers can discover what they need, they are going to be a lot nearer to changing into clients. So, use filters to assist customers discover programs extra rapidly and simply.
This heuristic tells us to “take away pointless parts from the consumer interface and to maximise the signal-to-noise ratio of the design” (the sign being info related to the consumer, and the noise being irrelevant info).
Merely put, each ingredient ought to inform a narrative, like a mosaic. Designers talk, not beautify.
Evaluating the present design of edX’s dwelling web page to the earlier one, we will see an enormous enchancment. The principle photograph is now far more related to the platform’s mission. edX additionally added insights into what number of customers and programs it has.
edX’s earlier and present dwelling web page pictures (Large preview)
This heuristic states that errors ought to be expressed in easy, explanatory language to the consumer. It’s additionally good to obviously clarify why an error occurred within the first place.
edX’s 404 web page serves its objective general. First, it explains to the consumer the issue (“We will’t appear to search out the web page you’re searching for”) and suggests an answer (giving hyperlinks to the house web page, search perform, and course record). It additionally recommends fashionable programs.
edX 404 web page (Large preview)
This final heuristic is in regards to the necessity of assist and documentation on any web site. There are a lot of types of assist and documentation, reminiscent of onboarding pages, walkthroughs, tooltips, chats, and chatbots.
edX has hyperlinks to a assist heart hidden within the footer. It’s divided into sections, and customers can use a search bar to search out info. The search does a very good job of auto-suggesting subjects that is likely to be helpful.
Sadly, customers can’t return to the house web page from the assistance heart by clicking the brand. There is no such thing as a direct strategy to get again to the house web page from there.
edX assist heart (Large preview)
Allow customers to return to the house web page wherever they need on the web site.
Based mostly on my UX findings, I resdesigned the platform, specializing in the dwelling web page, consumer profiles, and search outcomes web page. You’ll be able to see full pictures of the redesign in Figma.
First issues first: To satisfy usability heuristic 8, I’ve made the entire web page extra minimalist and added house between its parts.
edX has the grand mission of “schooling for everybody, all over the place”, so I made a decision to place this on the house web page, plain and daring.
edX’s mission (Large preview)
I additionally switched the photographs to raised replicate the story introduced within the textual content. I expressed the mission with these new illustrations:
edX’s mission redesigned (Large preview)
The “New Programs” part beneath highlights the newest programs.
I additionally added some particulars that edX’s playing cards at present don’t show. This made the playing cards extra descriptive, exhibiting important details about every course.
edX redesign: new programs and fashionable topics (Large preview)
I additionally used icons to point out the most well-liked topics.
I added a reality sheet to point out the platform’s credibility and authority:
edX redesign: reality sheet (Large preview)
As well as, I freshened up the footer, reshaping the languages bar to be extra seen to customers.
In edX’s present design, customers don’t see the choices accessible whereas looking out. So, I designed a search perform with auto-suggestion. Now, customers simply must sort a key phrase and select probably the most related possibility.
edX redesign: search (Large preview)
I added a left sidebar to make it straightforward to filter outcomes. I additionally up to date the UI and made the course playing cards extra descriptive.
edX redesign: search filters (Large preview)
As talked about within the audit part, it’s important to encourage customers to proceed learning. Impressed by Khan Academy, I added a progress bar to consumer profiles. Now, a profile reveals what number of classes are left earlier than the consumer completes a course.
edX redesign: consumer profile with progress bar (Large preview)
I put the navigation above in order that it may be simply seen. Additionally, I up to date the consumer profile settings, leaving the performance however modifying the colours.
A UX audit is an easy and environment friendly strategy to verify whether or not design parts are performing their perform. It’s additionally a great way to have a look at an present design from a recent perspective.
This case introduced me with a number of classes. First, I see that the web sites in one of the vital topical industries proper now might have their UX up to date. Studying one thing new is difficult, however with out correct UX design, it’s even more durable.
The audit additionally confirmed why it’s essential to grasp, analyze, and meet consumer wants. Comfortable customers are devoted customers.
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.