The NolliApp

The NolliApp

rendering1.jpg
 
 

Introduction

NolliApp is a touring/educational iOS mobile app that focuses on Gimabattista Nolli’s map of Rome, which was created in 1748. Unlike other navigation/tourists oriented map app like Google Maps and Apple Maps, NolliApp provides an entirely new perspective for tourists in Rome, by giving them a chance to experience the rich history of this Eternal City closer than ever. NolliApp also offers students who interested in architecture and art history with intense information in related area.

Inspiration & History

During my forth year in college, I had a wonderful study abroad chance in Rome to have classes about architecture. One of four classes is about Rome cartography. Professor, Allen Ceen, is an expert in researching ancient Rome maps. In his class, I got to know a masterpiece called the Nolli map.

 The Nolli map on 12 copper plates.

The Nolli map on 12 copper plates.

Nolli map was created by Gimabattista Nolli in 1748. Giambattista Nolli was an Italian architect and surveyor. The Pianta Grande di Roma, as known as the Nolli map, was his career peek in his life time. The original map was composed by 12 copper plate, spreading an area of 69 inches by 92 inches (176 cm by 208 cm). It was by far the most accurate description of Rome at his time. During this class, we spent a large portion of the time walking though boulevards and alleys purely based on this 300-year-old map, tracing famous historical paths like Via Papalis.

I also found its stunning synchronization with the modern map. This leads me to an inspiration on developing a mobile app that may help more people to know this map. In summary, the Nolli map has several distinct features that make it an extraordinary combination piece of art, technical drawing and geographic study.

  • Accuracy/Synchronization.

  • Changes of the city in a 300-year span.

  • Detailed floor plans for historical structures.

  • Distinct art style.

 The change of Vatican on maps: The highlighted part was demolished under Mussolini's order.

The change of Vatican on maps: The highlighted part was demolished under Mussolini's order.

Rome today is one of the most attractive tourist destinations around the globe. Annually, 7 to 10 million tourists visit this city, making Rome the third most popular city in Europe. This leads to a large potential market for not just normal tourists but also travelers who may also be interested in a distinct way of exploring the city.

Due to a survey conducted by Fluent (Table 1), Google Maps and Apple Maps are the two dominating map apps on the market. Other map apps, such as Bing Maps and Waze only take a small part of the market share.

 Map apps market share

Map apps market share

Therefore, a research in UX design among these two apps should be studied. Although they took over most of the market share, none of them provides what NolliApp can bring to users. They may offer convenient way for users trying to commute or finding places they may be interested in, but they are all lack information of Rome from a historical perspective. Therefore I think there may be a big chance for NolliApp.

User Research

During my early research, a similar app, Nolli, was found on Apple Appstore. I bought the app and performed an analysis on this app.

 Strength VS Weakness table

Strength VS Weakness table

 Screenshots from Nolli

Screenshots from Nolli

Another analysis on information architecture of Nolli was created.

 Nolli’s information architecture

Nolli’s information architecture

Design Process

As I travelled around, I found Google Maps has been a vital tool for me to explore destinations. To my understanding of both traveling and Rome, NolliApp was expected to achieve following functions for desired users:

  • Information about the Nolli map.

  • Current location.

  • Nearby historical places & basic information.

  • Demonstrate changes of Rome in 300 years.

  • Featured historical trail tours.

To develop the preliminary UI, a study on comparison of 2 map apps was introduced. Here is a comparison of them with home-pages. Because their focuses are different, each of them has diverse but similar user interfaces to reach different functions.

As a map app, it must have

  • Location indicator — Where am I from?

  • Search bar for desired destination — Where am I going?

  • Menus/Setting button to reach another layer of detailed functions — Who am I?

However, the differences between Google Maps and Apple Maps are significant too. By doing multiple annotation and sketching practices on these apps, several general and detail differences has been listed in the graphs below.

 Study on Apple Maps

Study on Apple Maps

 Study on Google Maps

Study on Google Maps

A redesigned information architecture was created to determine the structure of NolliApp.

 New information architecture

New information architecture

