Skillshare

Analysis & Redesign

While taking my Information Architecture (IA) class at SCAD, we had the assignment to conduct an analysis and redesign of an existing platform.

I had around two weeks' time to understand Skillshare's current platforms and their IA, identify the strengths and weaknesses of their systems, and come up with improvements toward their current IA.

Final Presentation

Role

I analyzed and redesigned the information architecture of the Skillshare website and app.

Tools

Figma & Google Suite

Duration

2 Weeks

The goal of this project was to conduct a detailed analysis and redesign of Skillshare's Information Architecture. I started by splitting the assignment into four sections; comprehend Skillshare as a brand and their current AI, analyze the strengths and weaknesses of their current application and website, compare the website and app and improve their weaknesses.

Comprehend

Skillshare is an online educational video learning community. The courses are not accredited. Skillshare is giving teachers and students the opportunity to provide or learn new skills. The courses are built for interaction, with the goal of finishing a project at the end of a course.

Skillshare is one of the most popular online learning platforms with 20.000+ classes & 8milion+ students and offers:

Project-based learning
Live sessions & workshops
Student projects
Download classes & watch remotely

Skillshare targets two different types of users:

Students who: want to discover new skills, want to expand their knowledge, want to work in a community that provides feedback to their work
Teachers who: want to share their knowledge, want to earn extra money, want to find potential employes

Skillshare's free version limits access to videos and the premium version lets you access their whole library. You can work at your own pace, by starting and stopping courses whenever you want. You get thought by professionals and industry leaders, in categories like creative arts, design, entrepreneurship, lifestyle, and technology.

Analyze

I chose to re-design both, the website and application. The website had confusing navigation. Skillshare is advertising their community and exchange of student's work but is hiding categories like Workshop, Student Projects, and Groups in their Global Navigation System. The application offers no access to certain features and is hiding the category section.

Shown below the original blueprints of the website and app:

Let's start off with the analysis of the website

Organization

Skillshare's website uses an exact organization scheme, grouping content under the Browse section between Create, Build and Thrive. You can also access an overview of All Classes, Recommended Classes, Student Projects, and Groups. Student Projects and Groups should be located in the Global Navigation System because they are hidden in the Browse section.

I also noticed that Skillshare is using a mix between a heterarchical organization and a hierarchical organization. Heterarchical Structure is used to give the user an overview of the categories skillshare is offering. Hierarchical Organization is used to sort the categories and suggest videos to the user after choosing a category.

Labeling

Skillshare has an overall easy labeling system. Existing users know where to go and find things. Users can discover a variety of videos by scrolling down on the landing Page and in the Browse section. They offer fast and easy access to Last Watched Videos and My Classes but hide the community options in the Browse section.

Navigation System

The Global Navigation is good structures but the Local Navigation could get split off by taking some of the community elements and adding them into the Global Navigation.

User Task Flow

The most common user flow is going from the landing page to Browse or Workshop to discover new skills on the website. This is executed well, and you can also discover new content on the landing page when scrolling down.

Let's analyse the application

Organization

Skillshare's application also uses an exact organization scheme, grouping content from general to specific, starting with Watched Videos, Recommended For You, and ending with specific content related to your watch history. They use a Heterarchical Structure in the application with unranked elements, however, they are hiding the category section on the bottom of the landing page. Another thing is that they only offer trending videos for each category instead of different sub-categories.

Labeling

Skillshare uses either text, icons, or a combination of both in their app. The functions are narrowed for discovering videos and accessing saved classes. The users don't have the same options as on the website, as the community sections are missing completely.

Navigation System

The Global Navigation has a classic structure for an application. However we have have a narrow navigation within the app, due to function being left out that are existing on the website. This and the plain layout of the app make the naviagtion confusing for the user.

User Task Flow

The user flow in the app is limited. That being said, the most common user flow in the app is going to the Saved Classes section. You can access them either over the My Classes section or on the landing page. Another confusing navigation here is that the first thing you see and the third thing you see on the landing page could direct the user to this task flow.

Compare

The Global Navigation on the website has more detailed information than the app, the app is missing out on certain features. The website uses text-only and the app uses a combination of text and icons, icons, or text.

The Local Navigation of the website has brought labeling. The app version is lacking in diversity and function. The website has the local menu on top of the website. The app on the other hand is hiding this important feature at the bottom of the landing page.

Improved Website

Problem: Organization scheme of the website is hiding the comment section.

Solution: Move community content from the Local Navigation System and add it into Global Navigation System

Slide to see the improved Wireframe and Blueprint of the website

You can see that I moved the Search Bar next to the logo, and placed the Browse section next to it. Next to the Browse section, I placed the Workshop, Student Project, and Group sections to make them more accessible and don't hide them inside of the Local Navigation System.

Improved Application

Problems:

Plain Navigation System
Hidden Local Navigation
Missing Community Section

Solutions:

Creating a visual hierarchy by placing Local Navigation on top of the landing page
Adapting structure from websites to create a consistent layout
Adding missing functions like My Workshop to My Classes
Create Community Section and add it into Global Navigation

Slide to see the improved Wireframe and Blueprint of the application

Interested in my work?

Let's connect.

Shoot me a message or connect with me on LinkedIn.

I would be more than happy to collaborate or explain

my work further.