Leeearn, an e-Learning App. The Project.

The assignment is to, on my own and in 5 days, ideate from scratch an app for a new eLearning platform, and prototype one of its flows in high fidelity. If possible. If not, do one or two screens in hi-fi and the rest of the flow in mid fidelity.

Further considerations: We are encouraged to come up with an interesting pricing model, as a potential element to differentiate from the competition.

1. Looking for e-students.

There are a few ways to go about the initial research for this project. I discarded doing a survey because, upon first findings, the amount of people who have actually done a course on one eLearning platform is much lower than I expected. This could produce unreliable data on a survey, since answers would be more attitudinal than behavioural. Instead, I decided to conduct several user interviews with people with experience in some platform.

8 people were interviewed at length and there were some common traits:

• Users choose courses, not platforms. This means they are more inclined to pay each course than to subscribe to a platform.
• They prefer courses that are not very long, under three months is the preferred duration for most of them.
• They say that they are the only ones responsible for making it successfully to the end of the course.
• They are quite disappointed with mobile apps for these platforms. They want clean and unobtrusive apps, with prices clearly displayed, with good quality content available on multiple devices (broadcast quality videos, PDF’s and ePub’s well formatted…), and they say the ones available fail at many of those things.
• They need more choices of good quality “casual learning”. As one interviewee put it: “It feel like there is nothing decent between a Cambridge or IBM course on Coursera and a YouTube tutorial”.
• Want frequent feedback points and clear displays of their progress. They are deemed to be the best motivation available.
• Want free demos of their courses. Having the first lessons or a few days for free, is a good way to verify the quality of the course’s media assets before payment.
• Human help when having doubts with the app or the course is always appreciated.

2. Meet Daniel

After the initial round of user interviews, I developed a user persona, to better identify user’s needs, desires, and pain points during the design process. It also was helpful at the time of deciding on creating a platform oriented to “casual” learning instead of trying to compete in a field, high level courses by universities and big companies, that is already super populated.

The use of this persona was very useful during the ideation and refinement stages.

3. What about the others?

After talking for hours with users and developing the persona, it was time to do an analysis that would be comparative rather than competitive.

This analysis showed that eLearning apps were the disaster that many users have talked about on the initial interviews. Among the most common pain points were lack of prices and estimated durations of the courses on display. This, that might be excused in cases of very crowded screens, happened even with huge blank spaces that weren’t significant on grounds of visual design or real estate.

Screens from three main competitors on the eLearning app market with no prices or durations on display.

Another common complaint was about the low quality design of some apps and of the poor quality of their contents. Some don’t have ePub versions of their courses for eBooks, some PDFs are very poorly formatted, some courses are just copied and pasted chapters of a book licensed under Common Creative licenses...

Some eLearning apps could do with more refinement.

4. Starting to Build

At this point, I turned to Information Architecture as the tool to start building my app. The plan was to:

1. Define the components of “a course”. What tags and metadata did it need? What media contents? What properties? Once those things had been laid out, I could start to choose which ones were to be in the first version of the app, which ones were essential for the Minimum Viable Product.
2. After knowing what bricks would build a course, the next step before ideation began was to list all the features that users might need or want and, again, select those that could not be left out of the first version.

Different stages of the Information Architecture used in this project.

Once this process was done, there seemed to be a clear set of features for the app. It was a matter of bringing them onto a prototype so we could start testing them on users as early as possible. That would validate the selection, show if there was some omission, and tell what need to be refined.

To start working on a visual design for the app, I started by doing some sketches by hand. The aim was to place all the needed elements and then try to find where they should be placed for the user’s flows to be natural and intuitive. The work on research proved itself crucial: since it made clear what elements had to be on the app, it was “only” a matter of where and how. And that is a task that is made much simpler by abundant user testing.

From the first abstract sketches to the first lo-fi prototype.

5. Iterate, iterate, iterate!

The app consists of a search function used to find courses, be it by their title or by their tags. Once the course is located one can read a brief introductory description. At that moment, the user can buy the course or buy a subscription that gives access to the courses. The user has an area where all their courses are listed, where the progress on them can be followed, and where their media assets can be accessed, be it the text files, the accompanying videos, or the audio version of the texts.

When the iterative cycle began, user testing started to point to several elements that needed changes. Some were a technical matter, like using texts that were easier to understand. Others were indeed relative to the design; like adding pictures to the navigation bar at the bottom of the page, replacing the text “settings” with a customary clog icon and introducing a search field on a prominent and accessible position. Another thing I added after some users asked for it was the estimated duration of the courses, both to the search results page and the progress bar, when it was used.

The exploration screen and some of the improvements discovered during user tests since the first lo-fi prototype.

The final result can be seen in this video in YouTube.

6. And What Next, Then?

The whole creation process for this app was done in just 5 days, so many things were left out of its first version, the minimum viable product. Some of the things to pursue would be to:

• Add Tests and frequent (but not intrusive) Feedback Points. This was quite talked about on user interviews as the best way for users to assess their progress.
• Research and develop a motivation system. Most users were convinced that, whether they reached the end of the courses or not, it was entirely their responsibility and that the apps could not help them. Thus, ideating and developing some motivational tool, if possible, would be extremely useful for students and for the app, since it would get some added value differentiating it from many competitors.
• Add a completion rate to the courses that showed how many of the students that started them, finished them.

7. Most Important Lessons

The key learning from this job was the value that user research has in the early stages of development. A good user research produced good insights and good data that made the design process much easier. Many of the questions that we have to ask ourselves in order to create a good product have already been asked by users earlier, if we find them, we will be able to spend less time designing, so there will be more time for testing and that will mean better results altogether.

I wanted to thank all the readers that started to read this report, and especially the ones that made it this far.

Thank you very much!!!

All words and images: CCbySA.

Except for the last gif!!! (Source: Giphy)