/
Design process

Mobile Learning Design Principles: Let’s Steal Them From Social Media

0

mins to read

Uber has millions of drivers worldwide, and new ones join the platform every day. Being Uber, you obviously have a hard time trying to keep quality standards across the whole network.

Uber ride meme
Uber rides can go wrong in many, many ways

Face-to-face training centers for drivers may be a solution, but it’s an expensive, hardly scalable and barely standardizable solution. Online learning sounds better, but you still have to provide a bunch of employees with computers.

Uber’s decision was to provide drivers with bite-sized, interactive lessons on their smartphones. In gaps between rides, drivers accomplished 2-5 minute microlearning modules on everything, from delivering excellent customer service to lawful road behavior. Drivers upskilled via Uber’s mobile course saw consistently higher customer ratings — by 10% higher

Uber’s story shows that the mobile learning concept rocks.

What is mobile learning (and why it rocks)

Mobile learning, also known as m-learning, is an educational strategy that uses digital content through mobile devices.

It is flexible, informal learning. You don’t need to slouch in front of your laptop. Instead, you learn on the go, whenever you can spare a moment. Plane delayed at the airport? Go through some lessons. You're in line for chili hotdogs? Watch a short video. Feels like the bus is taking forever? You got the point.

It has a broad toolkit. Mobile phones possess functionalities that are not possible for desktops or laptops. They allow designers to build a genuinely unique learning experience. Like, smartphone's geofencing enabled PinPoint to develop lessons that trigger when a person enters a set location. And smartphone cameras helped Visible Body to create a comprehensive anatomical 3D atlas.

The Human Anatomy Atlas app learning design
The Human Anatomy Atlas app

Finally, m-learning is more effective. Since learning paths can be easily customized and content is broken down into smaller chunks, users show better completion rates on mobile.

There is just one small fly in the ointment of mobile learning

The flip side of the fact that m-learning doesn't make you slouch in front of your laptop is that you don’t make time for learning specifically. Staying in a line for chili hotdogs with the same success you may open either a learning app or Instagram. Or Twitter. Or YouTube.

So yes, your eLearning mobile app design is going to compete with Instagram, Twitter and YouTube. You may create the most engaging learning app in the world, with superior content, attractive design and UX so smooth that users would want to stay forever. But they will not, because…

Oops someone has just liked my photo, need to check it NOW. *leaving your app for Instagram

Social media apps dominate smartphone users’ time. They take more of our time than gaming, chatting or music apps. And much, much more time than any mobile learning system.

social media are the most engaging type of apps. Total minutes spent in-app for week: 131
Image credit: simform.com

Mobile learning design principles from kings of attention economy

Our cognitive processing capacity is finite while content flows are infinite. Yet, social media apps know how to earn a piece of our attention pie in the age of notifications, calls, texts and the whole world wide web at our fingertips. Let’s steal some basic design principles from them.

Human interaction

People are social animals, our whole civilization is built on communication. We even have a chemical in our brain called dopamine that rewards us for evolutionarily beneficial actions like eating delicious food, exercising and having successful social interactions.

Social media know that, and trigger our reward system for better engagement. They offer us opportunities to shine, to get positive feedback and peer recognition — and we return for that experience again and again.

social media positive feedback loop diagram: Use social media - Receive attention - Get dopamine hit - Use social media...

So don’t make people take your courses in solitude. Simple interactives such as group discussions, quizzes, and contests can stimulate that sweet feeling of reward that improves both user engagement and retention.

Mobile-first learning experience

Mobile learning instructional design is notorious for trying to squeeze desktop interfaces into mobile. But to design a seamless mobile app, designers should think in terms of taps, swipes and pinches rather than mouse clicks. 

It's pretty understandable that businesses want their app to be available across multiple devices. For instance,  PublishXI asked Eleken to design learning management system for both web and mobile. Thus, we created different products for different devices. The mobile app differed due to minimalistic UI and navigation buttons on the bottom.

LMS design for PublishXI
LMS design for PublishXI

The same way  social media approach their mobile-first interfaces.

