Redesigning an exclusive investment product’s visual language with a focus on interactive prototyping to elevate their user experience.
The landscape of finance and investment products tended towards safe visual languages. The Coterie was courting a narrower, more exclusive demographic, and desired a language that felt exclusive and premium. We approached this with a comprehensive redesign, from visual language to information architecture.
Design Lead (Me)
100%
Design Director
20%
Principle Designer
100%
Product Designer
100%
Product Delivery Manager
50%
Brand Designer
20%
Taking the product into a new direction involved a hard turn towards high end visual treatments. Elegant yet minimalistic. Darker in aesthetic, yet mature and safe.
Exploration into a drastically different tone focused on evoking real world visual effects, but integrating them in tasteful and minimalist ways. The original glass theme led to other physical materials experimentation. Bokeh inspired background effects, material treatments like UV printing, and foil treatments that show shifting colours.
Outputs
High fidelity key screens
Component library
Figma is an amazing tool that can also limit our work. To push a strong design foundation even further we took a big swing into Origami Studio.
We identified several key moments in the user flow that felt like they deserved even more emphasis. I hypothesized that leveraging a tool like Origami Studio would open us to ideas otherwise impossible in Figma, and could create the desired feel. Higher interactivity, sensor access, and haptics were all appealing.
The first exploration expanded upon the foil concept and brought it to life using device gyroscopes. The foil badge shifted colours and imitated specular shine through gyroscope data and image masks. This garnered extremely positive feedback which led to this expanding to buttons, borders, and key text. This interaction driven concept eventually began a foundational element still in use today.
Outputs
Origami Studio prototypes
Creating a moment of delight in the early experience to establish tone and care for the user.
Joining The Coterie was meant to be a substantial moment. Like a premium membership club, we wanted to explore the idea of a membership card, along with the physical details one might find in one.
This card membership card design evolved within Origami using several layers of masks and simulated lighting to achieve the desired effect. Subtle gyroscope motions were core to the idea, while subtle “return” effects were realized through iterations.
Outputs
User flow scenarios (framing and research)
Search and browse flows (wireframe fidelity)
User testing
Configuring an investment amount should be a substantial moment for users. We wanted to reflect that importance visually and through haptics.
The original version prior to our project was a basic slider component and text input, which was functional but lacked any unique impact. Our first attempt at a redesign was based on the foil as a strong aesthetic cue, and used the full screen real estate to suggest substance. However, while feedback was positive as a starting point, it also created feelings of judgement by invoking a sense of scale to the minimum and maximum values. A low value literally filled much less of the screen.
With that feedback in hand, we created an innovative slider control that could adapt to any minimum or maximum values without any feelings of judgement. The design is filled with tiny details only possible in a tool like Origami, such as each “tick” of the value causing the number to “hop” in the corresponding direction along with a tiny haptic effect.
Outputs
Origami Studio prototypes
Outcomes
The new visual design direction inspired a new foundation for their website and other follow-up products.
The Origami Studio work led to me creating a series of tutorials to share internally and publicly, leading to other Metalab projects being pushed even further.