Hack The Future
Creating a map displaying historical landmarks
.png)
.png){kind=small}
The purpose of this project was to create a map of the local town, showing a variety of historical landmarks.
The sponsor's vision for the product was to have an interactive map that had the same aesthetics as "The Marauder's Map" from Harry Potter.
This was wanted because the building's architecture have a dark academia aura. I was responsible for creating a design that was in line with the client's vision and was still within the capacity of my team.
Background
My Contributions
-
Lead UX Designer
-
Consulted with sponsor
-
Created all mockups
-
Designed overall website
-
Incorporated feedback from developers and client
%20(1)%20(3).png)
I had to find a balance between satisfying the sponsor requirements and staying within the limits of what my team was capable of. The fact that the 8 developers were early on in their studies made it so that more complex design choices were infeasible.
Design Process
%20(1)%20(4).png)
One of my initial designs was to have a map with pins indicating where the buildings are. I then decided to add a sketch of the actual building underneath the pin, to match the overall aesthetic the sponsor wanted. This was designed to give a clear indication to the user of where the building is, and a general idea of what it looks like.
Since this map will be primarily used by locals while walking in the city, having an idea of what the building looks like will allow the user to find it more easily.
I also decided that when you click where the historic buildings are, a text box will pop up with the building name, an in-depth sketch of what it looks like, and a description of it's relevance. The footprints are placed as a reference to Harry Potter and the original Marauder's Map.
%20(1)%20(1).png)
%20(1).png)
However, once I presented these mocks to my team, they explained how this was beyond their capacities at the moment. They were not able to include a simple sketch of the building beneath the pin. We decided, instead, to simply highlight the portion of the map in which the building was located. When the highlighted portion is clicked, the pop up will appear.
This achieved the client's goal of presenting information about historical buildings while being within the capacity of the development team.
Some of the initial user feedback was that having the same formatting for each building would be repetitive after awhile, and the user may get bored. To integrate this feedback, I created alternative formatting for the buildings, to create some diversity.
The main variations were which side of the screen the text was on and the orientation of the steps.
%20(1).png)
The map itself resembles that from the movie Harry Potter, which kept in line with the client's wants. If there were more resources and time, I would have tested the product on users, perhaps taking someone to the city and having them use the protype map that the group created. This would have lead to me uncovering areas of improvement.
Final Design and Iteration
%20(1)%20(3).png)
If I had not been restrained to the capacities of my team members, I would have also had footsteps animated along the map, which is an idea that I had no time to even sketch out when it became apparent that it was not plausible. One aspect of my initial designs that I wish could have been incorporated were sketches of the buildings where they are located, to make it easier for the user to see. However, I would not have the pins, since they do not add anything to the overall aesthetics that it's trying to achieve or improves usability.
My initial design to have sketches of the buildings on the map was because this was how the Harry Potter movies portrayed the Marauder's Map. I placed pins indicating where the actual buildings where to make it more easy for the user's to identify where the buildings where, because I imagined in future iterations have more decorative sketches as well, as seen in the original map