Shang Lin




Art Direction & UI/UX Designer
Developed by UXM Studio

Spotter is a technology company that created an automated attendance accountability system. It's based around beacon technology that talks directly with the app installed on smartphone devices. Spotter's beacon technology maintains privacy and is able to handle multi-level buildings unlike GPS based systems.

Spotter needed a website to market their product. I came up with a concept of a 3D view of a campus that drew design aesthetics from Google Maps while still being distinctly Spotter. The idea was to create a campus map and have check-in droppins appear periodically across the buildings. The map was created at a 45 degree angle to create depth. Each building was then crafted with a college/university campus in mind. The buildings were then assembled on grid to further communicate the idea of a map.

The methodology behind the proceeding sections of the website was to create an overview of the product getting more specific as the user scrolled down. As the user scrolls a narrative is slowly revealed. I inserted clear call-to-actions throughout the layout to give users quick entry points to previewing the product.


Concise and Effective

Creating the homepage involved creating a clear narrative of the product. I wanted to engage the users without asking them to click through multiple links.

Branded Illustrations

Taking Spotter's brand, I applied it to all the visual assets to keep a consistent look throughout the site.