ok! Go!- A location based app for solo travellers
Objectives & Brief
My objective was to create a location-based travel app for those wanting to travel independently and to help them discover new and unknown places to explore, see or even eat, that they wouldn’t find in traditional travel guides. It will also provide travellers with disabilities the much-needed confidence in solo travel giving them the resources to tailor their travels for their comfort levels.
The features of the app will include:
-Location services- By having the Locations settings on your phone turned on, the app will be able to link with that and tailor the content to the city you are in.
-Initial assessment page- This will allow the user to let the app know of any requirements they have (dietry, budget or accessibility needs) so the app can search through the city and find the places suitable for them to explore.
Fun facts!- The app will provide facts about the city the user is in, that are not commonly found in travel guides.
Mystery Map- It will contain a map of the city you are currently in containing ‘points of interest’, anything to monuments, historical buildings, interesting architecture or a unique restaurant. Tapping on the point of interest will provide clues of what's there but won't reveal itself until the user arrives at the destination, adding an element of surprise and mystery to their travels. Upon arriving at the destination, the app will reveal information and history of the place. Not only that but will provide up to date travel details and routes, fun trivia on the city the user is currently in.
Travel Aids- Once decided on the place the user will go, the app will provide up to date travel directions that suit their needs, especially if they suffer from a phyiscal ailment.
Saftey feature: Travelling alone can be daunting and sometimes dangerous, so if the user is in danger or trouble, there will be a safety feature the user can activate which will alert local authorities to their wherabouts in a subtle way as not to arouse suspicion or lead to more trouble.
This is the homepage of the app. I wanted my design throughout to be as accessible as possible for as many users, so I was keen for the design to be clear and try and avoid overcrowding the page making it difficult to read. I opted for a plain white screen displaying only the title and a cartoon image of a city scape. The black arrow at the bottom is the signal for continuation through the app.
This is the introductory page. By this time, the location services on the user's phone will have linked to the app and told the app the city the user is in. It will then give a welcoming message and the signal to continue via the black arrow at the bottom right of the page.
Again, the design has a very simple layout, proving the user with the information they need in a clear and concise format, to avoid confusion.
This is the 'Tailor page' where the user can alter their requirements if needed in order to make their travels easier. This is organised into 3 separate drop down lists. This lets the app know and decide the best places and modes of transport for the user to explore safely. This is a massive time-saver for the user, as instead of trying to search suitable places on the internet, it is all there on the app for them.
A closer look at the drop down menus, I tried to research the most common requirements and budgets that people search for to include in the options. The app will then look through it's algorithm and places around the city that cater to those factors specifically once selected.
* The highlighted options act as an example of the choices made. In this prototype, the user has a budget of £20-£40, is Vegan and is a wheelchair user.
This is the loading page for when the requirements are filled out. As you can see it is similar to the homepage to keep the style consistent. This will be on a timed delay as the app complies it's options for the user to explore.
*During this page, the app will provide a page of fun facts about the city, in this case; Berlin while the user waits. This will then show the continuation arrow.
This then leads you onto the map page, showing a cropped down map of the city with black squares signifying 'points of interest' the app has hand-picked for the user to explore. I've kept the layout simple with easy to follow instructions to help the user navigate the app. I didn't want every click to lead to a new tab or page or provide a comprehensive list of instructions as that can sometimes be lost in translation.
This is an example of what will appear when the user taps on the black square. It provides concise clues about the location, picking out key, enticing factors to help the user make the decision. If this is where the user wants to go, they simply tap on the 'TAP TO GO!"TAP section to be provided with the travel instructions.
What I wanted to avoid with the travel insturcion page was needless amounts of information that was difficult to read through. With that in mind, the page shows where you are in the city and where the destination is, so the user can gaugue the distance.
Directions wise: I have used the method of public transport (trams and buses- which are all step-free and can accomodate wheelchair users, giving the user piece of mind that they can get around with ease.
I've provided exact fare information for the journey in advance, and have decided to use directions provided from a Berlin Travel Planner, allowing the times and distance to be accurate. I opted to use this instead of typing out directions to avoid confusion for the user.
Once the user has arrived at the destination it will provide key information about the location.For this example, it is a Vegan Afro/Italian restaurant. I've chosen to include pictures of the food provided and a little introduction about the establishment taken from their website. I've also provided a review of the restaurant and an indication that they speak English, banishing the fear of a language barrier issue. I've kept the information brief giving the user just a taste of the place and give the chance to make their own experience.Once completed and the user wants to explore more, they can tap on the black continuation arrow to be taken back to the Map page, which has updated to their current location.
I wanted to include a safety feature within the app, but was unsure the best way to include it that was subtle and didn't arouse suspicion, especially if the user was being followed etc. So, by holding down the 'Ok! Go! title on the top of each page, it automatically notifies local authorities of your whereabouts, even if you're on the move, and they will come to you. The 'fun fact feature' in this instance will pop up, so if the phone is being looked at by someone else it just appears as the app is giving you information. There then becomes a brief message, letting the user know that help is on the way. However it can be dismissed quickly.
Earlier wireframes and sketches on the app layout.
Initial layout and colour design done on Adobe Illustrator. This allowed me to test the layouts and choices of colour scheme and present them for feedback before starting the prototype design. The layout is cluttered and needed refinement, especially the map and travel direction page. Feedback also suggested adding another font instead of the same one 'Gratisan' throughout, just to make the more important information more legible, which led me to test simpler fonts to coincide with 'Gratisan' as my main title font.
The layout of colours: block colour on a white background seemed to work quite well, especially when tested on a user that has colour blindness, the arrangement flowed easily and allowed them to read all the information. By opting for black text it also helped with that as it makes the text stand out and not get hidden in the background.
The chosen colour scheme of blue, orange, white and black has been the decision since the intial research phase. After looking in depth to colour theory and how to design for people that had visual impairments such as colour blindness, I found that these colours contrasted well together and weren't too harsh towards the users eyes. Placing a white layer against a blue or orange background eliminated any problems of confusion of difficuty differentiating the colours. Opting for more musted shades of the colours provided a more relaxed, serene tone to the design, instead of loud, ostentatious colours found in some travel websites and apps.
Title font: Gratisan Regular
The choice for this font is because of the bold, clear and trendy appearance, this was key for creating a modern day, unique travel app, it needed to appeal to users who see similar fonts used on Travel Blogs, but slightly more unconventional than fonts used on mainstream Travel Websites. I needed the titles to stand out and allow the user to differentiate between texts. This was the perfect choice as its regular format is in capital letters. Not only that, but it has a charming hand drawn quality, making it a step up from other bolder fonts, inferring a more whimsical tone to the app, which is perfect for what I want the app to present to its users.
Body font: Didot Regular.
The text I use for the body of the text needed to be simpler, so not to contrast with the title font or to confuse/ distract the user. This font is easy to read, and resembles a typical print font, but isn't as basic as Times New Roman for example. It is clear and presents the necessary text well as opposed to opting for more cursive text.
When it came to the design and positioning of a logo, I tried different alternatives, playing around with the idea of a hand drawn suitcase or a boarding pass, symbolising further the idea of travel. But when evaluating that along with my brief, I had to make sure that if I were to use a logo, it had to be clear enough for the user to recognise, but also if a screen reader was needed, it had to work along with that. Which drew me to opting for the logo of the app to be the plainer text of the title "Ok! Go!". Not only from an Accessibility stand point, when attempting to hand -drawn various logo ideas on Illustrator, they often looked messy and unrefined, therefore I knew that by implementing that, it could potentially bring down the quality of the overall design. I needed to keep with the them of simple and usable, whilst still having an element of fun.
Smith, J. (2009). WCAG 2.0 and Link Colours. Available: https://webaim.org/blog/wcag-2-0-and-link-colors/. Last accessed 19/10/19.
-. (-). Two Wondering Soles- Instagram. Available: https://www.instagram.com/twowanderingsoles/. Last accessed 12/10/19.
-. (2019). Solo Travel Statistics and Data 2018-2019. Available: https://solotravelerworld.com/about/solo-travel-statistics-data/?fbclid=IwAR1X48GLtj_sR-AEcfu7o3ExZrkWanz6x0TMJsRtbF955yBI-kFukvUip_k. Last accessed 3/10/19.
Collinge, R. (2017). How to Design for Colour Blindness. Available: https://usabilla.com/blog/how-to-design-for-color-blindness/. Last accessed 15/10/17.
Decker, K & Vukovic, P. (2012). The fundamentals of understanding colour theory. Available: https://99designs.co.uk/blog/tips/the-7-step-guide-to-understanding-color-theory/. Last accessed 5/10/19.
Department of Economic and Social Affairs, Disability. (n/a). Promoting Accessible Tourism for All. Available: https://www.un.org/development/desa/disabilities/issues/promoting-accessible-tourism-for-all.html. Last accessed 19/10/19.
Grant, S. (2018). 13 Unique Things to Do in Berlin. Available: https://www.twowanderingsoles.com/blog/unique-things-to-do-in-berlin-germany. Last accessed 29/09/19.
Morilla, J. (2019). Top 10 Travel Bloggers You Should Already Be Following. Available: https://www.under30experiences.com/blog/top-10-travel-bloggers-you-should-already-be-following. Last accessed 12/10/19.
-Morton, J.L. (1995). Understanding Blue. Available: https://www.colormatters.com/the-meanings-of-colors/blue. Last accessed 13/10/19.
Morton, J.L. (1995). Understanding Orange. Available: https://www.colormatters.com/the-meanings-of-colors/orange. Last accessed 13/10/19.
Morton, J.L. (1995). Understanding Red. Available: https://www.colormatters.com/the-meanings-of-colors/red. Last accessed 13/10/19.
N/A. (-). Most Accessible Destinations in Europe. Available: https://www.europeanbestdestinations.com/best-of-europe/most-accessible-destinations-in-europe/. Last accessed 19/10/19