Mobile App Design

StudyNest

A flashcard app designed to make studying more effective and engaging through interactive learning methods

Overview

StudyNest is a flashcard app designed to make studying more effective and engaging through interactive learning methods. Built with students and self-learners in mind, StudyNest combines the simplicity of traditional flashcards with the fun of quick, memory-boosting games.

Supports consistent study habits and long-term retention by allowing users to create unlimited custom flashcards, organize them by topic, set study reminders, and reinforce learning through fun, interactive games.

Role

UX/UI Designer

Duration

1 Month

❌ Problem

Users need a simple, centralized way to manage their study materials and learn new vocabulary effectively in one place.

πŸ” Empathize: User Research

πŸ‘₯ User Interviews

Qualitative Research

I conducted interviews with 3 users to understand:

  • How users approach learning new vocabulary
  • Explore their frustrations, habits, and tool preferences

Some Questions I asked:

  • β€’ Are you a student, working, or both?
  • β€’ Describe the last time you had to learn new vocabulary. What tools or methods did you use?
  • β€’ What frustrates you most when learning about a new topic or new vocabulary?

πŸ’‘ Insights

01

Consistency Challenge

Participants often forget to review or lose motivation over time

02

Simplicity Matters

Users prefer tools that are easy to navigate or not overwhelming

03

Engagement is Key

Engaging study methods make studying feel less like a chore

πŸ† Competitive Analysis

Anki Pro

βœ… Pros:

  • β€’ Allowed to pick cards from a library
  • β€’ Optional interface change and app icon change

⚠️ Cons:

  • β€’ Cards from the library aren't always reliable
  • β€’ Too many options / no concrete brain identity

Flashcards

βœ… Pros:

  • β€’ Share flashcards option
  • β€’ Create my flashcards

⚠️ Cons:

  • β€’ Too many ads
  • β€’ Too many title names (deck name & cardhold name) are unnecessary

Quizlet

βœ… Pros:

  • β€’ Follow someone else's flashcards
  • β€’ Optional quizzes, courses, and expert solutions

⚠️ Cons:

  • β€’ Not all already decks are credible
  • β€’ Flashcard making limit on the basic plan

🎯 Define: User Personas

User Persona

πŸ’‘ Ideate: User Flow & Sitemap

πŸ”€ User Flow

This user flow helps Sarah quickly set up a reminder, allowing her to stay consistent with her learning despite her busy schedule. By creating a personalized study schedule, she can build better habits and reduce the stress of last-minute cramming.

User Flow

πŸ—ΊοΈ Sitemap

This sitemap visualizes the core structure of the StudyNest app. Providing users with a simple and organized navigation experience, helping users like Sarah efficiently access key features to support consistent and engaging study habits.

Sitemap

🎨 Prototype: Wireframes & Designs

πŸ“ Paper Wireframes

Paper Wireframes

πŸ“± Mid-Fidelity Prototype

Mid-fidelity Wireframe

✨ High-Fidelity Prototype

High-Fidelity Prototype 1
High-Fidelity Prototype 2
High-Fidelity Prototype 3
High-Fidelity Prototype 4

πŸ§ͺ Testing: Usability Test

I conducted a usability test on 4 individuals. Each session lasted around 8-10 minutes, through Google Meet and Figma.

I had the testers complete two tasks using the mid-fidelity wireframe:

  • β€’ Create flashcards
  • β€’ Schedule a study reminder

πŸ’‘ Insights

01

Navigation Confusion

Users struggled with back navigation and unclear icons, especially for reminders

02

Card & Reminder Editing

Users wanted to preview and edit cards and reminders after saving

03

Customization & Search

Participants want to name decks and share cards

🎨 Style Guide

🎨 Color Palette

The mixture of teal and black as the primary colors of the app gives a perfect balance of calm and focus, making it ideal for a learning environment.

  • β€’ Teal was used for the background of all the screens
  • β€’ Black was used for both the top and bottom navigation
Color Palette

✏️ Typography

Font Choice: I decided on the typography of my app to be Rubik because it's clean, modern, and easy to read. Giving users a friendly and approachable feel.

Typography

🧩 Design Components

Buttons

Buttons

Interactive buttons for user actions

Icons

Icons

Clear iconography for navigation

Images

Images

Visual elements throughout the app

Cards

Cards

Flashcard components and containers

Grids

Grids

Layout structure and spacing

πŸ’­ Reflections

🎯 Next Steps

My next focus will be on refining the UI of the prototype. I plan to complete the app by adding all remaining interactive buttons and screens for a fully functional flashcard experience.

πŸ“š I Learned

πŸ” The importance of research

The importance of research and truly understanding who I'm designing for. There's a big difference between simply talking to users and designing with their needs in mind. The more I understand their pain points, the better I can create solutions that improve their experience.

πŸ§ͺ Usability testing skills

Usability testing requires multitasking - observing users, offering assistance when needed, and taking detailed notes.

⚠️ Challenges Faced

πŸ’‘ Assumptions vs Reality

Initially, I designed based on assumptions about user needs. Usability testing revealed that I needed to improve screen transitions for a smoother experience.

πŸ”„ Iteration Required

After receiving feedback, I had to redesign some user flows and create additional screens I hadn't planned for, like the congratulatory screens.

⏰ Scheduling Flexibility

Testing was delayed due to scheduling around participants' availability, which required flexibility and patience.

Olive Health & Wellness H&C Painters Back to Portfolio