Digital Media CMS

Author: Alexis Raya

  • Wallflower: A Digital Companion for Managing Social Anxiety

    Navigating social anxiety can be a daily challenge, but what if there was a digital companion designed to provide immediate support? Enter Wallflower, an innovative browser-based app created by students from Drexel University’s User Experience and Interaction Design (UXID) program.

    Understanding the Challenge

    The journey began when Kara Butler, a member of the team, experienced social anxiety at a public event and found existing resources lacking. This personal insight sparked the question: How can we assist people in managing feelings of social anxiety without long-term commitment?

    Research and Discovery

    The team embarked on a six-month project, initially facing challenges in gathering qualitative data due to ethical guidelines surrounding psychological research. Instead, they turned to reputable sources like the National Institute of Mental Health and the Mayo Clinic to understand the causes and symptoms of social anxiety.

    Competitive analysis revealed that existing apps often focused on single tools or long-term therapy, missing the mark on providing immediate, accessible support. Surveys of Philadelphia students aged 18-25 further highlighted diverse needs, leading to the creation of user personas like Lorne, Darla, and Barry.

    The Solution: Wallflower

    Wallflower offers seven content types designed to relax, uplift, and inspire:

    • Affirmations: Motivational phrases for courage.
    • Icebreakers: Phrases to initiate conversations.
    • Sounds: Soothing tracks backed by science.
    • Meditations: Grounding exercises.
    • Articles: Advice from credible sources.
    • Puzzles: Hands-on distractions.
    • Journal: A private space for reflection.

    Users can save content, filter by category, and access an S.O.S. section with hotlines, all without requiring a login.

    The Design Process

    The team embraced an agile workflow, dividing into App and Projects teams to handle multimedia, usability testing, content injection, development, and marketing. Visual design was inspired by the clematis vine, symbolizing support, with a color palette evoking fresh, warm, garden scenes.

    However, not every idea made it to the final product. A chatbot feature and texting integration were cut due to feasibility and ethical concerns, while a mood-tracking journal was scrapped due to limitations in data analytics.

    User Feedback and Impact

    Through iterative testing and feedback, the team refined Wallflower’s aesthetics and functionality. Ultimately, Wallflower aims to provide a bit of extra support to those who may feel like a wallflower in social situations, offering tools to grow and thrive.

  • Momentum: Photo Sharing and Community Engagement for Enhanced Productivity

    In today’s fast-paced world, staying motivated and focused on tasks can be a significant challenge. Students from Drexel University’s User Experience and Interaction Design (UXID) program tackled this problem head-on, creating Momentum, a social productivity app that leverages photo sharing and community engagement to help users achieve their goals.

    Project Introduction

    The Momentum team prioritized research and design, focusing on their strengths to develop a user-centric solution. Over 20 weeks, they conducted thorough research to identify user pain points and iterate on design concepts, culminating in an app prototype designed to resonate with their target audience.

    Research Insights

    Preliminary surveys revealed that many users find existing productivity tools ineffective in maintaining focus and motivation, leading to feelings of stress. Users also expressed a desire for autonomy and control over progress checks. This feedback led the team to prioritize user-driven features and customization options.

    The team’s research also highlighted the importance of accountability and community, with a significant percentage of users emphasizing the value of body doubling for staying productive.

    Design Exploration

    During the design exploration phase, the team focused on creating a brand identity that resonated with the core values of motivation, focus, and productivity. They chose blue as the primary color for its calming and productive associations and incorporated wave imagery to symbolize forward movement and energy.

    Iterative Design Process

    The team employed an iterative design process, progressing from low-fidelity to high-fidelity wireframes, incorporating user feedback at each stage. Changes included adding more detailed information to task cards based on user requests for better organization.

    Development and Prototype

    Recognizing their team’s strengths in design and research, the students pivoted to create an interactive prototype using Figma’s variable tool. This allowed them to effectively showcase the app’s functionality and user experience.

    Conclusion

    Momentum showcases the power of user-centered design and the adaptability of the Drexel UXID students. By prioritizing research, design, and iterative prototyping, the team created a promising solution for enhancing productivity and fostering a sense of community.

    Reflection

    The Momentum team’s journey highlights the importance of collaboration, problem-solving, and continuous learning. While a fully functional app wasn’t feasible within the project’s scope, the team is proud of the research-backed design and the valuable lessons learned, which will undoubtedly inform their future projects.

  • Facets: Redefining Connection in the Dating App Landscape

    Tired of the endless swiping and superficial interactions that plague modern dating apps? Students from Drexel University’s User Experience and Interaction Design (UXID) program have reimagined the online dating experience with Facets, a platform designed to foster genuine connections and showcase the many sides of a person’s personality.

    The Problem: Dating App Disillusionment

    Today’s dating apps are often criticized for fostering a toxic culture of competition, ghosting, and endless scrolling. Users are reduced to mere profiles, leading to feelings of disposability and self-consciousness. In the quest to appear most desirable, true connections are often lost. The Facets team recognized these flaws and set out to create a solution tailored for college-aged individuals seeking meaningful, long-lasting relationships.

    Preliminary Research and Psychology Insights

    Preliminary research targeting dating app users aged 18-23 revealed that a significant percentage describe themselves as unsuccessful on dating apps. Key challenges included profile quality, communication barriers, and dissatisfaction with app features.

    Psychology research further underscored the negative impact of online dating, with phenomena like ghosting and orbiting exacerbating feelings of disappointment and self-doubt. These findings emphasized the need for innovative solutions that prioritize user experience and well-being.

    The Facets Solution: Mindful, Genuine Connection

    Facets differentiates itself through several key features:

    • Friend Contributions: Users can invite friends to contribute to their profiles, offering a multifaceted view of their personality.
    • Daily Profile Limit: This encourages selectivity and intentional decision-making.
    • Rejection-Free Model: Promotes a positive and supportive environment.

    Design and Development Process

    The team followed a user-centered design process, starting with sketches and lo-fi prototypes to explore core concepts. Mid-fi and hi-fi prototypes were then developed, incorporating user feedback to refine the app’s interface and functionality. The app was developed as a web app using React.

    Key Takeaways Guiding Facets

    • Encourage selectivity and intentional decision-making
    • Strike a balance between friend involvement and autonomy
    • Create a safe space for all users

    Conclusion

    Facets establishes new patterns in the saturated dating app market, encouraging users to feel uplifted and excited to put themselves out there. By challenging traditional dating app norms and prioritizing genuine interactions, Facets offers a fresh perspective on online connection.

    Future Improvements

    If the team had more time and resources, they would research and develop an algorithm to cater profiles to users’ needs, add microinteractions and animations to enhance the user experience, and consult with subject matter experts to leverage their insights on the dating app landscape.

  • Freshly: A Mobile App to Combat Food Waste Among Young Adults

    Food waste is a significant environmental and economic problem, especially among young adults. Drexel University’s User Experience and Interaction Design (UXID) students have taken on this challenge by creating Freshly, a mobile app designed to help young adults reduce food waste through freshness tracking, waste-free recipes, and educational information accessible by simply scanning grocery receipts.

    The Challenge: Young Adults and Food Waste

    Young adults often struggle with managing their food inventory, leading to significant waste due to forgotten expiration dates, lack of awareness about proper storage, and limited knowledge of how to use food before it spoils.

    Goals & Objectives

    The primary goal of the Freshly project was to develop a user-friendly mobile app that motivates and educates young adults (18-30) on building positive food habits while simultaneously reducing their food waste. The app emphasizes clean, simple UI and engaging design.

    The Freshly Solution: From Receipt to Recipes

    Freshly addresses these challenges with several key features:

    • Scan/Upload: Users can quickly add groceries to their “Freshly Fridge” by scanning or uploading a grocery receipt image. The app then allows users to rename or deselect items as needed.
    • My Freshly Fridge: This feature tracks food freshness and organizes items by category, highlighting foods that need to be eaten soon. Users can also access storage tips and information on the carbon impact of different foods.
    • Recipes: Provides AI-generated recipe ideas based on the contents of the user’s Freshly Fridge, helping them utilize ingredients before they expire.
    • Learn: This section offers a search function for storage tips, recent search history, a daily tip, and resources on composting and low-carbon impact living.

    The Design Process: Research and Iteration

    The development of Freshly involved extensive research, including user surveys, interviews, and competitor analysis. A Kano analysis helped prioritize features based on user interest.

    The team iterated on the design based on user feedback from low-fidelity and high-fidelity testing, addressing issues such as color accessibility and clarity in the “Receipt Review” page.

    Development and Technology

    The backend was developed using Python to run the Veryfi API for receipt scanning and the OpenAI API for food categorization and storage tips. The frontend was built using React Native Expo, ensuring a seamless user experience.

    Success and Lessons Learned

    Freshly proved successful in engaging and motivating young adults to reduce food waste, achieving a usability score of 6.27/7.

    Future Steps

    Future improvements include adding a “save to collection” feature for favorite recipes, implementing notifications for expiring items and daily tips, and integrating user login for data availability across devices.

  • SafePlate: Dining with Dietary Restrictions Made Easy

    Finding restaurants that cater to everyone’s dietary needs can be a challenge. SafePlate is a mobile app created by Drexel University’s User Experience and Interaction Design (UXID) students to revolutionize shared dining experiences, making it easier for individuals and groups with food allergies or other dietary restrictions to find suitable restaurants.

    The Challenge: Dining Out with Restrictions

    For individuals with food allergies or dietary restrictions, challenges arise from limited menu options, the risk of cross-contamination, and the absence of dietary labels on restaurant menus. This situation often forces individuals to conduct time-consuming research and make advance calls to restaurants, hindering their ability to enjoy spontaneous dining experiences.

    Goals and Objectives

    The SafePlate team aimed to:

    • Enable users to create a comprehensive dining profile.
    • Display tailored restaurant recommendations based on a dining party’s restrictions.
    • Facilitate user connections through dining buddies.
    • Provide clear menu labeling with branded icons.

    The SafePlate Solution: Who/What/Where

    SafePlate uses intuitive Who/What/Where search functionality, trustworthy dietary restriction details, and personalized restaurant suggestions for every group. The app fosters social connections through dining buddies and offers clear menu labeling with branded icons.

    Research and Insights

    The team gathered key statistics about allergies and diets and analyzed six competitors to identify unique aspects and shared features. Surveys and interviews with Gen Z and Millennials with experience dining out with dietary restrictions helped the team understand their unique experiences and pain points.

    • 51% of all Americans are impacted by food allergies or sensitivities.
    • 52% of Americans with exclusion diets struggle to find food when eating at restaurants.
    • 50% of food allergy-related fatalities occur in eating establishments.
    • 29% of restaurants do not have a plan for answering questions on food allergens.

    Key Findings From Research:

    • Users want external menu links, menu dietary labels, user reviews and ratings, and the ability to filter by restriction.
    • It can be difficult to find new restaurants, especially in new areas or if they want to try something new.
    • Individuals are disappointed about missing out if the rest of the dining party can order something from a restaurant.

    The Design Process:

    The team used “I Like/I Wish/What If” and card sorting to gather user insights and validation. They created a Lo-fi prototype, prioritizing intuitive navigation and information hierarchy.

    The Challenges:

    Data delivery and data accuracy using APIs proved challenging. The team opted to pull menu information from a database rather than online reviews to prioritize trustworthiness.

    Visual Design:

    The color scheme for SafePlate aims to create an atmosphere of positivity and warmth. Green and pink were selected to evoke feelings of freshness, vitality, and friendliness. The app uses the SF Pro font for its exceptional clarity and contemporary style.

    Mascot and Tone of Voice:

    A Plate emoji (“:P”) was chosen to represent the letter “P” in SafePlate, adding a playful touch. The app uses a warm and welcoming tone, aiming to create a sense of comfort and reliability for users.

  • Traction: The Running App That Gets You Started

    Want to run, but don’t know where to begin? Traction, a running app developed by Drexel University’s User Experience and Interaction Design (UXID) students, is designed for aspiring runners who need the right tools to go from zero to running.

    The Problem: How to Make People “Want to Want to Run?”

    Many people view running as a way to improve themselves and get exercise, but lack the knowledge and resources to run properly. The Traction team aimed to address this by creating an empathetic approach to running that helps beginners learn how to start.

    Filling a Market Gap

    The team noticed a market gap in running applications geared towards recreational running. Existing apps are often geared towards experienced runners, with detailed statistics and tracking that beginners wouldn’t know how to use. Traction bridges this gap by providing the necessary tools and knowledge for beginners.

    Key Features and Design

    Traction focuses on addressing the issues that beginner runners face and keeping them engaged with the habit of running long-term.

    Research-Driven Design

    The team conducted extensive research, including competitive analysis, surveys, and interviews, to understand the needs of beginner runners.

    • Competitive Analysis: Identified strengths and weaknesses of existing running apps, and core user flows.
    • Surveys & Interviews: Revealed that new runners are overwhelmed by existing apps and lack information on how to run.

    User Personas

    The team created two user personas to represent their target audience:

    • Wants to be Health-Focused: Lacks knowledge and experience, wants to improve physical fitness.
    • The Stress Buster: Wants to establish a better work/life balance and use running as an emotional outlet.

    Visual Design

    The app features a purple-focused color palette with orange accents, as well as Fugaz One as a display font and Poppins as a body font, capturing the empathetic and cheerful aspects of the app.

    Key User Flows

    • Before Run: Change widgets, read guidance, check awards and records.
    • During Run: See current stats and get feedback according to running plan.
    • After Run: See experience gained, achieve awards, guided cool-down exercises, rate run experience.

    Technology

    The team used Figma for wireframing, the Figma Dev feature to translate wireframes into code, Svelte as a framework for the coded prototype, and Vercel for web hosting.

    Success and Lessons Learned

    The Traction team successfully built a working coded prototype that builds off of research, while also being clean, enjoyable, and fun to use. This project highlights their ability to pivot and rethink their approach while creating something creative and needed in the running app industry.

  • 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 towards 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.