✕
✕
✕
✕

  • Project
  • Project Type
  • Project Status
  • My Role
  • Tools
  • Focus
  • Verve School App
  • Self-Directed Figma Learning Case Study
  • Concept and Interactive Prototype
  • UI/UX Designer
  • Figma
  • Mobile Interface Design, User Flows, Design Systems and Prototyping
Project Details

Verve began as a self-directed project created to teach myself Figma. Instead of practicing with a few unrelated screens, I gave myself a complete product problem to solve: improving communication between families and schools.

The idea grew from my own experience as a parent. School information can arrive through different platforms, emails, papers, and last-minute messages. Sometimes a parent does not learn that a child is struggling until they contact the school and begin asking questions. I imagined Verve as one place where parents and teachers could find updates, communicate, and keep track of a student’s school life.

I designed separate experiences for parents and teachers, including account creation, dashboards, student profiles, direct messaging, email, calendars, homework, attendance, directories, fee information, and transportation updates. As the project grew, I created reusable components, a color and typography system, connected user flows, and an interactive prototype covering dozens of screens.

Building Verve taught me far more than how to use Figma’s individual tools. I learned how decisions made on one screen affect an entire interface, why reusable components matter, and how quickly a product can become difficult to manage when its features are not organized carefully.

Verve was not coded or launched. It remains a personal concept and Figma learning case study. The result was a working interactive prototype and a much stronger understanding of interface design, component systems, user flows, and designing across a large connected experience.

prototype walkthrough

The walkthrough below shows how I connected the Verve screens into an interactive Figma prototype. It includes examples of account creation, parent and teacher dashboards, student profiles, messaging, attendance, homework, calendars, directories, and transportation updates.

The video demonstrates how the individual screens work together as a larger experience and how users could move between the app’s primary features.

Project Pain Points

Based on my experience as a parent and informal conversations with other parents, I identified three recurring communication problems that shaped the Verve concept.

  • Scattered Information: Parents may need to check several platforms, emails, papers, and messages to stay informed about their child’s school life.
  • Delayed Communication: Academic, attendance, or behavioral concerns may not reach families early enough for them to provide timely support.
  • Limited Transparency: Parents need a dependable place to view updates, follow their child’s progress, and communicate directly with teachers.
Project Goals and Design Challenges

The primary goal was to explore how one mobile app could make school communication easier to find, understand, and manage. Verve needed to support both parents and teachers while keeping a large amount of information organized within a clear interface.

Goals
  • Centralize School Information: Bring messages, announcements, attendance, homework, calendars, directories, fees, and transportation updates into one connected experience.
  • Support Parents and Teachers: Design separate experiences based on what each user group needed to view, share, and manage.
  • Improve Communication: Give parents and teachers direct ways to exchange updates, ask questions, and respond to concerns.
  • Create an Approachable Interface: Use clear labels, familiar icons, and straightforward navigation for users with different levels of comfort with technology.
Design Challenges
  • Managing a Large Feature Set: The concept included many tools, making it difficult to provide broad functionality without overwhelming the user.
  • Designing Two User Experiences: Parents and teachers required different dashboards, permissions, information, and communication tools within the same system.
  • Maintaining Consistency: Dozens of connected screens needed to follow the same visual rules, interaction patterns, and component structure.
  • Organizing Complex Information: School records, messages, schedules, student details, and transportation information needed to remain easy to locate and understand.
Verve app displayed on a smartphone showing the welcome screen.

audience personas

I created three conceptual personas to help plan Verve’s features and user flows. They were informed by my experience as a parent and informal conversations about school communication rather than formal user research. Each persona represents a different way someone might use the app.

Use the arrows to explore each persona and the communication needs that influenced the Verve concept.

Alex Johnson Alex balances a full-time career with caring for two school-aged children. She needs a fast way to check school information, communicate with teachers, and monitor transportation without searching through several platforms. Single Parent chevron_right Pain Points Centralized Updates: View announcements, attendance, assignments, and upcoming events in one location.

Direct Communication: Contact teachers and receive responses without relying on separate email chains.

Transportation Information: Check bus updates and receive alerts about delays or changes.

 chevron_left chevron_right Emily and Michael Smith Emily and Michael share responsibility for managing their children’s school schedules and activities. They need access to the same information so they can coordinate responsibilities and avoid missed updates. The Couple chevron_left chevron_right Pain Points Shared Access: Allow both parents to view the same student information, messages, and notifications.

Simple Navigation: Make commonly used information easy to locate without requiring advanced technical knowledge.

Priority Alerts: Clearly identify deadlines, schedule changes, school events, and concerns that require attention. chevron_left chevron_right Maria Rodriguez Maria manages classroom responsibilities while communicating with many families. She needs tools that help her share information efficiently without adding another complicated system to her workload. Dedicated Teacher chevron_left chevron_right Pain Points Efficient Communication: Send individual or group messages to parents from one location.

Student Overview: Access attendance, classroom information, and student details without moving between separate systems.

