Registering for campsites can be a stressful undertaking. Some camping locations are highly competitive, and registration platforms with unclear or cluttered user interfaces make the process that much more difficult to get the campsites you want, especially for larger groups. As I've used some of these platforms, I considered what would make the process easier, and mocked up designs for a conceptual company that would streamline the process.
Below are UI and visual design elements for Boone&Co, a hypothetical web app that would provide guided trips, campsite registration, and an online platform for large-scale outdoor events and conferences. Their goal would be to make it easier for parties of all sizes to get out into nature.
During this initial phase of brainstorming and design, I created the user interfaces for a customer login page, a checkout page, and a landing page for large-scale conferences and group campouts. I also created a visual design style that could be used throughout the app.
The visual design needed to reflect the goal of the company: to encourage people to get outdoors. For this project, I used a color palette with natural tones, complemented by a bright green that would guide the user's attention to specific points on each interface, such as the calls to action. I chose Gill Sans for the headlines and body copy. It's a humanist typeface with geometric vibes and a fun, funky vibe. Plus, it has a wide range of weights that worked well for a variety of uses, such as the logo, headlines, body copy, buttons, and uppercase tabs. And just look at that "t"!
The Event Landing Page
The landing page was my favorite part of this project to brainstorm and design, and I love how it turned out. The goal of the page is to generate sign-ups for an example annual retreat called "The Campout." On this page, I used a playful headline to communicate the simplicity of the week-long event. The bright registration button draws the user's eye to the title of the event in the middle of the page. At the bottom, I used a bottom-aligned tabbed navigation that provides additional details about the event. In the app, the navigation would scroll and then stick to the top of the page when it hits the top of the viewport.
The Sign-In Interface
When using the app, a user would need to log in to view registrations, book campsites, update payment info, and manage the account. This simple sign-in page directs the customer to their account, and first-time visitors have the option to create a new profile.
The Checkout Interface
Once the user has selected which campsites or conferences they'd like to attend, they arrive at the checkout screen. In this interface, the customer has all the order information in front of them, and can edit their selection to adjust the dates or remove the registration altogether. I included both the payment information and the cart view, so that the user can review their purchase before finalizing payment, or cancel their reservation.
This project was a fun exercise in taking an idea from concept to completion and applying a visual design style to several interfaces of an app. I was able to think through user needs and goals on each of these screens and brainstorm solutions that would make it easier for the audience to successfully plan an outdoor retreat, whether it be a solo trip or a large-scale event.