Classictic.com
Design — Front-end development
A portal available in 8 languages for online classical concert ticket sales.
Context
While I was waiting for my green card, I found — with the help of my friend Lucie Blot — this project that allowed me to build another large-scale website, very close to what I had done at Cité de la musique but with a new and geographically distributed team. Based in Berlin, Classictic was launched in 2004 and is a global leader in online classical concert ticket sales, with a website available in 8 languages and 150K+ visitors per month.
Their main goal was to boost sales which were, at that time, declining. Their SEO was still optimal so we decided it was time to freshen up their portal to make it more user friendly and responsive in order to follow their users’ needs.
Getting to know the users
The first thing I did was to get to know their customers better.
We are talking about people who want to go to a classical music concert, and this portal offers tickets worldwide, in 8 languages: English, German, French, Italian, Spanish, Chinese, Japanese and Russian. Why so many and why those ones? Because they cover most of the tourists in the world.
Basically, the website has three types of users, in this order:
- people who are already in a foreign country
- or who plan a trip
- or who just want to go to a concert in their hometown
Interestingly, most of classical music concert halls can’t provide a website with translated content, assuming that they actually have one!
So, I dove into the users’ stats and knowledge base, and interviewed the customer and marketing services to narrow their users to 6 personas.
Each persona came with:
- A name, age, and defined lifestyle and work style (symbolized by an image)
- A catchphrase that distinguishes the persona from others
- Key attributes that affect use and expectations of the product, service, or website (payment preferences)
- Frequently performed tasks
- Tools and resources used
- Pain points relevant to their goals
UX design
Apart from making the new website responsive and mobile first, which meant thinking about 4 given dimensions at the same time, I came up with all the UX patterns that I could muster. Everything comes with the little big details, right ?!
Main principles
The idea was to stay within big conventions across the web and e-commerce sites to not disturb our customers’ experience, who were considered to have a low level of surf experience.
Therefore, the portal is divided in 3 big parts, consistent across the user’s path:
- the header with a navigation divided in two:
- first, the most used ways to browse the offer — with a high contrast put on the search button
- the main tools used through the entire website (login, help, etc.)
- the main block has the content, divided into 2 columns, except for the home page
- the footer that would host a sitemap for the more organizational part of the portal
In order to keep the grasp and reading of the website smooth and easy, I kept most features simple and consistent:
- only two different fonts are used with a vertical rhythm implemented
- in most cases, 3 complementary colors are used throughout the site with some variations of light
- 3 levels for forms (especially used in the checkout process)
- 4 different types of panels with background color and depth used to symbolized their importance
- 4 levels of buttons, the first of which is dedicated to the main action of the page like “Buy tickets”
- animations to guide the user, with a duration that is long enough to be understood
Expandable boxes were used to avoid cluttered pages and favored over tabs to let the users choose if they want to have all content available at the same time.
Interesting problems faced and their solutions
Smart scroll
As I said earlier, expandable boxes were favored over tabs as a main pattern of the website. Trouble is, what if a box opens below the fold of the page? You can’t really tell something happened.
That’s why every opening of an expandable box of the site is testing the possibility and will scroll smoothly to show you the best option available: always at least the beginning of the box and its end at the bottom at the viewport if it’s not taller than it.
Of course, this motion will be discarded if the user scrolls manually.
Date of the event
The users were often mistaken with the time and place of their purchases. So we added the information on the website at strategic places:
- on the event page:
- in the main information box right after the title of the event
- in the ticket box where they choose their seats
- on the cart page:
- in the first step where they can review their cart
- in the third step as a recap before they choose their payment method
We also added the possibility to book different rates (full rate, children discount fare, etc.) of an event at the same time. The problem was then that for back-end reasons, I was asked to find a solution so that if the customer wants to change the category in the cart page, he will be redirected to the event page where he can make the change, while his previous choice was removed.
The solution involved a panel that would appear on top of the page and triggered on the select box change.
One page checkout process
To reduce the loss of transactions, the checkout process has been redesigned in a unique page. Each step is displayed from the start but only the first one is activated and open.
The user has to complete each step to open the next one, but can open previous steps to review his/her inputs.
Inputs in form
To help the understanding of inputs and keep a clear look, labels have been placed inside their corresponding inputs using a default value. On focus, they are placed on top of the input in a small panel so they are always visible, even on a smartphone.
Some inputs like country selection were enhanced with the technique described by Christian Holst: instead of a very long select box, we replaced it with an input field with a smart auto-complete when Javascript is available.
Language choice
The former website used images of countries’ flags next to the language options, but to avoid offending susceptibilities, they have been removed since the same language can be used by various countries.
Visual design
The main principles here for the redesign were guided by:
- no changes on the logo, except for the main color that was redefined for a lighter gold
- classy and classical but also warm and not intimidating
- differs from the competitors
- most customers are women
I chose to follow two main inspirations: the look and feel of paper sheets as something that everybody will recognize and understand and the material design released by Google for a more modern approach.
The result is what I consider to be a clean and modern design, colorful and dynamic but not confusing for the target audience with some elegant 3D effects brought by discreet shadows on blocks.
Live style guide
I also delivered to the Classictic team a live style guide so they could maintain and expand the project of the new portal. After some research, I chose to use the Hologram plug-in to compile the style guide. The main reasons of my choice are the fact that besides its relative novelty, it was stable enough and very easy to implement in my workflow with Grunt, even more so because Hologram is compiling comments directly implemented in the source files using the Markdown syntax. So it’s easy to read for the developers in the files AND in the resulting style guide.
Technical specifications
The first proofs of concept, wireframes and prototypes were made with UXPin. This was particularly useful since I was never with the other members of the team and UXPin is a light-weight but yet powerful tool to get feedback from testers.
I later designed all the actual templates using Sketch, a great tool for digital designers with a short learning curve.
I’ve developed the website using HTML5 with HTML5 boilerplate, CSS3, SASS, COMPASS, Grunt.js and Git.
The plug-ins used on this project:
- Susy: SASS plugin
- Breakpoint: SASS plugin
- Magnific popup: jQuery plugin
- Flexslider: jQuery plugin
- infield_label: jQuery plugin
- Select to autocomplete: jQuery plugin
- HideShowPassword: jQuery plugin
- Tooltip: jQuery plugin
- FitVids: jQuery plugin
I also used Hologram to edit the live style guide.
Originally published at www.ventrebleu.com on February 1, 2015.
