Lead Product Designer
2024 - Current
Head of Design
2021 - 2024
Lead Designer
2016 - 2020
Visual Designer
2014 - 2016
AIGA Mentor
Tech Crit Advisor at
Cornell Tech
Brooklyn
Lead Product Designer
2024 - Current
Head of Design
2021 - 2024
Lead Designer
2016 - 2020
Visual Designer
2014 - 2016
AIGA Mentor
Tech Crit Advisor at
Cornell Tech
Brooklyn
Roon Design System
AudienceOur primary focus was on users and caregivers, particularly those aged 60 and above, who often have limited tech knowledge. The design system and features needed to cater to these users while remaining scalable across various platforms.
ContextUsers accessed our app to gather information before doctor appointments, primarily using mobile devices. Since patients and caregivers are often on the move and may not have time to watch long videos, it was essential to design a platform for Web Mobile, Desktop, and iOS (excluding Android) that offered quick access to medically vetted information.
I developed Roon's design system using Brad Frost's Atomic Design Framework, creating a user-friendly and responsive system that meets diverse audience needs, including accessibility requirements. The design system supports continuous expansion of health conditions, allowing us to launch new conditions every other month. Key highlights include:
- Custom icons
- Accessible color and type systems
- Figma’s auto-layout and variant compatibility
- A comprehensive collection of symbols, templates, and pages
- Light mode for better visibility and usability
- Custom illustrations and animations
This scalable system works across iOS, mobile, and desktop web, leveraging Figma’s auto-layout capability. By implementing this design system, we efficiently created and iterated on various features, ensuring a consistent and coherent user experience.
Results Thanks to the robust design system, I was able to design and implement numerous features as a single designer with only occasional freelance help. This efficiency enabled us to rapidly iterate and enhance the platform. The design system and new features have significantly improved the user experience, providing quick access to medically vetted information and catering to users' diverse needs and preferences.
Year2022 - 2024
- Created and maintained two distinct design systems over the past two years, inspired by Brad Frost’s Atomic Design Framework.
- Transformed brand guidelines into practical and user-friendly product color schemes and readable typography systems.
- Developed a bespoke set of custom icons.
- Implemented the latest Figma features, particularly Auto-Layout and Variants
- Established an extensive repository of symbols, templates, and pages.
- Introduced a light mode for enhanced user experience.
- Crafted a scalable navigation system.
- Crafted a scalable illustration system.
- Ensured compatibility across mobile web, tablet web, desktop web, and iOS
Design System in Use
- I oversaw Sunday Afternoon as they delivered a color system and logo set.
- My creative direction was to embody the Roon brand, derived from "Noor" (light in Arabic) spelled backward.
- Recognizing that condition journeys can be dark, we aimed to make Roon a beacon of light during those times.
- The logo, designed with pieces of the moon, symbolizes the light in the night sky.
- I chose Nib Sans from Colophon Foundry to give the brand a more humane, approachable look, contrasting with the typical sans serif fonts used by other medical apps.
- The color set is based on deep and light blue, evoking trust and knowledge, with gradients resembling dawn and dusk to bring peace and serenity to the brand.
- Designed illustrations to bring friendliness to the app.
- Ensured illustrations evoke emotions and human nature.
- Avoided triggering imagery by using euphemisms, e.g., radiation symbolized by abstract shapes, surgery by a fish bowl analogy.
- Used pastel colors to evoke serenity.
- Created a spot icon set for condition topics, designed with 2 colors and 1 line style for uniformity.
- Used abstract and landscape pictures for sensitive concepts to soften the brand and avoid a medical app feel.
- Illustrated our animations.
- Created storyboards with the help of a content storyteller.
- Drew each frame.
- Created GIFs and collaborated with an animator to animate transitions in After Effects.
- Coded meditation animations using Processing.JS for the meditation content.
- The meditation pack referenced the sky and gradients of dusk and dawn.
- Creative directed video graphics in collaboration with video editors.
- Developed templates for title cards, video intros, outros, and transitions using After Effects.
- Edited and captioned short videos.
- Animated an educational onboarding sequence and various app assets.
- Designed a marketing landing page
- Developed an Instagram design language and post templates for the social media team.
- Designed deck templates and pitch decks.
- Created Instagram Reel content.
- Created marketing materials, including flyers, brochures, posters, and digital banners for doctors and promotional efforts.
- Collaborated with a junior designer to produce custom assets for doctors.
Users commented on the look and feel of the app frequently in the user interviews.