Designing PlayPath’s UI, Part 1: The Welcome Screen
Aug 16 2023
The first thing someone sees when they launch the app will be a welcome screen that sets the visual tone of the app and gives them a concise description of how the app will help them.
Leading with a warm welcome
I wanted a warm and endearing phrase at the top of the page to sum up what the app enables them to do. Some options I came up with:
- Find kid-friendly parks while traveling (a bit too wordy)
- Find kid-friendly parks (feels sterile)
- Find a great park for your kids (centers their kids and their experience at the park)
I love that last one. “Find a great park for your kids” feels like a sigh of relief in the middle of a stressful road trip with fussy kids.
I also wanted a concise, meaningful tagline to sum up what the app does. Some options I started with:
- PlayPath helps you find kid-friendly parks while traveling (needs more “feeling” words)
- PlayPath helps you find great parks to visit while traveling with kids (better, but it should specify young kids)
- PlayPath helps you find great parks to visit along your route while traveling with small kids (adding “along your route” speaks to a parent’s desire to not add too much travel time)
Lastly, I wanted to include a really fun illustration on this page to set the fun visual tone for the app.
Design considerations
The illustration
While searching for park illustrations to purchase online, I was immediately drawn to those that showed park features on a transparent background. I knew this would give the illustration the feeling that it belonged in the app.
A giant square image with color and visual elements all the way to the edges would feel like it was just dropped in. Alternatively, a play structure with no background would help bring the disparate elements of the page together into a cohesive whole.
Text colors
When choosing colors for the surrounding text, I picked colors that matched well with the illustration’s colors, since this would go a step further in making the design feel cohesive.
Font choice
Regarding font choice, I wanted a readable sans font to use as a default for all the text in the app. I chose DM Sans from Google Fonts since that one felt a bit more fun than some of the other options.
For the header text, I went with DM Serif Display, a serif font that paired really well with DM Sans. I felt a serif font would feel more traditional and organic, and help avoid any feeling of being corporate or technical.
Finding a brand color
When designing the call-to-action button at the bottom of the page, I knew I’d be setting a precedent for a brand color for the app with what I chose. After trying several options, I chose to go with a fun green that leaned slightly toward the blue end of the spectrum. Green goes well with the idea of parks, and it’s a color unhindered by gender stereotypes.
As an involved dad of young kids, I’m used to reading parenting books and using services that are designed for moms, with language and design elements that are stereotypically feminine. It doesn’t bother me; it’s just a reminder that I’m not their target demographic. But I’m not the only involved dad out there, and it’s exciting to come across more and more products and services that don’t ascribe gender-specific design to things geared toward parenting. I’d love for my app to do the same.
The final product
Here’s what I came up with:
Hey, I'm Andrew Pethoud! I'm a full-stack software engineer 💻 who loves building joyful digital experiences for humans 👫. I'm also passionate about walkable communities 🌳 and making cities safer for bikers and pedestrians 🚴, especially when they're my own kids 🧒.
© 2024 Andrew Pethoud