Aviato: The e-learning app

Aviato Sign Up Screen

Aviato is an e-learning platform that provides online and on-demand courses to help people improve their careers, develop new skills, and lead a better life.

In week 4 of the Iron Hack UX/ UI design Bootcamp we were tasked with designing a self-paced learning product that generated revenue based on subscription fees associated with access to content.

The idea was not to build a full and extensive product but rather an MVP. In order to qualify the design had to be built around core features that are useful to the potential early adopters who would ideally provide feedback that a product team can use to continue product development.

I worked alone on this project and delivered one user flow in high fidelity. In this piece I’m going to explain the process I followed, how I made my decisions and how the design changed along the way with different iterations.

For whom is this for?

We were given three proto-personas but one of them had to be the primary user of the app. So the idea was to focus on the primary user yet still doing the best to accommodate the needs of the other two without sacrificing the focus on the primary user.

I chose Alicia as my primary user as I’m going through a similar path to her.

I tried to really zero in on her needs and frustrations. The thing that strikes me the most was she knew exactly what she wanted to get from an e-learning app. This made me focus on a very specific experience tailored for her.

What would make her stay with the app upon initial experience?

I had to decrease the time to value as much as possible. Since she knew what she wanted to learn(at least initially) her buy-in would most likely occur once she has access to the real value. I assumed in her case this would be to moment that she understands a certain content meet her criteria and is presented in a way that she believes that she can follow.

What’s on the market?

Images from benchmarking

I analyzed the user flows, layouts, design systems and revenue models of the following direct competitors on the market: Domestika, Udemy, Coursera.

Domestika used white space very efficiently and made the whole look of the app simple and friendly.

I liked Udemy’s dark UI, which is a trend these days. It especially makes sense as in this case it takes hours to consume this content and looking at a bright, white screen can cause fatigue and negatively impact the experience of the user. That said, the revenue model of Udemy was undesirable as it didn’t make sense in terms of creating an active user base that continuously jumps from one milestone to the other. In an ideal world, I’d like to keep my users engaged and consuming content month after month. And as in Audible’s case sometimes the revenue model can aid this behavior.

Things starting to shape up…

So here was my starting point when it comes to what I decided to build.

• A dark UI app that’s doesn’t come at the price of viewership fatigue and provides battery life preserving effect
• An app that focuses on the 3 pillars of a modern-day adult’s self-improvement journey: career, skills, happiness
• A business model that collects monthly recurring revenue and provides 10% of each content for free to remove the barrier to entry which eases the decision making process of the user
• An app that tailors you experience but showing you only the relevant content based on your selections during the onboarding

Color Palette and the difficulty of Dark UI

I had a hard time finding colors that would contrast well with a dark background and be easily visible. Also in retrospect, I can say that my effort to make the most important distinction points of a course stand out and be different from each other yielded sub-par results.

User flow 1

User flow 2

Alicia’s flow

1. Alicia downloads the app
2. She log ins with Google social login
3. Selects her goal as improving her career
4. Chooses marketing as the topic
5. Clicks on the filter icon and applies her conditions
6. Sees her filtered results
7. Selects one based on the information she sees on the course card
8. Check the course details
9. Checks the curriculum
10. Clicks on “unlock all content”
11. Select to continue
12. Subscribes with apple pay

Iterations done based on usability tests

I had the chance to do 5 usability tests with a group of people who all had common points with Alicia: white-collar workers between the ages of 25–35.

Changes to the filter

At first, I was thinking about really making this filter feature shine and make it the best possible way to help users who know what they want find what they want. Well, it’s easier said than done.

Also, I was thinking about separating the service and the product from the rest of the heard with including content prepared by the professionals from the big names of the industry. (It was mentioned that we could be creative about where the content came from)

Based on the tests I decided it was best to remove this option for two reasons. A) It was not easily understandable by the testers B) It was not feasible in a real-life scenario. We said goodbye to this feature with two no’s.

Also, I removed the sub-category search bar as it was mentioned by multiple users that they’d rather just search the topic.

Somehow in the first version, I didn’t think of putting a “Start Course” button and asked the users to go to the screen before to do that. This didn’t makes sense and it was against my strategy of easy access to content.

And users mentioned this as well so I added the button.

Another change happened in the course details screen. The first version required the user to scroll a lot. Once discovering this usability issue I divided the content in one page into two and added the “course details” button.

You can find the full interactive prototype here:

What can I do better?

• Spend more time ideating
• Becoming more focused on differentiating the design visually
• Time management

What did I learn?

• I should work on my visual design knowledge and skills
• Dark UI is effective but difficult to get proficient at