✕
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
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
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
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
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
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.