Expressing classical music
Project Details
Overview
Design of the new website of ClassicalFutures.eu corresponding with their new branding. ClassicalFutures is an EU funded platform supporting emerging artists in the field of classical music.They support partnerships between a group of Europe’s leading concert halls and dynamic, talented upcoming artists to create innovative events that develop new audiences as part of a forward facing, thriving classical music scene.
Role
UI Designer
Tools
Sketch, Zeplin
Duration
1 month
Responsibilities
I was the sole UI Designer. My responsibilities ranged from designing first concepts of a new look of the website, to trying new interactions in a UI context. I was working closely with the the art director, project manager and developers team to create this visual experience.
Company
Molina Visuals
Problem & Process
Problem
The challenge for this project was to create a unique website that would express a modern approach towards presenting new classical music talent around the world and correspond with their new branding.
The main inspiration for the design was brand sign. It inspired me with strong diagonals included in the logo which later on became the visual direction for the whole website.
Process
01.
Creative Brief &
UI Research
02.
UI Design & Responsive Design
03.
Reviews with the Art Director & Implementing feedback
04.
Interactions design & working with dev team
UI Design process
Process
In this process I decided to explore the diagonal inspiration by designing different pages from the website and then animating them to understand the flow, interactions and UI elements.
As a key page I focused on the home page and to explore others after page transition.
See animations below.
UX/UI Design Exploration
Early design | 01
In this early concept I was trying to understand what's the best direction with transitions of the pages, interactions of navigation and its positioning. While animating it in After Effects it became clear that the background of the home page was too noisy. The areas that emerged from a positive light were: blog pages (the grey background worked very well), hover effect (very elegant).
UX/UI Design Exploration
Early design | 02
In this concept animation I was trying to figure out if fading out texture layer would work as page transitions - it didn’t, the previous page transition was more elegant. As well I found out after internal reviews with the art director that even the black-and-white photo in the background on the home page is creating too much chaos. The positioning of the navigation was under questioning but overall the idea of making it sticky was working well.
Presentation to the client
The feedback after presenting the designs to the client was very positive overall, they liked the concept of implementing diagonals as a reference to the brand. In the next revision they wanted to see photos in colour, different font - brand font Open Sans as a main font on the website. To them the picked font by us font was too far away from the brand.
Key page - map design
Discovering events with the Map/List
The hardest part of this project was a UI design of a discovery of events by Map/List feature.
The task was to integrate google maps in a way that would be visually consistent with the brand and in the same way accessible from mobile. The key element turned out to be a switch button between the states of a map and list that is expressed in the animation.
Animating this specific flow was important in consideration of “switch button”. Mostly because the fact that the button is not disappearing during the transition between pages and this way is informing the users that those two pages are connected.
Key user flow of the website
Outcome
Reflection
During the UI process we did not have a budget for usability testing so I conducted some guerrilla testing with friends and family members. I was able to eliminate some problematic parts though I did notice users had a hard time following the flow on the map and how the map is representing events of the classical music institutions. Unfortunately it was not in my power to interfere with as it was not a typical UI issue. Although if I had the chance to propose a solution it would be a short usability testing to understand the core of the problem.
E-commerce simple offer presentation
Web Design
Finding flight deals | App Design
UX Design | App Design