Ziiip Mobile App and Branding

User Flow  |   Wireframes   |   App Design   |   Logo Design   |   Landing Page

The Problem

Imagine it's Sunday morning and you have a handful of errands to run before you meet up with your buddy for a few brews to watch the big game. Time is of the essence (and who loves running around completing errands anyways?)—you know where you need to go, but you want to make sure you're making your way from home to the pub in the quickest way possible. While Google Maps does a great job at giving you directions to multiple locations, it falls short when it comes to making sure you are making your stops in the most efficient manner. My client came to me with this problem as the core functionality of their app, along with a handful of other use cases to serve. We also wanted to explore the idea of suggesting destinations—whether you're on a road trip looking for nearby excursions or you're zipping around town and want to grab an excellent cup of coffee along you're route.

The Solution

Ziiip is a trip planning and route optimization app that helps you get everywhere you need to go in the most efficient way. Ziiip gets you from point A to point B (and all the places in between) quicker so you can spend more time doing what you love.  With multi-stop route optimization and category recommendations, you don’t have to worry about zig-zagging across town.

The Process

To kick things off we (client, designer and developer) hopped on a discovery call to talk through the main use cases, tech constraints, dreamy ideas of *what*could*be*, and what was MVP. After getting a thorough understanding of the concept and target audience I set to work on visualizing our discussion as a user journey map. The goal here was to help us streamline the user experience and unite as a team around what we're building for v1. Once we were in agreement on the user journey I created wireframes and high-fidelity mockups (presented via Invision Prototypes) that could easily be handed over to the developer.


Planning a trip

Using a familiar UX pattern, users can easily start planning trips by setting a start and end destination and then add as many stops as they desire. When adding a stop, users can enter a specific location or use the "explore" feature to find a destination. Users can customize their trip by giving it a name, reordering their destinations, lock stops in a particular order and a get a map view of their route. Once all of their stops have been added the user can optimize their route or start trip navigation (aka ziiip it).


Destination recommendations

One of the key features to Ziiip is finding destinations along your route via keyword search, category browsing or by letting Ziiip pick. While the first two search methods are pretty familiar to our users, the "Let Ziiip Pick" feature is unique to this app. It allows our users to unlock a new level of efficiency by essentially adding a category as their destination instead of a specific location. During the optimization process Ziiip will pick the best place to go based on your route and location reviews. This allows the user to quickly stop for gas or grab a coffee without worrying too much about the exact location.


Trip optimization

After all stops have been added to the trip users can optimize their route. Ziiip will consider all of the destinations entered and rearrange them to create the most efficient route. In cases where the user is utilizing the "Let Ziiip Pick" feature, the app will select the specific destination at this point. The user can get a quick overview of the changes to their trip and choose to accept it or go back to their original route.

Logo Design

Once we had the designs ready for development I got to work on creating a logo to be used for the app icon, loading screen and the simple landing page I was building. After a few iterations, we landed on a logo with a bold sans-serif set in italics to communicate the speedy, time saving mission of the app. The location marker zipping across the 3 i's not only communicates speed but also quickly associates the name with multiple destinations.

Up Next


Design  |  User Testing    |   Prototype
check it out