Background
When Future Experience Lab reached out to Yrgo, they were seeking a website to enhance their "Hybrid Workshop Experience" with a touch of "controlled chaos". Our goal was to strike that balance and deliver a website prototype.
The problem
The client had many ideas in mind when delivering their brief, including "Controlled Chaos," "Hybrid Workshop," and "Place for Creativity." How could we convey these feelings in a static website, within a tight deadline, punk aesthetic and an abstract brief?
The early desktop & mobile sketches for the main layout of the website.
Digital greyboxes for how components, images & sections should be placed on the website.
The solution
The solution was a landing page that showcased the projects and workshops that Future Experience Lab has contributed to. The website was divided into different sections to better communicate the different aspects of Future Experience Lab. We used a variety of images, illustrations, and stylistic choices to create a chaotic feel, while also utilizing pre-defined grids and whitespace to subconsciously organize that chaos.
This moodboard represents the feelings we strived to achieve on the final website.
Pre-planning
After receiving the project brief, we narrowed down the website's goal and target group and what they valued. We presented these questions to the client and shaped the project around those key points. Early on, we created a Moodboard to visualize how a chaotic yet readable website might look. We narrowed it down to a dark color scheme with strong and contrasting colors used wisely to grab attention. We also found that simple, primitive shapes could add some dynamic flare to the website, which we included in the moodboard.
Our stylesheet
The final stylesheet has a focus on three key areas: fonts, colors, and patterns. For fonts, we chose a heavy, punk-like font for all titles and headers to contribute to a more heavy feel. We also used a lighter and more readable font for all body text, which made the site feel more professional and controlled. For brand colors, we chose three strong colors with two additional text and background colors. Throughout the website, we also used a variety of primitive shapes as decorative backgrounds. These are used in conjunction with our brand colors to give off a feeling of chaos and spice up the background as a whole.
Our stylesheet that we applied throughout our entire project.
Designing for the Web
For this project, we teamed up with the Web Developer class at Yrgo, who were responsible for coding and implementing our designs to the web. Therefore, we had to carefully adapt our working schedule to accommodate agile development with our Web Developers. Our first method was to deliver sections one by one in a timely manner, with greyboxes and large visual elements coming first. We also communicated if any changes had been made to previous deliveries. Our second method was to extensively use Components and Color/Text Styles in Figma, which allowed for reusable code in the final website. This drastically reduced the time needed to code the website while also giving a more consistent design to the entire prototype.
The mobile & desktop components that we designed for our Web Developers.
Our delivery process of components, illustrations and layouts to our Web Developers.
Final prototypes
The final prototypes were made in Figma, with fine-tuned desktop and mobile variants. The prototypes were also made with a responsive layout in mind, both for larger and smaller screens. We provided multiple pages, assets, and illustrations that were used in the final website.
Snapshots of our final Figma-prototypes.
Learnings
We gained more experience on how to work under a tight deadline and what to prioritize in those cases. We also gained a better understanding of how Web Developers work and their requirements. For future projects, we would focus on getting more prep time as designers so we could deliver assets to our Web Developers immediately, instead of them having to wait without any tasks at hand. We would also like to perform more extensive user testing to further refine our design and layout, but time constraints did not allow for this. Overall, we were very satisfied with the project and felt that there was a lot of potential if we were to continue with it.