CHRISTINE JUNG                 

Come Out to Philly App


App Design, UI/UXFall 2023

Project
App
4 weeks


Course
Visual Principles for the Screen
Advised by Rachel Silverberg

Software
Figma
Adobe Illustrator

Skills
UI Design
Wireframing



Location-based services are built into nearly every application we use on our mobile devices—our phones guide us through space, and help us navigate decisions wherever we are. For this project, I was tasked to design a conceptual site guide for a site of my choosing.


The Come Out to Philly app is a guide to queer spaces in Philadelphia, mapping historic sites, popular neighborhoods, and LGBTQ+-owned spaces. The app targets users seeking safe, LGBTQ+-friendly spaces, or spaces that will help them feel more connected to their community. 





Road to the Final Product



Content Architecture Map

How will each page connect to the next? How do I go from broader categories to more specified locations?




Hand-Drawn Wireframe Explorations (2 Approaches)

What will the general format of the app be? Where will the main icons be located?


Low-Fidelity Wireframes (2 Approaches)

How can I further iterate on my hand-drawn wireframes ? What will the rest of the pages look like?





Low-Fidelity Wireframe Development

In this stage of the process, I created the bare-bones skeleton of the app and fully hashed out the initial wireframes. I created general shapes and placeholder text , purely focusing on curating a smooth and intuitive user experience, rather than on the design. The app went through multiple stages of user testing at this point.



Color, Logo, Image, & Type Exploration

My vision for this app was to have a fun and engaging visual language that mirrors the vibrant queer community of Philadelphia. Thus, I experimented with various color palettes, typography system combinations, and image treatments.



The mid-tone version of the blue, yellow, pink, and sky blue color palette was the perfect middle ground between dull and aggressively vibrant.


The first iteration of the App icon had illustrations that were too detailed and tiny for a smaller phone screen. The third iteration was overly simplified, and I wanted to pay greater homage to the name of the app.  



High Fidelity Wireframes (3 Approaches)

My next task was to apply my explorations to two screens. I ultimately landed on a combination of the first welcome screen iteration and the second home page iteration.


Final Product






 Don’t Say Gay Bill BookCome Out to Philly App