UX/UI Ironhack Prework — Challenge 2 : Wireframe and Prototype LinkedIn Learning
After the exciting first task, here I am with the second challenge with UI learning. In this Prework challenge for the UX/UI bootcamp my task was to ‘reverse engineer’ Interaction Design and User Flow of an app. It included creating a 5 screen wireframe with the User flow of a chosen app. I chose LinkedIn Learning, an app that I had been using daily since last year to keep learning and refining skills.
LinkedIn Learning — App
LinkedIn Learning is an online educational platform that helps you discover and develop business, technology-related, and creative skills through
expert-led course videos. It features more than 16,000 courses in seven different languages, all taught by industry experts to help users advance in their chosen fields. With the app, you can discover, complete, and track courses related to your field and interests.
No matter what level you’re at in your career, there are always more skills to learn and more knowledge to obtain. LinkedIn Learning is a premium educational platform offered by LinkedIn with their main goal as “Learn anytime, anywhere” by making it easy to learn on the go with a download option in the app.
User Journey
A user is commuting in a bus to go to work. It will take them an hour to reach their destination. They decide to use the time to be productive and learn something new. They open the LinkedIn learning app.
First thing that catches their eye is the best course recommendations offered by the app, calculated as per their past learnings.
The courses seem interesting, the user keep browsing and checks the trending topics.
After check their skills that they have already learned, they start a course from the recommended courses on the home page.
After 50 minutes of learning, the user exits the video and goes to my learnings page and feels happy that they can start their course ,where they left, on the way back home.
Here is the illustrated User flow:
Here is how the screen looks like:
Wireframe
A wireframe is a visual guide that represents the skeletal framework. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. Here you can find the wireframes that I created.
Prototype
You can see the prototype here: Link
Connections:
- Home screen with Topics, My learnings and course video
- Topics page with Home and My learnings
- My learnings page with Home, Topics, course video and My skills
- My skills page with Home, Topics and My learnings
Learnings
This task was fun and challenging. Understanding a flow of a product and the journey of user was challenging but exciting. I enjoyed this task. It’s a process of fail and learn, hence there are still a number of mistakes in my work but I am happy to have learned a new process and look forward to keep learning and improving.
