Matter Neuroscience
2023 - 2024
Mobile & Web
Biotech
Joining the team in the early stages of development, I played a critical role in helping shape Matter's iOS app, website, and social media. Collaborating closely with the CEO and stakeholders, my input on product strategy, user experience, and visual design language took the app from MVP to App Store launch in just under a year.
Matter Neuroscience formulated a biomarker for happiness. Users can journal memories and capture secondary memory anchors (music, people, location). By allocating emotions to memories, and rating their intensity, users receive a Matter 'score' via a proprietary algorithm. Matter's vision for the app was about increasing your neuroplasticity, and in turn longevity, through happiness. During development, we had to stick rigidly to native iOS design patterns and SwiftUI limitations. The product had to educate users, without confusing them.
Matter Neuroscience formulated a biomarker for happiness. Users can journal memories and capture secondary memory anchors (music, people, location). By allocating emotions to memories, and rating their intensity, users receive a Matter 'score' via a proprietary algorithm. Matter's vision for the app was about increasing your neuroplasticity, and in turn longevity, through happiness. During development, we had to stick rigidly to native iOS design patterns and SwiftUI limitations. The product had to educate users, without confusing them.
Problem
Onboarding
Captivate users and inspire curiosity with the App’s core value proposition.
A simple brief is often the most difficult. The onboarding for the Matter app went through several iterations, as it played a huge role in establishing the brand, educating the user, and discouraging drop-off. After experimenting with copy variations, looping videos, and duration, I settled on a two-sided solution: A bespoke animated pre-roll made in Cinema4D, followed by a native educational carousel. User’s could skip the video to avoid frustration, but still receive the requisite knowledge to get the most out of the app.
Problem
Onboarding
Captivate users and inspire curiosity with the App’s core value proposition.
A simple brief is often the most difficult. The onboarding for the Matter app went through several iterations, as it played a huge role in establishing the brand, educating the user, and discouraging drop-off. After experimenting with copy variations, looping videos, and duration, I settled on a two-sided solution: A bespoke animated pre-roll made in Cinema4D, followed by a native educational carousel. User’s could skip the video to avoid frustration, but still receive the requisite knowledge to get the most out of the app.
Problem
Adding a memory
Reduce friction to save the user time, encouraging more memories.
The MVP for Matter had an inconsistent UX for adding secondary anchors. With disparate methods of data input, users found the process slow and frustrating, and in turn added less memories. I streamlined the process with a flatter hierarchy and consistent visual language, making use of Apple system materials, list views and sheets. This allowed users to add and manage content with less taps, never having to leave the core flow. I also included bespoke pre-alert screens to provide context before native alerts, to reassure users and prevent permission rejections.
Problem
Adding a memory
Reduce friction to save the user time, encouraging more memories.
The MVP for Matter had an inconsistent UX for adding secondary anchors. With disparate methods of data input, users found the process slow and frustrating, and in turn added less memories. I streamlined the process with a flatter hierarchy and consistent visual language, making use of Apple system materials, list views and sheets. This allowed users to add and manage content with less taps, never having to leave the core flow. I also included bespoke pre-alert screens to provide context before native alerts, to reassure users and prevent permission rejections.
Problem
Action Cards
Users needed a dynamic visual aid to help balance neurotransmitters.
To guide users to a varied, healthy chemical balance, I crafted dynamic action cards to highlight gaps in their neurotransmitters - a critical aspect of our mission. Based on the memories they’d added, these ‘pill’ like lozenges were nimble visual cues, quickly accessible on the home screen. Upon tapping, a card would display what emotions were required to retain balance with a real-life directive to achieve them. I collaborated with a copywriter to curate user-centric language. For example, opting for ‘Boost your [NT]’ over ‘Low [NT]’ to prevent making assumptions about the user, and allowed multiple action suggestions that cater to different lifestyles.
Problem
Action Cards
Users needed a dynamic visual aid to help balance neurotransmitters.
To guide users to a varied, healthy chemical balance, I crafted dynamic action cards to highlight gaps in their neurotransmitters - a critical aspect of our mission. Based on the memories they’d added, these ‘pill’ like lozenges were nimble visual cues, quickly accessible on the home screen. Upon tapping, a card would display what emotions were required to retain balance with a real-life directive to achieve them. I collaborated with a copywriter to curate user-centric language. For example, opting for ‘Boost your [NT]’ over ‘Low [NT]’ to prevent making assumptions about the user, and allowed multiple action suggestions that cater to different lifestyles.
Problem
Landing page
Create an immersive storytelling experience to motivate users to join the beta.
As part of a marketing campaign I created a landing page to generate hype ahead of our TestFlight launch. Instead of a typical static mockup, I designed a long-scroll 3D animation that revealed our value proposition. Collaborating closely with rockstar creative developer Henry Desroches, we used Three.js to render my vision for the scroll, using the original OBJ files I’d used in prototypes for accuracy and easy maintenance. Henry knocked it out of the park, and we saw a 400% increase in mailing list sign ups for the beta.
Problem
Landing page
Create an immersive storytelling experience to motivate users to join the beta.
As part of a marketing campaign I created a landing page to generate hype ahead of our TestFlight launch. Instead of a typical static mockup, I designed a long-scroll 3D animation that revealed our value proposition. Collaborating closely with rockstar creative developer Henry Desroches, we used Three.js to render my vision for the scroll, using the original OBJ files I’d used in prototypes for accuracy and easy maintenance. Henry knocked it out of the park, and we saw a 400% increase in mailing list sign ups for the beta.
Dynamic storytelling through scrolling
Problem
Design System
Create a scalable design system for all things Matter.
Having relied on a barebones component library during early development, I set about creating a more comprehensive, company wide design system to streamline the team’s workflow. Coining the term ‘Cortex’ (the outer containing layer of grey matter in the brain, get it?), I developed an atomic-based component library with integrated primitive and semantic design tokens, brand guidelines, and animation principles to form an easily maintainable library. I also owned our iconography, designing a native SFSymbol package for easy deployment and flexibility in SwiftUI.
Problem
Design System
Create a scalable design system for all things Matter.
Having relied on a barebones component library during early development, I set about creating a more comprehensive, company wide design system to streamline the team’s workflow. Coining the term ‘Cortex’ (the outer containing layer of grey matter in the brain, get it?), I developed an atomic-based component library with integrated primitive and semantic design tokens, brand guidelines, and animation principles to form an easily maintainable library. I also owned our iconography, designing a native SFSymbol package for easy deployment and flexibility in SwiftUI.
Custom iconography, complete with stylised ink traps to match our typeface
Primitive and Semantic tokens for easy deployment and one click light mode
Atomic design system: Organisms comprising of molecules and atoms
Results
Designed a one-of-a-kind app, backed by frontline neuroscience.
Featured App of the Day on the App Store, rated 5 stars.
Increased user base by 900% by prioritising engagement and gamification.
Increased mailing list sign ups by 400% upon launch of marketing website.
Established a scalable design system still widely used today.
Results
Designed a one-of-a-kind app, backed by frontline neuroscience.
Featured App of the Day on the App Store, rated 5 stars.
Increased user base by 900% by prioritising engagement and gamification.
Increased mailing list sign ups by 400% upon launch of marketing website.
Established a scalable design system still widely used today.
