TOP Graphic Design

UX/UI Design

Shop in 3D

2022 - Microsoft Designer / Developer

Proactive Chat

2020 - Microsoft Designer

Chatbot

2020 - Microsoft Designer

Tether

2016 - Microsoft UX Designer

Content Block Builder

2015 - Microsoft Prototyper

Picchu

2015 - Microsoft Designer / Developer

Design Showcase

Showreel

2023 - Microsoft Motion designer / Video Editor

Teams Holiday Background

2023 - Microsoft Designer

Fluent Icons

2022 - Microsoft Designer / Developer

Microsoft Complete

2020 - Microsoft Designer

Value Props

2020 - Microsoft Designer

Digital Summit

2020 - Microsoft Designer

Virtual Store

2017 - Microsoft Prototyper

Project Mio

2016 - Microsoft

Game Designer / JS Developer

8-Bit Takeover

2015 - Microsoft Designer / Bookmarklet Developer

Back To The Future Takeover

2015 - Microsoft Designer / Bookmarklet Developer

Simplified Office

2016 - Microsoft Designer

Holiday Campaign

2019 - Microsoft Designer

Pride Campaign

2020 - Microsoft Designer

Seattle Admins Poster

2019 - Facebook Designer

Showreel

2023 Video Montage

In a dynamic design organization comprising more than 30 skilled designers, the landscape is constantly evolving. I undertook the exciting challenge of crafting a comprehensive compilation video that highlights the remarkable achievements of my team throughout FY23.

Collaborating Cross Pod

While my usual workflow entails receiving a design brief, maintaining regular communication with Project Managers (PMs) and stakeholders, iterating based on feedback, and delivering assets upon alignment with both parties and overarching business objectives, this project demanded a unique approach.

What I did

This endeavor involved curating a video that harmoniously integrated diverse projects, each spearheaded by a multitude of designers within our organization. My role was to transform their static designs into a captivating narrative suitable for video and motion playback. To achieve this, I leveraged advanced 3D reconstruction techniques. This process entailed dissecting their deliverables into individual components and meticulously reconstructing the final design within a dynamic timeline.

Tools I used

Adobe Premiere - For video editing and title captions
Reaper - For sound and music editing
Blender - For modeling and animations
Adobe Illustrator - For vector graphics
Adobe Photoshop - For page asset creation
Adobe After Effects - For mograph and transitions

Teams Holiday Background

Willy Wonka Holiday

Annually, the Campaigns team unveils their refreshed holiday marketing toolkit. In the year 2023, this comprehensive kit featured a novel addition—a 3D rendering, intended for utilization within Microsoft Teams as a backdrop image for conference calls. My design directive succinctly encapsulated the essence of the project: 'Craft a 3D environment that harmonizes with our style guide while infusing a whimsical 'Willy Wonka' touch.'

What I did

Leveraging the toolkit's specifications as my guiding framework, I embarked on the creative journey. The outcome included multiple design alternatives and a meticulously structured working file, purposefully engineered to empower other Blender users in generating their own brand-compliant iterations.

Tools I used

Blender - For modeling and some animations
Adobe Illustrator - For SVG creation
Adobe Photoshop - For post processing and color correction

Shop in 3D

Microsoft 3D Product Portal

Amid the upheaval of the global pandemic, Microsoft made the strategic decision to shutter their physical stores, leaving a significant void in the realm of hands-on Microsoft device experiences. The tangible interaction with products is a pivotal aspect of the customer journey, instilling a sense of premium quality. However, with the transition to an online landscape, we sought to enhance the digital experience by transcending the confines of a flat and limited 2D image gallery. The goal was to empower customers to take control of their viewing experience, an ambitious endeavor that required the validation of research and customer feedback through prototyping.

What I did

As one of the two dedicated UX designers and the designated prototyper for this exciting project, my responsibilities spanned the full spectrum of design, from conceptualization and ideation to mock creation and presentation. My mission: to manifest the design team's vision into a captivating, high-fidelity, and interactive prototype—a blueprint that would guide the development efforts of the external company tasked with crafting the customer-facing tool.

In Essence

The 'Shop in 3D' experience originally served as a resource for sales associates to deliver immersive demonstrations of the Surface product line. However, Since its launch in April 2021, it has successfully enriched engagement with tens of thousands of enthusiastic customers.

Play with my prototype Visit the live site

Tools I used

