Redesigning The Experience Of An Elearning Platform
I've collaboreted with MySkillCamp to rebuild their elearning platform, from the user experience to the design system.
I’ve always used services to store my inspiration resources. I like to save images and links with an interface to organise and share them when working on a project. This is a time-consuming task when it comes to doing it with a new service. Unfortunately, all the services I used shut down, so I decided to build one.
This was my first side project, and it helped me to improve my design skills but also how to build something from the ground. Finding motivation, how to rationalise decisions, working as a team. I decided to not pursue working on this project because the excitement and the momentum were gone.
With a good knowledge of the different bookmark and resource managers like Zootools, Kippt, Iceber.gs or Octobox, I added to my research, sites with the same problematic-like blog or news feed. I made a list of basic functionalities and kept the elaborate ones for a second version.
The basic tasks of Colllect are to add, remove and organise files (visual, link & note). The point was to have a decentralised tool than could be installed on your server or plugged with Dropbox.
I was frustrated by a lot of interfaces I’ve used. They were not built to deal with the import of a hundred of files the first time and were not quick enough for daily use. Efficiency was key to design the experience.
The content you add in the interface needed to take most of the space and Colllect needed to be distraction-free, but it should also be a fun interface with its own personality.
Colllect is designed to organise your resources with tags. You can add multiple tags to an element and filter all elements with that tag on the page. You can also create collections if you want to be more organised, or projects where you can export your project to show it, for example, like a mood board to your team. You can also connect your Dribbble or Behance, and get your social feed directly into Colllect.
The purpose of Colllect was to be an easy day-to-day interface where recurrent actions needed to have as less friction as possible. And we tried to build some features in that way :
I wanted to create an intuitive tag manager that was fast to use. The tag manager opens itself near the button so you don’t have to move your mouse far from where you clicked to do your next actions.
If you have tons of files to manage and you want them to be organised by tags, it takes a huge amount of time. I tried to simplify the process by adding a custom menu when you select multiple elements.
Working mainly with popups was the solution, because it feels like they aren’t cutting the user flow. If you add content to a collection, it’s better if you constantly see the collection in the background to make sure you add the element to the right collection. The account page is also a popup.
Working on a quick prototype helped us to realise the things that were not working. For example, the hover on the thumbnails, since I always put my cursor in the gutter, it felt that the action on hover was frustrating.
The masonry grid-based design was chosen to not alter the content. I wanted to keep the ratio of the pictures rather than having everything the same size, to keep that total overview on the content. Sometimes when you save a picture, the interesting part is at the bottom of it, so by using cropped thumbnails, you won’t remember why you saved this picture. All of the actions, like adding an element, works with popups.
Building the interaction in motion, helped us determine the efficiency of the animation. I didn’t want that animation to slow down the process of adding content. I used After Effects at first, but an HTML prototype gave a much better result when trying these interactions.
We had a couple of iterations for the logo. We selected the one displaying the idea of collecting pictures in a book, so I used a paperclip with a simple sans-serif font. We wanted something minimal and simple that would be easy to play with.
This landing page was probably the first satisfying project I did. I have a ton of iteration, from playing with illustration and a character behind their desk at night to 3D mock-up. But it never felt right. The illustrations were not ‘mature’ enough, too cartoonish and 3D mock-ups were too overused. I didn’t want to show the interface because it was too bland, just a grid of pictures. So, I tried to work on something around displaying illustrations or pictures like the grid in Colllect. I didn’t want the product to have the appeal of someone else’s work, so I used flat illustration to show content. See it live!
Every project is a chance to learn and explore something new. With this one, we tried to play with SVG to understand the boundaries of it. We played with SVG and mask to create interaction. It helped us in displaying more information without showing the same picture.