YOUR GUIDE
~
YOUR GUIDE ~
Anecdotal Guide to Philadelphia
Interactive Digital Design
Art Direction: Matthew McGlynn
When I moved to Philadelphia for school, I had a tough time navigating the city's neighborhoods and finding fun things to do. I started jotting down my experiences in my journal to remember the vibe and character of each area. Being new to a city can feel very isolating, so I wanted to design a website that other newbies could use to find cool spots and feel like part of a community.
User Personas
Visual Style
To make the site feel welcoming and playful, I took inspiration from scrapbooks and used colors from my beloved Crayola markers. I really wanted to bring that analog, DIY feel into the digital realm.
One of the site's most important elements was the map, which needed to be recognizable but also has a personal touch. I hand-drew the buildings on tracing paper, scanned the sketches, and converted them to vectors in Illustrator.
Prototype
Through a lot of trial and error, I learned how to use Figma to my advantage. I created a cohesive UI kit using the atomic design methodology. I also leveraged the micro animation capabilities in Figma to create a more immersive experience for users.
This project was also my opportunity to hone my Figma skills. I had dabbled in Figma before, but this was my first time learning the ins and outs of every feature. I made great use of the resources put out by the Figma Community to learn about the different capabilities, and by the end of the project, I became a resource for my peers to ask questions about the quirks of Figma.
The biggest utilization of Figma’s animation capabilities was in the “add your story” flow. I created an animation that mimicked highlighting text as the loading state. Then, the highlights seamlessly flow into a bubbly animation thanking the user for submitting the story and redirecting them to the home page. This animation sequence adds to the welcoming personality of the site and redirecting users back to the map encourages them to stay on the site instead of clicking away.
Reflection
This project was an opportunity to combine my love of handicrafts with my interest in user experience design, two realms that may seem to be on opposite ends of the spectrum of design. It was a fun challenge to bridge that gap and foster a sense of playfulness amidst the technical challenge of building an interactive digital map.