DUBLIN SQUARES
Interactive iPad App
‘Dublin Squares’ is an interactive app which tells the history, stories and hidden details of Dublin’s grand Georgian Squares. For the scope of this project, we concentrated on Merrion Square and its abundance of literary, cultural and historical subject matter. Dublin’s Georgian Squares have a wide range of historical features, characteristics, quirks, and stories, which offer an opportunity for locals and tourists alike to learn more about Georgian Dublin.
Project Specs
I undertook this project with my teammate Helen Grimes for my MSc in Creative Digital Media & UX with a Specialisation in Interaction Design. The project was undertaken over the course of 6 months.
The Team
Gillian (Me): Frontend development (HTML, CSS3, JavaScript, jQuery, d3.js, underscore.js), Illustration, UI, UX research and design, content research & User testing.
Helen: Frontend development(HTML, CSS3, JavaScript, jQuery, d3.js, underscore.js), Implemented database (PHP, MySQL), UX research and design, content research & User testing.
The User
Our two users are The Local and The Tourist, who both come under the umbrella term 'culturally curious'.
User research
Initial Research Insight
Our expected user base took the form of the 'culturally curious' tourist. We analysed pre-existing research findings by various tourism boards in relation to how tourists acquire information about a place and what they value from their experience when they visit a country. We were able to see some commonalities between tourists' responses from these studies.
Stories provoke an emotional response and bring content to life.
Distinctive 'nuggets' of information more memorable.
Unique and entertaining layout and delivery
of information.
Want to hear stories and lesser-known details.
Interviews
After our initial research, we were able to set clear goals for future user interviews. Throughout the project, we conducted multiple interviews to receive feedback and to progress the project.
1. Conducted a pre-test to determine whether interviewees were suitable candidates.
-
- how people use apps to learn information and/or history about a place.
-
what apps, devices and, resources people use to learn about an area.
Finding historical information about the Georgian squares of Dublin can be tedious and time-consuming, sometimes not yielding the desired results after hours of researching different resources. Sometimes, users may encounter the same information on different websites and books. The aim of Dublin Squares is to give the user a memorable and unique experience where they can view information all in one place while learning quirky and hidden details they may not encounter from a Google search.
Problem Statement
Sketches
Personas & Scenarios
Theo
Tourist
-
Has a keen interest in architecture, Irish history because of his Irish heritage.
-
Likes to travel
-
Enjoys researching areas of interest before his visit
-
An app that he can refer to for contextual information regarding the background and origins of an area is something he greatly appreciates.
-
Wants to get to know some more in-depth information.
Sarah
Local
-
Passion for Georgian architecture and the unique stories.
-
She is retired and enjoys reading and spending time travelling to the areas that interest her.
-
She appreciates an app that can present her with a variety of visual and textual information in one place.
Lo-fi Prototypes
Paper Prototyping
We used our first iteration of sketches and paper prototypes for our initial round of testing. The use case we prototyped was of a user flow from the initial landing page to a house on Merrion Square. People we tested it with seemed to be more interested in the idea of an interactive map and uniquely curated content than the 'walking tours' section.
Key findings from testing:
-
Users liked the journey through each screen but wanted to be able to navigate to their desired location (the screen with information about a house) with fewer clicks.
-
Users made it clear that the layout of the content should include images and text.
-
Users suggested (especially users with an interest in Georgian Dublin) an area which allowed a user to add their own stories or details on the area or building.
Mid-fi Prototypes
Wireframes
The wireframes display the use case of the user navigating from the landing page to a house on Merrion Square. We quickly realised during testing that users needed the option to navigate to a house directly from the home screen.
Although it was a novelty for users at first, we considered that returning users may get frustrated or bored if they had to navigate through each of the screens every time.
Key findings from testing:
-
Users found that there were too many screens to navigate through to achieve their goal of viewing information about a particular Georgian house.
-
Other users liked the journey through each screen but wanted the option of being able to navigate to their desired location (the screen with information about a house) with
lesser clicks. -
Users enquired about a section where they could read more general information about the Square.
-
The swipe direction and the layout of information would need to be refined.
Graphical Elements
Design Aim
The design of the app had to cater for all ages which entailed providing a fun but usable app for all age groups and navigation abilities. The user experience and the user interface were an important factor when creating the app - the aim was to ensure that the user interface enhanced the user experience.
Moodboard
Illustration
The illustrations created a visual hierarchy on the screen and strengthened the aesthetic appeal of the overall interface. They draw the user's attention to the necessary details and make the user interface more informative and faster to perceive than the use of text. They allow the user to scan over the screen but be aware of exactly what the visual is.
I played around with the different styles of illustrations.
Animation
Animations help draw the eye to movement and create a fun aspect to the app which was appreciated by users in the feedback sessions. Fun animations and micro-animations help the user be aware of actions on certain pages.
Data Visualisation
The two maps on our app provide interactivity, a layout of the area and an informative aspect. The function of the Dublin City landing map is to provide the main areas of potential visitor interest and information. This then leads to the Merrion Square map. The illustrations on both maps are in the same style in order to create a consistent theme throughout.
The map is an exact visual layout of the Square and informs the user about the location of places and things of interest. It allows the user to interact with certain elements and choose what information they want to view. On the top right-hand corner, there is a mini-map of the Square. This shows the user where they are on the Square and how far they are zoomed in the map.
SVG map of Merrion Square with mini-map, drag, and zoom for the tablet.
Full map view and on the iPad the map is automatically zoomed in to view all the features of Merrion Square.
Prototype 1
User Added Content
During initial testing, we discovered that a feature to allow users to add their own stories would be of value to the users.
However, after developing the prototypes for this and testing it, it became apparent that it would be too much to implement in the time available. Users also much preferred the content that was curated for them. They especially enjoyed reading 'quirky' facts and details about the area, rather than the other users
adding stories.
Key findings from testing:
-
Monitoring user-generated content would be difficult
to manage. -
Users were confused with which swipe motions to use.
-
Users were confused about where they were on the terrace (illustrated street-view screen).
-
Buttons were too small, they had trouble hitting targets/buttons.
-
Liked illustrations, but found there were too many screens. Suggestions for a nav bar and home button.
Interactive Map
We had a lot of content for Merrion Square and initially, the experience was quite complex. The solution to this was to create an interactive map using data visualisation.
This would allow the user the autonomy of deciding whether they wanted to interact with the content or move to another section without interrupting the flow.
Key findings from testing:
-
Users liked the concise amount of information about the element that appeared in a modal. It didn't interrupt
the flow. -
Users liked to interact with the illustrations to find out more information.
-
Users suggested putting street names on the Merrion Square map to show which terrace each building is on.
Key findings from testing:
-
Users suggested an onboarding screen.
-
Instead of tapping, create more scrolling when viewing the terrace buildings.
-
Users liked the idea of clicking on an image to make it bigger to see more details
-
Buttons and text navigation are too small for onscreen.
Prototype 2
New Areas Added
Different areas were prototyped and an iterative process of testing and research was employed to enable design and workflow to be created. The main feedback point received during the testing process was to make the navigation clear so the user knows where they are in the app. Since the app is content-based, information has to be presented in a clear, fun and readable way.
Prototype 3
Navigation and UI
As the project grew, we started to focus on how to best to arrange the sections within the app and the most intuitive flow. User testing was crucial at this stage of the project.
In this iteration, there were three more sections that the user could navigate to from the Navigation Bar. The 'General Merrion Square History', 'Notable Figures of the Square' and 'Witness Account'.
We focused on task-based user testing, asking our users to talk us through their thought processes while undertaking each task. After they completed the tasks, we asked informal questions which helped us to gain insights as to how better to structure the app.
Key findings from testing:
-
Naming conventions of title caused confusion.
-
Too many sections nestled in a section - move to the main navigation bar.
-
Dublin map within 'General Merrion Square History' raised a lot of questions - suggested to have the interactive elements on the landing page of the app rather than nestled within the Merrion Square section.
Prototype 4
Following the previous prototypes, users' feedback was taken into account and sections of the app were changed to help create better navigation. A landing page was created to allow the app to be expanded to other squares in the future. This screen also gives users a brief history of Dublin and its main areas.
The navigation bar was implemented with all the main areas of the app in one place.
Data Visualisation, updated UI and section development
Key findings from testing:
-
Add a welcome onboarding screen to let the users know how the app works.
-
Users found the font hard to read in the 'Witness Account'. Some users didn't like the white text on the blue background, they found that it was quite heavy. But they liked the blue font on white.
Navigation Bar
Following the previous prototype, users' feedback was taken into account and sections of the app were moved to help create better navigational flow. The landing page was revised to allow for the app to be expanded to other Squares in future iterations.
This screen also gives users the opportunity to explore the history of Dublin and its main areas. The navigation bar was improved by adding buttons which would allow the user direct access to the main sections of the app..
Icons
Many icon iterations were produced to get the icons right for the navigation bar. We had many A/B testing to get the icons right. The final 4 represent each section of the app.
Buttons to allow direct access to all sections
One button on Nav Bar
Design Solutions
This section further illustrates more detail of the design solutions that were mentioned in the iterations above.
Onboarding
Upon opening the app users are greeted with a modal with a brief introduction to the app and a short explanation about how to interact with it.
Onboarding screen in Merrion Square section
Onboarding screen presented to user upon opening app
A/B Testing Navigation
We suspected that having buttons on each corner of the screen may be counter-intuitive, considering the form factor of the iPad. However, we decided to conduct a round of A/B testing to see what users preferred (and to confirm our suspicions).
VS
Navigation bar & interactive and movable map
Data Visualisation and Interactivity
We had a huge amount of content for Merrion Square and initially the experience was quite complex and unyielding (lots of screens in early prototypes). Our solution to this was to use data visualisation techniques, such as interactive maps. This would allow the user the autonomy of deciding whether they wanted to interact with the content or move to another section without interrupting their flow. Very useful for new and returning users.
Spreadsheet for all the data that we sourced
Animation
Animations enhance and enrich the interface. We used animations to give feedback, to create focus and hierarchy, but also to enhance the experience.
Users can click on highlighted words to view the meaning.
Animated text
Text being animated on screen to make it look like someone is writing the letter
Challenges
No project could be made without a few hiccups along the way.
Researching the content along with designing and programming the app was a big undertaking (especially as neither of us came from computer science-related backgrounds).
We had implemented a plugin to animate a section which did not work when we tested the app on the device. After much trial, error, and research, we discovered that there were restrictions and delays with how mobile devices (especially iOS) execute JavaScript scroll events. A pivot would was our best solution.
Universal design
We wanted to create a good universal design app which would allow it to be able to be accessed, understood and used to the extent possible by all people regardless of their age, size, ability or disability. This task was bigger than expected which we tried our best to let anyone use it.
Reflections
As we aquired more information and the project grew, it became clear to us that scope creep was rearing its ugly head. In hindsight, we realised that we should have confined the project to the sections we had outlined in our original design document. The lure of adding more interesting content and trying out different technologies may have gotten the better of us and we felt that some of the sections faltered as a result.