Most users navigate on their phones with a single hand, and the layout should allow them to click, zoom, or pinch the screen easily. Look how Twitter and Instagram put all navigational buttons at the bottom of the screen so users can reach them with their thumb. They also make clickable areas large enough to tap with your thumb or finger.

social media UI design
Learn mobile UI design from the best

Scrolling is another mobile design best practice we can adopt. There’s a temptation to transfer the “click next” style of learning design from desktop to mobile, but it may feel awkward on portable devices. Better let users scroll through content with a flick of a finger.

From social media we can also learn how to value the screen real estate on mobile devices. Actually, the recent trend among top apps is to minimize the number of UI elements and colors down to vanishing them. Thus, users can fully focus on content.

Bite-sized content

Social media believes good things come in small packages, so they limit users’ verbosity. 280 characters to express yourself in Twitter, 60 seconds for a video in TikTok — you have to communicate the message as quickly as possible.

That makes a lot of sense. Snackable content is primarily designed for people to consume on the go in tiny time spans on tiny screens. Not to mention users themselves preferring their content to be shorter.

43% of audience really like short articles and 39% short videos vs Longer reports (21%) and longer videos (20-30mins)
Image credit: Source Global Research

The concept of thinking small for maximum results works perfect when it comes to the content for a mobile learning environment. Educational content that has migrated from classroom training or e-learning rarely works for mobile phones. 

Users will ignore a tiny screen packed with bullet points and will get overwhelmed by collages of tiny images. But they will appreciate your effort if you summarize the information to small learning activities they can complete in 5 minutes or less.

Design for different circumstances

Apps that are too feature-rich may look great and feel amazing, but fail to work on old, low-end phones with a poor internet connection. Social media are designed for billions, so they try to keep all the diversity of their audiences in mind. They don't always succeed, but they definitely try hard.

Margaret Gould Stewart, the director of product design at Facebook, said that she and her fellow designers traveled the world, used products in non-English languages and tried using low-end devices to make sure everything worked well. She called it "keeping in touch with others' reality."

Consider that in most cases, learners will use your app using mobile internet. Reduce the number of heavy features and heavy assets you use. Compress your images and videos as much as possible before importing them.

Good LMS design principles also include offline functionality. People looking for something to do with no access to the web is a golden opportunity for mobile learning.

Here is how it worked for Booking.com entrepreneurial learning program's participant:

“Using Udemy’s iPhone app, I managed to download an amazing course just moments before boarding the London Underground and ended my 45 minute train journey (quite boring usually) feeling so empowered.”

Mobile learning design principles to help people learn

We like to explore new stuff, probably no less than clicking on "like” buttons. It’s in human nature to be curious, to seek knowledge and eliminate uncertainty by discovering new stuff. So maybe when mobile learning technology in education will unleash its winning strategies, just like social media has found one that works for them, people will shift their attention from facebooks and twitters to learning. 

If you’re reading this post and think you want to enter the market with your own m-learning application, Eleken UI/UX agency would be happy to assist. Drop us a line.

Dana Yatsenko

Author

Table of contents

Top Stories

Design process
/
0
min read

Discovery as the Most Important Phase of Every Project

Just as the saying goes, “A good beginning is half the battle won.” True, if you take the discovery phase too lightly, you will pay a great price for it just like FoxMeyer did.

In 1993, FoxMeyer was the fourth largest drug distributor in the USA, with a $5 billion valuation. However, by 1996 it was already bankrupt and sold for a paltry $80 million. Why did such an ambitious company fail? Unfortunately, the poor discovery set the project up for failure adding it to the list of the worst project management examples.

The company had high hopes for its ERP system. However, during
the discovery phase, FoxMeyer neglected to seek customers and stakeholders support. The company didn’t consider expert advice, users, or the potential effect on the community. As a result, the ERP system was too hard for users to handle, and finally, users actively opposed it.

Let me share with you the Design Squiggle, created by Damien Newman, a CEO of the transformation consulting firm Central and a former design strategist at IDEO, that illustrates the value of the design process.

the illustration of the Design Squiggle, created by Damien Newman

In a simple way, the Squiggle conveys the messiness and uncertainty in
the creative project management process as well as proves that the discovery is essential.

