Case Study : Origin
About the Client
Origin is part of a family of brands under Corsair, who focuses on hardware and accessories for PC gaming and digital content creation.
The Goal
My team was tasked with creating a new look and feel for their site that incorporates the existing brand colors and page architecture and streamlines their user experience. This included a new design system and a newly-styled homepage and product configurator page. The product configurator page was a priority for us and the client, as we felt the user flow could be refined so that each step felt clearer and more deliberate.
The Process
After some discovery sessions with Origin, we learned that their status as an independent brand gave them much more autonomy in their look and feel, in contrast to competitors like Dell, Alienware, and HP. With this in mind, I developed two concept buckets: Moon Walk, a more whimsical space-age style; and Lava, a bolder and minimalist look.
I prototyped more complex components to pressure-test the UI and type styles defined in the design systems, which included higher-priority page elements like marketing blocks and the product configurator. I introduced white and lighter color backgrounds in both versions to boost readability and reinforce information hierarchy. Though dark mode is popular, using it as a default risks alienating a portion of potential customers. The goal is to keep them on the page, engaged in the customization process, and eventually hit “buy”.
Solution
The client ultimately chose the second option, Lava. From there, I had the tools to create the design system, and then style the homepage and configurator flow in both desktop and mobile.
The configurator in particular was interesting to ideate upon. The original flow puts the customization modules in inconsistent places, and the completion of each step can be ambiguous. To address this, I anchored the information on the right and nested each customization option in an accordion. The behavior mimics a one-page checkout flow, where the user needs to complete the current step to advance.
Looking for more examples?
Check out a style tile/mini design system concept I created for a fashion client here.