MyABC’s → e-Learning App —Design Report

Mario L. Agostini
9 min readFeb 10, 2021

Context & Briefing Alert

Last week’s project’s premise was to deliver an MVP for an e-Learning mobile app, a Hi-Fi functional prototype with a main flow describing the completion of an in-app purchase transaction.

The deliverable was to include a presentation with the usual insights about our design process and final product, but this time with an added business model briefing explaining how the platform is going to be monetized, and a brand identity statement -that ideally could be perceived through the product itself-, demonstrating a clear alignment among business, application, and users goals.

We had a week to do some complementary research on the proto persona (already provided among the premises), brainstorm about viable business models, design a branding statement, ideate navigation flows, design wireframes, and finally build a Hi-Fi functional prototype.

Alicia and my complementary user research

My first approach to the project was doing complementary user research through some interviews that could help me to better frame the information provided by the proto personas established as premises. The idea for this was to find out the different deciding factors the subjects pondered when choosing to buy a subscription to an e-learning app, and the expectations than come along with it, as well as deal breakers.

Alicia is the name of the proto persona that I chose for the completion of this project. She’s a single 31 year old living in Barcelona working as a fashion buyer for Mango, and looking to further develop her marketing skills by completing a Google analytics certified course. Her goal is to apply for an open position on the marketing team, hence the need for a certified program, but her particular pain points reside on her lack of time. She has an active working/social lifestyle so she doesn’t have the time to look for a reliable and quality course and even doubts having enough of it to commit to a long program.

Among the 5 interviewees, there were 3 that had a lot in common with Alicia, the other 2 coincided with the other 2 profiles depicted among the premises of the project with diverse interests, different motivations and no time restrictions, which is mainly the reason why I chose Alicia. I thought of the time restriction factor as a key opportunity to approach a different navigation pattern and to embrace the progressive migration towards media content production that’s been happening for years.

These would be my most important INTERVIEWS INSIGHTS:

  • The potential user should be able to look through the app before signing in to be able to see the interface and content lay-out.
  • There should be a free account to allow users to explore some of the platform’s content to get a better feel of its quality and aesthetics and more properly decide to subscribe or not.
  • The subscription scheme should have full access to all platform owned content and at least offer discounts on third parties’ content.
  • The application should allow in-app product purchases for free accounts without having to get a subscription to do so.
  • Ideally, the content should be displayed in a way that could be easily located by topic, categorized by type of membership (if it’s paid or not) and also filtered by formats for a quicker search and more clear visibility.
  • The content should be up to date, valuable, accessible, pertinent, available, and presented on inviting and practical formats

The general insights from this process were determinant during the analysis of different business models and decisions related to possible income revenue streams. This knowledge also impacted the app’s navigation flow and pattern and even the branding identity statement.

Business Mode: ON — Brainstorming revenues

During the business model brainstorming, I came up with several options to consider in terms of income revenue streams like, advertising services, B2B / B2C subscription schemes, in-app purchases, sponsorship, and some others.

Within the context of an e-learning app being intrinsically linked to knowledge and therefore, to content in every dimension possible mainly its quality, diversity and management… It was evident that the user should have the option to explore some features of the app and the content catalog before making any commitments, as I chose to adopt a subscription based business model.

Also, the need for a free-account scheme was clear from the interviews in order to expand the platform’s initial reach, and also to provide the user with usable and up to date free content, that could serve as a quality/diversity sample, and facilitate their decision-making process to subscribe. The free accounts would have an initial quote of content they can access for free, and once reached, a monthly limited amount.

These would be my proposed INCOME REVENUE STREAMS

  • The B2C subscription scheme would have a monthly and yearly payment option with the opportunity to cancel at any time, it would offer unlimited access to all content including the platform’s courses for free, and a 20% discount on third parties’ paid content like e-books, courses, online classes and the likes.
  • The B2B subscriptions scheme on the contrary would have 2 modalities. A full unlimited content subscription plan to be paid only yearly and would include all B2C benefits to companies looking to improve their personnel’s strategic skills, and a platform services subscription that would include renting platform space for third parties’ content that whether complies with the platform’s norms and requirements, or includes an additional charge for content curation.

Here comes the branding identity statement Bus…

Having Alicia as the main focus, it was also important to design the app with flexibility, versatility and practicality in mind as the product should be adaptable enough to accommodate different audiences with the same goals, but simple enough to have always in mind that not everyone is our user.

Living through convulsive times when almost everything is changing, and job security seemed to be a thing of the past, people in general are re-evaluating their professional paths and e-learning has been crucial among the younger generations to develop their skills and increase their value. There’s also a not much older generation that was clearly not as ready to embrace this change of pace, and with remote working going rampant, they feel almost obligated to reevaluate their careers and the way they acquire new skills to now compete in an entirely virtual market for remote jobs.

