How to redesign an educational app or website
From this article, you will learn more about the process of an educational website or an educational app redesign: benefits, key steps, trends, and cost estimations. If you are wondering about upgrading your UI/UX — read on!
The e-learning industry is booming. The global digital education market size is expected to exceed $33 billion by 2025. However, the competition is becoming increasingly tougher. Hundreds of thousands of education apps can be downloaded from Google Play or App Store.
Therefore, businesses should keep all aspects of their e-learning products in top condition, including their design.
Why should you update an educational app or website design?
Building an e-learning platform is a complex process, and the need for some updates, corrections and improvements may become evident post-launch. Online learning app redesign, if it is done properly, can have significant benefits. Satisfied users stay with you longer, bringing more revenue. Moreover, they spread the word about your website or application to others, driving user numbers up. Here are some pros of improving the design of your e-learning product:
Increasing conversions. When your app or website offers a simple way to satisfy their needs, they’ll keep using it. Otherwise, they will get frustrated and leave without buying anything. If your existing UI doesn’t allow learners to browse through and buy courses or some add-ons easily, think about a redesign.
Attracting the attention of more users. Great functionality may not be enough to catch the eye of the potential customers or to make new learners stay. With hundreds of edtech solutions on the market, your app or website has to have an outstanding design or at least keep up with the changes in popular design patterns. Modern users switch between dozens of digital products each day, so they can be picky. Constantly scrutinizing and updating your UI is a must in this highly competitive environment.
Strengthening bonds with the learners. Keeping in touch with your users is crucial for success. They may provide unexpected user flows or ideas for upgrades. Reacting to feedback by smoothing out user experience will be noticed. Thus, you will have more loyal customers.
Keeping your products in line with the brand book. Redesigning your product will keep your app or website consistent with your brand’s overall style after rebranding. Even if you didn’t add new features, people should be able to associate the new brand with the software. Moreover, a new concept may demand both graphical changes and functionality updates.
Successful educational app redesign examples
The phrase “rethinking your interface” may sound a little abstract. What does a successful redesign really look like? Here are some examples of digital products changing their UI.
Nurture
We’ve partly redesigned our e-learning solution — Nurture, preschool management, and communications platform. In particular, we’ve improved an application for school administrators, which is part of the platform.
Our team re-examined its design and functions, bringing the product to a new level. The administrators got more features concerning school network management, human resources management, children schedules management, invoicing, etc. At the same time, we made the UI/UX more neat and organized.
Here are some screenshots to illustrate the changes which took place:
dashboard with general information about school availability and real-time updates (before/after)
teacher profiles (before/after)
Dropbox
The older Dropbox UI had several problems. There was minimum white spacing between rows, and the small size of icons made them difficult to understand. New Folder, Upload, and Bin options were not clearly distinguished. The redesign made the UI look clearer. New features such as a thumbnail view were added. It allows users to see a preview of each file and check the list of collaborators. Account separation became more obvious, improving privacy and security.
Dropbox before redesign:
Dropbox after redesign:
In 2018, Reddit changed the design significantly. It was the first such major redesign since 2008. Users got a card-based feed and a menu bar along the left-hand side of the screen with the list of Subreddits. A blue button on the Home-page to make new posts increased emphasis on content creation.
Reddit before redesign:
Reddit after redesign:
During the course of its existence, Instagram has changed its overall look significantly. The dominating blue color was replaced by a combination of gray, white, and black. Square-shaped profile photos became rounded. The old design with a preference for skeuomorphism was simplified and flattened. All aspects of the app were integrated for a cohesive user appearance.
Instagram before 2016 redesign:
Instagram’s modern design:
The main steps to redesign educational website or app
Each digital educational product may require a somewhat different approach to its design. However, the key stages of the e-learning website redesign process remain the same. Let’s discuss them in more detail.
Analysis
Before starting a redesign, make sure you really need one and find out the UI/UX features you need to focus on. There are several ways to do it:
Use analytics tools to check key metrics. For instance, if the number of active users decreases, check user satisfaction and request user feedback. The obsolete design may be the problem. You can monitor the Activation rate, comparing the number of downloads and the number of those who still use your app after the end of onboarding. Also, watch how many people stop using your app (drop-off rate). If this metric deteriorates, you have to investigate why and where users get stuck and leave.
Build a customer journey map (CJM) — a visualization of your users’ relationships with the e-learning product across different channels over time. It will help you to understand the customer experience better. In particular, you will be able to see all the touchpoints along the user’s way to the goal.
Analyze feedback. Check reviews on app stores, social media, and conduct user research if required. You may employ online survey services, old-school email questionnaires, or in-app pop-ups for the latter. Pop-ups are used most often, but you should be careful with them. The users may view them as overly intrusive, which will affect their experience and reviews.
Study competitors. List the best features of their UI and UX and learn from their mistakes. For instance, Snapchat was the first to implement the Stories format. Now both Instagram and Facebook also have stories that are extremely popular with their users. 500+ million people use Instagram stories every day.
Design
After you’ve decided on areas for improvement, you can actually start creating a new UI/UX design. Check out the projects on Behance or Dribble to get some creative ideas. Select a design pattern for the business problem you want to solve. Make sure to compare it to other ways of solving the same problem.
Also, you’d better look for top educational apps using the same or similar pattern. Does it work for them?
The next step is to create a wireframe, presenting all key interface elements and describing their intended interactions. Then a dynamic prototype is built. It helps to evaluate the new appearance as well as the logic of interaction between elements. Before the development starts, use the prototype to identify gaps and possible improvements.
If you wonder how much to redesign an educational website, remember that you should keep a cool head. The prospect of getting a new shining UI may be very exciting. Nonetheless, don’t treat the project as a hard reset of an old UI. Use all insights on the existing site or app you can get. Otherwise, you risk replicating the same problems in the new design.
Testing and measurement
Before a full-scale rollout of your new design, try testing it on a limited group of people. Allow some users to check out new versions and provide feedback. Such beta tests can help to come to some important decisions about the redesign of an educational app UX.
If you have several conflicting redesign ideas, try A/B testing. Expose different groups of users to different versions of your interface. Analyze the metrics closely to see which solution performs better.
Keep an eye on the key metrics to assess the new design's performance. One of the most popular ones is bounce rate — the percentage of visitors who leave the website after viewing only the first page they landed on. The old and the new UIs are often compared in such a way. However, be careful with interpreting those figures. If more people start finding everything they need on the exact page they land, it may also push the bounce rate up. Nonetheless, such a redesign can hardly be called a failure.
Another popular metric to watch is the conversion rate. It is the share of visitors who complete the desired action (a conversion) out of all visitors. High conversion rates signal that the content of your platform is engaging, the design is easy-to-follow, calls to action are clear enough, etc.
Key trends in UX for e-learning platforms
The ways to improve the UX metrics of educational platforms are quite numerous. Still, we collected some of the best practices in e-learning UX redesign.
Keep your design simple
People come to educational platforms to learn something new. However, they are not very keen to struggle with confusing navigation systems or look for information on overloaded web pages. Such design flaws make your website look outdated, casting doubt on the relevance of educational content.
It is better to use a minimalist design with calm, light colors and simple fonts. Make sure that the navigation buttons can be easily spotted. For example, you can put them on the top or left side of the page.
Make your UI look good on any device
Modern learners want to study anytime and anywhere. They may employ different devices: smartphones, laptops, tablets, PCs. Making your e-learning platform accessible from any device is a must. An e-learning platform with a responsive design has a larger target audience. It is also essential for your organic traffic. Moreover, such an approach helps you keep up with or even get ahead of the competitors.
Split the content into multiple sections
Check that your content blocks are not too large and can be consumed in one sitting. Microteaching is becoming increasingly popular. Let users deal with large chunks of learning materials one piece at a time.
Note that the infinite scrolling feature, though widely used in website design, is hardly an appropriate choice for an e-learning platform. Users will just browse the content, looking for something new to catch their eye, instead of analyzing and memorizing information.
If you have to present users with a large amount of content (text, video), break it up into sections to provide some landmarks. Firstly, the data will be less complicated to grasp. Secondly, it will facilitate the learning process, making learners feel more efficient and satisfied.
Pay attention to accessibility
Make sure your app’s and/or website’s design is accessible, inclusive and accommodating the needs of users with different abilities. There may be strict requirements for accessibility in your region and liability for publishing sites that do meet those requirements. Here are several accessibility tips you should strongly consider implementing:
Implement focus indicators: highlight the contours of individual design elements (buttons, text fields, links, etc.) on which the keyboard or cursor focuses.
Use sufficient color contrast to make the text easily distinguishable for people with visual impairments.
Employ elements other than color (icons, bold, italic, or underlined fonts) to highlight information for the benefit of colorblind users.
Attach alternative text to pictures describing what is in them for visually impaired people
Add subtitles or transcriptions for video and audio content to account for people with hearing impairments
Implement intuitive keyboard navigation to make using your product easier for people with visual or mobility impairments (see the screenshot of Udemy’s home page above).
How much does it cost to redesign an e-learning app or website?
The educational website redesign cost to a large extent depends on the specifications of a particular project. The interfaces of e-learning platforms may have various degrees of complexity. The MVP version design will be cheaper. Also, UI redesign may be or may not be accompanied by adding new features.
The number of operating systems should also be taken into account. Usually, the designers create the entire UI/UX interface of the mobile app for one operating system and then adapt it for another. The second version may take less time and cost, however, it still requires additional investments.
The location of the team also influences the design cost. The hourly wages of designers in the USA or Western Europe are twice as high as in Eastern Europe or India.
All in all, the redesign cost will vary substantially for different redesign projects. If you have some specific project in mind, contact our team to discuss some details and get a quote.
To give you a general understanding of a redesign project’s scope, here are the approximate time frames of each stage:
Update your design with Menklab
If you notice your metrics deteriorating, users complaining, or you just want to keep up with the latest design trends — your e-learning app or website may need a redesign. A proper upgrade to your UI/UX will boost the number and satisfaction of your users, hence, support your revenues. However, such a project demands a team of experts to analyze the existing design, create a new solution and test it.
Menklab can provide you with such a team. We’ve been developing custom software solutions for eight years. Menklab worked with clients from various industries, including education. Our engineers have experience in developing custom e-learning solutions and management systems for educational businesses. Our designers created UI/UX for web platforms as well as Android and iOS apps. Contact us, let’s make your product better!