Soooo many options...

Kompas is a company that organizes camps for children and adults. Their offer is one of the biggest in Poland. No matter what passion has your child they have a camp for him. Everything sounds great, but how do you find that one, perfect camp among 300 offers without loosing whole day?

WHAT I LOVED about this project the most was studying decision making process and making it easier for Kompas clients. Also the amount of information to organize (I love organizing)

THE BIGGEST ISSUE in this project was complete separation of me as a designer with developer. Launched website is not what I designed – decision makers did not follow some of my suggestions and decisions, therefore some features do not work as they should.

Role 

UX/UI designer

Tools

Adobe Illustrator

Adobe Photoshop

Adobe Xd

screeny.jpg

Long story short

What makes Kompas stand out?

  1. Over 300 different camps

  2. Well-developed pre and after sale service

  3. Proven and trained educators

  4. Over 20 years on the market

  5. Customer trust

What's their goal?

More reserved camps throughout the website rather than via phone or in person.

Old website... 

At first glance you can see that it was not up to date with design.

It had a lot of information, so neither of them was easy accessible.

The more you went into it the more information you found.

It had almost no order.

Unfortunately I didn't document the website properly when designing it. It just wasn't on a priority list. Fortunately I found a screenshot of home site.

and it's problems:

Problem 1: Bad organized information, menu with 88(!) buttons.

Task: Rebuilding information architecture.

Problem 2: Many dropped baskets due to poor designed forms.

Task: Improving buying process.

Problem 3: Difficulty in finding offers.

Task: Improving search engine and filters.

Problem 4: Old looking interface.

Task: Giving the website a more modern look.

Problem 5: Website doesn't scale.

Task: Make it responsive!

Ok, let's dig deeper!

Who is using the website?

In order to know our users we went to people that know them best - customer service in Kompas. Few hours of focused workshops reviled characteristics of 4 personas. We got to know their specific needs and goals, motivations but also barriers. Knowing that we could start designing.

Meet:

persony-04.png

Anna Precautious

persony-01.png

Tom Decided

persony-02.png

Johnny Enthusiast

persony-03.png

Company Representative

Which information is important?

At a time I got to know Kompas's website information were all over the place. Some of them were not needed, others nearly impossible to find. Menu itself had 88 buttons.

We checked data in Google Analytics to determine which sites are unnecessary and removed them. The rest of information we organized by card sorting. As a result we came up with

a menu divided in two sections.

Left side is dedicated to offers for all users: individual, schools and companies. 

Right side is a informative section with FAQ named 'For Parents', photos and all you can learn about Kompas.

First thoughts?

Sending your child on a summer camp 

throughout a website is a really big deal

There is also a lot of details about the offers.

Organizing camp details

Going throughout mountains of information I collected all the important information referring to camps like extra paid attractions, assurance deals or big family card giving a discount.

It was still plenty of them so I divided them to groups, named and organized in a secondary menu inside a camp offer, so the information is where it's needed.

Content of each cart is showed in the same window interchangeably and are separated by sections to improve readability. Menu itself is in fixed position related to the length of informative window.

Problem 1: Bad organized information, menu with 88(!) buttons.

Task: Rebuilding information architecture.

Ok, what about the personas?

 

Anna Precautious

Age: 36-40

Kid's age: 5-12

Medium basket: 2000zł

PROFESSION

administration/freelancing,

her husband works in corporation

MOTIVATIONS

friend's children are going on camp, she went on camps herself

CHARACTERISTICS

inquisitive, concerned, horrified, encertain, needs confirmation, numbers, opinions

GOALS

sending child for fun camp to learn some independency, ideally if The camp covers the dates of her vacation

NEEDS

security of her child and hers, support, knowing all the details, sometimes she consults decision with her child and husband

BARRIERS

she thinks her child will not handle the camp well, overprotectiveness, vulnerable for others opinion

Whatever Anna wants Anna gets

Getting to know Anna and understanding her needs I created:

section 'For Parents' so she can learn all the information important for her​

– page 'Why Us' to reassure her about her child's safety

– comments by previous participants and their parents on home page

– links for external articles about camps organized by Kompas

 

Tom Decided

Age: 40+

Kid's age: 12-18

Medium basket: 3000zl

PROFESSION

CEO/Leader

MOTIVATIONS

