Greg Arroyo | Portfolio 2020 · fundamental part of M365; focused on communities, leadership communications, and knowledge as a distinct value proposition from Microsoft Teams. Major

© 2020 – Confidential and Proprietary

Greg ArroyoProduct Design Leader & Design Practitioner

2020 PORTFOLIO

Recent Work Microsoft Yammer Microsoft StaffHub & Microsoft Teams LG webOS Smartwatch: Aspire LG webOS Smart TV: Search & Discover LG webOS Smart TV: Design Patterns & Framework Controls


ContentsAbout

10 15 26 32 40

3


AboutExperience, Superpower, Passion, Philosophies, and Design Process

Web iOS, Android, MS O365

EXPERIENCE


I have over 17 years of experience crafting digital experiences across multiple devices and platforms.

Federal Power Administration

Small eLearning & eCommerce Startups

Large Advertising and Design Agencies

Large Corporate Tech in Devices & Enterprise Software

Adobe Flash

3 years2 years 4 years 8 years

webOS


My design superpowers lie in my ability to quickly and systematically solve large problems.

I am passionate about building design teams proficient in the strategic envisioning and production of beautiful product solutions that make people’s lives better.

SUPERPOWER & PASSION


As a leader, I believe it is important to develop teams that recognize we are better together.

PERSONAL LEADERSHIP PHILOSOPHY

This requires teams to be honest, trust each other, and operate with mutual respect while embracing the challenges of tackling big problems, delivering on their commitments, and striving for personal excellence.

I achieve this through leading by example and with integrity; by being accountable for and strategic with my choices, empowering others to achieve more, and maintaining a growth mindset.


Don’t make something unless it is both useful and necessary; if it’s both, don’t hesitate to make it beautiful.

SHAKER DESIGN PHILOSOPHY


PRODUCT DESIGN PROCESS

It is critical for the designer to understand the people problems, the relevant business goals and constraints, and how these translate into the product strategy.

With this we can explore potential solutions, establish a design direction, and then produce the final assets to build.

The designer should also help finalize a test plan to measure the results and assure the quality of the build before it is released.

Double Diamond Design Methodology

Opportunity Problem Solution

DISCOVER DEFINE DEVELOP DELIVERinsight into the problem the area to focus upon potential solutions solutions that work

DIVERGE

DIVERGECONVER

GE

CONVERGE


Recent WorkMobile, Desktop, Wearables, and Smart TV Experiences

PRODUCT DESIGN / 2012 - 2020


Microsoft Yammer

MICROSOFT / OFFICE 365

A social networking tool to openly connect and engage across your organization.


Customers and end-users Medium to large companies looking to openly connect and engage across their organization(s).

Problem The design of Yammer in 2018 looked like it had not been touched since the product launched 10 years earlier. The experience was noisy, hard to parse, and did not clearly signal its’ value proposition. Yammer had not been integrated into the O365 suite and felt redundant to Microsoft Teams. As a result, users lacked the confidence and control they desired from Yammer and customers felt that Microsoft was not investing in Yammer so why should they.

Goal Redesign Yammer to excite business decision-makers and key catalyzer personas to adopt or continue to invest in Yammer for their organizations.

PRODUCT OVERVIEW

Solution As Microsoft’s first app built from the ground up with the Fluent Design System, we created a completely modern interface that delivers an engaging and easy-to-use experience for the web and mobile, as well as deep integration into Microsoft Teams, SharePoint, and Outlook. Building on a decade of customer success and feedback, we rebuilt Yammer with dozens of new capabilities that power leadership engagement, company-wide communication, communities, and knowledge sharing.

Outcome We established with customers, analysts, press, MVPs, and internal teams that Microsoft is invested in Yammer as a fundamental part of M365; focused on communities, leadership communications, and knowledge as a distinct value proposition from Microsoft Teams.

Major Milestones Nov 2019: Public Reveal at Microsoft Ignite Jan 2020: Private Preview Mar 2020: General Availability

MICROSOFT YAMMER / MOBILE


MICROSOFT YAMMER / WEB



Product Design Director

CONTRIBUTION AND COLLABORATORS

Timeline March 2019 - Present

Key Partners Lead Product and Engineering Managers for the Mobile, Web, and Service teams.

