Category: UXID

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

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.

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.

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.

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.

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.

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.

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.

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