Microsoft in Washington State

  • Microsoft in Washington State
    Graphic and User Interface Design in Social Media

    Uptown Treehouse hired me to design four custom Facebook tabs for Microsoft to highlight four of the different initiatives in which Microsoft is currently involved for the betterment of its home state of Washington, as well as showcasing the strategic goals for which they urge lawmakers to pursue in upcoming legislative sessions. The four areas represented are: Transportation, K-12 Education, Higher Education, and a special tab, "Benchmarks for a Better Washington," that would link to Washington Roundtable's site, which tracks the state's progress across twelve key areas. These tabs would be hosted on the new Microsoft in Washington State Facebook page to directly inform and interact with the people on a social platform.

    The approach was to treat each tab as a clean and professional design with custom call-out illustrations to highlight different facts about where the state stands in these key areas and the pursuits of Microsoft to make improvements. These call-out illustrations were done in a clean infographic style and incorporated into the overall layout of the tab; they will also be used in the future for Facebook image posts to show up in users' news feeds.

    The four tabs would be unified stylistically, but vary from one another by each having a uniquely defined color scheme and a differentiating icon that represented the content. Four profile pictures were created to showcase each color scheme so that the Facebook page could change the profile picture to match the area it wanted to particularly highlight at different times.
  • For the "Transportation" Facebook tab, a public transit icon was created, and a green color scheme was chosen to highlight the green transit initiatives of Microsoft employees. Two call-out graphics were created - one showing the rate of Microsoft employees involved in carpooling, and one showing the use of Microsoft's public transit line, "the Connector," that runs on the Redmond campus.
  • Each tab's icon and color scheme was also incorporated into a 16x16 Facebook tab icon for use in the navigation of the page's sidebar.
  • "Employee Carpooling" call-out illustration.
  • Illustrating Microsoft's public transit line on the Redmond campus, "the Connector."
  • Completed "Transit System" call-out graphic.
  • The "K-12 Education" tab uses a gold color scheme and an icon of school books. The tab's call-out graphics inform users about Washington's current graduation rate and how Microsoft employees are giving to schools in effort to improve that rate.
  • The "HS Graduation Rate" call-out illustration shows that only approximately 3 out of 4 of Washington high school students receive their diploma.
  • The "Donating to Education" call-out illustration.
  • The "Higher Education" tab uses a collegiately crimson color scheme and a graduation hat icon. The call-out infographics detail state spending cuts to institutions of higher education over the past four years versus the amount that Microsoft (and Boeing) have pledged to donate to these same institutions over the next five.
  • The "Total Budget Cuts" call-out illustration.
  • The "$25 Million in 5 Years" call-out illustration.
  • The "Benchmarks for a Better Washington" Facebook tab repurposes Washington Roundtable's tab into the same styling, and under the same page, as the overall "Microsoft in Washington State" Facebook campaign. It uses a sprouting plant icon - to represent growth over time - and a blue color scheme (to show a progression of the blue that Washington Roundtable already uses in its own branding).
  • The "Benchmark Tracking" call-out illustration.
  • Facebook Wall Images
  • Another important feature designed for the Facebook page is five images that run along the top of the "Microsoft in Washington" wall extending the imagery designed for the tabs. Facebook randomizes the five most recently uploaded images at the top of a page's wall; the images posted were unified in design so that they would create an attractive page banner regardless of order (therefore, a fifth image was designed to show the Washington state that I created as a separate icon).
  • The five post images creating a banner at the top of the Facebook page's wall, which will appear randomized when the page is loaded.
  • The Facebook page's wall, shown with the five randomized images acting as a banner along the top.