Here at Eleken, we believe that discovery is critical for both businesses and users. True, it is the DNA of every project because it is the primary step before you even start thinking about colors, fonts, and layouts.

Eleken is a creative design agency located in Ukraine. We focus on creating full-service design projects for startups. We are passionate about implementing innovative approaches in design as well as providing our clients with high-quality customer support.

Eleken works hard to provide the best possible design solutions and user experience. Our values include integrity, professionalism, and dedication to perfection.

Our experience has demonstrated that if we identify all the requirements of the project correctly before the beginning of the design project development, it can reduce the project budget and help to meet the deadline.

Knowing how important the discovery project phase for the future success of the project is, how to effectively organize it? Achieving this goal takes several steps. So let’s cover five project management steps in the discovery process below.

5 Steps in the Discovery Process

The design process begins with a discovery phase. We set out to bring clarity to concepts, articulate the goals, constraints, and measures of success for the project. We work together with our customers to develop real understandings of what achievements we expect in terms of outputs and outcomes.

As a result, we create a detailed plan that reduces the risks of a new project. The discovery engagement includes the following steps:

The First Discovery Meeting

In the first meeting, we identify the company’s vision, which consists of the current state of the company and where the company wants to be.  
Business owners are the key people who should be involved in the entire process. We speak to the CEO, the managing director, and staff who can provide us with the understanding of what is needed.  

We’re trying to identify the following:

  • What does the client want? (desired state)
  • What exists today? (current state)
  • What we need to know and understand to get the design to the desired state (gap)

Company’s Brand Identity

The discovery meeting provides us with the company’s internal view of their brand and goals for the brand. Then, we work on the way how we can reflect a brand identity when designing a  product.

Identifying the Target Audience

We make detailed user research which helps us understand who are our users and how they may interact with the digital product/website or application that we’re going to develop.

We focus on the following:

  • Demographics: age, female/male, location, culture, etc.
  • Backstory problems: the issues that plague the company.
  • Their needs and wants: how to identify them.

Also, we make a competitor analysis. Analyzing competition, we get a fair idea of how to handle the various aspects of the same product and its users, understand the strengths and weaknesses of the existing solutions.

In the discovery process, we usually go through the following steps:

  • User interviews
  • Creating ideal personas
  • Surveys
  • User needs
  • Creating customer journeys

That said, customer journey mapping becomes a handy tool that helps us visualize users relationship with a product/brand over time and across different channels.

Customer Journey Mapping

A journey map is a route that your user takes through a product or service. This route can include any transactions, as well as different services like reading your content. Understanding your customer’s journey means putting yourself in the users’ shoes. It’s all too easy to think we’re creating the best solutions possible, but until we get into the head of our user, we won’t really know.

So what does customer journey mapping help us to solve? To answer this question, let’s look at the example below:

CJM example

Customer journey mapping represents a timeline of all touch points between a user and a product. Also, it contains information about all channels that users use to interact with a product. All in all, it helps us create a shared vision of the future digital product.

Mission Statement

After all the information gathered, we create a mission statement or brand statement that incorporates all of the steps above.

The mission statement should include the points below:

  • The things you want people to know about your business: your offer, the target audience.
  • Your point of difference (how you serve your target market differently and better than all other options).
  • Your business promise.
  • Your brand character or personality that will go through all brand expressions.


Then, we compile a discovery document so that anyone who involved (the client, designers, developers) can quickly gain an understanding of what we’re working on during project implementation.

The Value of Discovery

The discovery process goes a long way towards creating a website, an app, and visual brand identity that operates as an extension of a business and its brand. We implement this process in each design project we work on because without discovery, we’re flying blind. For us, it is the best way to define whether the project is moving in the right direction at the early stages.

Here at Eleken, we pay special attention to understand users better. We can help you create a cutting-edge product that will stand out on the market.

Design process
/
0
min read

How to Find and Fix UX Issues Early So You Don’t Lose Users

