02 ——— MySkillCamp

Redesign Process & Iteration of a Landing Page

Introduction

MySkillCamp is a B2B learning platform that helps companies manage and train their employees. I was contacted by MySkillCamp to work with them on the redesigning of their landing page and their illustration style. I collaborated with Davy Carretta on the illustration

Year

2018

Work

Freelance

Link Website
picture introduction
picture introduction
01 Timeline & Process

This project took about six months, more or less, with two major redesigns. The first one was kind of a failure but it helped us to understand what wasn’t working with the previous illustration, and what was hard for our target to understand. The first time, we basically tried to change the illustration style without questioning the meaning of it. The second iteration allowed us to change the point of view and ease the understanding of what MySkillCamp was providing as a service.

timeline
02 Early Redesign Version

After performing some market research, taking a deep look inside their old branding and understanding the product, I produced some wireframes to help us visualise the hierarchy of the content. Since we were on a tight deadline, we didn’t want to formalise much on the layout. Wireframing helped us in shaping the illustration with the layout.

For the illustration, the key idea was to show the concept of the camp (camp was used as a structure for managing learners; you could have a camp for designers or a camp for developers, for example) as a literal camp where people would learn and share their knowledge.

content hierarchy iterations
Content hierarchy iterations
page shipped
Couple of pages that we shipped
Iterating on the actual design and getting feedback

I kept working for MySkillCamp on the redesign of their platform and, a couple of months later, we understood that the new branding wasn’t convincing enough. We decided to reshape the illustration and content structure; using our previous mistakes and asking better questions would lead us to a better identity. We worked together again with Davy to create something closer to the vision. We tried to put every value of the product inside the landing page.

We didn’t really do a complete redesign of the new landing, we were just doing an iteration of the last one. And in the final validation meeting when everyone was satisfied with the way it went, we decided to change everything because our target wouldn’t understand the multitude of elements in the new landing page.

03 Getting the right content

We started working on the new landing. The first thing was to understand what was wrong and missing previously. I decided to work from scratch on the content. I worked with a marketer and the CEO to inventory all the content, writing the strength of the solution on post-it notes. I did a quick hierarchy between the page to see if all the main categories were in the right place and tried to create the beginning of storytelling.

hierarchy
interaction
04 Illustration Research
Research

I think the major thing was to change the point of view of the target when they came to the website. The main strength of the platform was to make it easier for businesses to manage their collaboration. And clearly, we had the focus on the learner in our last identity. We thought that showing people experimenting with the environment would reassure them. So, we did some research on how to display those different ideas.

illustration research
Illustration process

Coming from camp and a natural environment to a manager organising their course was a challenge. The idea behind the last iteration was to display the efficiency of managing the different parts of a learning course and keeping the concept of camp.

first iteration
First illustration iteration
second iteration
Second try
last iteration
Last iteration
Final Version

We created two types of illustrations: the first one with character. We wanted managers to feel like they were holding their learner crowd on their screen and a second type with a floating land island for a more schematic explanation.

hero header
Composing the hero header
illustration
Get help with our expert
illustration
Turning your physical content digital
footer illustration
Overlaping the footer with the illustration
05 Landing Page Layout

We were satisfied with the last iteration: we did understand afterwards that trying to combine several ideas when they are not bound together doesn’t fit, and now with the right content hierarchy and illustration, everything felt like it was falling into the right place.

other pages
Responsive

After finalizing the desktop version, we adapt the layout to be enjoyable on mobile, since a lot of our target is using their mobile.

responsive page home
Home page
responsive page product
Product content
responsive page expert
Expert page
responsive page catalogue
Catalogue
Thanks for watching! Back home