Month: October 2021

App design

Here I showcase the process of designing the app.

With the help of a software engineer I was able to complete a first prototype. Alpha testing has already be done but beta testing (customer validation) has yet to be completed. An intervention is scheduled for the 29 of November week, where feedback about the product will be gathered.

I am currently in phase six of the SDLC (Systems development life cycle) model

Index:

  • Research, structure and early design
  • Stages of creation
  • Complete Prototype

Research, structure and early design

Research:

3/10/2021

Before starting the app design, I had to understand how similar apps are structured. I had a look at Lonely Planet, All trails, and Culture Trip. The one I thought aligned the most with my ideas was Lonely Planet so I proceeded to analyse the way it was constructed, making notes along the way.

Lonely Planet screenshots and notes:

  • Home page you choose your city
  • When you click on city you are sent to a map with (must see places, tickets and tours, curated tours)
  • There are 7 main features (All, see, eat, sleep, shop, drink, play), you can filter your responses according to them. The dots changes colour when you click one. 
  • (Need to know feature) There is an overview of the city of Athens
  • (Need to know feature) You’ve got the neighbourhoods (good for Venice districts)
  • (Need to know feature) Transport 
  • Dictionary 
  • Budget/currency 
  • You can vote for cities you would like to see on the guide

Early structure:

5/10/2021

This research helped me come up with an early app structure. After reviewing it with people in my surrounding and with the expert who has been helping me navigate creative softwares, I concluded that it could be improved on. I think i tried to cram too much information onto one page and overly complicated certain aspects.

Home page:

  • Logo
  • Button “Discover Venice”, which take you to the next page
  • Little “about” logo on one corner.

Archive:

  • Where read anecdotes are stored
  • Also where anecdotes are stored when the notifications where disabled

Notification:

  • When user gets a notification they are sent to Archive/collected info where the anecdote is unlocked.
  • Option to hear the audio version
  • Option to keep or delete the anecdote
  • Little camera button that lets you take a picture and share it on the app?

Features suggested by stakeholders:

  • Audio version
  • Adding a “disable notification” feature (so that users do not keep receiving the same anecdotes when retracing their steps)
  • clarify that the app is my personal take on Venice and not a universal one.
  • What happens to notifications that are read and unread
  • Find a way to limit the time users’ spend on the phone looking at the map
  • A recommended route option.
  • Adding urls

What should definitely be there:

  • Audio version
  • “disable notification” feature (so that users do not keep receiving the same anecdotes when retracing their steps)
  • A way to differentiate if the anecdote is a random history fact or linked to environment
  • Red and unread notifications stored in an archive when one can go read them again
  • A recommended route option?
  • A map
  • A feature where locals can submit new content or you can share your own photos 

My latest intervention helped me answer a few questions that I had such as the design of the map and whether there should be a recommended route option.

Later structure:

10/10/2021

The later structure contains all the features of the previous but differently arranged for a better user experience and app development ease. I made mockups of what it could look like on adobe illustrator.

I changed the colour palette from navy blue/purple/white to one that reflects the colours of Venice, which I believe is a nice way to create a visual consistency between the app and the environment it focuses on.

Home screen:

  • Logo
  • Button “Discover Venice”, which take you to the next screen

Screen 2 (Map):

  • Map with all the stops
  • Icons at the bottom representing each category 
  • User can choose which category they want on
  • Menu Icon on the top right corner

Menu Icon:

  • The menu appears above the map (or could be on a different page)
  • 3 options to choose from (about, settings, archive)

About:

Settings:

  • Enable or disable notifications
  • Basic that maps usually ask

Archive:

  • Where read anecdotes are stored
  • Also where anecdotes are stored when the notifications were disabled

Notification page:

  • When user gets a notification they are sent to Archive/collected info where the anecdote is unlocked.
  • Option to hear the audio version
  • Option to keep or delete the anecdote
  • Little camera button that lets you take a picture and share it on the app?

I have shared this list of features and screenshots with the expert helping me develop the app (Jesse Sigalov) and had a meeting to discuss the developments (more about this here).

Stages of creation:

27/10/2021

The map:

The very first element that is being brought to life is the map of Venice as the app heavily relies on it. As shown earlier on the post I have a good idea of what I want it to look like (this was tested with stakeholders).

On the mockup I took a design from Snazzy maps, a website that lets people freely use map designs made by creatives, however, it was not possible to transfer the design onto Unity (the software being used to develop the app).

On Unity there is a default map but it was not quite the style I wanted.

