Family Calendar

Product

A family calendar designed to streamline the management of multiple schedules, enabling multiple users to collaborate on a shared calendar by creating events and receiving real-time updates.

Goal

Design for social good by creating a dedicated mobile app and a complementary responsive website.

Problem

Not having separate calendars for different aspects of your life, while allowing others to view and collaborate seamlessly.

Role

UX/UI Designer

Tools

  • Adobe Photoshop
  • Figma

User Research

Competitive Audit

Competitive audits of existing companies offering calendar-sharing features were conducted. Analysis focused on their functionality, accessibility, navigation, and overall product design. The audit included a detailed review of three platforms: FamilyWall: Family Organizer, Cozi Family Organizer, and Google Calendar.

Competitive Audit

Persona: Beth

Problem statement: Beth is a busy mom who needs a family calendar to manage her three children’s numerous weekly events, ensuring she and her family can stay organized and on track.

Ideation

Paper Wireframe

Adopting a mobile-first design approach, a layout was sketched for the app's primary feature: the Calendar. This design serves as the foundation for the overall app layout and its additional features. Placement and accessibility of key buttons were carefully considered with incorporation of side and bottom menus to enhance navigation.

Digital Wireframe

Through user research, three core features were identified to develop for the app: Family Calendar, Lists, and Recipes. The fuctionalilty of each feature analyzed to outline the necessary options to enhance usability and accessibility. To accommodate the mobile version, a compact navigation system was designed, incorporating a bottom navigation bar for the primary features plus a collapsible side menu and additional top navigation buttons.

Family Calendar App Wireframe

Mobile Design

The mobile design focused on optimizing how users might prefer to view their calendars, ensuring ease of use and clarity. To enhance functionality a collapsible side menu was incorporated, providing quick access to additional calendar options and allowing seamless switching between calendars.

Family Calendar mobile app mockup

Family Calendar Mobile App

Web Design

In the web design, the calendar was enhanced by expanding its size for improved visibility. The previously hidden side menu from the mobile design was transformed into a prominent feature providing users with easy access to all options and functionalities, thereby improving accessibility. Consistency in the design system was maintained with a greater emphasis on navigation to optimize the user experience for the larger web interface.

Family Calendar Web Design

Style Sheet

After designing the mobile app version of the family calendar, a design system was developed to establish comprehensive standards and reusable components. This streamlined the process of creating a compatible web version, ensuring consistency while improving efficiency and speed during development.

The Dent Guys Inc