Design Team There were 10 IC designers, myself, and the Head of Design & Research that contributed to Yammer since I joined the team in March 2019. I directly managed half the team and all of the the work of the full design team team in support of 150 engineers across 20 engineering teams through a year-long redesign.

Full Team 12 Designers, 4 Researchers, 1 Writer, 24 Product Managers, 1 Customer Evangelist, 3 Marketing Leads and more than 150 Engineers across 4 locations, contributed to the redesign of Microsoft Yammer.

Role

I provided design direction on how to effectively execute cohesive, high-quality design experiences while improving the teams’ efficiency in design. I also developed and managed processes that support cross-functional alignment while building stronger partnerships. As a manager I was responsible for building and growing effective inclusive teams; driving the Microsoft strategy; and being a role model for the Microsoft values, to deliver exceptional results.

Responsibilities

Design team org structure, design process and cross-functional collaboration guidelines, design sprint process, design critique process, LT design review process, delivery schedule, guidelines for our design language and toolkit, product design principles, designs for merging Inbox and Notifications, and creative workshops.

Deliverables


Microsoft StaffHub & Microsoft Teams

MICROSOFT / OFFICE 365 & TEAMS

Empowering all workers to achieve more.


End-users Firstline Workforce - An estimated 2 billion people, whose roles are focused on routine tasks, transaction processing, or simple prioritization of work. These workers are typically not provided a dedicated computer and a desk.

Problem Firstline workers are disconnected from their team and their company. Their tools and processes for managing their time, tasks and communication are obsolete and outdated.

Goal Connect and empower firstline workers so that they can do their jobs better.

Solution A cloud-based platform that works across mobile and desktop devices. It enables firstline workers and their managers to manage time and tasks, communicate with their team, and share content.

PRODUCT OVERVIEW

Outcome Leading the charge for Microsoft’s design renaissance through a new culture of customer obsession, curiosity, and rapid iterations, StaffHub became the indispensable five-star application in the pockets of nearly half-a-million workers within just months of release. To help accelerate its’ growth potential, StaffHub eventually merged into Microsoft Teams as a custom configuration for the Firstline Workforce.

Major Milestones Sep 2015: Customer Pilot Sep 2016: Private Preview Jan 2017: General Availability Sep 2017: Major Updates to Look & Feel and New Features Mar 2018: Internal Acquisition/Reorg into Microsoft Teams Jun 2018: “Teams for Firstline Workers” Customer Pilot Sep 2018: “Teams for Firstline Workers” Private Preview Jan 2019: “Teams for Firstline Workers” General Availability

MICROSOFT STAFFHUB / MARKETING WEBSITE / FIRSTLINE CUSTOMERS


MICROSOFT STAFFHUB / IOS / FIRSTLINE WORKERS


MICROSOFT STAFFHUB / ANDROID / FIRSTLINE WORKERS


MICROSOFT STAFFHUB / O365 DESKTOP WEB / FIRSTLINE MANAGERS


SUBTITLES


Teams for Firstline Workers

StaffHub

To help accelerate growth potential, in 2018 Microsoft StaffHub merged into Microsoft Teams as a custom configuration for the Firstline Workforce.

In January of 2019, StaffHub’s Firstline Worker experiences were publicly released in Microsoft

Teams, a product with over 14M MAU.


MICROSOFT TEAMS / IOS / FIRSTLINE WORKERS


MICROSOFT TEAMS / ANDROID / FIRSTLINE WORKERS


MICROSOFT TEAMS / DESKTOP ELECTRON APP / FIRSTLINE MANAGERS



Principal Design Manager, Senior Design Director, Senior Product Designer, Design Coherence Lead, and Mentor.


Timeline StaffHub: November 2015 - March 2018 Teams for FLWs: March 2018 - March 2019

Key Partners The Head of Design, General Program Manager, Research Manager, and Engineering Managers for the Mobile, Web, and Service teams.

Design Team There were 18 different designers over 3 years that contributed to StaffHub. I managed 9 of them over the past 2 years as well as the work done by a 5 person external design agency for about 6 months.

Full Team 18 Designers, 5 Researchers, 2 Writers, 10 Program Managers, 4 Customer Advocates, 2 Marketing Leads and more than 70 Engineers contributed to Microsoft StaffHub.

Roles

