Lycos featured image

Lycos

Published on March 28, 2016

DesignFront-EndPHPReactTypescript

Front-end work on Lycos Mail, WhoWhere, and the News verticals network during my time on the engineering team.

Lycos was the dot-com-era search engine that, by the time I joined, had been spun out and rebuilt as a network of standalone properties: Mail, hosting, news verticals, a local-search product. I worked on the front-end side of three of those products. This page is a quick portfolio cut of what I built.

Mail

I built the front-end for the new Lycos Mail design while another engineer migrated the back-end from Yii to Yii2. The redesign covered the homepage, the inbox view, and the auth flow.

Extendable Login Screen

The homepage needed to support multiple “views” – signup promos, marketing modules, login – and we weren’t sure how many would land or what new ones we’d need later. I built the JavaScript so each view was a self-contained module that could be added or removed without touching the others. Adding a new view became a small, isolated change.

Lycos Mail

Client-Side Error Handling

To cut down on round-trips and stop the most basic invalid submissions before they hit the server, I leaned on HTML5 form attributes where they covered the case and wrote a small set of JavaScript validators for the rules HTML5 couldn’t express.

Lycos Mail - Error Handling

WhoWhere

WhoWhere was a local-search tool built on the Yellow Pages API, the Yii2 framework, and Leaflet.js. Results render either as a list or as pins on a full-page map.

Working with the creative director, I rebuilt the visual layer and reworked how the search and map interacted. The back end was migrated to Yii2; my work was refactoring the front-end against the new design and integrating Leaflet.

Original

The original site used Google Maps but had hit the API’s rate limits, so we switched to Leaflet for the rebuild.

Refresh

News Verticals

Seven Lycos news verticals (Business, Entertainment, Health, Money, Sports, Technology, Travel) built from a single codebase. Each site shares HTML markup and uses CSS alone to differentiate visually, with Grunt configs handling per-vertical asset builds.

Like what you saw?

There's more where that came from.

Browse all projects