FlashCake

Unraveling the Process of Human Learning

this denotes a summary or key point

Context

Project work happened in tandem with learning the fundamentals of UX design through my UX design program. It came with a project brief with defined criteria, and deliverables were reviewed and passed through the eight tasks of this project. As the first project of the program, this also marks the beginning of my design journey.

My Role

This was a solo project, so I was in charge of end to end design. However, there was some collaboration with my advisor and mentor via task feedback and advice.

Scope

UX, UI, User Research, Market Research, Presentations

Tools

Figma, Marvel, Zoom

A mobile flashcard app that aims to encourage people to learn new concepts and vocabulary.

Learning new vocabulary is not always easy. Anyone who's taken the time to study a new subject can relate to this. FlashCake creates a mobile solution that encourages you to learn something new - all in the palm of your hands.

To help people learn, I started by exploring how people learn

Problem Statement: "How might we design a mobile app that empowers people to learn new vocabulary?"

I started with some research to understand how people learn new concepts and vocabulary. Key takeaways and insights:

Competitive Analyses
• Create a succinct onboarding/sign-up process that helps getting started easier
• Provide multiple ways of learning

User Interviews
• People learn best when they were presented with multiple ways of learning new vocabulary
• Most users shared that they have an affinity towards 'visual learning'
• Having the contextual use of the word as well as connecting it with the world around them also aides in understanding
• Users showed they liked to receive positive feedback, and have shown negative emotions when receiving negative feedback

After reviewing the insights it became evident what the design focus would be on:

Multiple ways of learning.

I began with rapid prototyping and testing

The project brief required certain user flows, however the solutions were up to me.

The three user flows that were focused on were assigned by requirements from the project brief. How I made solutions for the flows however was completely up to me. To reiterate, the user flows being focused on are: splash/login/onboarding, adding a card, and reviewing a deck. The sketches and solutions will revolve around those three.

User testing was done with three participants via Marvel and Zoom screen sharing. Using a script, I prompted them through the three user flows, asking follow up questions along the way. I opted to take a recording on top of taking notes to ensure the testing experience was as smooth as possible.

Onboarding
Adding a Card
Review Deck

Refining the design using research insights and user testing results

After reviewing the videos and notes, I was able to deduce some patterns among the three participants. I used Nielsen's severity scale rating and 10 usability heuristics to categorize and analyze the results. Below shows some of the improvements.

Final Design

Empowering people to learn new vocabulary.

Below showcases a demo of the end product. I took the liberty of increasing the fidelity and upgrading the UI of the app.

Link to Prototype

Retrospective

Leveling up my testing skills

This project had many opportunities to explore my research chops - especially during testing. It’s important to remember that research participants are just people, and to strive to create the environment in which they are most comfortable.

User research is the foundation of design

Without research, design decisions become much harder to support. Make sure to invest time into research so that you’re truly designing for the users.

workcontact