I provided design direction on how to effectively execute cohesive, high-quality design experiences while improving the teams’ efficiency in design. I also developed and managed processes that support cross-functional alignment while building stronger partnerships. As a manager I was responsible for building and growing effective inclusive teams; driving the Microsoft strategy; and being a role model for the Microsoft values, to deliver exceptional results.

Responsibilities

Design guidelines (principles, patterns, framework, styles, etc.), cross-functional collaboration guidelines, design sprint process, design critique process, delivery schedule, mobile and desktop designs, mobile architecture, marketing materials and guidance, product naming briefs, problem definitions, user stories, vision pieces, creative workshops, executive and customer pitch decks, and so much more.

Deliverables


Aspire

LG ELECTRONICS / WEBOS WEARABLES

A premium smartwatch unifying fine craftsmanship and a sophisticated, time-based interface. Tradition and style evolved for 21st century needs.


Target Demographic Premium Seekers - people who value the feeling of exclusivity, brands that are a reflection of how they see themselves, and premium products and experiences that aspire to luxury.

Problem Smartwatches are often lean-in experiences that are focused on apps rather than time and don’t match your style.

Goal Create a premium smartwatch to retail for $1,000 USD.

PRODUCT OVERVIEW

Solution Classic time-based interactions that look, act, and feel like a watch, maintaining traditional sensibilities of mechanics, transitions, and precision - but still provides the core benefits of real-time connectivity and smart sensor data.

Outcome We won the internal bakeoff with our concepts and executive pitch; however, right as we moved into development, the marketing research team realized no one wants to pay $1,000 for a smartwatch (surprise). Since this was the first webOS smartwatch designed by the webOS design team, solutions such as the operating system design and navigation model for a touchscreen watch with three physical buttons were carried into the following LG webOS smartwatch explorations.

LG WEBOS SMART WATCH / ASPIRE / MATCH YOUR STYLE


LG WEBOS SMART WATCH / ASPIRE


LG WEBOS SMART WATCH / ASPIRE



Principal Creative Lead, System Design Architect, Interaction Designer, Prototyper, Design Manager, and Mentor.


Timeline March - September 2015

Key Partners The original Creative Lead, a Senior Product Manager, and a Senior Producer.

Design Team There were 6 designers in our San Francisco office and about a dozen more in the HQ offices in Seoul, Korea that contributed to Aspire.

Full Team Approximately 18 Designers, 2 Prototypers, 3 Researchers, 1 Product Manager, 1 Design Producer, and 1 Engineering Manager.

Roles

My initial role was to design and deliver the experience architecture for the operating system. I then moved into the creative lead role, when the existing creative lead left the company. I led a small team that consisted of an interaction designer, visual designer, industrial/motion designer, and design prototypers through the design of the application framework, a notification center application, a health application, a style guide, several prototypes, and a few short videos. I also provided design direction to the designers and engineers in our HQ offices located in Seoul, Korea for all applications as well as guidance on how to design and deliver products on the webOS Platform.

Responsibilities

The operating system, application framework, and application designs, prototypes, user stores and flows, experience architecture diagrams, process guidelines, and delivery schedules.

Deliverables


Search & Discover

LG ELECTRONICS / WEBOS SMART TV

All of your content across all of your sources aggregated into a single catalog on your LG webOS Smart TV.


Target Demographic Cord-cutters - people who cancel or forgo a cable television subscription or landline phone connection in favor of an alternative Internet-based or wireless service. In 2015 this demographic was primarily Millennials and the younger side of the Gen Xers.

Problem Content discovery had become extremely cumbersome with content located across so many different sources, requiring you to navigate large channel guides, switch TV inputs, and launch and navigate various applications.

Goal Create a new TV experience for cord-cutters that brings all of your content together.

PRODUCT OVERVIEW

Solution Target hip trendsetters with a cool and classic TV design and a source-agnostic content discovery system; i.e. all of your content across all of your sources aggregated and curated into a single location, accessible from anywhere.

Outcome The industrial design for the classic TV that we had chosen turned out to be too costly to manufacture, so the Search & Discover experiences were moved to the main product line as a software update in 2015. Although this didn’t support our goal of targeting the hip trendsetters, it did mean that everyone with a webOS TV would now have access to this experience.

LG WEBOS SMART TV / HOME APP LAUNCHER


LG WEBOS SMART TV / TOP PICKS


LG WEBOS SMART TV / DISCOVER


LG WEBOS SMART TV / DETAILS