Model-Viewer - For rendering 3D models
VS Code - For coding the prototype
Prepros - For running local servers
Blender - For modeling and some animations
Babylon JS - For rendering 3D models with physics
Git - For version history and collaboration
Adobe Illustrator - For wireframing
Adobe Photoshop - For page asset creation
Adobe After Effects - For pre-prototype motion mocks

Content Block Builder

A Tool For Page Layouts

When I first started my journey at Microsoft in 2012, I served as a MARCOM designer, primarily engaged in the creation of placement and hero banners for the homepage of microsoft.com. A year later, my transition to the UX team marked the initiation of a pivotal chapter as we embarked on the development of the next iteration of microsoft.com. During this transformative phase, we embarked on the formulation of an innovative suite of design standards and components, intended for widespread adoption across the entire organization, powering the development of web properties.

What I did

Recognizing the imperative need for a tool that could empower designers to seamlessly craft page components in precise alignment with our nascent design standards, I undertook the task of conceiving and constructing the content block tool. This sophisticated tool was meticulously engineered to seamlessly harmonize with the evolving web standards we were concurrently shaping, fundamentally transforming the often repetitive and time-consuming process of content placement layout.

Try the tool

In Essence

The implementation of this groundbreaking tool ushered in a new era of efficiency for UX and MARCOM designers, accelerating the design process to unparalleled speeds while eradicating the potential for even the slightest brand misalignment errors.

Virtual Store

Bringing Virtual Reality to Microsoft Store

In 2017, I was a part of the Microsoft.com UX design team, embarking on an innovative exploration: the concept of an online retail store translated into a virtual space. The challenge was to envision what this digital retail environment would entail. How would users accessing it through various means—mouse, touch, VR headset—engage with and experience this unified environment in vastly different ways?

What I did

Taking on a multifaceted role, I conceptualized, modeled, constructed, and coded this groundbreaking virtual store experience. This project served as a pioneering tool to push the boundaries and unlock the potential of emerging web 3D technology at that time.

Give it a go

In Essence

While the virtual store primarily functioned as a high-fidelity interactive concept, it was not intended for direct customer engagement. Instead, it was strategically employed as a demonstrative platform for testing and presentation purposes, providing valuable insights for discussions with other product teams.

Tools I used

A-Frame - The 3D rendering engine
VS Code - For coding the prototype
Blender - For modeling, lighting, texturing, and animations
Unity - For rendering AR devices
Git - For version history and collaboration
Adobe Illustrator - For wireframing and storyboarding
Adobe Photoshop - For static asset creation
Adobe After Effects - For pre-prototype motion mocks

Proactive Chat Invite

New functionality - new design

When visiting any Microsoft.com page, it's a matter of seconds before you're greeted with an invitation to initiate a chat conversation with a knowledgeable sales associate. Recognizing an opportunity to enhance the user experience, the business team sought to augment this chat component by incorporating the capability to schedule shopping appointments while also aligning the design with the latest web standards.

What I did

To facilitate the design transformation and decision-making process, I introduced a sophisticated design tool. This tool empowered stakeholders to explore a plethora of design possibilities, offering them the flexibility to experiment with 14 key controls to craft a customized design solution. Once a design direction was chosen and rigorously tested, I seamlessly transitioned into the implementation phase, furnishing the requisite CSS to bring the redesigned component to life. Throughout this journey, we iterated extensively based on insights gleaned from rounds of research and invaluable customer feedback, culminating in the successful deployment of the reimagined component in 2021.

In Essence

Through strategic UX enhancements, we have witnessed a substantial uptick in customer engagement and satisfaction, accompanied by heightened awareness of our Personal Shopper offering.

Try the design tool

Fluent Icon Refresh

What about these old icons?

When it comes to online iconography, SVG stands as the reigning champion among file formats. Regrettably, until recently, Microsoft's Digital Asset Management (DAM) and Content Management System (CMS) did not offer support for this versatile format. Recognized as the 'SVG Fanboy' within the organization, I have spearheaded the transition from not only an outdated icon design language to a contemporary one but also advocated for the widespread adoption of vector assets across all Microsoft online platforms.

In my pursuit of eradicating bitmap icons from the digital landscape, I took a proactive approach by developing an online tool. This multifaceted tool not only serves as a persuasive aid in my efforts to convince skeptics but also serves as a central hub for tracking the progress of our ongoing initiatives in creating and implementing these modern vector assets.

Play with the tool

Picchu

Hey Microsoft! Let's align