Then I began some sketches of initial wireframe based on previous studies.

Homescreen wireframe modification

Menu tab wireframe modification

Afterwards, wireframes of different pages were created.

 Homepage, Menu, Nearby locations wireframes

Homepage, Menu, Nearby locations wireframes

Visual Design

Because this app is currently designed to work on iOS, the app should match iOS’s designing style. With the rolling out of Apple’s iOS 10, a new set of “cards” interface has been pushed to every iPhone.

At the time when the Nolli map was created, it became the guideline for all following maps.

  • Black and white high contrast graphing.

  • Sketches of classical building.

However, if too many elements of the Nolli map are used, it may make the app not friendly and feasible to use. Some modification should be made upon these elements.

Location Indicator Studies

The major difference between Apple maps and Google maps is the demonstration of location indicator. Then I made a sketching analysis.

  Location indicators study

Location indicators study

Button Designs

Classical order is the most iconic representative of classical architecture. Classical order consists of three major forms

  • Doric order

  • Ionic order

  • Corinthian order

  My sketch on 3 classical orders

My sketch on 3 classical orders

Font Choose

 Latin inscriptions on emperor Trajan's column

Latin inscriptions on emperor Trajan's column

Font is an extremely important part of the whole experience. After investigation in ancient Roman carvings,Trajan Pro was used for titles. To provide a friendly reading experience, Helvetica Neue was used for smaller and more detailed texts.

 Fonts comparison

Fonts comparison

Design Outcome

 1st version of welcome page, nearby tab, pin on map and featured trails

1st version of welcome page, nearby tab, pin on map and featured trails

Usability Test

Because NolliApp’s speciality, testing the app should be conducted in users with diverse backgrounds that may become potential users. Thus, following testers were picked to try my preliminary design.

  Test user’s background

Test user’s background

From these users, some very valuable feedback for improvement were collected.

  1. The continuity of buttons on navigation screen can be unified.

  2. More information can be given on places and trails for non-professional users.

  3. The “Nearby” tab should be labelled to make it clearer.

  4. On the “Nearby” tag, pins should lead to pins on map while pictures and texts should lead to further reading tag.

  5. Texts might be too small and hard to read.

  6. Buttons are hard to recognize, especially the “Nearby”.

  7. A tutorial page can be helpful.

  8. the “hamburger” button on the “Menu” tab should be the back button to achieve a continuity.

  9. When in tab mode, tap on any empty space should function as returning to the map view.

Design Iteration

From these feedbacks, several changes has been made

  1. View switcher icon has been changed.

  2. Icon colors has been change from pure black (#000000) to black with more grey (#434343) for better visibility.

  3. “Nearby” has been labelled with larger description texts.

  4. When in tab mode, tab on any empty space can function as returning to the map view.

  5. A welcome page was added and modified with the element from Piazza Campidoglio in Rome, which was designed by Michelangelo.

 Piazza Campidoglio

Piazza Campidoglio

6. North arrow was also redesigned from inspiration of Nolli Map’s north arrow.

  North arrow recreation

North arrow recreation

Some comparisons are shown below.

 Welcome-screens

Welcome-screens

 Nearby Attractions

Nearby Attractions

pin.png

Location Pin

Final Demonstration

 Final Layout

Final Layout

 Animation Demonstration

Animation Demonstration

 Rendering 1

Rendering 1

 Rendering 2

Rendering 2

This Is Not The End

By far, NolliApp is just a prototype. It still needs a huge amount of information and detailing to finish as an actual consumer product. Also, several other opportunities can be developed in the future, such as

  • AR (Augmented Reality) implementation of ancient city planning showing on real-time camera.

  • Location based pop out tags for more interactive actions.

  • 3D model built on the Nolli Map.

Actually I am feeling excited to make a such an app. From NolliApp, I can think of other historical cities like Istanbul, London, Paris, Beijing, etc. may have their own “Nolli Map”. Therefore, they deserve their own “NolliApp”. This can be a series of maps.

However, the potential of this market is greatly depending on users’ personal interest, their personal value on traveling, their understanding on art and history.