cover_bl copy 4@2x

Bloomberg

Babylist

Babylist Mobile

I joined Bloomberg in January 2002 as a Graphic Designer on their internal Creative Services team. From 2006-2009, I became the Mobile Design Lead, a position that I was able to carve out for myself. 

Below is a project that I hold dear to my heart. An oldie, but goodie. It was the first iPhone app I ever worked on. It pushed me as a designer, teammate and ultimately guided the direction of my career.

Bloomberg iOS App

Dates: 2008
Roles: Mobile Design Lead

“Bloomberg connects decision makers to a dynamic network of data, people, and ideas – delivering business and financial information, news and insights around the world."

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

Backstory

A couple of years earlier, I had proactively pitched and convinced the visual redesign of the Bloomberg Blackberry app to the Product Manager and Mobile Eng Lead. The app was originally designed by an engineer using Paint Shop Pro and it wasn’t an app that was heavily marketed to our subscribers because it didn’t have that slick polish that all the other Bloomberg products had. Before the pitch, I communicated with my Manager of the gap in design I noticed within the mobile product and promised that I would stay on top of my other design projects if I could help the Mobile team. She gave me her blessing. I worked with the Product Manager and Mobile Eng Lead to get the Bloomberg Blackberry app to a good place. Once the redesigned Bloomberg Blackberry app launched, we saw an increase from 12k users to 200k users.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

That success opened the doors for me when Apple asked Bloomberg to design an app for this new phone they had launched in 2007, the iPhone. It was a no-brainer that the Mobile team wanted me on the project since we had earned each other's trust and have a history of working together.

We successfully launched an app that helped both professional and casual traders make informed investment decisions with business and financial information at their fingertips.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

img_Stock@2x

Considerations

  • Why are we designing this app?
  • Who is the app for?
  • What financial information makes sense for us to provide for free?
  • How will the Bloomberg brand be applied?
  • How can we make it easier for a Registrant to build their baby registry?
  • Where will they need to add items from? From the Babylist store, external online stores and Babylist Guides and Articles.
  • How will the brand evolve?

What were the challenges?

  • 3 months to design and develop an iPhone app – Bloomberg was being considered to be showcased at the next WWDC
  • Remote team – Mobile Engineers were located in London, while myself (Design) and Product Manager were in NYC
  • Evolving iOS Human Interface Guidelines
  • We were all noobs – Mobile Engineers were learning Xcode and I was researching and learning User Experience/Interaction Design as I went
  • How can we make it easier for a Registrant to build their baby registry?
  • Where will they need to add items from? From the Babylist store, external online stores and Babylist Guides and Articles.
  • How will the brand evolve?

Utilizing native iOS components, we organized the navigation to make it easy for the pro to casual investor stays up-to-date with News, World Markets, keep track of their stock portfolio, and research new stocks. With guerilla style user research, we were able to meet our goal of creating an experience that the pro to casual investor found enough value on the go to use this app. 

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

img_navigation@2x

The four sections of the app include News, World Markets, My Stocks, and Stock Finder.

The four sections of the app include News, World Markets, My Stocks, and Stock Finder.

The four sections of the app include News, World Markets, My Stocks, and Stock Finder.

News Flow

New Page Designs

Bloomberg provides a wealth of financial news information. On the top level screen, we displayed categorized news headlines. Tapping Edit, allowed a user to choose and re-arrange the hierarchy of news categories that they cared about. On the article level, we utilized the Apple share icon so users were able to email a story to anyone.

img_flow_News@2x

World Markets

New Features

We gave investors a summarized view of how the Indices performed around the world. Who were the Leaders and Laggers? News related to each index, charts and tables to show performance results.

The Babylist Store was missing key shopping features such as Filters (price, brand, color, features), Quick Shop, Image Zoom. To help shoppers comparison shop, we added a fixed product summary on scroll and surfaced product videos closer to the top of the Product Details page.

img_flow_Markets@2x

Seeing this flow 10 years later, I can see how I can make improvements to this flow 😂

Seeing this flow 10 years later, I can see how I can make improvements to this flow 😂

