This is a sample lesson.
The goal is to give you an overview of what the course is about and to show you the app I chose to redesign for teaching UI/UX in practice.
Eventually, the course will be extensive, but its exact structure will be adapted based on various factors, including your feedback and requests.

What the course will look like

I will teach you how to design a web app. The main idea is that instead of focusing solely on tools, UI kits, branding, illustrations, and so on, we will focus on the entire product.

I will not neglect the aesthetics part; I think it's important. However, I will also focus on:

  1. Going deep into each piece of the user interface, providing several points of view on the same issue, and choosing the one that fits best for a specific task.
  2. Teaching theory combined with practice.
  3. Taking into account the business side as well as the development side.

In the real world, things often go wrong. You might conduct thorough research and design an ideal form, but instead of being praised, you hear complaints from developers because implementing the form takes too much time. This means that sometimes you might have to simplify your solution.

Another example: you are in the process of designing a complicated form, almost finished, but then all of a sudden your CEO says that the company urgently needs to tweak it by adding something that doesn't fit at all, maybe even a dark pattern. How do you deal with such situations?

In a nutshell

The course will be delivered on a custom platform, where you will have an account with access to the course content.

It will consist of chapters and lessons. How many? I don't know yet.

Since the platform is custom-built, I can add features based on the majority of students' requests.

Essentially, it will be a combination of videos, illustrations, text, references, and occasional code snippets (when they are universal and applicable to many cases).

But.

I will also be in touch with you and, based on your feedback, will adapt the course to cover any missing points, fix mistakes, and address any concerns..

One of the ideas that seems reasonable is to create a private community where you can ask questions, provide feedback, and discuss UI/UX and related topics. I'll determine what suits best for this purpose.

Why "different"?

I tell everyone that the course is "different". Let me explain the idea.

Imagine you want to know how to properly display analytics. If I took an imaginary app and showed you a chart, it would look nice.

But there's a problem.

This is exactly the same as creating a new JavaScript project: you have a clean boilerplate structure, and you're thrilled to write some code and show some results quickly. After all, it's not that hard to add a JS library and display a chart.

But then the functionality grows, it gets complicated, and this is when you actually learn.

Instead of thinking about how complicated an imaginary app can be, why not take an existing one?

It's the same as having a detailed description of tasks that are already established, already complicated, and full of exceptions and non-obvious issues.

The app I chose is outdated in terms of UI and has many usability problems. This is the best way to learn how to display charts: research the theory and apply it right away to real tasks.

  1. In a "typical" case, you would google: "how to display charts, best practices."
  2. In this course, you will be asked: "How to display the best time to post your tweets? What options do we have? Which one is the best?"

I could have chosen any app. Most people would probably suggest redesigning Amazon, Facebook, X, or something similar.

Why Fedica?

First, it has a lot of issues. This often happens with big apps that do not update their interface for a while as they grow in features. You might call it "design debt," similar to "technical debt."

Second, it's big enough to cover different aspects of UI/UX. It has a diverse feature set, and we'll have a lot to cover.

Third, during this course, while I'll be redesigning and showing what problems the app has, I will also be in contact with the CEO.

This is important because the business may have its own reasons for doing things the way they did. Users might work with the app in ways we do not expect. There's a good chance I will gain insights about how users actually use the app, what problems they have, and what features they ask for.

Just as in coding, developers might wonder why certain decisions were made, but no one can tell under what circumstances those decisions were made.

That's why I chose this app as an ideal candidate: it balances complexity, the number of things we can learn, and the insights we can get from the CEO.

Let's have a look at the app, finally!

I've only shown a couple of pages. Each page and each part of each page needs to be fixed. That's why I expect the course to be extensive and full of interesting solutions.

But for now, let's take a quick look and note some obvious problems.

So, you got a new job, opened a project, and...

What can we note down?

  1. Wrong usage of icons in navigation: both the choice of the icons and the use of primary color for them.
  2. Widgets have a full set of problems: hierarchy, alignment, copy, and inconsistent border radius.
  3. Numerous issues with visual styling (inconsistency, shadows).
  4. Probably too many links in the navigation. The page structure (information architecture) needs a detailed review.
  5. Copy needs a lot of work (using verbs in the navigation, not using verbs in buttons, inconsistent titles, and so on).

So what?

During the development of the course, I'll first cover some theory and supplement it with real examples (I will keep emphasizing this: real cases are what we need).

Then, we'll redesign the entire app, starting from the layout and working through each page. Since the pages are quite different, we can learn a lot: charts, long lists, pagination, tables, dashboards, forms, settings, and much more.

The focus will be on BOTH usability and aesthetics. In other words, we'll make it nice for users while keeping in mind business requirements and limitations.