Flower City Garden
Interaction Design
UX/UI
Mobile Design
UX Research
Timeline: 6 Weeks, Spring 2024
Tools: Figma, After Effects
The Project
ROC the Riverway is an initiative in Rochester, NY, designed to connect residents and visitors with the city and get them outside and involved in the community. Flower City Garden uses location-based gameplay to create a playful, interactive experience. Through location-based gameplay, users are incentivized to visit local landmarks, businesses, and ROC the Riverway developments through meaningful interaction.
As players explore the city, they collect digital flowers and add them to a virtual journal. Each flower represents that location, and by extension the memory of that visit. This project utilized UX research and gamification principles to reward engagement with Rochester’s up-and-coming public spaces.
New User
Returning User
The Process
This project began with a simple prompt: How can we create an experience that brings attention to ROC the Riverway?
Defining the scope was one of my biggest challenges. I had to decide whether my experience would encompass the entire city or focus on an interaction with a single landmark. With so many possible routes, it was hard to choose just one, especially as someone who isn’t from Rochester and isn’t familiar with the city. I decided to build off of my own confusion and create something that would put ROC the Riverway into perspective for visitors like myself while making it fun for locals at the same time.
1.
Research & Planning
2.
Designing
3.
Prototyping
4.
Final
Research & Planning
To better understand my users, I developed three user personas representing different types of explorers: the explorer, the tourist, and the local. This helped me visualize how different users' goals would influence their experience.
Designing
I created a styleboard and wireframes before moving on to designing each screen.
Prototyping
Next I thought about button interactions, microanimations, and transformations from one screen to the next. I also planned for my two user flows, a new user and a returning user, based on my user personas.
Final
Finally, I recorded my two user flows, put them in After Effects, and exported my final animated prototype.
Research & Planning
To better understand my users, I developed three user personas representing different types of explorers: the explorer, the tourist, and the local. This helped me visualize how different users' goals would influence their experience.
Designing
I created a styleboard and wireframes before moving on to designing each screen.
Prototyping
Next I thought about button interactions, microanimations, and transformations from one screen to the next. I also planned for my two user flows, a new user and a returning user, based on my user personas.
Final
Finally, I recorded my two user flows, put them in After Effects, and exported my final animated prototype. I also made note of my products' novel moments that separate it from the crowd.
Reflection
Flower City Garden was an important lesson in scope. It took a while to narrow down my idea because there were so many possibilities to choose from. I’m ultimately happy with my solution because of the way I considered the needs of different users through personas and a user journey. These were essential to the process of understanding how different users would approach my app and what struggles they may have.
The map and location functions were critical because they needed to look and function in a way that was different from competitors like Google Maps in order to keep users on the app. I kept iterating until I found a good balance between fun and function. The colorful UI and use of flowers as pins keeps users engaged and looking forward to learning about each flower they find, especially with the addition of the bouquet when all of the locations are visited. Ultimately, this app would lead to real-world engagement and strengthen Rochester’s community, furthering the goals of ROC the Riverway and getting people outside.