preloading all assets, please wait

Wanderlust iOS App Design Show Menu
Back To Portfolio Show Overlay
map and search results route display route editor menus and modals route information displays - tablet versions route information displays - mobile versions landmark information displays

Wanderlust

For our app design module, we were tasked to create an app that could solve a problem relating to an idea of our choosing. As I love to travel and see sights, I wanted to create an app that could benefit travellers by being the lightweight, informative knowledge base for sightseeing routes and walking tours that printed guidebooks aspire to be. This would also attempt to solve the problem of lack of information on sightseeing routes currently available and shareable, as well as provide a convenient location to store this information for everyone to access.

As this was my first app design project, it naturally gave me a good opportunity to express my creativity. However, due to the requirements to follow iOS 7’s interface design guidelines, there were a few restrictions I had to follow, such as certain buttons being in specific places, and of specific shapes etc. However, this also meant that a lot of the primary design language and interactions had already been decided, and my only task was to create an interface that could fit within the guidelines while being unique, stylish, and true to my original vision.

During the planning stages, I learned to use a variety of UX design processes to plan out the structure and interactions of the UI. Combining user stories and the MoSCoW Process, for example, allowed me to determine what features would be desirable in the app, and what features could be shelved for later revisions. Putting these together into an application flow diagram allowed me to understand how each screen fits together, how the user would interact with the app to get to each screen, and particular transitions to move between them.

Spending the time on these processes meant that any issues with the overall design could be identified immediately and dealt with quickly, before time is invested into the design itself. It also ensured that the idea itself was fleshed out fully, and that every option and idea was explored en-route to the completion of the project.

To design the app, I used Photoshop along with the freely available Teehan+Lax iOS7 UI Kit, which is a collection of all of the iOS7 UI elements within a PSD file, which is used to quickly draft up app screens. Having all of the elements already created sped up design time immensely, meaning I could spend more time fine-tuning the look and feel of the more unique elements of the app rather than attempt to craft the basic look and feel of iOS myself.

The design itself was modelled on typical mobile mapping apps such as Google Maps, so that I could utilise some of the UI patterns and interactions common to those apps, to create a feeling of familiarity. By doing so, it would reduce the amount of learning the user would require, and speed up utilisation and app retention.

The project was a challenge to complete, as I wanted to create as many screens as possible to demonstrate each section and transition. The primary problem was Photoshop itself, and particularly how difficult it was to use to create the screens, along with the speed of the app itself, which is what led me to look for an alternate UI program for my future work.

Close Overlay