LightBoard

Concept, Design and Development of an internal Web app for an LED board and a corresponding iOS app

week-small

While at Dow Jones, I worked with three other interns to build an internal product for the company. LightBoard is a app consisting of web and iOS components across desktop and mobile devices as well as a 3-stories-tall LED board.

Our only criteria were to use the LED board, create something that used editorial data, and develop an API and/or framework for other employees to work with. The entire app was built from scratch — from concept, to design, to development — by our intern team. My focus was on branding and design, front-end development and data visualizations.

leaderboard-small

The LED board is located in the News Corp building and is 3 stories tall.

The data focused on the “success” of a tweet, which we defined as the number of retweets and favorites. We created a tweet leaderboard for the LED board that would show the top WSJ tweets of the day and week. This allowed editorial to compare the subject matter, length, language and photos of their most successful tweets in real time.

Designing and developing for the LED board, I encountered a lot of quirks. The working resolution of the final product had to be 224 x 480 pixels. This significantly limited the style of graphics and fonts that would be legible on the board. Due to the physical size of the board, the color was extremely intense and large areas of white were blinding. With these two limitations in mind, I developed a style for the board that used simple vector graphics, a select group of fonts and deep colors. This allowed the board to be legible, but also was a style that could be used across corresponding normal screens, without sacrificing design.

The documentation of our data collection and style development became the beginnings of the LightBoard API and framework.

The board now displayed new and relevant data, but it was still just a (very large) screen on the wall. With the board working as a web app, we realized it would possible to develop a way for users to interact with the board directly via a websocket. We were provided with iBeacons and expandend LightBoard into an iOS application.

gameshot3-smallgameshot2-small

Using an iPhone with the LightBoard app to play Space Invaders

For our interactive test, we developed a custom version of Space Inavders that WSJ employees could play on break with their iOS devices. By building this, we were able to lay the groundwork for further interactions with the LED board, such as posting a message to the board.

topHours-withTweets-02 top-hours

Screenshots of the interactive web charts for exploring top tweet data

My last few weeks were spent on developing ways to use our API’s expanded capabilities. I built an interface that would allow editors to see the times top tweets were posted. This allowed them to see by posting a tweet at a given hour, it was more likely to get traffic. I used d3.js to build interactive charts that worked both on desktop and mobile.