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
Long story short
What makes Kompas stand out?
-
Over 300 different camps
-
Well-developed pre and after sale service
-
Proven and trained educators
-
Over 20 years on the market
-
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:
.png)
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:
Anna Precautious
Tom Decided
Johnny Enthusiast
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.
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.