Blog

The Challenge: Mastering PHP and Database Integration

As a first-time PHP user, the student faced several challenges:

• Navigating the intricacies of PHP programming
• Resolving database errors
• Creating a visually appealing website using HTML and CSS
• Implementing dynamic data retrieval from a database

Development Process

The project unfolded in several stages:

1. Creating a style tile for color scheme, font, and logo branding
2. Designing wireframes for layout planning
3. Developing the HTML and CSS structure
4. Integrating PHP for dynamic recipe retrieval
5. Implementing search and filter functionalities

The Tasty Tales Solution

The final product boasts several user-centric features:

• A cohesive color scheme for visual appeal
• Easy navigation through the recipe collection
• Filter options for proteins
• Nutritional information on recipe cards
• Custom fonts and a well-defined style guide

Key Achievements

Tasty Tales successfully met its primary objectives:

• Dynamic retrieval and display of all 37 recipes
• Seamless search and filter functionalities
• A responsive design ensuring a positive user experience across devices

Lessons Learned

The project provided valuable insights into PHP development and database management. For future improvements, the student noted the importance of thorough database preparation before diving into code integration.

The Challenge: Making Digital Sculpting Feel Natural

Traditional 3D modeling software often presents a steep learning curve, especially for those accustomed to physical sculpting. Smoosh addresses this challenge by:

• Simplifying the creation of organic shapes in digital 3D models
• Simulating real-world sculpting techniques effectively
• Offering customization options to suit user needs and senses
• Enabling export of base models for further refinement in other programs
• Reducing overall modeling time

Development Process

The project unfolded in four key phases:

1. Competitor and User Research
2. Lo-fi Wireframing
3. Styling
4. Hi-fi Prototyping

The Smoosh Solution

Smoosh utilizes bHaptics haptic gloves to provide a tactile sculpting experience in a digital environment. Key features include:

• Desktop application for ease of use without VR headsets
• Gesture-based controls for intuitive modeling
• Haptic feedback simulating physical clay manipulation
• Simplified UI focusing on essential sculpting tools
• Large, accessible buttons for both mouse and glove interaction

User Interface Design

The UI emphasizes a sandbox-style theme with:

• Bright, soft colors for an artistic feel
• Hand outlines for visual feedback in 3D space
• Hidden menus that appear when hands are pushed to screen edges
• Simplified settings and loading options for streamlined workflow

Future Potential

Smoosh represents a significant step towards making digital 3D modeling more accessible and intuitive. It opens doors for artists intimidated by traditional keyboard-mouse modeling, potentially revolutionizing the field of digital sculpting.

Dish Discovery, a project by Drexel University student Eli Goldberg, showcases the power of PHP and seamless database integration in creating a dynamic recipe website. This 10-week endeavor not only resulted in a functional product but also marked a significant learning curve for Eli in mastering PHP.

The Challenge: Creating a Dynamic Recipe Website

The primary objective was to develop a responsive recipe site that pulls data from a database using PHP. Key challenges included:

• Familiarizing with PHP for the first time
• Integrating a database seamlessly
• Designing an intuitive user interface
• Creating only two unique pages – a main recipe search page and a detailed recipe page

Development Process

The project unfolded in several stages:

1. Initial research and user studies
2. Design of logo, fonts, and color scheme
3. Building static pages with HTML, CSS, and JavaScript
4. Integrating PHP and database functionality
5. Fine-tuning, debugging, and quality testing

Key Features and Innovations

Dish Discovery stands out with its user-centric features:

• Multiple filter selection for customized recipe searches
• Consideration for users with dietary restrictions
• Clear and consistent recipe presentation
• Responsive design for various screen sizes

Overcoming Technical Challenges

A significant hurdle was implementing multiple filter selections. Eli solved this by using checkbox elements within a form, utilizing the POST method, and creating a function to detect and format multiple selections for database queries.

Results and Future Improvements

The project successfully met its goals, providing a functional and user-friendly recipe website. Future enhancements could include:

• Improved overall branding
• Expanded filter categories beyond protein choices
• Enhanced search capabilities

Dish Discovery not only serves as a testament to Eli’s growing skills in web development but also provides a valuable platform for recipe enthusiasts to explore and discover new dishes with ease.

The Concept

Thunk challenges players to generate as many responses as possible to a series of prompts over six rounds. The game’s unique element lies in the “switch-ups” – constraints that add complexity to the prompts, requiring players to think outside the box and adapt to unexpected challenges. The random pairing of prompts and switch-ups ensures variability and high replayability in each playthrough.

Research-Informed Design

The development of Thunk was deeply rooted in user research. The team began by conducting interest interviews to gain insights into player preferences. Participants were presented with sample questions based on creative exercises developed by Cas Holman, along with questions about social games they enjoy.

The team identified Fibbage XL, Quiplash 2, and Drawful 2 as popular choices, noting that engaging digital social games require a distinct personality, akin to a game show host, and a central screen that players connect to via personal devices.

User Interface

The team followed a three-step agile design cycle:

• Create and Iterate: Team members worked on individual tasks, often collaborating on the same task simultaneously.
• Discuss and Evaluate: The team reconvened to present and discuss their ideas.
• Merge Designs: Ideas were refined and integrated.

The challenge for the UI team was to create a design that conveyed creativity while maintaining web accessibility. They selected a color scheme of pinks and purples, paired with Avenir Next and McLaren fonts, and used Gilbert for the logo. While achieving AAA accessibility standards proved difficult without compromising the aesthetics, they were able to create a distinct visual identity for Thunk.

Development and Technical Challenges

Thunk was developed using NodeJS and Socket.IO. NodeJS was chosen for its ability to handle dynamic server-side actions, while Socket.IO facilitated simultaneous connections and communication between multiple devices.

The development team faced challenges in scaling up their proof-of-concept prototype, which revealed the need for features like room creation and user identification. The team learned a lot about working with server-side JavaScript.

Key Takeaways

The creation of Thunk proved to be a valuable learning experience for the entire team. While the final product may not have met all initial goals, the development process yielded valuable insights. Key lessons learned included:

• Improved project planning and goal setting, especially when working with unfamiliar technologies.
• The importance of constant and clear communication among team members.
• The critical need for effective time management, as team members’ progress was heavily reliant on each other’s work.

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.

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.

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

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

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.