Digital Media CMS

Blog

  • Daytrip: Collaborative Trip Planning Made Simple

    Planning a day trip with friends should be fun, not stressful! Daytrip, a new app developed by Drexel University’s User Experience and Interaction Design (UXID) students, simplifies collaborative trip planning with enhanced discoverability, flexible itineraries, and robust route details.

    The Challenge: Simplifying Group Travel Planning

    Many travel apps exist, but often fall short when it comes to group planning. They’re bogged down with unnecessary features focused on selling hotels and curated trips, rather than the core experience. The Daytrip team aimed to create a streamlined solution focused on user experience and collaboration.

    The Daytrip Team

    • Molyna Tep (Project Manager/UX Designer)
    • Megan Lam (UX/UI Designer)
    • Tynan Drake (UX/UI Designer)
    • Allison Drake (UX Researcher)
    • Parker Nix (Front-End Dev)
    • Kyle Dolphin (Front-End Dev)
    • Andrew Stein (Back-End Dev)

    Project Goals

    The Daytrip team set out to:

    • Understand the target audience through research and competitive analysis.
    • Design user-friendly prototypes and iterate based on feedback.
    • Build a comprehensive design library for seamless development.
    • Develop a working web app with MVP functions and integrated APIs.

    The Daytrip Solution: Collaboration at its Core

    Daytrip addresses the frustrations of group planning with key features designed for seamless collaboration:

    Research-Driven Design

    The team’s design decisions were driven by thorough research:

    • Competitor Analysis: Identified cluttered interfaces and missing collaboration features in existing apps.
    • User Interviews & Surveys: Confirmed the importance of collaborative planning, with 88.1% of survey respondents planning trips with friends.

    Key Features for Seamless Planning

    • Events Tab: Highlights seasonal activities and weather trends to help users discover destinations.
    • Saved & Collections: Allows users to save places and organize them into custom collections.
    • Custom Stops: Enables users to incorporate social events and locations not found on traditional maps.
    • Group Suggestions: Allows users to contribute to trip plans and vote on suggested locations.
    • Itinerary: Provides a centralized view of the planned trip, with clear roles for organizers and participants.

    Visual Design for Usability

    Daytrip prioritizes usability with a simplified brand identity, limited color palette, and semantic use of color to represent activity types.

    Development and Technology

    The team used Flutter and Dart for the app’s development, creating reusable components and dynamic layouts that pull data from a custom database and the Google Maps API.

    The Results

    Daytrip is currently a beta app accessible through TestFlight. Despite the app not being fully developed, the team is satisfied with all the results they made. With the help of a promotional video, the team was able to highlight key features. Early user testing demonstrated the app’s ease of use and generated positive feedback.

  • Payback: Simplifying Group Expenses and Bill Splitting

    Managing shared expenses within friend groups can often be a source of friction. Payback, a new app developed by Drexel University’s User Experience and Interaction Design (UXID) students, aims to eliminate this hassle by providing a simple and intuitive platform to track group payments and split bills effortlessly.

    The Challenge: Streamlining Group Transactions

    The Payback team identified a common pain point: the difficulty in accurately calculating expenses and managing group transactions among friends and family. Existing apps often feel outdated or create further confusion when dividing costs. The goal was to create a user-friendly solution that simplifies the entire process.

    Goals and Objectives

    Over six months, the Payback team worked to:

    • Research their target demographic and analyze existing competitors to determine user needs.
    • Create low, mid, and high-fidelity prototypes, iterating based on usability testing feedback.
    • Build a comprehensive design library to ensure seamless handoff to the development team.
    • Develop a working web app for the project, prioritizing MVP (Minimum Viable Product) functions.

    The Payback Solution: User-Centered Design and Development

    Payback’s approach centered on understanding the needs of its target audience (college students and young adults) and designing a visually appealing and easy-to-use app.

    Research-Driven Design

    The design process was heavily influenced by user research and competitive analysis:

    • Initial Interviews: Gauged user interest and identified necessary functionality.
    • Competitor Analysis: Examined apps like Mint, Splitwise, TriCount, and Venmo to understand their strengths and weaknesses.
    • Target Audience: Focused on users aged 16–32, identified as the most likely to split bills. Personas and journey maps were created to empathize with potential users.
    • Usability Testing: Conducted with 32 users across low, mid, and high-fidelity prototypes to identify and prioritize design improvements. Severity charts were used to categorize and address issues effectively.

    Branding and Visual Design

    The team carefully considered color connotations related to finance and aimed for a fun and accessible brand identity, steering away from the typical blue/green palette. A rounded typeface was chosen to enhance the playful feel, and the color scheme was tested for color contrast and accessibility for various forms of colorblindness.

    Design System and Dev Handoff

    A comprehensive design system was created to ensure consistency throughout the app, including component organization, typography, color guides, and grid/spacing guidelines. Zeplin was used for developer handoff, providing a centralized location with inspection tools for pixel-perfect coded prototypes.

    Development

    The app was built using:

    • React.js
    • Chart.js
    • Bootstrap
    • Framer Motion

    The front-end development focused on building out each page, with attention to design accuracy and accessibility. Back-end development centered on calculations, splitting algorithms, and data management using Firestore for storing expenses and group information.

    Content and Microinteractions

    Friendly and inviting language was used throughout the app to enhance the user experience. An interaction guide was created to document important microinteractions for the development team, though not all could be implemented due to time constraints.

    Conclusion

    Despite challenges, the Payback team successfully created a concept, researched, designed, and developed a mobile web app that helps users split bills with friends. The team’s designs cover a wide range of functions and adhere to standards to ensure consistency. The development team built out nearly all front-end pages and completed core back-end functionality. Key lessons learned include the importance of starting library building and coding sprints earlier, using Zeplin effectively, and clearly defining the MVP scope early on.

  • Omni: Revolutionizing Music Discovery Through Artist Lineage

    In the vast world of music streaming, finding new artists can be overwhelming. Omni, an innovative music discovery app developed by Drexel University’s User Experience and Interaction Design (UXID) students, aims to simplify this process by exploring the relational similarity between artists.

    The Concept: Tracing Musical Lineage

    Omni tackles music discovery from a unique angle: exploring musical lineage. By allowing users to navigate through an artist’s influences and similar musicians, the app creates an interactive experience that connects past and present artists. This approach not only helps users find new music but also educates them about the historical threads that bind different artists and genres together.

    The Team Behind Omni

    • Ty Drake – Project Management / UI Design
    • Kyle Dolphin – Front/Backend Development
    • Christine Yim – UX Design
    • Bryant Lu – Content Management

    Research-Driven Design Process

    The Omni team conducted extensive research to shape their product:

    • Product Discovery: Initial concept testing revealed users’ interest in finding new music but highlighted the perceived effort as a barrier.
    • User Preferences: While users generally prefer modern artists, certain genres bias toward historical acts.
    • A/B Testing: Continuous user testing throughout the design process helped refine key features.

    Key Features of Omni

    • Artist search functionality
    • Network web of related artists
    • Expandable artist connections
    • Artist overviews including top songs and discography
    • Direct links to Spotify for each song and album

    Visual Design and User Experience

    Omni’s interface is designed to evoke the feelings associated with music: relaxing, calming, entertaining, and energizing. The team achieved this through:

    • A complementary color scheme of blues and oranges
    • Subtle motion effects
    • Depth of focus in the design

    Development Challenges and Learnings

    While the team successfully implemented most of their goals, time constraints led to some features being cut. Key learnings include:

    • The importance of allocating more time for development planning
    • Challenges of working with new frameworks like d3.js
    • The need for more extensive usability testing with the live product

    Future Prospects

    Despite some setbacks, Omni demonstrates significant potential. The team’s thorough research and design process have laid a strong foundation for future refinements and additional functionality.

  • Westphal Key: Guiding Students to Their Perfect Major

    Choosing a college major can be overwhelming, especially for prospective and undecided students. Westphal Key, an innovative touchscreen interface developed by Drexel University’s User Experience and Interaction Design (UXID) students, aims to simplify this process for Westphal College applicants.

    Project Overview and Challenge

    Over 20 weeks, a team of five students researched, designed, prototyped, and developed an interactive experience to address the Westphal website’s lack of engagement in helping students explore majors. The existing website didn’t cater to uncertain students and lacked engagement. Westphal Key aimed to provide a bite-sized, interactive experience that would spark interest in the college’s majors and serve as a starting point for further research.

    Design Process

    The team’s approach involved extensive research, persona development, and iterative prototyping:

    • Research & Persona: Conducted user interviews and synthesized data using affinity mapping to identify core problems and develop a user persona.
    • User Flow: Evolved from an information-heavy approach to a more engaging questionnaire targeting users’ interests and preferences.
    • Prototyping: Progressed through low, mid, and high-fidelity prototypes, refining the design based on user feedback and usability testing.

    The Westphal Key Solution

    The final product offers a user-friendly journey:

    • Landing Page: Engages passersby with intriguing visuals and a clear call-to-action.
    • Interest Page: Users select from a cluster of unique tags representing their interests.
    • Results Page: Displays majors matched to the user’s interests, with the best match highlighted.
    • Detail Page: Provides immersive imagery and concise information about each major, including fundamentals, co-op opportunities, careers, and alumni success stories.

    Technology Stack

    Westphal Key was developed using Svelte for the front-end, Tailwind for styling, and Strapi as a backend content management system, allowing for easy content updates without technical knowledge.

    Results and Impact

    The Westphal Key interface was well-received by the target audience, with prospective students reporting accurate major matches and high engagement levels. The project not only delivered a forward-facing product for Westphal College but also provided valuable lessons in user-centered design and the importance of iterative testing.

  • Atom: Harnessing Social Connections for Effective Habit Tracking

    In today’s fast-paced world, maintaining good habits and achieving personal goals can be challenging. Atom, a habit-tracking application developed by Drexel University’s User Experience and Interaction Design (UXID) students, aims to leverage social connections to help users stay on track with their habits and goals.

    The Challenge: Making Lifestyle Changes Stick

    Changing aspects of one’s life can be incredibly difficult, especially when done alone. Managing the small habits that contribute to larger lifestyle changes requires significant effort, and self-accountability is often a major hurdle. Atom seeks to address these challenges by creating a community-focused platform for habit tracking and goal achievement.

    Key Features

    • Goal and habit management
    • Group goals for accountability
    • Social connections with friends and team members
    • Micro-habit tracking for larger goals

    The Development Process

    Over six months, the Atom team went through four main phases: initial research, application flow design, user testing, and final development. This comprehensive approach led to valuable insights and a functional finished product.

    Research-Driven Design

    The team’s research highlighted three key principles for effective habit tracking:

    • Consistent reminders and repetition
    • Breaking goals into micro-habits
    • Leveraging group pressure for engagement

    Iterative Design and Testing

    The team conducted multiple rounds of user testing, starting with paper prototypes and progressing to interactive Figma prototypes. This iterative process helped refine the user flow and address initial confusion between goals and habits.

    Technology Stack

    Atom was developed using React for the front-end and Firebase for the back-end, focusing on creating reusable and adjustable components for streamlined development.

    While the team faced challenges and couldn’t implement all desired features due to time constraints, Atom successfully delivers a usable web app that fulfills its core concept. The project not only resulted in a functional product but also provided invaluable lessons in project management, team communication, and the complexities of app development.

  • Petpet: Revolutionizing Virtual Pet Interaction with Leap Motion Technology

    In the ever-evolving landscape of user experience design, Petpet emerges as an innovative digital pet simulator that harnesses the power of Leap Motion Controller. Developed by a Drexel University student over a 10-week period, this project explores the potential of hand-tracking technology in creating meaningful and intuitive interactions with virtual pets.

    The Challenge: Meaningful Gestures in Digital Pet Care

    Petpet aims to redefine how users interact with digital content by:

    • Utilizing the Leap Motion Controller 2 for hand-tracking
    • Creating intuitive gesture controls for pet interaction
    • Designing a user interface that demonstrates purposeful use of hand-tracking technology
    • Simulating real-life pet care gestures in a digital environment

    Development Process

    The project unfolded in two main phases:

    1. Research: Understanding Leap Motion capabilities and experimenting with the technology
    2. Development: Designing Petpet’s style, wireframes, and gesture controls

    Key Features and Innovations

    Petpet stands out with its user-centric features:

    • Hybrid-controlled web app toggling between Leap Motion and cursor
    • Intuitive gestures like petting, pouring food, and belly rubs
    • Health progress bar to gamify pet care
    • Guided instructions for both cursor and Leap Motion modes

    Design Considerations

    The project incorporated several key design elements:

    • A tribute to classic virtual pet simulators in color palette
    • AI-generated wireframe images for efficient prototyping
    • Spatial UI design principles for 3D interaction

    Future Improvements

    Potential enhancements for Petpet include:

    • Transitioning to a 3D space for more diverse interactions
    • Expanding the collection of animals
    • Conducting further research on pet owner interactions

    Petpet not only showcases the potential of Leap Motion technology in creating engaging digital experiences but also highlights the importance of adapting to evolving technologies in the field of UX design.

  • Clink: Revolutionizing the Bar Experience for New Drinkers

    Research-Driven Design

    The development process spanned nine months and involved multiple stages of user research and prototype iteration. Key findings included:

    • 90% of inexperienced drinkers reported difficulty in deciding what to order
    • 75% of respondents expressed eagerness to learn more about cocktails

    These insights guided the team in creating a solution that addressed real user needs.

    Innovative Features

    Clink’s standout features include:

    • Personalized drink recommendations based on user preferences and interactions
    • A dark mode interface for easy viewing in dimly lit bars
    • AI-generated imagery for a cohesive visual experience
    • User-friendly search and filtering options

    The app’s design philosophy focused on minimal intrusion, aiming to enhance rather than disrupt the bar-going experience.

    Impact and Reception

    The Clink prototype made a significant impact at Westphal’s Digital Media Senior Showcase & Expo. Over 40 guests tested the live prototype, with many inquiring about its availability for download. The team’s newsletter garnered 47 sign-ups from individuals interested in following the app’s development and future launch.

    This project not only showcases the practical application of UXID principles but also demonstrates the potential for student-led innovations to address real-world challenges. The success of Clink at the showcase has inspired the team to consider further development, potentially turning this academic project into a marketable product.

    Clink stands as a testament to the quality of education and innovation fostered within Drexel’s UXID program, highlighting how user-centered design can create impactful solutions for everyday problems.

  • Sophomore Year as a GDAP Student

    Sophomore Year as a GDAP Student

    Sophomore year in Drexel’s Game Design & Production (GDAP) program is where students transition from learning the basics to building fully interactive and engaging games. This year focuses on game mechanics, programming, 3D modeling, and team-based development, helping students refine their skills and start thinking about their specialization in the gaming industry.

    Core Classes

    Sophomore-year courses dive deeper into game engines, design principles, and technical skills. Some key classes include:

    Scripting for Game Design (GMAP231): This course explores modern game engine scripting languages that are event-driven, control the art assets, provide multiplayer communication, and database access.

    Character Animation for Gaming (GMAP367): This course focuses on character animation techniques for real-time graphics, including cyclical animations, procedural animation, motion capture and integration into game engines.

    Game User Interface Design (GMAP211): This course explores the design, prototyping, and evaluation of game user interfaces, focusing on human capabilities, input technologies, and design principles. Students learn to create visually appealing, efficient interfaces through key concepts like learnability, visibility, error prevention, and user perception.

    Overview of Computer Gaming (GMAP260): This course presents an overview of computer gaming, including its history, its foundation in traditional games and its contemporary forms. The relationship among genres, platforms and audiences are examined and critical evaluation skills are developed.

    Skills You’ll Develop

    Sophomore year expands both technical and creative abilities to prepare students for larger game projects:

    Advanced Game Programming – Implement complex gameplay mechanics using C# (Unity) or Blueprints/C++ (Unreal Engine).

    3D Asset Creation & Animation – Model, texture, and rig game-ready assets for real-time rendering.

    Game Design Documentation & Prototyping – Develop structured plans and iterate based on playtesting feedback.

    Multiplayer & AI Integration – Experiment with online gameplay and enemy behavior systems.

    Projects & Challenges

    Sophomore year focuses on team-based projects and expanding creative problem-solving skills. Expect assignments like:

    First-Person/Third-Person Prototype – Developing a playable character with movement, interactions, and physics.

    3D Game Environment Design – Modeling and texturing immersive game worlds.

    Interactive Story Project – Writing and developing a branching narrative experience using Twine or Unity.

    AI & Enemy Behavior System – Programming non-playable characters (NPCs) with decision-making logic.

    A key challenge at this stage is team collaboration—learning to work efficiently with artists, programmers, and designers in a structured game development pipeline.

    Tips for Success

    Master your tools. Get comfortable with Unity, Unreal Engine, Blender, and game scripting.

    Test & iterate constantly. Playtesting is crucial—get feedback early and refine your work.

    Build a specialized skillset. Whether it’s level design, AI programming, animation, or storytelling, start focusing on an area of expertise.

    Join game dev communities. Participate in game jams, online forums, and networking events to build connections.

    Looking Ahead

    Sophomore year sets the stage for real-world experience—pre-junior year will involve more polished game projects, portfolio-building, and preparation for co-op applications. Whether focusing on design, programming, or art, now is the time to sharpen skills for future success in the game industry.

  • Sophomore Year as a GDAP Student

    Pre-Junior Year as a GDAP Student

    Pre-junior year in Drexel’s Game Design & Production (GDAP) program is a critical step toward specialization and professional development. At this stage, students are no longer just learning the fundamentals—they are refining their skills, developing industry-ready projects, and preparing for co-op applications. This year is about team collaboration, portfolio-building, and deepening expertise in game design, programming, or art.

    Core Classes

    As coursework becomes more advanced, students focus on game production pipelines, optimization techniques, and industry standards. Some key classes include:

    Game Development Foundations (GMAP345): This course introduces students to the computer game design process. Students also learn how the individual skills of modeling, animation, scripting, interface design and storytelling are coordinated to produce interactive media experiences.

    Advanced Game Design and Production (GMAP395): This course will step through the various modules of game engines, enabling students to gain access to real-time shaders and materials, particle systems and animation techniques.

    Advanced Portfolio (GMAP246): This course focuses on building skills for the career-long practice of producing and maintaining a professional creative portfolio while allowing the students the opportunity to create or refine additional student-driven portfolio work that synthesizes their skills and experience from direct class assignments in their other coursework.

    GMAP Electives: Many students explore course electives to focus on building their skills in the area of GDAP that they want to pursue after graduation.

    Skills You’ll Develop

    This year is all about polishing skills and applying them to real-world projects:

    • Advanced Gameplay Systems: Designing and implementing AI behavior, combat mechanics, and complex interactions
    • Optimized 3D Art & Animation: Creating high-quality assets for real-time performance
    • Multiplayer & Networking: Understanding online play, matchmaking, and real-time data sync
    • Portfolio Development & Industry Prep: Project refinement for co-op and job readiness

    Projects & Challenges

    With an increased focus on team-based development, students work on projects that mimic real-world production cycles:

    • Fully Playable Game Prototype: Custom mechanics, AI systems, and visual polish
    • Expansive 3D Level Design: Story-driven, interactive environments
    • Multiplayer Game Project: Networking features for real-time multiplayer
    • Portfolio & Demo Reel Creation: Polished assets showcasing technical/artistic skills

    A major challenge this year is finding a specialization—whether in design, programming, art, technical development, or UX/UI for games.

    Tips for Success

    • Apply early for co-op: The most competitive positions are filled early.
    • Develop a standout portfolio: Prioritize quality over quantity with refined case studies.
    • Collaborate like a pro: Use Agile, version control (Git), and project management tools effectively.
    • Network with professionals: Attend game dev events and connect with the industry.

    Looking Ahead

    Pre-junior year is all about preparing for professional experience. Junior-year co-op placements will allow students to work in real game studios, apply their skills in production settings, and gain valuable industry insights. The next step? Putting those skills to the test in the real world.

  • Sophomore Year as a GDAP Student

    Junior Year as a GDAP Student

    Junior year in Drexel’s Game Design & Production (GDAP) program is a defining moment, as students transition from academic learning to hands-on industry experience through co-op placements. This year is all about applying game development, programming, and design skills in real-world settings while working on advanced coursework. Whether working at a game studio, software company, or indie development team, junior year is the time to gain industry insights, refine portfolios, and build professional connections.

    While some students spend half of the year in co-op roles, coursework continues to focus on polishing game development skills and preparing for senior capstone projects. With junior year and real-world experience under their belt, GDAP students head into senior year ready to tackle their capstone project and industry showcase. The next step? Building an impressive final game project and preparing for full-time job opportunities.

    Core Classes

    While some students spend part of the year in co-op roles, coursework continues to sharpen game development skills and prepare students for senior capstone. Key classes include:

    • Game Development: Workshop I (GMAP377): Covers pre-production, game design documents, and prototype creation in small teams.
    • Advanced Game Playtesting (GMAP321): Teaches rigorous playtesting methods, player behavior analysis, and usability testing.
    • Game Development: Workshop II (GMAP378): Transitions pre-production into full game development, with a focus on production pipelines and polish.
    • Electives: Allow students to focus on specialization areas like technical art, AI, or narrative design.

    Skills You’ll Develop

    • Industry Production Pipelines: Scrum, Agile workflow, and version control with Git
    • AI & Advanced Game Systems: Enemy behavior, pathfinding, game logic
    • Project & Time Management: Balancing projects, portfolio work, and co-op responsibilities
    • Professional Communication: Presenting ideas, collaborating with multi-disciplinary teams

    Co-op Experience: Learning in the Industry

    Many GDAP students spend six months working in professional game studios, indie teams, or software companies. These co-ops provide real-world experience across several disciplines:

    • Game Programming: Gameplay mechanics, physics simulations, AI behavior
    • Game Art & Animation: 3D modeling, animation, texture work
    • Game Design & Narrative: Level design, player experience, interactive storytelling
    • Technical Art & Optimization: Shaders, VFX, real-time performance improvements

    Through co-op and coursework, students also tackle more complex and industry-aligned projects:

    • Full Game Prototypes: Playable, polished game experiences
    • Cinematic Cutscene Development: Motion capture, animation, and storytelling integration
    • Game AI & Physics Systems: Complex logic and responsive environments
    • Portfolio & Resume Refinement: Creating strong case studies and demo reels

    Tips for Success: Treat your co-op like a long-form job interview—ask questions, build relationships, and absorb as much as possible. Tailor your demo reel to your desired job role. Learn new tools like procedural generation systems, real-time rendering workflows, or AI-assisted design tools. Attend game dev meetups and online events to expand your network.