Picchu, the codename for the ambitious overhaul of our design system, later evolved into the formidable MWF (Microsoft Web Framework). Preceding the advent of Picchu, Microsoft's web landscape was a patchwork of distinct identities. Each web property, be it microsoft.com, windows.com, or office.com, stood as an independent entity, drawing from its unique web component repository, brand guidelines, and asset library. The absence of a central point of reference had underscored the urgent need for brand alignment across the organization.

Where do we even start?

The situation was so fragmented that certain microsoft.com pages were entirely disconnected from the broader network, leaving users stranded without a route back to the homepage. Consequently, our foremost mission, aptly dubbed UHF (United Header Footer), was to unify this disparate ecosystem. As the lead UX designer, my role was pivotal in spearheading the development of a new, consistent header, navigation, and footer that would extend across every page within the microsoft.com umbrella. Remarkably, this foundational component remains largely unchanged to this day, a testament to its enduring success.

Just the beginning

With the 'bread' of the sandwich in place (UHF), our subsequent endeavor was to ensure that every contributor adhered to the right 'ingredients' and refrain from making 'sandwiches' out of breakfast cereal. This phase demanded meticulous consideration of the latest web technology, adherence to accessibility standards, and compatibility with various browsers. Simultaneously, we endeavored to present these complex technical aspects in a simple and intuitive manner, catering to the needs of both designers and developers.

Designers sought guidance on image selection, dimensions, style guidance, fonts, colors, and brand voice alignment, while developers craved code and the knowledge to deploy it effectively. Picchu was conceived as a comprehensive portal, meticulously designed to cater to the unique requirements of both groups, streamlining their workflows without overwhelming them.

Crucially, none of this transformative work could go live without rigorous testing and data-backed insights. I actively contributed to this phase by creating numerous prototypes, facilitating testing with organizations like User Research International, and collecting valuable feedback across various deliverables. Additionally, we harnessed real-time feedback tools such as Azure and Power BI to glean customer insights, further shaping a system that prioritized user needs.

In Essence

Following months of tireless effort encompassing design, strategy, reviews, testing, prototyping, redesigns, and deployments, we successfully birthed a fully functional web framework that the entirety of Microsoft seamlessly aligned with.

Project Mio

Overview

In 2016, a small but passionate team of Microsoft employees embarked on an ambitious mission: to revolutionize coding education by making it engaging and accessible. Fueled by our love for classic platform-style gaming, we conceived Project Mio, a groundbreaking initiative aimed at teaching JavaScript without overwhelming or boring learners.

My Role

Within our close-knit Product Lab team, consisting of just five members, I assumed the pivotal role of Game Designer and Developer. My responsibilities encompassed conceiving and crafting engaging levels and puzzles using the Phaser game engine as our canvas. I played a crucial role in transforming our conceptual ideas into tangible game elements, coding them directly in JavaScript within the Phaser framework.

Impact

The apex of our journey culminated in a memorable middle school coding day challenge, where our team presented Project Mio to hundreds of students. We not only showcased the game but also offered students within our target demographic the opportunity to experience it firsthand and provide valuable feedback.

Tools I used

Phaser - The HTML5 game engine
VS Code - For writing Javascript and developing levels
GitHub - For version control and collaboration
Adobe Illustrator - For level design and concept art
Adobe Photoshop - For asset refinement
Adobe After Effects - For animated motion asset creation
Reaper - For sound compsition
BFXR - For sound design

8-Bit Takeover

Microsoft.com got a retro remake

As an initiative purely for the enjoyment of it, a small, spirited team hailing from the Microsoft.com design team came together to orchestrate an unforgettable homepage takeover. On the 256th day of the year, we engineered a delightful surprise for users: by inputting the iconic Konami code on their keyboard while visiting the Microsoft home page, the entire website would undergo a whimsical transformation. The reskinned page featured enchanting 8-bit themed graphics, meticulously designed placements, captivating animations, and interactive links. Notably, it included a hero section spotlighting 8-bit renditions of each member of the MSCOM design team, creatively crafted by Dan Schlitzkus.

What I did

In this creative endeavor, I actively participated in the design process by conceptualizing and crafting placements, and I also played a key role in building several of the interactive components that enriched the page's user experience.

In Essence

While the project was primarily designed for sheer enjoyment, it sparked substantial social media buzz and, in turn, generated a notable increase of 3 - 10% in unique visitors to the homepage.

Back to the Future Takeover

Great Scott!

