Website
XSF
Three companies with three different brands bundled their services to offer potential clients a service that would be the sum of their strengths. No company's identity could be stronger than the other, and thus the site's style should be neutral but interesting.
The site was already existant and online but needed a serious redesign so that the communication would be at the level of the prestigious companies offering the services. The content strategy was mostly already in place as well as the structure in a CMS. The Design Team's job was to give the site some character by means of representing the concept of "stacking" services and defining a language that would efficiently communicate complex systems with diagrams.
Communicating complexity
The website's purpose was to effectively communicate a highly complex service and concept to a very specific audience. For this to be possible we had to balance the use of a simple metaphor to communicate the concept but also use diagrams to explain in more detail. Along the scroll we would have to alternate these two resources to optimize the reading experience.
Visual Guidelines
Visual Style Guides
Although simple enough, being a one-page website, there had to be a clear visual definition for the communication to work. The team built a Visual Style Guide that could guide the process and aim for consistency.
How it worked
The ask was simple and clear: to revamp the style of the website. The previous version of the site had not solved for the complexity of what was trying to be communicated so we had two main purposes: to communicate complexity and make it more easy to understand and to give character to the website but without overkilling the three brands' identities.
Diagram styles process
Diagram Explorations
The diagrams had to have their own styles and our approach was to play with the idea of chemistry and science, something that could hint to a futuristic character.
Chemistry Lessons
After putting together some moodboards, we found that the diagrams had to be very 2D so that they would balance the use of the 3D renders that we would use. We had enough materialisty. However, the diagrams would have to be engaging and clear and not lack character. We resorted to the idea of Periodic Tables and scientific explanations, such as chemical bonding and so on.
Although some radial and more complex approaches were tested, we decided to go for the simplest and most minimal styles that are in the actual layouts.
UI Layouts for Desktop and Mobile Devices
The User Interface
Being a one-pager website, the way we used white space and how we balanced the information was particularly important. We wanted our users to really read the entire page so we had to make it interesting.
Finding the right pace
By using negative space, changing the background and alternating between light and dark contrasts we layed out a design that broke the content into smaller chunks that the audience could consume more easily.
One long scroll
The content and the offer had to be told in one scroll, so that readers could scan and read the content vertically, on any device. The design was defined for desktop, tablet and mobile breakpoints. The levels of complexity would also be alternated along the scroll, alternating between the two resources we were using: the 2D diagrams and the 3D prisms.
Credits, Resources and Tools
Team
HUGE:
Bryan Lee (Creative Director), Julian Betancourt (Motion and Visual Designer).
Resources and Tools
Fonts:
Montserrat, Google Fonts. Designed by Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly. https://fonts.google.com/specimen/Montserrat
DM Sans, Google Fonts. Designed by Colophon Foundry, Jonny Pinhorn, Indian Type Foundry. https://fonts.google.com/specimen/DM+Sans
DM Mono, Google Fonts. Designed by Colophon Foundry. https://fonts.google.com/specimen/DM+Mono
Tools:
Figma. https://www.figma.com
Cinema 4D. https://www.maxon.net
Adobe Illustrator. https://www.adobe.com
Adobe Photoshop. https://www.adobe.com
Notes and lessons learned from project
Lessons Learned
from working in the redesign of XSF's website.
Process
Try to understand the technology used as platform.
Not only in this project but also in others, not having accessed the CMS platform before fully engaging with the design process acted as a risk for the project's factibility. Sometimes fully relying on the engineering side of the project, specially with trust built with time, is not enough. To aliviate this risk, designers should consider the sometimes big effort of setting some time to get into the platform and have a sense of how it works and what would be possible and what would imply some risk.
Process
Be cautious of the effort when balancing more than one project at once.
Even when there's the best intentions, we designers can underestimate the level of time that would be needed to engage with more than one project at once. We can easily be overwhelmed with the work, either by doing the hands-on work or by supervising. Estimate by allocating the necessary buffer time and then commit to the acquired responsibilities.
© 2024 Juan Piñeres