Glass
Brief
Glass, a cloud-based platform, tasked us with designing a website that defined their product to enable it to be marketed to a wider audience.
Challenge
The client was having a problem defining their product and delivering it in a digestible way for potential customers to be able to understand exactly what Glass does. Thus, we worked in conjunction with the client and a copywriting team in order to redesign the information architecture of the website, allowing us to structure the site in a comprehensive format so the customer could easily understand the product.
Design
Prior to starting on this project, we had previously conducted design work under the Glass brand in the form of a one pager on their overarching Gavurin brand website. We originally took inspiration from this one pager, but came to the conclusion that the Glass brand needed its own identity. We presented a light version in line with the original page, and a darker palette with a new Glassmorphic design direction. The Client agreed the new design direction was their preferred route.
The design direction we agreed on for Glass was greatly inspired by the name, Glass! We decided to go for a Glassmorphic design language. Glassmorphism is a recently revived and popular design language, but as with any design trend we wanted to use it tastefully and not overdo it. The main feature of Glassmorphism is using transparency and background blur on UI elements such as containers. This gives the effect of frosted glass. On the Glass site we mainly used this effect on containers layered on top of textured backgrounds to emphasise the glass effect.
Imagery
The imagery used on the Glass website is mainly illustrative to complement the text. As Glass is a software, we could have taken the easy option and used screenshots taken straight from their software, however, we wanted to create a more visual and illustrative version of the software using key identifiers from the screenshots themselves. We also utilised the Glassmorphic effect on these illustrations by layering different components. This created a more interesting and branded approach to the imagery, keeping them consistent with the rest of the website.
SEO
The website sitemap was set out based on the findings of our thorough SEO process, during which we sat down with the client to discuss the different pages they wanted, what their customer searches for and the features of the service. We then ran this through our research process which gave us thousands of keywords to sift through and sort. In the end, we compiled a list of primary keywords for each feature/page as well as a handful of supporting secondary keywords. These keywords were incorporated into the content of each page to try and help Glass appear higher in search results for the phrases/features their service provides.
Development
From a development perspective there were a number of tricky elements involved with this build, the two main ones being the Parallax hero sections and the Glassmorphism effects. We wanted to make sure these elements were prominent as we thought they added a more interactive feel for the users. There are various hero sections across the site that we decided to use the parallax scrolling effect, which subtly moves as the user scrolls up and down. For most of the ‘card’ elements on the website, we decided to go with a Glassmorphism effect which we thought tied in nicely with the whole Glass brand. This was achieved purely with CSS, which neither of the Dev Team had used before. This effect took a couple of iterations and tweaking in order to get it to the state that is used on the website.