Drawing inspiration from the iconic movie "Back to the Future 2," where Marty embarks on a thrilling adventure to the year 2015 with Doc Brown, the Microsoft.com design team orchestrated a playful homage. On the very day of their fictional arrival, October 21st, we embedded a hidden secret code on the Microsoft home page. For a single day, users who visited the website and entered the license plate of the time-traveling DeLorean were in for a delightful surprise. The entire page underwent a remarkable transformation, with every component meticulously themed to juxtapose past and future technology.

What I did

In this imaginative endeavor, I played a pivotal role in crafting and designing all the strategic placements on the page. Additionally, I took charge of developing an innovative image slider, enabling seamless transitions between two distinct images. To further enhance the immersive experience, I introduced a dynamic 3D toggle, rendering every image on the page in anaglyphic (stereoscopic 3D), complete with retro glasses.

In Essence

Beyond its intrinsic entertainment value, this takeover generated significant social media buzz, ultimately driving an impressive 3 - 10% increase in unique visitors to the homepage.

Me showing the 3D glasses effect to some of my team

Tether

Finding time to meet shouldn't be so hard

Efficiently coordinating schedules can be a real challenge, especially when multiple individuals are involved. Factor in diverse scheduling habits, like Justin's meticulous planning months in advance, Heidi's penchant for tardiness, and Sam's indecisiveness, and the complexity only intensifies.

What was the idea?

In the Tether app, we aimed to simplify this process. Users had the capability to curate a recipient list with associated text numbers. After naming the event and specifying several date/time options, Tether seamlessly dispatched a text message to all recipients. The recipients could then cast their votes on their preferred date/time directly from their texting app—no additional Tether download or app installation was required. The creator of the event, in turn, could efficiently track responses, establish a voting window, issue reminders, and ultimately select the most favored time as determined by the recipients.

What I did

I spearheaded the project by devising the app flow and crafting the user interface.

In Essence

This initiative, part of our Product Lab, successfully progressed into development and testing. Several team members enthusiastically utilized the app, but our project focus later shifted to the development of the Project Mio video game.

App flow comp

Simplified Office

Why does Office need to be so complex?

As a dedicated member of the Product Lab team at Microsoft, we were entrusted with the exciting mandate of brainstorming, conceptualizing, pitching, and ultimately bringing to life a diverse array of passion projects. Among these endeavors, "Simplified Office" held a special place in my heart—a project aimed at elevating and simplifying the user interface of Microsoft Office, a software suite used by millions worldwide.

What I did

In the pursuit of this vision, I took the reins of the project by spearheading its conceptualization and crafting a compelling video presentation designed to captivate the attention of company executives. My role encompassed ideating and articulating the core concepts, illustrating how "Simplified Office" could enhance user experiences, and showcasing its potential to streamline complex workflows.

In Essence

During the ideation phase within Product Lab, "Simplified Office" emerged as one of the three standout projects chosen for presentation to Microsoft executives. Ultimately, while it did not progress beyond this stage, it remains a testament to the team's innovative spirit. The project, while side-lined, contributed to the creative ecosystem that eventually birthed the Project Mio video game idea.

Tools I used

Microsoft Complete Rebrand

Branding, and stylesheets, and logos, OH MY!

Microsoft Complete is a comprehensive offering encompassing warranties, tech support, and value-added services to enhance your purchase. However, the absence of a distinctive visual identity left it lacking the appearance of a tangible product, hindering customer recognition and engagement.

What I did

To address this challenge, I undertook the pivotal role of crafting a cohesive visual identity for Microsoft Complete. This encompassed the creation of a distinctive logo, the formulation of comprehensive branding guidelines, and the establishment of clear usage styles.

In Essence

The result of this initiative has been transformative. The Complete logo and branding elements are now prominently featured across the landscape of microsoft.com, significantly enhancing product recognition and driving increased traffic to the Complete product page.

Chatbot Redesign

Good Functionality - bad design

At a critical juncture, I undertook the task of revitalizing the interactive chat widget on Microsoft.com, a fixture that had been in use for years but had lost its visual appeal. As depicted in the image above, the old design on the left was in stark contrast to my revamped design on the right. The original layout suffered from limited content real estate, resulting in a cramped interface. What the bot truly needed was a breath of fresh air and a much-needed facelift.

What I did

My role in this endeavor encompassed the conceptualization and presentation of UI elements aligned with the brand's aesthetics. Once the design was approved, I played a pivotal role in translating it into reality by providing the requisite CSS for the third-party bot.

In Essence

The results of this redesign effort have been remarkable. It not only elevated customer satisfaction levels with the service but also introduced enhanced functionality, seamlessly integrating AI capabilities and real-time customer feedback mechanisms.

