The NolliApp Project
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.
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.
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.
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.
Another analysis on information architecture of Nolli was created.
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.
A redesigned information architecture was created to determine the structure of NolliApp.
Then I began some sketches of initial wireframe based on previous studies.
Afterwards, wireframes of different pages were created.
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.
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
Following steps were taken to simplify and make it one part of the UI design.
Font Choose
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.
Design Outcome
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.
From these users, some very valuable feedback for improvement were collected.
- The continuity of buttons on navigation screen can be unified.
- More information can be given on places and trails for non-professional users.
- The “Nearby” tab should be labelled to make it clearer.
- On the “Nearby” tag, pins should lead to pins on map while pictures and texts should lead to further reading tag.
- Texts might be too small and hard to read.
- Buttons are hard to recognize, especially the “Nearby”.
- A tutorial page can be helpful.
- the “hamburger” button on the “Menu” tab should be the back button to achieve a continuity.
- 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
- View switcher icon has been changed.
- Icon colors has been change from pure black (#000000) to black with more grey (#434343) for better visibility.
- “Nearby” has been labelled with larger description texts.
- When in tab mode, tab on any empty space can function as returning to the map view.
- A welcome page was added and modified with the element from Piazza Campidoglio in Rome, which was designed by Michelangelo.
- North arrow was also redesigned from inspiration of Nolli Map’s north arrow.
Some comparisons are shown below.
Final Demonstration
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.