showing-off in front of friends that he takes care of his kid's growth, he want the kid to learn independency

CHARACTERISTICS

acts in a rush, decided, challenging, precise, restitutionary, uncompromising,

GOALS

satisfaction of his wife and kid, great if a child comes back with new skills, he wants to get his wife and kid off his back

NEEDS

high quality of service,

he pays- he demands,

short, clear communicats

BARRIERS

waffling, to little of prestige,

not confirmed high quality

Tom knows what he wants, so he got:

3 stepped search to respect his rush

– camp offer containing most important information above fold

– header containing quality proof: year of establishment, most prestigious awards for Kompas, which clicked shows a pop-up revealing details

 

Johnny Enthusiast

Age: 15-18

PROFESSION

high school student

MOTIVATIONS

finding people with similar interests,

growing his passions

CHARACTERISTICS

independent, has his own voice, knows what he wants,  a show-off, capricious,

GOALS

finding new friends,

rest from everyday life

NEEDS

development, impressing his friends, meeting new people, belongingness, finding a person to look up (according his passion)

BARRIERS

too childish schedule, price,

website not looking modern

Knowing Johnny and understanding his needs I created:

concept of passion and added it to filters

– photos of camp above fold so he sees future friends at first glance 

 

Company Representative​

Schools

Oprhanages

Corporations

CHARACTERISTICS

precise

NEEDS

they need one company for years of cooperation

GOALS

offer made-top

Knowing the Representative and understanding his needs I created:

'For Schools' page similar to camps offer adding reasons to choose Kompas

– 'Companies' page with categories of offered events above fold. Each category reveals details on hover. After click it takes user to anchored strip showing more to it. Call to action button takes user to contact form with title filled matching the category it was clicked in.

Time for makover!

Fresh look of Kompas

Changing the look of a company known for over 20 years must be gentle.

I tried to achieve more modern look of the same idea and colors. 

Problem 4: Old looking interface.

Task: Giving the website a more modern look.

Zrzut%20ekranu%202020-11-27%20o%2020.01_

NEW SEARCH & FILTERS

Studying decision process showed me that the less options there is the easier decision is to make. I started to look for a solution for Kompas to make an easy search engine that will narrow down the options, as 300 is way too overwhelming. 

First we added passions to each camp to add another feature to filter by. Next we decided, that quick search can be made in 3 simple steps: choosing age of the child, categories and it's passions. Box on the right is showing how many camps perfectly matched for your child will appear. There is also a button to go for results at each step of the way.

When we met Kompas it had 17 categories of camps in each season (summer & winter) and we managed to get that number down to 9 for easier decision making and filters to be manageable.

In the end, when developing the website owners of the product decided to go back to the hideous amount of categories and did not add enough passions to each camp (most have only 1).

That makes these 3 steps useless, as category contains now much less camps, and the camps itself don't have needed data to be found.

Problem 3: Difficulty in finding offers.

Task: Improving search engine and filters.

IMPROVED BUYING PROCESS

Buying a camp for a child through internet is a very long and demanding process. There is no way to make it shorter. All the fields and documents are necessary, so I got to organizing it.

I started with dividing the process in parts, named them and showed them in the top of the form.

Research showed that after using Kompas service once parents do it following years as well. I found an opportunity to make it easier for them. In a part about participant I added automatically filled check that will save he's data. One can check, edit and add new participant in 'My Account' section. Reserving a camp next time will be less fields to fill.

Problem 2: Many dropped baskets due to poor designed forms.

Task: Improving buying process.

MOBILE VERSION

Designing a mobile version of this website I focused on the readability as there is a lot of text to be read. I have decided to rebuild the inner menus (like the one in offer, company page and for parents) in a way that user can see all the titles immediately. Arrow is pointing out the option to reveal the text inside the menu category.

Due to the long process of reserving a camp it’s not easy to fill all the forms on small device. That’s why I added an option to save a camp in your profile and finish reserving later, on computer. There is a reference next to save for later button that you can find saved offers in your account page.  Now, user can choose to either save it or reserve it straight away. 

Unfortunately mobile version was never developed.

Problem 5: Website doesn't scale.

Task: Make it responsive!

If I did it again..

I would not allow to be separated from developer

and would not believe 'there is no technical barriers'. 

I would also make some room for testing the features and website overall.

ⓒ 2020 Natasza Krajka