What Does Bonvo Do?
Bonvo allows you to catalogue trips, share experiences, and explore the world through the eyes of other travelers.
With Bonvo, you can describe your travels and track your trips across the world. Share these experiences within the app’s feed, or create a custom trip webpage with a single button and send your trip photos to anyone you'd like, whether or not they have a Bonvo account.
The social feed, coupled with search and Bonvo's custom photo lightbox with map view, allows you to discover new locations all over the world.
Catalogue Trips​​​​​​
Bonvo allows users to create and edit trips with ease. A simple and clear interface allows users to quickly add images from their photo gallery to the app.
Create Trips and Add Photos
Edit Trips, Add Photos or Post
Your Profile
See your trips, posts, and follow your travels across the world in your profile view. Tap on a trip title or card to access the trip detail view. 
Trip Detail
Trip detail pages allow you three different views of an individual trip; as a photo grid, from most recent posts, and visually across the world.
Share Your Travels – Bonvo Sharing
Share within Bonvo directly to the social feed. You can share a selection of photos or post your entire trip, as shown in the photos below.
Bonvo also gives you the option to cross-publish posts to other social media platforms.
Select Photos
Share Photos to the Feed
Share a Full Trip to the Feed
Share Your Travels – Web Sharing
Create a custom trip website with a tap of a toggle. When you enable web sharing within your trip,  Bonvo automatically creates a custom trip gallery on a unique webpage. You can share this unique URL with anyone you like – whether or not they have the app.
Explore and Custom Lightbox – The Feed
When you post photos or trips in Bonvo, those posts appear in the feeds of people who follow you in the app. The feed's general structure will be familiar to users of Instagram – we've actually borrowed some of their open source code.
We've added some additional touches. For one, maps are central to Bonvo, and we've included them with every post, along with the place names where photos were taken.
Also, we've decided to make it easier to view photos by creating a custom lightbox – no more pinch and hold to zoom.  Now, you can see high quality photos simply by tapping on them in the Feed. Location and photo data is available in the custom lightbox, and by swiping up or tapping the map tile, you can find the exact location where the photo was taken.
Search – People and Their Travels
Search is split into people and place search.
People search allows you to find friends, discover other Bonvo travelers, and explore their experiences.
Search – Places and Place Detail
Place Search is similar to people search, but allows you more power to discover with the place detail page. Here, you can explore images posted in any specific location – allowing you to plan to see can't-miss sights when you visit.
Design – UX  Under the Hood
We've been working on Bonvo for nearly 2 years. In that time I also spent a year as the full time Lead Designer for another company, SystemSeed (I've written about that experience here), and was working on Bonvo in my spare time, nights and weekends.
I write this to express that setting out the full story of Bonvo's design and development from start to finish would be a monumental task. It would make this page a gargantuan behemoth.
Instead, I'd like to just highlight some of the process. From where we started to where we are at the time of writing, in the last 2 years our design operations have grown and evolved. We've learned a ton along the way.
Early Sketches, Working in Illustrator
When we started working on Bonvo, my UX experience was limited. I was lucky to discover Sketch later with SystemSeed, but in the early days of Bonvo we struggled to wireframe out what we were trying to build using pencil sketches and Adobe Illustrator, shown below.
Early Notes for Bonvo – Sorry for my terrible handwriting
An early sketch of the feed, first time login
Trying to figure out posts and trip display
In the early days, we originally thought to split days of trips into separate pages. As we developed the app, we were able to streamline things.
Discovering Sketch, Zeplin, and Overflow
...and learning how to use them absolutely saved the project. 
Sketch allowed me to wireframe, mock up and design screens much more quickly than I could in Illustrator.
Wireframing Trip Management in Sketch
Wireframing Search in Sketch
Thankfully, we were able to integrate Zeplin into our design and development operations. It has really helped us to organize everything. Critically, Zeplin made communication easy, and allowed us to better understand the UX details of the app.
Creating clickable prototypes, however, got a bit complicated in Sketch at times...

Yeah... not ideal.

In order to completely understand the app and each other, we needed a bird's-eye view. That's where Overflow came in. Overflow boards really helped us to see things clearly. When Bonvo goes live we'll make this flow public, but for now here's a preview:
Evolution of a Screen
An example of how a single screen was iterated:
1. Pencil sketch
2. Adobe Illustrator Wireframe
3. Sketch Wireframe
4. Sketch Mockup I
5. Sketch Mockup II
6. Sketch Final Design
Pencil Sketch
Illustrator Wireframe
Sketch Wireframe
Sketch Mockup I
Sketch Mockup II
Sketch Final Design
Landing Page Version 0.1
The purpose of our initial landing page at bonvoapp.com is to give a quick preview of the app and branding to potential users, and to collect email signups for beta users. When we realized our initial goals with a website, we quickly – as in, within the space of a single day – mocked up and built this first version.
Paper Wireframe
Sketch Wireframe
Sketch Design
Design – Branding & Identity
Logo and Typography
Bonvo's logo uses Futura Bold, kerned to slightly tighter spacing than standard, combined with a tilted, styled hot air balloon for a mark.
Bonvo Logo
Unkerned Futura Bold in Purple
When we were building the balloon for our logo, we went through tons of iterations before we landed on the current mark. Here are some screenshots of the process:
For typography within the app, currently only for iOS, we stick with Apple's standard San Francisco (Display and Text), and use iOS Dynamic Type Sizing. Trip title headers in Web Sharing use Spectral, the Google Font.
Colors
For primary color, Bonvo uses an orange palette , with a set of orange gradients, paired with black and white. For secondary color, we use a blue palette with a blue gradient. The brand blue provides the main color for our custom map (built with Mapbox).
We also have a dedicated "Ink" scale for type color, and will continue to build out tertiary colors as needed.
Bonvo Color Palette
Bonvo Custom Map
Custom Illustrations
A set of custom illustrations gives life to empty states, load and login screens.
Login
Empty Notifications
Empty Profile
Empty My Trips
Empty Trip
More – Styleguide
I've included our MVP Styleguide to show the organization of our design:
Bonvo Styleguide – Typography and Palette
Bonvo Styleguide – Brand Assets and Photo Treatments
Bonvo Styleguide – Illustrations, Icons, and Buttons
Closing Thoughts
Building Bonvo has been an enormous challenge, but also an incredible learning opportunity. Overall it's been a truly rewarding experience. I've learned so much in the past two years working alongside my teammates Sahil Choujar and Luke Robertson (our founder). 
It's been a pleasure to have had the opportunity to be a cofounder and the lead designer on this project, and I look forward to what the future brings.
A new iOS application for travel, Bonvo is currently in closed alpha testing with the development team. For info on becoming a beta tester for Bonvo in the coming months, please sign up at https://bonvoapp.com/.
All Screens – Bonvo MVP
Back to Top