Flip flashcard app

I've been studying Spanish for a few years and find myself frequently frustrated by available flashcard applications. As a fun design and development challenge, I decided to create my own. This project is in-progress.

Featured Image

The challenge

Create an app that allows for quick translations, and the ability to add those translations as flashcards to curated decks for further study.

Sketching & brainstorming

I almost always start by loosely sketching many ideas. For this project, I used Paper by WeTransfer to brainstorm various UX flows and layouts to get a general idea of what I'm looking to design.

Information architecture and wireframing

After arriving at some ideas I felt positive about, I used Whimsical to begin mapping out and grouping all the various actions that I'd need to solve for. After that was complete, I created wireframes for all the user flows.

Collecting design inspiration

I wanted to create a flashcard app that feels playful and welcoming with hand-drawn illustrations and a color palette that's flexibile enough to allow for some basic palette customization. I took to Pinterest to look for some inspiration for color ways and potential illustration styles.

Exploring color combos

Using the collected inspiration as a start, I created a color palette that provided the flexibility I was looking for. It includes two common base colors for important UI elements, but allows for swapping of highlights and backgrounds.

Final palette

After defining the color palette, I documented each color and added them to a Figma design library with the new colors.


I chose to Poppins as the primary font, then documented and updated the Figma design library accordingly.

UI design and prototyping

I then designed a series of mockups and prototypes in Figma for the final designs, and made a few UX adjustments from the wireframes.

Component library

As I was working on the UI design in Figma, I created a series of reusable components, then added them to the Figma library for reuse and maintainability.

Next steps

Now that I have the final designs, I'm starting development within React Native. This project is in-progress.