![MemorySparx app displayed on desktop, iPad, and iPhone.](https://pro2-bar-s3-cdn-cf.myportfolio.com/763adbdce39486b22028228da68086ba/1d7cbaaa-04dc-4af3-84f9-50a0805fc4e4_rw_1920.png?h=c3adc42310e6e2499f99b4d07a9952c5)
![Animated gif of the MemorySparx reusable components in Sketch.](https://pro2-bar-s3-cdn-cf1.myportfolio.com/763adbdce39486b22028228da68086ba/9aaa2945-cbc8-43be-b5dc-7fa7d48c0fba_rw_600.gif?h=5dd56199102e5e8173e5f8cf1ca52d1a)
Animated gif of the MemorySparx reusable components in Sketch.
![Life edit album screen with annotations.](https://pro2-bar-s3-cdn-cf.myportfolio.com/763adbdce39486b22028228da68086ba/b2937114-0b3a-4412-a1e3-e1462df0d8fc_rw_1920.png?h=06e6586c1086e0e507aa568ba158f489)
Life edit album screen with annotations.
![MemorySparx system flow](https://pro2-bar-s3-cdn-cf4.myportfolio.com/763adbdce39486b22028228da68086ba/5626fcf2-92b6-4bcd-816d-38a2426cd909_rw_1200.gif?h=2f5b1c270a49f2db0960cc097d6178cd)
MemorySparx system flow
![Western "Wanted" poster looking for breaker of telephone](https://pro2-bar-s3-cdn-cf1.myportfolio.com/763adbdce39486b22028228da68086ba/ce367207-9586-4246-897d-7fc41d45cf14_rw_1200.png?h=dc4ca1a9f3a2fd9b4ea1eb8890f08ab3)
Source: Cowboy silhouette, 2020
Fig. Prototype for MemorySparx care provider section showing progressive disclosure and click-to-edit.
I re-skinned Material components to match our brand and WCAG compliance. The components are accessible and focused while maintaining the flat design feel.
![Various texts of different font sizes and styles can draw the eye to different parts of the page, not necessarily from top-to-bottom.](https://pro2-bar-s3-cdn-cf2.myportfolio.com/763adbdce39486b22028228da68086ba/dd0a66ef-476b-4c5c-91aa-8b05ea7cec2c_rw_1200.jpg?h=87f4785e0e3fc9f79e9df9f8210fa94c)
Different font sizes and styles can draw the eye to different parts of the page, not necessarily from top-to-bottom. Source: designershumor, 2020.
![SCSS for Angular Typography configuration.](https://pro2-bar-s3-cdn-cf5.myportfolio.com/763adbdce39486b22028228da68086ba/69fe032a-90af-4d1f-abd9-8cce1232e259_rw_1920.png?h=fba4eca25b2fe18bc46a31b2bef97c09)
SCSS for Angular Typography configuration.
![CSS for Memorysparx typography and paragraph styles.](https://pro2-bar-s3-cdn-cf1.myportfolio.com/763adbdce39486b22028228da68086ba/981208a4-5bc9-4d2b-8933-3df8b921bed0_rw_1920.png?h=7b83bae8bb8fe427b89d3303f9df8a32)
CSS for Memorysparx typography and paragraph styles.
![CSS for Memorysparx typography and paragraph styles.](https://pro2-bar-s3-cdn-cf.myportfolio.com/763adbdce39486b22028228da68086ba/be5ff952-7fd3-4612-ab96-c5280def4c4d_rw_1920.png?h=e526bcfb27eb6b1abd017e747166a2b0)
CSS for Memorysparx typography and paragraph styles.
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/763adbdce39486b22028228da68086ba/b7a5a45f-7353-4a0d-ac6b-a9caa0b9e0af_rw_1920.png?h=c76d6f15df63ac74d3f85c1b68ac0dd0)
MemorySparx app and various ways of image display.
![Sample SCSS for general images.](https://pro2-bar-s3-cdn-cf1.myportfolio.com/763adbdce39486b22028228da68086ba/2f471087-af9d-4f5a-9afa-ad584d78a632_rw_1920.png?h=3b1c761336e048065096a3814b77d5bb)
Sample SCSS for general images.
![Sample SCSS for care provider images.](https://pro2-bar-s3-cdn-cf.myportfolio.com/763adbdce39486b22028228da68086ba/82f9b368-2815-4edb-b73b-5029a453f9eb_rw_1920.png?h=c51a9896d8db7f26e690e2861b5aa550)
Sample SCSS for care provider images.
A component library is a must-have in a design system so the product team can create prototypes and implement features quickly and consistently. A sample for MemorySparx created in Sketch.
![](https://pro2-bar-s3-cdn-cf6.myportfolio.com/763adbdce39486b22028228da68086ba/75c12efc-84e6-4138-8708-77daba5e5490_rw_600.gif?h=31c50b13fbd6c339e472b92cc13cdc83)
The proof is in the pudding. Source: Giphy,2020
![Notifications screen on iPad.](https://pro2-bar-s3-cdn-cf1.myportfolio.com/763adbdce39486b22028228da68086ba/c78ea2b0-f32b-456e-aa95-b2659b2e996d_rw_1920.jpeg?h=dcadd4270b4befda7b163ce13e63b554)
Notifications list on iPad.
![Care provider list on iPad.](https://pro2-bar-s3-cdn-cf2.myportfolio.com/763adbdce39486b22028228da68086ba/3cc0db00-e5ee-4e9b-9cf4-6d64fcda7ef7_rw_1920.png?h=683eaad6a6aacfb39fe585557a7ea298)
Compare with care provider list on iPad.