Color Me Right - Building a Design System

To try the app for yourself, go here!

To try the app for yourself, go here!

Camera screen

Camera screen

After the photo is taken

After the photo is taken

Colorblind filter

Colorblind filter

Component library

Component library

Card sorting with users to figure out the arrangement of the home screen

Card sorting with users to figure out the arrangement of the home screen

Color Me Right - Building a Design System

For my front-end design class, I made a miniature design systems for my own app. The app is designed to solve various color problems the user may have, from generating color palettes to filtering for colorblindness.
I wanted the design to be cute and non-threatening, with a simple interface. I started by creating design principles and guidelines for the app before moving into brainstorming ideas on paper.
After I had some solid ideas in mind, I moved to prototyping in Figma. I researched similar apps to generate ideas and align my design with user expectations, then created my own components based on my design principles and research. Once I was satisfied with the individual pieces, I added them to my component library and created mockups of screens.
Once I had enough mockups complete, I did user testing and took the feedback I got from it to improve my design.
After I had run through several rounds of user testing, I implemented my app in React, primarily using the plugin Locofy. Not everything was implemented the way it was designed, but I wanted people to be able to look at my app on their own browsers.
Overall, I'm happy with the design. The development aspects were less familiar to me, but it was an interesting experiment. I hope to use what I learned in the future.