Imagine your microwave oven is broken. You buy a new one, and it gets broken again. After throwing your fifth microwave in the garbage bin, you decide to invite an electrician, who discovers that the cause was the poor electric wiring. The good news is, you finally got your wiring fixed. The bad news, you wasted money on five ovens.

A similar thing happens in UX design. When product owners feel that something is not working right, they often decide to make a redesign. But a new look does not guarantee that the underlying problems disappear. Often, they stay and continue frustrating users.

A more efficient method, in this case, is to find UX issues in design and fix them topically, without a full revamp. We can say this for sure, as we’re a SaaS design agency, and fixing bad UX designs is our job. 

Many clients come to us with a request for redesign, but in the process of communication, we discover that there might be faster and cheaper solutions to their problems. And in this article, we’ll give you an idea of how it works.

How to find UX issues?

Finding UX design issues is the first step on a way to UX design problem-solving. There is a number of tools that can be used to detect these issues, or frictions, as we call them. The word “friction” is quite self-descriptive: it’s that feeling that a user has when the product is not designed in the most comfortable way.

Some of these UX research methods, such as user interviews and usability testing, can be run by product owners themselves. On the contrary, methods like UX audit need a person from outside with proper qualifications, a UX professional who is not familiar with the product and can look at your product with a “fresh pair of eyes”.

Usability testing

During usability testing, a researcher follows a group of users while they are performing tasks with the product. It also includes asking questions to understand the motives of the actions. By observing users, the researcher sees where they experience problems, make errors, or get lost. The research can be qualitative, as well as quantitative, and measure a range of usability metrics.

User shadowing

This method may seem similar to usability testing, but there are some critical differences. Shadowing is done in the “natural habitat”, so that the usage situations are not “staged”. User shadowing requires more time and resources from a researcher, but the results can show a wider scope than usability testing.

User interviews

This research method is more subject to biases as the researcher has to rely on what users tell about their experience instead of direct observation. Still, it is a very common tool that brings valuable insights not only to UX professionals, but also to marketing, customer success, and sales departments.

Customer support insights

Sometimes it is hard for designers to get to talk directly to the users, especially when talking about an outsourced team. However, there are people whose full-time job is to talk to users about the problems they encounter while using the product. The customer success team must be the designers’ best friends. They can provide accurate data on what places in the product make users stuck. 

Analytics

The good thing about analytics is that this tool has little bias in itself, as we’re talking about pure data. Hotjar and Google Analytics don’t flatter designers to make them feel better. 

The challenge with analytics is that its efficiency depends totally on the person who does the analysis. For instance, the analytics show clearly which pages cause users to abandon the task. But what is the reason? That’s the question for researchers to answer.

UX audit

This is Eleken’s ultimate tool when we start working with a new client who finds their existing design unsatisfying. Our designer scans through the product and evaluates every part of it according to the basic requirements of a good design following the heuristics of good design.

As a result, we prepare a UX audit report. In our work, it is typically a presentation of all UX design issues our designers found in the product, suggesting a fix to each of them.

UX audit example

The process of detecting and prioritizing UX issues

It’s always good to have more than one source to find UX issues. The process of working with UX design problems and solutions is not as simple as “find and fix”. Let me explain it using the example Acadeum, an eLearning app we redesigned for our client.

First of all, our designers went through user flows and highlighted the questionable areas. All the problems were listed on post-its in Figma and later discussed with the product team.

detecting UX issues and asking questions

Apart from the UX audit, we also had access to recordings of several in-depth interviews with Acadeum users that we listened to. After that, our designers spoke to the customer support officer, the ultimate expert in users’ troubles. Together, they went through the app again and noted all the areas that were causing difficulties for users.

So, we ended up with a huge list of issues. To make sense of them, our designers sorted them by jobs-to-be-done. On the right side, we placed suggestions of solutions for each one.

Jobs - Pain points - Pain relievers

So, now that we had the problem/solution table, it all seemed perfect… But in the real world, it’s not as easy as taking all of them and changing them at once. There are timing issues, tech demands, and so on.

The solutions had to be prioritized. To do that, we held a workshop with the product team, where we placed all the cards on the Impact/Effort prioritization matrix. At this point, it became clear what must be done first and what could be postponed.

