A Hyper Island Student Project
About:
The Open Shop website is our first client collaboration at Hyper Island as a team of front-end developers and designers.
We were assigned a client, in this case, the newly-established film production company Open Shop, and we worked with them to develop their brand identity, design their new webpage, and build it from scratch.
Design:
Initially we each designed our own interpretation of our client's vision in Figma based off our first meeting, then shared our ideas together and agreed upon 2 designs to present to the client. We worked on re-enacting the functions of the website as best we could in Figma (using gifs to represent the videos, having button clicks going to the relevant Figma slide etc). The client chose one of the designs with very few changes requested.
Development:
Tasks were categorized into learning, practice, and doing things each student was good at to ensure everyone was both challenged as well as allowing us to maximize delivery with efficiency.
A lot of focus went onto adjusting to using Gatsby, as it was new for most of the team. Structuring our components proved invaluable once the code started growing, and allowed us to work more easily.
Working with video optimization was crucial to allow the splash page to both function properly, as well as not putting off potential clients if left poorly optimized.
The tasks on a larger scale were split into 4 main sections, Neha was headlining a lot of the Gatsby/react JSX along with the video composites and splash content editing, Sofia took on a lot of the site responsiveness and SCSS, Saeid looked after video optimization and SEO for a site with minimal words, and Emma worked on site and audio prototyping and media functionality. There were some crossovers happening naturally, so no student was exclusively working on one task.
Some of the challenges we faced:
-
Managing client expectations, assessing the timeframe vs the scope of the project and making accurate estimates of which features were feasible.
-
Passing state between pages in Gatsby. In the end, we used cookies to store the data we needed to access across pages, but there are ways to do this within Gatsby that proved too hard to debug for now.
-
Our Node.js workflow file that we used to auto-deploy the site on push kept failing. We realised later that it was because it was trying to use SSH authentication, not possible on free organisation projects.
-
Integration with a headless CMS would have been nice, but time constraints meant we had to develop instructions for the client to update the site in GitHub instead.
Tools and Tech stack:
Figma: A vector graphics editor and prototyping tool.
Gatsbyjs: An open-source framework based on React that helps developers build blazing-fast websites and apps.
React: An open-source, front end, JavaScript library for building user interfaces or UI components.
Markdown: An authorable format that lets you seamlessly write JSX in your Markdown documents.
GitHub Actions: A tool that makes it easy to automate all your software workflows. Build, test, and deploy your code right from GitHub.
DaVinci Resolve: A tool that combines editing, color correction, visual effects, motion graphics and audio.
GraphQL: A query language for APIs.
Other Libraries and dependencies:
Styled Components: A way to enable developers to have a more structured way of doing CSS in JSX.
Contributors: