Rapid low-fidelity sketches

I’ll be the first to admit these sketches aren’t very attractive, however, they are a great way to get ideas down quickly and test designs before opening design tools to start producing highly polished finished designs.

Onboarding user flows

Simple user flows were created to determine all the necessary screens and interactions within the app. The user flow below shows the steps required for someone new signing up to use the app for the first time.

Wireframes and rapid prototypes

With the information architecture and user flows completed, I moved into creating wireframes for the various screens to better understand the page structure, hierarchy and layout on individual interface elements. The great thing about wireframes and prototyping is you can see where user flows feel unintuitive and can begin refining the process more visually.

Easy sign-up process

The app uses the Facebook API to quickly access vital information such as birth date (for legal reasons) to get people up and running as quickly as possible. Alternatively, people can also create an account using their email address – it’s just a few extra steps.

Build an optimized walking route

Quickly research Wellington craft beer venues, check reviews and create a route on-the-go using an intelligent route optimisation algorithm. Get instant feedback on the number of venues you plan to visit and the total walking distance.

Get directions and track progress

The app leverages the power of Google Maps. Along with automatic check-ins, you can track your progress, get directions (and more importantly distance information) to the next venue.

Communicate with team members

Team members can easily communicate (txt or call) with each other throughout the craft beer tour. The app uses the phone’s native calling and text functionality so people can reach out to others in the group and see who else is on the tour as well. By making use of the phone’s capabilities it reduces the size of the app and removes the need for developers to reinvent the wheel or dealing with additional APIs.

Group message (admin only)

The Admin has the ability to send group text messages to everyone on the tour. A simple message that gives people a heads-up and mentions the name of the next bar to visit.

Minimal app website

A website was created to promote and inform people how the app works. Throughout the website design, elements from the app would carry through to help navigate the person for when they start creating a route for themselves.

Final iPhone design

Here’s a quick mock-up of how I intend the final design to look on an iPhone. If you are curious about why the venue is an image of a dog, his name is Bruce and he’s a regular at The Rogue & Vagabond.