Solutions sorted by important/Nice to have, Likely/Unlikely

Sometimes, when you try to fix every little issue, you lose precious time while trying to reach the stealing perfection. Prioritization helped us to fit into the tight deadline and finish the Acadeum redesign in three months. If you want to learn more about UX problem-solving process, read the full case study.

The two most common questions about UX issues are: “how to identify UX problems” and “how to solve UX problems”. Now that we have answered the first one, let’s move to the next.

In our work, we face all sorts of UX design problems. Examples range from complicated navigation to confusing fonts. The issues described below will give you an overview of the things we work with daily.

Long and confusing fill-in forms

Let’s take as an example a case of one of our clients, Ricochet360, a CRM system.  Here is what the “add a new lead” screen looked like: 30 fields and no hints on how to fill them in.

Ricochet360. Add a new lead screen with 30 fields

Issue: no indication of data format.

Some fields like “phone number” can be entered in many different ways: with spaces, hyphens, brackets, country codes… It causes confusion for the user and complications for the data storage system.

Solution: unify the data format and give hints right in the field.

Fixed UX issues: fields highlighted in red and with asterisks

Issue: the form is too big to grasp.

Do users have to fill all 30 fields every time? Can they easily find the most essential ones?

Solutions: a red asterisk was added next to all the required fields. The most commonly used fields were shown on the screen, while the rest less frequently used were hidden behind the “Additional information” drop-down.

Redesigned screen Ricochet360

Flawed filtering systems

Filtering is an essential feature in apps dealing with large volumes of data. Oftentimes, a small improvement in filtering results in a huge improvement in user experience. That’s the first thing we fixed in Enroly, a student engagement product that hired us for a redesign.

Big table, filter button invisible

Issue: The filter button was not visible

Solution: Remove it from the “search” menu and put it at the top of the screen along with the Search field.

Enroly redesigned. Filter button added

Issue: Long list of filters that is hard to scan through

Enroly with a long list of filters

Solution: Split filters into groups by meaning.

Filters divided into groups: Student, ffers, Engagement, Finance

Issue: Filtering tags were layering one on top of another, thus minimizing the working area.

Filters in two lines, taking too much space

Solution: Place the tags in one row.

Tags placed in one long row

We also tried to simplify the usage of filters by anticipating users' actions to minimize possible errors. For example, in the previous design, users had to enter nationality manually if they wanted to filter students by this characteristic. A simple typo could ruin the search. To prevent this, we created a drop-down list of all nationalities which can be scrolled or chosen after the typing has started.

The story of Enroly shows us the exciting world of filtering design. To find out more, read the full case study.

Cluttered screens

For mapping services, the amount of information that has to be fitted into one screen is one of the main challenges. We had worked with complex mapping products like Involi and Astraea which contain lots of data.

Issue: Side panels take too much space and the map becomes small

Solution: Add a “Hide side menu” button to close and open the side menu when needed.

A map with side menus that can be hidden

Issue: The numerous objects on the map look the same and affect readability.

map with many overlaying objects

Solution: Differentiate the objects (receivers) by color: green for “working”, yellow for “selected”, red for “error”, and grey for “disabled”.

Map with receivers marked with different colors

Bottom line, or how to fix UX issues fast and effectively

Sometimes UX issues are simple and easy to fix. And sometimes, it is the structure of a product that makes the product so complicated to use. In the former case, cosmetic changes are enough, in the latter case, fundamental work is needed to overhaul the structure.

Some issues are ruining the success of your product, while others barely impact anything and are only noticeable to perfectionist designers. 

Overall, there are numerous ways of dealing with UX issues, but there is one golden rule: the earlier you find them, the better.

It means that you don’t have to wait until your churn rate grows to an unsustainable level and the customer support officer burns out from an excessive amount of tickets. Start with finding UX professionals who can have a fresh look at your product and ask them for an audit. At Eleken, we can analyze your product during our 3-day trial and present the issues and suggestions for you to later decide whether you want to us lend you a helping hand or not.

Sounds interesting? Schedule a call and we’ll tell you how to find the top UX issues of your app.

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.
Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.