Beacon: Map Sharing and Creation

Beacon is a rails application that allows for simple map creation and sharing. It was created last fall in roughly 5 weeks in a team of four, where I essentially acted as both the technical and design lead. Before the project, the team had attended job fairs and conferences and found several common issues that seemed to plague them, regardless of the sponsor:

• Map given to help navigate the event was hard to process as it would detail every single event/booth over the event's entire duration
• Information overload when information given online - not suited for mobile devices, definitely suited only for desktops
• Lack of context when visiting an event (e.g. information about the company while visiting the booth)
• Hard to access information on a mobile device (maps definitely suited for printing)

Almost everyone has a mobile device now, and it's wasteful to expect everyone to get a printed map or prepare beforehand and print out information needed to attend a job fair successfully. Beacon fills a gap to provide said information easily on a mobile device, while also allowing map sponsors to share and reuse interactive maps online.

Early Steps

Although we could've "faked" the map creation process and focused on the user, I wanted to push myself by leaving my comfort zone and take Rails in a direction I had never gone before. I've made typical web applications with Rails quite often, but never something as interactive as drawing maps. Both in technical and design terms, Beacon presented a new challenge that I wanted to tackle head on.

Some early drafting of the map creation interface

I researched existing "workbench" interfaces, such as Gliffy and Adobe Photoshop. While I used those as references, map creation is different, and required that I also had forms somewhere for the creator to enter information about the "booths" and assign tags that end users would utilize. However, at the same time, certain established patterns (especially for toolbar icons) were used consistently regardless of who made the application, and deviating from such patterns would probably just confuse.

More drafting and planning - went through many iterations in the end!

At the same time, we couldn't ignore the experience of the map users. However, I handed off design of those sections of the application to my team, and devoted myself to the map creation. The tight time span meant that time was spent furiously creating while designing at the same time. It also meant that I had to move forward with a design I wasn't entirely satisfied with, but more on that later.

A color guide I created to help my team use similar colors throughout the application

High fidelity mock up of the map creation page

I planned to have "vendor" and "tag" information all built into it, allowing the creator to deal with all of those pieces in one screen

End Result (~5 wks)

Splash, browsing conventions, and a convention's listing

Could filter the listing by tag, read up on a vendor, and then locate it on the map

Anyone could access the application, regardless if said person had an account or not. They can browse currently ongoing or upcoming conventions, view the "vendors" that are at that convention, read up about them, and then find them on the map. The map itself could be zoomed in and out of, and scrolling/swiping with the finger allowed them to move around.

A fresh new map!

Adding a vendor to the map

You can drag and drop from the circle to assign a vendor to a booth

The map creator can be accessed after creating an account. Many of the interactions are just drag and drop. Drag to create a booth. Drag a vendor's name on top of a booth to assign it. Click on a booth to set the times. You could also toggle vision on each of the vendors or by tag, so that the creator could view which booths had what assigned to it. Another administrative page allowed the creator to finally publish the map, in which it would show up for all users to see.

Now and the Future

One of the biggest challenges was teaching users the "lingo" of Beacon. What's a vendor? How do tags work? Something that would really help is an interactive tutorial or tour of the site that would teach them the basics.

In addition, design of certain components are not ideal. Users didn't know that drag and drop would assign vendors to booths. Some didn't know about shortcuts (control+C to copy paste a booth, for instance). A lot of these issues stem from unintuitive design that doesn't follow existing design patterns or reveal that information outside of long text.

The good news is that I'm continuing to work on this project this semester!

Beacon has been awarded a Carnegie Mellon University SURG grant (student undergraduate research grant), and I now have more time and some funding to continue pushing this project forward for 4 more months. I'm working on redesigning the map creation page and also want to redesign the public convention viewing pages. Other goals are allowing creators to customize their conventions more, whether it be through custom images, drawings, etc. The act of sharing a map also needs to be streamlined, and some users may want to print out a map regardless.

Basically, there are a lot of ways I can go with Beacon, and I'm excited to continue working on it. Check back later and I'll let you know how it's going. : )