YouTube Education UI/UX Case Study (Complete UX design Process)

Being a self taught designer I have been using YouTube for my learning purposes but the problem I came across each time that I get distracted with other videos of my interests and end up wasting my time.

And there comes the need of YouTube education which will only have a educational content that will help learner with the process

so being a UI UX designer I took this as my mock project and started out creating a platform “YouTube Education”.

I took this project as if I am designer at google only. (manifestation stuff)

DESIGN PROCESS

IDEATION

So, I started out gathering and writing all the idea about the feature I have in my mind and started researching.

My Notion document for the idea and flows which I have came across at that time

After this brain storming session, It was time to collect the raw data to use it as ideation purposes. I started collecting screenshots from the YouTube App, Website and bunch of other screens that I can find.

MOODBOARDING

Figma Screenshot of the raw data collection page

It was a Google’s mock project so, I have to take care for the material UI design guidelines for the designing of the app.

STYLING & COLOR PALETTE

Figma Screenshot for Styles and palette selection

YouTube already had it’s own styles and color palettes so, it was easy task as everything is already defined so I chose colors and styles from the app itself. and defined a palette for this project which I will use throughout this project.

SKETCHING

It is always best, while working on any new product or feature sketch down the ideas you have came across so when you go into the software you should exactly know what is to be done and you do it in no time.

My mock sketches for project

My mock sketches for project

WIREFRAMING

Wireframing are the basics when you are actually working on multiple idea and finding solutions to a problem at that time you do wireframes but in this case its a mock project it was not actually needed to wireframe things so I skipped this and directly went to create screens.

SCREENS

Image from the figma file

Now comes the the time to make the actual screens for the application.
I have started with the phone frame and creating and defining each and every component at the same time as you can see in the above image. Breaking each components makes the later process much more easy and fluent for developers too…

Screens

Also I was creating an educational platform and while learning you need to take notes so I added a notes section to the tab for taking notes on each video. which you can save and continue, though it is large feature itself and have multiple edge cases.

This was the base drafts for the idea… Probably google will do it someday.

PROTOTYPING

Now comes the prototyping part for the drafts

Prototyping mesh is one of the most complicated thing to look at but this does the real magic. Prototype is listed down you can check and add comments.

Tap to preview prototype

At the end I deleted the clutter and have pasted the main screens to the development page (page created on figma as development)for the developers.

MY OUTCOMES

I have planned to make this project with the purpose of getting my hands sharp on the UI UX so here is the

Key learnings I learned during the process…

1. The more you work the better you will learn. There is major difference between knowing and actually implementing.
2. Its Always better to plan and set deadlines for the tasks you pick up. you will know your progress and keep yourselves going.
3. Start documenting things to know anything better (Either yourself or it's a project)

THANK YOU

This Case study was about my Design process, how do I get my things done and how do I try to get better moment by moment. I hope you liked this make sure to like and follow for more case studies like this.