Seeing this flow 10 years later, I can see how I can make improvements to this flow. 

Seeing this flow 10 years later, I can see how I can make improvements to this flow. 

My Stocks

From user interviews, we learned Pro and casual investors both wanted to keep track of how their stocks are doing. Users can Edit their portfolio, search, add, edit and or delete a stock to their portfolio under My Stocks screen. We implemented a custom keyboard to match Bloomberg's brand.

  • Inventory growth
  • Page views increased 
  • Bounce rate decreased 
  • Total reservations from the Babylist Store increased 
  • Babylist Store revenue growth
img_flow_MyStocks@2x

Stock Finder

Search for a new stock you heard about or tap on a stock from a recent search.

img_flow_StockFinder@2x

Charts

Rotating any Index of Stock screen enlarges the chart snap shot. With user interviews were were able to learn that 1 day, 1 month, 6 months, 1 year and 5 years were the most meanigful views to investors.

img_Charts@2x

Tapping on the chart dismisses and makes the segmented buttons reappear. Not shown here, but tapping and dragging the chart shows a hairline that gives more details.

Tapping on the chart dismisses and makes the segmented buttons reappear. Not shown here, but tapping and dragging the chart shows a hairline that gives more details.

Tapping on the chart dismisses and makes the segmented buttons reappear. Not shown here, but tapping and dragging the chart shows a hairline that gives more details.

Tapping on the chart dismisses and makes the segmented buttons reappear. Not shown here, but tapping and dragging the chart shows a hairline that gives more details.

Branding

While working on the design of the app, I needed to make sure it represented the Bloomberg brand. The key colors like amber, black, and white were inspired by the Bloomberg terminal interface colors.

img_color palette@2x

On the left, color palette breakdown for designer. On the right, color palette breakdown for engineer.

On the left, color palette breakdown for designer. On the right, color palette breakdown for engineer.

On the left, color palette breakdown for designer. On the right, color palette breakdown for engineer.

Icons

Final Mobile App Designs

The few examples of the many variations and evolution of the Bloomberg iPhone app icon I designed. 

img_app icon versions@2x

Final app icon on iPhone.

Final app icon on iPhone.

Final app icon on iPhone.

img_icons@2x

Marketing

Marketing

Since I was on the Creative Services team, I was even tasked with designing marketing materials for the iPhone app that involved ads and physical banners that would be posted on lamp posts around the Bloomberg London office. I executed on taking new photography for the banner designs.

img_banners@2x

What were the results?

What were the results?

  • 1+ million downloads within first three months of launch, 2008. 

  • Bloomberg iPhone app featured for the first time in the App Store, 2009.

  • Bloomberg iPhone app featured in iPhone 3Gs TV commercial, 2009 – 2010.

  • Full page print ads for New York Times, Business Week and the New Yorker, 2009 – 2010.

  • Best App for Stock and Market News, Oreilly's, 2009.
img_press copy@2x

Left: Back of The New Yorker, August 1, 2011. Right: Cover of Macworld, September 2011.

Left: Back of The New Yorker, August 1, 2011. Right: Cover of Macworld, September 2011.

Left: Back of The New Yorker, August 1, 2011. Right: Cover of Macworld, September 2011.

img_press@2x

The New York Times, Wednesday, December 24, 2008.

The New York Times, Wednesday, December 24, 2008.

The New York Times, Wednesday, December 24, 2008.

img_apple_ad@2x

Bloomberg app Apple commercial appearance. 

The New York Times, Wednesday, December 24, 2008.

Final Thoughts

This is a project I'm very proud of because I trusted my gut to push for change in an ambiguous area and was able to experience growth as a designer working with a PM and Engineer for the first time, within a completely new process that we were creating on the fly. We came together and designed and built something great.

If you're curious, I found this old youtube video that walks through the app 🙂

Selected Works

GoogleGrowth design

Babylist StorePRODUCT DESIGN

Babylist MobilePRODUCT DESIGN

MyFitnessPal MobilePRODUCT DESIGN

Seamless Partner AppPRODUCT DESIGN

Bloomberg MobileVisual & Interaction Design