5-Week Interactive UI Project

Playing Card Interaction

Take care of your digital companion!

Project Brief

The primary objective of this project was to explore Figma’s prototyping tools, components, variables, and conditionals by designing a simple app. The app allows users to interact with a set of playing cards: adding and removing cards from their "hand," sorting them, and displaying the count. The design focused on simplifying the playing card interface, emphasizing essential elements for usability and clarity.

Project Duration
5 Weeks

Programs Used
Figma

Year
2024

8-Week Product Design Project

Neighborly: Travel App

Based on Rochester's Roc The Riverway initiative

Project Overview

Project Brief

Develop an interactive experience to help residents and visitors connect with landmarks and spaces in downtown Rochester, centered around the Genesee River.

Project Duration
8 Weeks

Programs Used
Figma

Year
2024


Ideation and Research

Ideation and Research

Ideation and Research

Problem Statement

How can we make downtown Rochester a more inviting and accessible place for both tourists and locals?


Concept: Neighborly

Neighborly is a travel app designed to take the hassle out of trip planning and help users experience more in the moment. The app includes:

  • AI-Powered Travel Guides: Guides with special interests in topics like history, food, or art. Each guide provides pre-made itineraries tailored to their theme.

  • Customizable Itineraries: Users can create their own, edit pre-made itineraries, or even modify itineraries shared by others.

  • In-App Suggestions: AI provides real-time alterations and recommendations based on user preferences and location.

  • Sharing Features: Users can share their itineraries with friends, making collaborative trip planning seamless.


Inspiration

AI Assistants: Siri and Alexa set a standard for responsive, personalized interaction.

Local Tour Guides: Apps like Lonely Planet offer curated experiences.

AR Mapping: Google Maps Live View demonstrates effective AR navigation.

Imagining Product Users

Imagining Product Users

Imagining Product Users

Target Users


Young Adults (18-35)

  • Lifestyle: Socially active, tech-savvy, enjoy exploring new places.

  • Brands/Products: Instagram, Spotify, Airbnb, Duolingo.

  • Values: Convenience, personalization, sustainability.

  • Preferences: Seek unique, interactive experiences.


Families (Parents with children)

  • Lifestyle: Busy schedules, prioritize family-friendly activities.

  • Brands/Products: Google Maps, TripAdvisor, Disney+.

  • Values: Safety, accessibility, educational value.

  • Preferences: Want easy navigation and engaging activities for all ages

User Flow and Journey Mapping

User Flow and Journey Mapping

User Flow and Journey Mapping

Awareness and Onboarding

Discovery: Users learn about the app through social media, local ads, or word-of-mouth.

Onboarding: Personalized setup based on user preferences (e.g., interests, accessibility needs).


Interaction

Explore: Users browse categories, guides, and itineraries.

Plan: Select or customize itineraries.

Navigate: Use AR mapping for directions and real-time updates.

Engage: Interact with guides, share itineraries, and access exclusive deals or insights.


Feedback Loop

Users can rate experiences and provide feedback to improve suggestions.

Wireframes

Wireframes

Wireframes

Key Screens

Home Screen: Displays categories, guides, and featured itineraries.

Itinerary Builder: Drag-and-drop interface for creating trips.

AR Map View: Interactive navigation with points of interest.

Guide Interaction: Chat interface for AI-powered suggestions.


Aesthetic Development and Visual Design

Aesthetic Development and Visual Design

Aesthetic Development and Visual Design

Style Guide

  • Color Palette: Blue and green tones to reflect the river and nature.

  • Typography: Modern sans-serif fonts for readability.

  • Icons: Minimalist, vector-based designs for clarity.

  • Illustrations: Playful yet professional, inspired by Duolingo’s style.


Design Principles

  • Intuitive Navigation: Clear hierarchy and seamless transitions.

  • Engagement: Use of AR and interactive elements to keep users immersed.

  • Accessibility: Inclusive design for all users.

Conclusion

Neighborly aims to bridge the gap between exploration and convenience, making downtown Rochester a vibrant and accessible destination for all. By leveraging technology like AR and AI, it creates a unique, user-centered experience that supports local businesses and enriches community engagement.

Spring 2024

Figma