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.
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.
Typography
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.