Therefore, I was advised to use another website called Mapbox where I could recreate the map myself and it would be compatible to transfer it over to Unity.

Mapbox gives you a standard map, which you can modify as you wish.

I created a version that looked closer to the design that I originally wanted. I removed all signage (street names, hotels, landmarks etc) to have a very simple map, which will only showcase the geolocated stops. The idea is that users do not rely completely on the map and can walk towards the general direction of what is indicated on the map without being GPsed to it.

The following image shows the first two geolocated stops (the map style will not stay this way)

12/11/2021

The map has been further refined. We are at a stage where we are uploading all the anecdotes with their right icon and completing the home page.

Here again, I was able to get involved in the tech side as I used the MapBox site to add the coordinates and details of each location so that they could be exported to Unity (the software where the app is being created). The process of copying and pasting the coordinates is a little tedious but really spending up the process for the engineer.

There were certain coordinates, which would not appear on the map, but the engineer managed to fix the problem.

We now also have a vision of the final design of the map with the icons representing each category (church, museum, artisan, legend, historical fact), which I had designed.

Audio:

2/11/2021

As I wanted to have an audio version as well as the written text, I contacted a friend from the course I had had the pleasure to work with before. He had lent his voice to one of our projects and I hope he could do so again with this one. He agreed and very efficiently recorded all the texts. Here is an example, it tells the story of the red stone.

I edited the recordings on my computer to improve the quality and deleted any unnecessary gaps or noises.

I chose this particular actor because his voice has a very audio book quality to it. He managed to make my amateurish writing sound more professional. His background in theatre really helped. Rightly so, my tutor questioned whether it would not be more authentic to have a local’s voice being featured on the app. Although it would be lovely and very in sync with the project, there are various reasons why I chose not to take that route. The locals are usually not very well versed in English and the rare who are do not speak with the clarity that is needed in such a recording. Indeed, when one is conveying information, the diction needs to be very clear especially since it must be assumed that some of the people who will be listening to the recordings will have English as there first language.

Maybe in the future it would be wonderful to have locals record their own suggestions for users although a solution would have to be found for the language barrier.

What went well:

  • The voice actor was very efficient and it only took us a few hours to get everything I needed
  • There were no technical difficulties

What could have been done better:

  • The quality of the sound is not perfect as it was not recorded with professional equipment

Other features:

18/11/2021

More features are being added to the app as it starts to come together. The anecdotes are being added and I am happy to see that it all looks very similar to what I had designed.

Anecdotes:

Below are two anecdote templates with and without and extra image (there are a few anecdotes where I have added visual support for bettie understanding).

Loading page:

The loading page is a feature that I particularly like. While it is loading the orange gradually fills up the logo and the explore button, which I find particularly aesthetically pleasing.

It is very reassuring to start having something concrete and it seems we will be able to finish what we had planned before the deadlines, which reduces my stress levels.

Need a screen shot of what it looks like on the phone (app icon)

18/11/2021

This is the final version of the anecdotes that have images. On the third one the audio was added, now they all have audio option.

The bottom bar on the app page with the 5 categories of Venice experiences was added. The user can choose which categories they want to appear, according to their particular interests.

22/11/2021

Here, is the first version of the archive (where the anecdotes are stored). In the squares should be added pictures that relate to each anecdote.

This is the complete version of the archive, with all the pictures uploaded (story my screenshots are blurry, the real thing is of better quality).

The engineer suggested that the seen anecdotes could in black and white to clarify that they have already been read. They can still be re-listened.

25/11/2021

It has come to a point where I realised that installing the geolocating feature to this prototype would take longer and would need further on-site testing (in Venice). Therefore, for the sake of this “first attempt”, we came up with an alternative. In addition to being able to move a virtual character with a joystick (the character hovers over the an icon and the anecdote appears).

I think this is a good compromise for now as it mimics the initial geolocation plan while allowing the app to work everywhere, not only Venice specifically. It will make testing easier.

Complete Prototype:

25/11/2021

Here are some screen recordings of the final product:

Autumn intervention 2021

On this post a document the interventions that will be taking place until the end of the course.

Index:

  • Recommended tour and map design
  • Testing the first prototype of the app

Recommended tour and map design

(28/09/2021)

Here, I kind of merged two interventions into one for more practicality. There were two main things I wanted to get stakeholders’ feedback on:

The first one was whether there should be an option to choose a “recommended route”, which is an idea that had been mentioned a couple of times during my summer interventions. Going back to having a controlled tour does not particularly excite me as earlier in the project I moved away from this type of structure to a more free and explorative vision of the tourist experience. Nonetheless, I must consider what my stakeholders gravitate towards.