Parting then from this feeling of uncertainty that we’ve all suffered from the pandemic situation, and intimately related to the “future” way of living -it’s already here-, there’s a tangible need for some sense of relative stability among all the “getting ready to ramble” chaos -think Ironhack-, which can very well come from the product itself, by offering a proper set of recent, valuable, and appropriate content that can reaffirm the users about its quality and present them with a clear path for a self paced training and development.

That was the goal, an app that would be the ‘Go-To’ platform for young and contemporary contemporary adults to diversify and further develop professional skills relevant to recent times corporate trends and current job markets demand.

Thinking about valuable development areas, a clear path for training, and the need for some stability makes me think back to elementary school, when on the contrary, there was not a worry in the world more than the typical question about what to do once grown up… the go to platform to develop your skills as a kid was school, and having read a little about using a warm colours palette for designing e-learning related content -increases attention and improves the mood-, didn’t take much for the image of the typical yellow school bus to come to my mind.

The problem or challenge was in being flexible enough to approach all proto personas without losing focus on the main audience, also thinking creatively as to how to approach the lack of time vs. development dilemma, but I think we can all relate those feelings back in highschool and even college. So I took inspiration on the typical yellow school bus to make yellow the main color of the app with high contrast black and white, black representing the stripes of the bus, and B&W for the classic blackboard and chalk association.

Managing knowledge is the new social, as virtual spaces where people can share online, and develop skills at the same time are becoming the COVID norm.

Benchmark features, benchmark flows, benchmark this…

One of the very things that I did, was to download some e-learning apps (obviously) to check out their flows, how they laid-out the content, their visual expression of the brands and the apps’ as well.

My main subjects on a competitive dimension were Udemy, LinkedIn Learning, and Plural Sight, and analyzing their navigation flow and content layout, while my focus on the comparative dimension was aimed towards Books, Kindle, TED, YouTube, Podcasts, Audible and iTunes U, and analyzing their navigation patterns and content display.

I particularly noticed among the direct competitors, the impressive tendency to create multimedia content in different formats and it seemed appropriate given the plans I already had for a navigation tab bar that offered media and reading sections separate for a quicker segmentation of the desired content.

It was a little difficult to find free courses on the different platforms, so I thought about portraying in the home screen, gateway recent content, dividing it on 3 categories as free access content, subscription access content, and exclusive content (third parties). Each section would have a filtering mechanism to navigate through categories and formats.

Iterations of the Log — Resume

The following describes a resume of the changes made to the original design during the different iterations made in between usability tests.

  • The Lo-Fi iterations served its use as guides for improving the navigation flow of the app to satisfyingly completing an in-app purchase transaction.
  • They complied with a major support during the initial “screen-cutting” process, where original navigation flow was reduced from 11 screens to 9 screens.
  • They allowed for a particularly useful usability evaluation that impacted the final design for the ‘My Boards’ section.
  • The Mid-Fi wireframes iterations allowed for a significant reduction of the main navigation flow, from 9 screens to 6 screens by incorporating overlays.
  • They allowed for a proper resizing of styles and content within the prototype to better align with iOS standards.
  • The Hi-Fi prototype was only evaluated once in regards to its usability as time prevented me from doing some more to validate the visual design to a more detailed extent.

A brief side-bar session…

Since the very beginning I was worried that the fact that I didn’t want to compromise my position of supporting human design as opposed to user-conditioning branding statements (Human Interface Design Vs Design Material) would compromise my results for the task, as part of the exercise was to “translate” our design from one platform to the other (Apple/Android) -little did I know I wouldn’t have time to do so-.

In any case, I’m a firm believer of the “Rule of thumb”… and even though I didn’t want to do it, and never got to do it… I guess it would be proper to say that if I would’ve done it, I would have changed the nav tab bar from the bottom to the top of the screen, I would have played with the idea of a drawer-hamburger menu combo, and definitely would have gotten rid off the standard navigation bar for Android at the bottom if I could.

These would be my CONCLUSIONS

  • Usability tests keep proving to be vital in regards to the design’s overall validation and evaluation.
  • Time is always of the essence… in order to test more, earlier testing is mandatory.
  • CRAP and Heuristics keep demonstrating to be deserving of 10 commandments estatus and be set in stone.

These would be my FUTURE CONSIDERATIONS

  • Explore more palette colours and improve the realistic quality of the content included in the prototype.
  • More usability tests to evaluate content and colours palette as well as evaluating CRAP and Heuristics.
  • Evaluate possible diversification of income revenue streams, proposing a mixed business model.

--

--