Reverse engineering the Skillshare app

For my second Ironhack challenge the assignment was to take an already existing app and make a prototype of it. I chose to work with the Skillshare app, as it’s an app that I use a lot and I really like it. Skillshare is an app (and website) that offers classes created by professionals in the creative industry. So if you want to learn how to paint, take better pictures, sing, or start up your own creative business, then this is a good app to use. It also has a lot of classes on UX/UI design, and these classes came in very handy when trying to figure out how to make my wireframes and prototype. ;)

I chose to focus on one specific flow in this app: playing a class you have saved. Skillshare sends out weekly e-mails to tell you about new classes, and I often save a lot of classes that I find in those e-mails. I will then go back to Skillshare later, to watch the classes I have saved. So this particular flow is one that I use a lot myself.

Inventory of UI elements

First, an inventory of the UI elements used in this app, and some observations about these elements:

• Search box: at the top of the first screen is a search box. This is the only place in the app where the search box appears, and it can be used to navigate to specific topics you want to learn about (hence the question “what do you want to learn today?”), and it also shows usernames of teachers. It does not list individual classes in the search results until you click on a specific topic or username.
• Tab bar: The app uses two important tab bars. At the bottom of the first screen you will see a dark blue tab bar with three options: “Watch”, “My Classes” and “Me”, which will lead to the three main sections of the app (home screen, classes saved and profile page). Once you get to a class page, there is another tab bar, right under the video box. This tab bar has three tabs: “Lessons”, “About” and “Discussions”, which leads to three sections that are important for the class: the lessons themselves, the student projects and related classes (which, frankly, is not really what I expected under the “About” tab), and a discussion page where people can leave comments about this specific class.
• Containers: the main bulk of the screen is taken up by several carousels, placed underneath each other. Each carousel contains a specific collection of items: “Continue Watching” (classes you’ve started), “Recommended For You” (recommendations based on topics you’ve watched before, I assume), “Start your saved class” (to start a class you have saved but haven’t watched yet) and “Trending in” where you can choose a specific topic to see the classes that are most popular (I assume) within that specific topic. You can scroll left and right to browse within the container, scroll up and down to go to the next or previous container. When scrolling within the “Continue Watching” container, it seems to be ordered by date (last watched first), and it seems you can scroll back endlessly.
• Buttons: The container items are specific classes. The whole container item works as a button, and if you press it, you will be taken to that class.
• Drop down list: If you scroll down to the container “Trending in”, you can press a little arrow and you will get a drop down list with all the different topics you can choose from. The current topic is in blue and underlined, making it look like a link. Annoyingly enough, the same color is also used at the top of the page, after the text “Welcome back” it says my username in blue. This makes me expect I would be taken to my profile page when tapping on the blue name. This does not happen though, it’s not a link, it’s just blue.
• Icons: The use of icons is fairly simple. There are only a few that are used. At the bottom of all screens is a navigational menu that has three icons for the different main pages. There is text under them as well though, that explains what they are. There are a few icons in the app that are used without text. A good example is the alarm clock that shows up when you go to the “My Classes” page. This will take you to a screen that will allow you to add reminders to watch your classes.
• Progress bars: When you get to the individual class screen, there will be a progress bar under the video, so you know where you are in that specific lesson. The class screen itself has the different lessons listed underneath the video, and the lessons you’ve already watched will have a check mark. Unwatched lessons have a number. The current lesson being watched is dark blue, whereas the other lessons (both watched and unwatched) are a light grey. This makes it very easy to keep track of your progress within a class.
• Toggles: Several toggles appear in the app. A good example is the possibility to download all lessons in a class, you can choose this option by using the toggle. When you use it, it will become the same bright blue that is used elsewhere in the app. The text “download all lessons” will then also change to “downloading…” and each downloading lesson will get a rotating wheel, so you can see how far along it is. The downloaded classes will get a blue arrow as well, indicating the download has been completed.
• Tags: Tags are used often in this app, as a way to efficiently navigate the different topics of classes available. They will appear when you do a search from the home screen, and when you go to your user profile (or any user profile), there will be a few tags for the specific skills the user is interested in.

Creating the low-fi wireframe

Next up was creating a low-fi wireframe on paper. This was quite hard for the first screen I did, because I had to make a lot of decisions about what to include and what not to. For example, there’s some text on the home screen, but which text is important enough to actually write out in the wireframe, and which text can be replaced by just a squiggle or lorem ipsum? I ended up writing out mostly general names for the categories, like “class name” and “teacher name”, to make sure the flow of the app was easy to follow in the wireframe, without having to add a lot of detail. Once I figured out the way I would make the first screen, it didn’t take long to make the other screens, as they would follow the same logic. This was the end result:

Task analysis

The task that I have chosen to use for this wireframing exercise is playing a video you have saved. There are two routes in the app to complete this task.

