Gentle Monster
Reimagining the form and presentation of a unique and eccentric eyewear brand
The Problem
In 2018 Gentle Monster was looking to revamp their online presence with a more modern and performant UI. They wanted to focus on creating a UI/UX that was bold and minimal, allowing users to focus on the unique content from video promos and glasses themselves.
Architecture
Joining the project the stack had been set as python on the backend and javascript on the front, with GraphQL connecting the two. Being on the frontend the initial focus was determining how GraphQL would be integrated, settling with Apollo as the client. The UI given its emphasis on images was architected to lazy load images and videos to improve performance.
Development
I joined the team about a week into development with the initial backend being the only work completed. The 1st task was integrating GraphQL with Apollo due to its comprehensive tooling. With the data layer completed I switched focus to the UI creating the home, product detail, and products pages. The home page was mainly a use of flexbox and carousels for product viewing with bold full screen heroes throughout. The products page was a grid layout using flexbox (at the time css-grid had partial support) and a trailing animation. The product detail page was the more complex with a two column layout, the left being scrollable and right fixed. Lastly was integrating the payment flow with the backend which due to graphQL was pretty seamless.
Learnings
This was my 1st full time role working in a team, before this point I mainly had done freelance work for clients. Stepping into a team environment was invigorating and gave me a boost in confidence and peers to learn from. Initially I had imposter syndrome having not worked in a professional software environment and it took some time to settle into the role. It helped having a supportive team and manager in traversing the environment. One of the key takeaways is I had more to learn as a developer from advanced methods, data structures, and new languages like Typescript.