Algoseed Labs is a development firm located in Montreal, Quebec. The company deals with all kinds of technology development projects, but mainly focuses on desktop and mobile websites. The CEO and Lead Developer, Nick Xenos, tasked me with creating a new website that had a retro, sci-fi feeling.
The approach for this project was to recreate the feeling of being on a vintage Windows computer, from the way the machine booted up, to the user interface of the desktop. We designed so that the different sections of the website are accessible via the different applications on the “Desktop Screen”. This unique combination of modern design with vintage aesthetics helps to provide potential clients an understanding of the development capabilities and outside-the-box thinking that Algoseed Labs has to offer.
When we first started this project, we aimed to explore various options for how a retro website might look and function. We already had a few ideas, but we turned to various websites such as Behance and Dribbble for inspiration. From these sources, we were able to create a comprehensive moodboard featuring different styles and concepts that could potentially form the basis of our project.
We were particularly drawn to the idea of a Windows 98 style website, with a loading screen that emulated the experience of booting up a PC. Additionally, we delved into the concept of having different applications on a desktop serve as the home screen, where users could access different pages.
Once we created the moodboard and solidified the website concept, we began working on the wireframes. The first wireframe is the Loading Screen. When users arrive at the Algoseed Labs website, they see an entry screen. After clicking enter, a loading screen appears, displaying code and a loading bar, simulating the feel of an old-school computer.
The second wireframe is the Desktop Screen, where users navigate different areas of the website through unique "applications." These sections include Home, Case Studies, About, Contact Us, Services, Portfolio, Blog, and Support. The Services section opens additional applications for various services offered by Algoseed, such as Web Applications, Mobile Applications, E-Commerce, UI/UX, Integrations, Analytics, and SEO.
The Home page, for instance, provides an overview of Algoseed Labs and its services. It mimics a typical computer application with options to close, minimize, or adjust the window size.
For the clothing design, I picked a few of my favourite pieces from the moodboard and tried recreating and remixing several different pieces. The more I created, the more that I was able to refine the design and style into something I was happy with and ready to put on a shirt.
On the left you can see Exhibit 2, which is a Vector Mockup of the Castle T-Shirt dropping from the first Cathedral drop. I really appreciate the black and white design style, with the use of colour to add contrast in key areas to make them shine.
Once I was happy with the appearance of the both the graphic design, as well as the appearance of the design on the vector mockup of the shirt, I decided to have a sample printed. Once the sample arrived, I worked on product pictures of the product themselves with a white background, as well as model pictures. This was a big learning curve and required quite a few attempts at both the picture taking and editing.
After the product pictures were completed, I got everything uploaded onto the website and was able to design out the product page and stock the virtual shelves of my website (refer to Exhibit 3).
The review process on this project was short and simple. This consisted of making a few tweaks to the text and images based on the client's needs, as well as making some slight changes to the colours and alignment.
After finalizing the high-fidelity frames and reviewing them with the client, we created functional prototypes to simulate the user experience. The prototypes include the Enter Flow, which leads users to the homepage, and a second flow that guides users through different sections of the website. You can view these prototype flows in the videos below.
