...
The ability to use map segments and tags allows users to go through the site mostly through clicks. Common processes in posting can be saved as shortcuts as well, so common postings do not have to be redone. If a user makes a tag, map, or shortcut that they do not want, they can simply right click the button that represents the shortcut, and delete it. If the user accidentally deletes one of these items, the paths to recreate them are short and simple enough that it is not a problem to redo them.
DESIGN #2:
Storyboard:
The story starts when Gigi and Kiki opens the Marauder's Map website on their phones.
After some chatting, Kiki and Gigi decide to go to Muddy Charles together. They closed the webpage and disappeared from the map.
Analysis:
This design stresses the flexibility of the interface - it should be usable on both smartphones and laptops, so the design aims to be simple, compact and clear.
The primary layout uses maximized screen space to display the map - which can be panned and zoomed using multitouch gestures, like Google Maps. Friends' detailed info is shown/hidden according to zooming level. Tapping on a pin would bring up an info window as well as possible operation buttons related to that person. Most customization functionalities are hidden in a drawer at the bottom of the screen. Both the settings menu and the chatting window use 'drawer' metaphor because when they slide out, they may occupy only part of the screen and be half transparent, in order to reduce the loss of visibility of the map.
For those who use the website on a PC, this design can be easily scaled up by making the menu drawer a floating panel or sidebar: 
Since the viewport of the map on a phone is relatively small, the interface also tries to make map navigation as easy as possible. The user is automatically positioned on the map at his wifi/GPS coordinates. By default he sees the map centered at his own location. He can scroll to a certain location by searching the address or a friend's name. When he receives and views a new instant message, the map will be automatically panned to the other person's location.
In this system it is essential to make various states visible to the user - for example, his own status, his applied filters (so he does not think somebody's offline by mistake), his received messages, etc. Since there is no such thing as status bar, I use flashing icons on the corner of the map to make the user aware what's going on.
Pros:
1. This design is flexible for different scales. It uses colors and icons to code as much information as possible in a compact display, so a large portion of the limited screen space can be dedicated to the primary interest of the user - the map, and friends.
2. Simplicity. Menus and buttons are not visible until one needs them. This design keeps the interface simple and clear, with minimal distraction. When a user doesn't have time to do complex tasks like tagging and filtering friends, he doesn't need to be bothered by such buttons overlaying on his map.
Cons:
Learnability. While using a lot of custom icons and colors the interface can become confusing to a novice. This can be compensated by adding text annotations and (probably) a help screen at first-time use.