The first route is to do a search on the home screen of the app. In the search box at the top you can enter keywords for the class you are looking for. Once you start typing the app will suggest different topics that match your search, as well as the usernames of teachers that match. You can then click on the topic or username to get to a list of classes that are under this tag. You will then get to a screen where you can (hopefully) choose the class you were looking for. Usually, this will work to find the specific class. The only snag is when the teacher has not included the topic in the title of the class, but this happens very rarely. If you don’t remember the exact title of the class it can also be quite annoying to find it, especially if there are lots of classes with similar titles. It then helps that you also see the picture of the class, so you might recognise it.

A second route is to go to the My Classes tab in the bottom navigation bar. This will lead you to a page with several lists. It includes a few standard lists, “All Saved Classes” and “Watch History”, which are useful up to a point. I actually have quite a few classes accumulated in these lists by now, which makes it harder to find the one you are looking for. To solve this problem, Skillshare lets you save your classes to lists that you can name yourself. So if the class you are looking for is about for example photography, I know I can find it in the list I named “Photography”, because that’s the system I use. I like how the app works in this way, because it lets you come up with your own naming system for the lists of saved classes, which makes it easier to find them later, as it’s your own personal naming logic. However, Skillshare also has a few curated lists, made by Skillshare. These also appear on the screen of lists, so this can get a bit confusing sometimes, if you can’t remember if a list is your own or one of the curated lists. However, the naming conventions for the curated lists are quite different from my own, so for me this is not a problem, as the curated lists are easy to recognise because of this.

The only problem I have with finding a class through the list route is that when I first started using Skillshare, I wasn’t as vigilant about adding my saved classes to my own lists. So a lot of the classes I saved at first are not included in my lists. So I can only find those through the first route, unless I go back and add them all to a list (which is not likely as it’s an annoying task).

Once you have found your class you can hit the play button at the top to start playing it from the point where you left off the last time, even if it’s in the middle of the lesson. You can also scroll down to see the different lessons that make up the class, and then choose whichever lesson you’d like to see. If you do this, it will start playing at the beginning of this particular lesson. The lesson that is currently playing can be recognised as the box for this lesson will be dark blue instead of light grey.

I made a diagram for myself to get a better grip on the way the screens were connected to each other, and how the flow works:

Actually, there is a third way to access a class you have saved. If it’s a class you have already partly watched, you can find it in the “Continue Watching” carousel on the home screen. Though this only works well if it’s a class you have recently watched, otherwise you have to scroll to the right very far to find it, and it is easy to miss it if you’re scrolling fast. It will also appear in the “Saved Classes” carousel, but again, if it’s all the way in the back, it takes a lot of scrolling to get there. I never use this method to get to my saved class as I find it too finicky, so I have decided to skip it in this analysis.

Putting together the mid-fi wireframe in Invision

So the next step was to put together the mid-fi wireframe. It seems to be a pretty straightforward process. It took a bit of fiddling around (and watching tutorials), but it didn’t take me that long to get a basic prototype up and running. It’s far from perfect, but it will do for now. This is the mid-fi wireframe: https://maaikewachters969269.invisionapp.com/public/share/KJ15LO4IXV#screens/478040564.

What I found most interesting about the process is that the mid-fi version brought up new questions that I hadn’t thought of before. For example, when you draw arrows on a piece of paper to connect paper screens, then you don’t really think about the back button. At least, I didn’t. But then you build a digital version and you quickly realise that it is very likely that people will hit the back button, because I immediately did that when I first tested my digital prototype. So you need to make sure that button goes somewhere in your digital prototype.

Another thing I thought was interesting is how, when you’ve got the technical part figured out, it’s not actually that difficult to put together the digital prototype. You’ve already made the big decisions about the flow of the app, and how much specific information to include in the wireframe, while making the low-fi wireframe on paper. So when you get to making the prototype in Invision, it’s basically just a transfer of ideas from paper to digital. The creation of the ideas, which is always the hardest part, has already been done in the first phase. There might be some tweaking here and there, but I think any big issues with the main flow of the app will already pop up when you’re still working on paper.

Conclusion

I really enjoyed this assignment (both the copying of the app design in Sketch and the wireframing/prototyping part). I like messing around with design software and I thought the logic of Sketch was quite similar to the way Photoshop and InDesign work, so it felt familiar. Plus it was an eye-opening experience to have to copy the design of an already existing app. You really start paying attention to the little design details and how they work well (or don’t). The same goes for the prototyping part of the assignment. It was really interesting to deep-dive into an app flow that I use a lot. I never thought about the design choices that were made in this app, but now I realise how much thought has been put into it, and how complicated it can be to make an app user-friendly, and feel “natural” to use.

Another learning point was that it’s quite difficult to put an app flow on paper in a way that is easy for people to understand. I tried my best to make it logical and easy to follow, but I think my low-fi wireframe still needs a lot of explanation to be able to follow it. So that’s something I would like to learn more about in the next couple of months, how do you put your thoughts on paper in a way that is easily understandable by other people?

So, to conclude, I learned a lot from this assignment, but I also came up with a lot of new questions. Though I suppose that’s how it always goes. It was true thousands of years ago when Socrates said “the more I know, the more I realise I know nothing”, and it’s still true, even in this digital age. Maybe even more so, as we have access to so much more information! I feel like I have only barely scratched the surface on this topic and I’m looking forward to learning more.