See it live

Value Prop Glyphs

One glyph, two glyph, red glyph, blue glyph

Microsoft Store embarked on the creation of a centralized web page to showcase the array of unique offerings available for direct purchase from Microsoft. These distinct value propositions demanded distinctive branded identities to effectively resonate with our audience.

What I did

Tasked with this challenge, I curated a refined collection of over 20 unique glyphs, some of which I designed from the ground up. These meticulously crafted icons were then seamlessly integrated into the Content Management System (CMS), with careful consideration for MARCOM placements. Additionally, I played a crucial role in the development of the accompanying stylesheets and guidelines to ensure consistent and coherent usage.

Visit the live site

In Essence

The end result of this endeavor has been a transformation in the visibility and recognition of these value propositions. Each now possesses a strong visual identity that empowers them to shine independently throughout microsoft.com, serving as compelling product placements and dynamic links.

Digital Experiences Summit

New year, new theme

Every year Microsoft hosts the Digital Experiences Summit, a pivotal gathering where product teams unveil their roadmaps, FTEs and vendors extract invaluable insights from past experiences, and guest speakers share their wisdom with those deeply entrenched in shaping every facet of Microsoft's digital landscape.

Furthermore, each year, this conference undergoes a captivating transformation. As a designer, I embraced the opportunity to take the reins.

What I did

In 2020, I spearheaded the conception and development of the conference theme and brand. My multifaceted role encompassed the creation of a comprehensive suite of assets, including web and email collateral, meticulously designed presentation slides, comprehensive style guide documentation, dynamic motion bumpers, essential brand assets, impactful signage, and a striking 24-foot mural.

Microsoft Holiday Campaign

Make it snow!

The holiday season represents a pivotal period for Microsoft, demanding meticulous preparation and strategic presentation of products and devices that resonate with customers. Months in advance, dedicated teams focus their efforts on creating a captivating holiday narrative and showcasing the offerings that customers eagerly anticipate.

What I did

In this critical endeavor, I assumed a central role in designing and constructing a versatile 3D asset kit tailored explicitly for holiday MARCOM placements. This comprehensive kit encompassed a rich array of scenes, props, and animations, strategically engineered to seamlessly integrate with existing product renders. The outcome was a visually immersive experience, giving the impression that the featured products seamlessly belonged within the enchanting 3D holiday scenes.

In Essence

One of the pivotal achievements of this project was the successful transition from outsourcing holiday campaign efforts to an in-house approach. This strategic shift not only translated into substantial cost savings, amounting to hundreds of thousands of dollars in reduced agency expenses, but also significantly heightened awareness of our holiday product offerings.

Microsoft Pride Campaign

Embrace the Spectrum

At Microsoft, our commitment to being a steadfast ally in the pursuit of equality is unwavering. To breathe new life into the annual Pride campaign, our goal was to refresh its visual elements. Collaborating closely with the design team, I embarked on a mission to contribute a dynamic video bumper that could be seamlessly integrated into presentations, live streams, and social media channels.

What I did

Within this vibrant initiative, my primary focus revolved around the creation of the captivating bumper animation. Drawing inspiration from the campaign's existing assortment of vibrant pins, each adorned with distinct calls to action, I envisioned an animation that would eloquently illuminate the colorful spectrum. This animation symbolized unity, beautifully merging the diverse voices within the campaign into a harmonious and coherent message.

In Essence

The introduction of this visually engaging video bumper breathed new life into the Pride campaign's visual arsenal. It empowered the campaign to amplify its message across various platforms, reinforcing Microsoft's steadfast commitment to equality and diversity.

Learn more about Microsoft Pride

Facebook Seattle Admins Poster

Join the Facebook admin team!

When presented with the essential message of career opportunities at Facebook's Seattle office, the challenge was to infuse excitement and engagement into the invitation. The Facebook Seattle admin team sought a captivating means to entice individuals to explore the career prospects they had to offer.

What I did

In response to this challenge, I took the creative reins and embarked on the design and illustration of a dynamic poster. Crafted with meticulous attention to detail, the poster served as a vibrant visual asset intended for deployment at career conferences and events. My aim was to create a design that would not only convey the message effectively but also capture the attention and interest of potential candidates.

In Essence

The poster design represented a pivotal tool in the Facebook Seattle admin team's efforts to attract talent and promote career opportunities within the organization. Its engaging visuals and inviting message played a significant role in drawing attention to Facebook's career offerings, ultimately contributing to the team's talent acquisition endeavors.