The second thing I wanted to explore was related to app design. As I have just started the process of designing the app, I wanted to ask my stakeholders what sort of colour palette and style they would prefer for the map that will be featured, as it is one of the main elements.

As I have created images on adobe illustrator, this intervention is also an opportunity to experiment with designs and, therefore, get a better idea of what the final product may end up looking like.

The intervention

This intervention is quite simple, I have created a few images, which I attached to a survey to collect answers.

Recommended tour images:

The screenshot above is the first thing that participants see when they start the survey. It asks them to imagine that they are in Venice and that they are using this app to get the most out of the city. It also quickly explains how the app works and that on the next image they will have two options to choose from.

Once they see this image they need to choose between (explore Venice Freely) or (Try the recommended Tour). The idea is to see which option gets interacted with the most.

Map design images:

Next, I ask the participants to select their preferred colour palette and then map aesthetic.

Results:

Through this survey, I found out that 82% of participants would have picked the “Explore Venice freely” button. This is a relief for me as the core concept of the app (non-linear exploration) seems to appeal to people.

When it came to the map design 82% of participants preferred the light blue tones. The top rated map was number 4, which is also the one I found to be the most appropriate, plus the colour reminds me of the Venice lagoon.

What I have learned:

It gave me an idea of how the home page of the app may look like in the future. I am starting to come up with a basic structure and design, which is helping me materialise my ideas. I was also able to see that the concept of explorative tourist experience is appealing to my stakeholders.

Furthermore, I now know what style of map to use in the future.

I was also pointed out by my tutor that the design may have suggested to the participants to choose the option that I wanted, especially with (explore Venice freely or try the recommended route). I wished more people to opt for “explore Venice freely” as it embodies the free exploration experience that I am trying to promote. The other option reminded me too much of the controlled itineraries that I was trying to avoid. Therefore, on the design “Explore Venice freely” came first, which may have influenced the participants.

What I could have done better:

I could have tested more elements of my design such as different versions of the logo or the overall colour palette.

In the future I will try to be more scientific and not try to manipulate the participants’ answer.

Testing the first prototype of the app:

(2/12/2021-4/12/2021)

I tested the prototype with some stakeholders. Unfortunately, it does not yet allow to use geolocation, although it is possible, it would take longer to apply. So, for this first attempt, we came up with an alternative, which simulates the original model. We can move a character on the screen with a virtual joystick (the character hovers over an icon and the anecdote appears). 

(You can watch some screen grab videos of the app in App design)

To gather results, I went for a qualitative approach and asked the participants for feedback conversationally following a few basic questions:

  • How would you rate the overall design of the app?
  • How would you rate de user friendliness of the app?
  • Would you use it if you were to go to Venice?
  • Additional comments

What went well:

They liked most aspects of the design, like the colour scheme, the minimalistic style, the language used in the texts, and the audio version, which was thought very immersive. 

Some have also expressed that they really enjoy the self-navigation aspect that the app promotes and feel that there is enough on the map to know that wherever they go there will be something interesting to learn.

What can be improved:

I was pointed out that it would be better if the audio voice did not automatically start, so that the user can choose whether to read or listen. I completely agree with that, I actually had not noticed this aspect of the app.

The digital designer who reviewed it noticed practical details like some buttons being slightly off the screen or that the joystick was a little confusing at the beginning, as it is more intuitive to directly touch the screen in order to navigate.

They unanimously did not love the stickman walking around. I understand, it does look a little creepy and threatening when it walks. It could easily be replaced by some sort of dot or icon.

I found that it was very difficult to make something user friendly for older demographics. For instance, people from a younger age group were not phased at all by the loading page, but the more mature participants did not necessarily understand that they had to press on the explore button.

Additional thoughts:

One of the stakeholders proposed an extra feature. She noted that as the historical facts show that was connected to the world, it would be nice to design a feature that somehow links the origin of the user with the app. Maybe that one can use a filter to get anecdotes that are related to where the user comes from. However, although I understand the appeal, I do not want to limit people’s experience. I would like to preserve a sense of randomness that instigates exploration and teaches about many different things, not only the one we choose.

When I asked whether the participants would be interested in using this app, I got an answer that touched on something I had not considered before, which was advertisement. How would I grab my stakeholders’ attention? It is something interesting to think about in the future. Perhaps spreading posters and QR codes around the city and starting a social media account.