In the process of coming up with an idea for the hackathon in relation to the prompted themes, we decided to first check out Team Liquid’s office website for some inspiration on possibly where to start. Upon reaching their landing page, it struck us right away how outdated their design appeared to be.
What it does
Showcase a possible reimagining of Team Liquid's main website.
How I built it
The site is SSG web app using the React toolchain Next.js. It was designed by one of our team members using Figma, and translated into a webapp and deployed onto Netlify for public use.
Following the themed prompt of creating something related to Team Liquid, we decided to entirely redesign the site’s layout and UX/UI using Figma to build a working prototype of all the pages, which we then coded and launched on a live site.
Challenges I ran into
Creating the animated effects the way we envisioned it through Figma and prototyping all the pages and buttons was a challenge and very tedious process.
Learning the Framer Motion library api and deploying an express app to AWS Elastic Beanstalk to expose an external api was a difficult challenge..
Accomplishments that I'm proud of
Within the span of less than 2 days, we came together as a team where more than half of us had never met before, and pulled through in committing to the recreation and reimagining of a more modern design of Team Liquid's entire website. It's incredible alone that we were able to get this all up and working at the most base level, and we're proud of the design aesthetics we come up with for our final product.
What I learned
What we learned is how to work as a team with different skillsets which compliment each other. We also learned how to develop a website using modern web technology and methods.
What's next for Team Liquid Website Redesign
There is still much to do for this website project, as building out every single page and filling them each out with content would actually take a much longer time period than we were given. However, utilizing our prototype and what we've created thus far, our redesign provides a basis for future creators to work off of or for Team Liquid to take inspiration from. Additionally, the mobile version is prototyped and launched live as well, however with time, could be polished for refinement and style as well.