Project Overview
Designing and developing the world's best club website
Product Space is a club at the Claremont Consortium that focuses on teaching product management, product design, and holistic technology. I decided to design and build a website that would act as a marketing tool through the exemplary display of design and technical competency.
Challenge
Build an interactive, high-quality website that showcases our technical skills and beautiful design capacities
My Role/Responsibilities
Developer
Product Manager
Product Designer
Process
Differentiating in a dense, competitive landscape
Product Space has branches at other schools, so some of the stylistic choices were decided by the founders of the club. Warm purples create a sense of comfort and professionalism, and a contrasting yellow makes the designs pop. However, other technology clubs do exist. Our strategy for how to differentiate our platform from other student organizations was to build a website that wouldn't just be considered a high-quality undergraduate club website, but rather a professional grade marketing platform with the use of CSS animations (see more about this below).
User Flow
I designed the user flow for the website to be simple and direct. Both prospective students and potential capstone partners should be able to get the information they need and be directed to forms as quickly as possible. This lets users to their final goal with as few clicks as possible.
Interaction
Pull it, Bop It, Hover Over, Scale!
I used a 1-interaction-per-viewport model when I designed the platform: users should be able to see one moving piece or have one element to interact with at any time on the platform. With just a handful of exceptions, that model remained true for the entirety of the site. This was both to flex our technical muscles (as a technology club) and to keep users interested and engaged on the website. This included horizontal scrolls, flip-on-hover cards, and blending backgrounds. I made this website with Webflow.
A key point for me to remember was to use CSS animations when I could benefit from using them, and not just when I could use them. Horizontal scrolls, flippable cards, and blending backgrounds are great fun to look at, but my challenge was to use them to my benefit rather than simply using them when I could. Each element on the website has a purpose, and each animation conveys some form of meaning to the viewer that will further them on to the ultimate goal of reaching out.
Final Product
Designs: clean, simple, and elegant
The product is a fully functioning, interactive website that has increased our number of capstone partnerships and skyrocketed our applicant pool. Five of the six pages on the site have unique, fully interactive elements on at least 80% of the page’s viewports. The website utilizes color and movement to maintain user interest, and is functional on both mobile and desktop. It was also a joy to make - designing and building the blending colors on the contact page was one of my favorite tasks I’ve ever worked on. To see more of the website, scroll below or click here.