Administrative Support: Organize updates, reminders, and routine communication so more time can remain focused on teaching. chevron_left {{current_slide_index}}/{{total_slide_count}} Profile image of Alex Johnson, the single parent persona, showcasing a parent managing school responsibilities through the Verve app. Image of Alex Johnson, the single parent persona, representing a busy parent who relies on the Verve app for efficient school communication. Profile image of Emily and Michael Smith, representing engaged parents with children in school, used to demonstrate user interactions in the Verve app. Image of Emily and Michael Smith, the engaged couple persona, representing involved parents who actively use the Verve app for school communication.
Design Process

I began by identifying the communication problems Verve needed to address and outlining the information parents and teachers would need most often. I then organized the proposed features into separate parent and teacher experiences before creating the first wireframes in Figma.

As the project grew, I designed related screens in groups, including account creation, dashboards, profiles, messaging, attendance, homework, calendars, directories, fees, and transportation. This helped me see how information and actions needed to carry from one screen to another.

I created reusable components, shared styles, and repeated interface patterns to maintain consistency across the prototype. I also connected the screens into interactive user flows so I could review the navigation and identify places where an action led to the wrong screen, ended abruptly, or required too many steps.

Because Verve was a self-directed learning project, the design was not validated through formal usability testing. The process was based on personal experience, informal conversations, interface design principles, and repeated review of the prototype as it developed.

Working through a project of this size taught me how quickly inconsistencies can spread across an interface and why design systems, clear file organization, and reusable components become increasingly valuable as a product grows.

visual design system

Primary color palette for the Verve app, using a mix of bright and calming tones to create a balanced and engaging user experience.
Secondary color palette for the Verve app, featuring bright and vibrant gradients that use the primary colors.
Font styles used in the Verve app, showcasing clean, modern typography for a user-friendly interface.
Components & Shared Styles
Figma design components and styles for the Verve app, illustrating UI elements such as buttons, icons, and forms for a cohesive app experience.
Key Features Designed

The Verve prototype included dozens of connected screens across separate parent and teacher experiences. The primary features were designed to bring school information and communication into one organized system.

  • Parent and Teacher Dashboards: Created role-based starting points that gave each user group access to the information and actions most relevant to them.
  • Messaging and Email: Designed communication tools for direct conversations, group messages, school announcements, and updates between families and staff.
  • Student Information: Organized student profiles, attendance records, homework, classroom details, and academic information into connected screens.
  • Calendars and Reminders: Provided a central place for school events, assignments, deadlines, conferences, and schedule changes.
  • Directories and School Services: Included faculty information, school contacts, health office details, and fee information to reduce the need to search through separate resources.
  • Transportation Updates: Designed a conceptual bus-tracking experience that could help parents check transportation status and receive notices about delays or changes.
Screen Examples
Verve app email messages feature, showing a streamlined interface for parents and teachers to send and receive important updates.
Verve app chat interface settings for parent and teacher chats, allowing parents and teachers to engage in direct messaging for quick communication about students.
Bus tracking screen in Verve app, providing real-time updates on student transportation for parents’ convenience.
Account creation screen for Verve app, guiding parents and teachers through a simple process to set up profiles for real-time communication and updates.
Parent dashboard screen in Verve app, displaying clickable links for children’s profiles, school calendar, faculty directory, and fees/finance records, offering easy access to essential school information.
Teacher profile screen in Verve app, displaying the teacher's name, email, class, room number, student count, and a graph showing monthly attendance statistics.

interface screens

The screens below show how the Verve interface was organized across account creation, parent, and teacher experiences. Each collection demonstrates how I applied consistent navigation, components, colors, and interaction patterns across the larger prototype. Together, they show the range and scale of the system I created in Figma.

Splash, Login, Sign Up Screens
Figma screenshot of Verve app design, displaying login and base profile screens, created to ensure a smooth user experience for parents and teachers.
Parent: Screens & Permissions
Figma screenshot of Verve app parent screens, highlighting communication tools, student tracking, and access to school updates.
Teacher: Screens & Permissions
Figma screenshot showing teacher-focused screens in the Verve app, including features for class management, attendance, and messaging with parents.
Prototype Workflow

An example of screen to screen activity.  Where each button or action touch takes you.  The overall movement of finger presses.

Figma prototype of the Verve app, mapping out the interactive flow and connections between screens based on user actions.
What I Took From It

Verve began as a practical way to teach myself Figma, but it became a much larger lesson in managing a connected interface. Designing dozens of screens showed me that a product can become difficult to navigate and maintain when too many features are added without a clear system.

The project taught me how to create reusable components, manage shared styles, organize parent and teacher experiences, connect interactive user flows, and maintain consistency across a growing prototype. It also helped me understand the difference between designing an attractive individual screen and building a complete experience in which every screen must work with the others.

If I continued refining Verve, I would narrow the feature set, simplify parts of the color system, increase the size of smaller text and controls, and conduct structured testing with parents, teachers, and school staff. Those changes would help determine which features users truly need and where the navigation could be improved.

Verve was never coded or launched, but it accomplished the purpose for which I created it. It gave me the confidence and practical experience to use Figma for complex interface design, prototyping, components, and design-system work.