Liam Matteson
Timeline — 6 months
Areas of focus— Design Systems, Mobile + Web design, Prototyping, Webflow development
Category — Social, Gaming
Tools — Figma, XD, Webflow
Clutch’s website UX/UI needed to be brought up to speed with their existing iOS and Android apps. There were also portions of the Clutch app such as the Sign-In/Onboarding experience that needed improvements. This required a design system that would increase autonomy and provide a cohesive user experience. To ensure that the product was updated correctly, and the experience stayed consistent across platforms, my team and I needed to dig deep into the architecture of the product, and discover which UI elements were both unique and different for each platform.
Clutch’s first step was to introduce a new mobile app and sign up flow in an effort to retain more new users that never interacted with Clutch before. Importantly, this includes a new product feature that involves micro-transactions to incentivize community engagement and methods of supporting active creators. The Clutch overhaul also included an updated desktop experience that allowed users to better engage with content related to their favorite games, as well as compete in challenges.
By pinpointing shared items among the desktop and mobile experiences, an overlap between the design systems would create a foundational system from which unique branches could be built off of it. These unique branches would cater to the differences between platforms.
In the process of creating a refreshed experience and design system, a new brand refresh helped to flesh out the creative direction for the design system. The task was to create a plethora of brand patterns that could be used across platforms, for social media videos, blog posts, and social banners.
In the process of putting forth a new design system, there were a number of user flows that needed to be reevaluated within the mobile app experience. Some of these flows included challenges, editing clips, and the user profile which helped me reach a greater understanding of how these flows could be implemented on desktop. This included the post detail page, in which a single post gets its own page along with suggested content, which exists differently from the experience on the app.
This project taught me a lot about how to manage a design system across a team of designers and developers. Throughout this process I found it extremely crucial to work closely with developers and push out designs & prototype concepts so that they could quickly implement and test my designs. By bringing about a new branding system with an array of accessible colors, a new component library, it allowed me to stay organized and level up the Clutch UX/UI.