LG WEBOS SMART TV / SEARCH



Senior Design Lead, UX Producer, Interaction Designer, Prototyper, and Mentor.


Timeline April 2014 - March 2015

Key Partners Product Manager and UX Producer.

Design Team There were 6 designers in our San Francisco and Sunnyvale offices that contributed to the Search & Discover experiences.

Full Team Approximately 6 Designers, 2 Prototypers, 1 Researcher, 1 Product Manager, 1 UX Producer, and 20 Engineers.

Roles

I led the design team (visual, interaction, motion, and prototyping). I worked closely with Product Management to define and articulate the product, features and MVP’s, a Producer to define the delivery schedule, and the Engineering Lead to understand technical requirements. I also worked with the 3rd party content providers to understand their participation requirements, the 3rd party recommendations service provider to understand and evaluate their feature set, and the LG Ads team to understand their needs. I created wireframes, IA diagrams, and prototypes when we were short on time and resources.

Responsibilities

Product statement, product roadmap, problem definitions, MVP list, design schedule, user stories, design principles, wireframes, IA diagrams, prototypes, and a cross-functional collaboration processes.

Deliverables


Design Patterns & Framework Controls

LG ELECTRONICS / WEBOS SMART TV

The building blocks to create applications for the LG webOS Smart TV.


Users WebOS TV app developers, designers, and their end-users.

Problem How can designers and developers create webOS TV applications that support the design principles for designing for TV and add to a cohesive and familiar product experience?

Goal Evolve the webOS HP TouchPad framework controls and design patterns into the tools appropriate for creating webOS TV applications.

PRODUCT OVERVIEW

Solution Two core UI patterns: the “Always Viewing Pattern” designed to support a lean back, noncommittal browsing experience, and the “Activity Pattern”, a full-screen UI experience that suits the more task-based activities like browsing a large catalog. Plus sub-patterns for navigation, displaying data, acting on data, user input, and notifications.

Application framework controls such as playback controls, a content banner for full-screen video, action bars for panels, drawers, and a number of other controls for application designers and developers to build with.

A webOS TV developer website documenting all of the UI patterns and framework controls.

Outcome Highly successful product launch at CES 2014 with over 30 thousand TVs sold in the first year and multiple press articles with titles describing it as the “best smart TV” on the market.

LG WEBOS SMART TV / DESIGN PATTERNS / ALWAYS VIEWING PATTERN


LG WEBOS SMART TV / DESIGN PATTERNS / ACTIVITY PATTERN


LG WEBOS SMART TV / FRAMEWORK CONTROLS


LG WEBOS SMART TV / WEBOS TV ONLINE DOCUMENTATION



Senior Design Lead, UX Producer, Interaction Designer, Prototyper, and Mentor.


Timeline May 2012 - April 2014

Key Partners Creative Director, Framework Design Lead, and the Application Design Lead.

Design Team There were 6 dedicated designers in our Silicon Valley office and about a dozen more in the HQ offices in Seoul, Korea that contributed to application design patterns and framework controls.

Full Team Approximately 6 Designers, 2 Prototypers, 1 Researcher, 1 Product Manager, 1 Design Producer, and 12 Engineers.

Roles

I led a team of designers (interaction and visual) and a copywriter from the LG Silicon Valley Labs and the HQ Design Centers in Korea through the creation, documentation, and application of the Design Patterns and several of the larger webOS TV Framework Controls (i.e. Panels, Drawers, List Actions, Video Banners, and Playback Controls for Video, Music, and Photo Slideshows). I worked closely with the framework engineers in the development of the controls and templates for the design patterns. I also regularly consulted each of the application teams in the use of design patterns as well as general UX design guidance through design workshops and application design reviews in our SVL offices and the HQ offices in Korea.

Responsibilities

Wireframes, prototypes, online documentation, process guidelines.Deliverables


Thank you

Email [email protected]

LinkedIn https://www.linkedin.com/in/gregarroyo/

Resume http://www.gregarroyo.com/gregarroyo_resume2020.pdf

mailto:[email protected]

https://www.linkedin.com/in/gregarroyo/

http://www.gregarroyo.com/gregarroyo_resume2020.pdf

Documents

Greg Arroyo | Portfolio 2020 · fundamental part of M365; focused on communities, leadership communications, and knowledge as a distinct value proposition from Microsoft Teams. Major