Microsoft Remote Desktop Apps
Background:
Remote Desktop allows you to connect and use a PC (running the Windows operating system) or run remote Windows applications from your phone, tablet, or Mac. Microsoft obtained their non-Windows platform apps through the acquisition of competitors. Our engineering teams had been working on aligning the underlying technology and features without a dedicated design resource. I was brought onboard to make sure they were balancing Microsoft branding with user expectations for each native platform.
My role:
User experience, visual design
One challenge with the iPhone and iPad apps was creating the right balance between Microsoft and iOS branding. I worked closely with the development teams so they followed the best practices and standards laid out in the iOS Human Interface Guidelines.
One challenge with the iPhone and iPad apps was creating the right balance between Microsoft and iOS branding. I worked closely with the development teams so they followed the best practices and standards laid out in the iOS Human Interface Guidelines
Process & details:
My first task on the team was to do an extensive audit of all key screens in the iPhone and iPad apps and create editable design files for major areas of functionality. I took it upon myself to catalog and present design and experience opportunities, based on the standards and best practices for iOS. From this I delivered a presentation to the PM and engineering teams, facilitating discussions on priority and trade-offs.
Example slides presented to the team. I encouraged them to use the standard table background grey to help users understand what content is interactive and when to scroll, standardizing input methods from across iPhone and iPad, and updated connection tile spacing and style to reflect current Microsoft styles.
Example slides presented to the team. I encouraged them to use the standard table background grey to help users understand what content is interactive and when to scroll, standardizing action methods across iPhone and iPad, and updated connection tile spacing and style to reflect current Microsoft styles.
For the majority of my time supporting Remote Desktop, my PM and Engineering teams were in the Bay Area, so I spent a lot of time presenting and coordinating our efforts over Skype while monitoring task progression and prioritization in Visual Studio. I also traveled several times a year to spend a week on-site in their offices. We worked together to balance new feature requests with my initiative to update the apps for brand consistency and increased usability.
My redesign of the main connection screen updated the PC tiles to use modern Microsoft styling and spacing, plus added a control for users to switch between tile and list view.
My redesign of the main connection screen updated the PC tiles to use modern Microsoft styling and spacing, plus added a control for users to switch between tile and list view.
In addition to visual and feature updates, I also spearheaded efforts to streamline asset delivery and implementation processes. I learned that there was a dedicated team at Microsoft managing our global icon assets and creating custom fonts with the glyphs needed for specific products. As our engineering teams prepared to update our in-app icons, I coordinated our efforts with the font team to create an icon font for use across our Remote Desktop apps. My effort to implement icon fonts in Remote Desktop freed us from having to output production assets at multiple resolutions, enabled continuous visual consistency with current Microsoft icons, and reduced the overall size of our app store installation files.
My redesign of the in-session experience allowing users to switch between connected PCs and modify how touch input is interpreted. I worked with the icon font team to create a custom Remote Desktop font with all our in-app icons.
My redesign of the in-session experience allowing users to switch between connected PCs and modify how touch input is interpreted. I worked with the icon font team to create a custom Remote Desktop font with all our in-app icons.
By this time Android has released their Material Design guidelines, so my efforts for updating the Android app were framed as a Material redesign. I showed updates to the menu pattern (including usage of our new icon glyph font), usage of the full modal verses dialog views for input, and the inclusion of new elements like switches and expand/collapse controls.
Example slides showing my documentation supporting the Android Material redesign for Remote Desktop.
Example slides showing my documentation supporting the Android Material redesign for Remote Desktop.
I cross-linked my documentation to the Material Design references for developers which details the sizing, spacing, and behavior of system-standard elements, minimizing the need for detailed redlines. I also coded a protype with HTML & CSS to illustrate how the PC connection tiles should scale on device screens of different sizes. (The final result of the Android redesign is shown at the top of this page.)
Mid-fidelity wireframes using Balsamiq Mockups for the new Remote Desktop for Mac app.
Mid-fidelity wireframes using Balsamiq Mockups for the new Remote Desktop for Mac app.
I also was presented with the opportunity to completely reimagine the Remote Desktop app for Mac. This application provides Microsoft with an incredible opportunity to introduce itself to users on a competitor platform and the existing experience, well… it looked and felt like a PC developer tried to create a Mac app. The designer leading strategy on our team, Rachel, had already decided on a Menu Bar app that acted like a light-weight utility. I worked with her to finalize a visual approach then got busy with mid-fidelity wireframes to illustrate how we would use standard Mac elements to provide all the functionality users needed in their Remote Desktop experience.
Redlines for the new Remote Desktop app for Mac which supports connections to PCs running windows and remotely hosted Microsoft applications.
Redlines for the new Remote Desktop app for Mac which supports connections to PCs running windows and remotely hosted Microsoft applications.
Since we used mostly standard Mac OS elements, I only needed to produce detailed redlines for custom content. Our final product is still in iterative development and beta testing, but is available to download through Microsoft’s Hockey App portal. Compared to the legacy Remote Desktop app distributed through the Mac App Store, the redesigned experience provides a highly-visual way to manage your PC workspaces with modern Microsoft branding and naturally native Mac controls.
Since we used mostly standard Mac OS elements, I only needed to produce detailed redlines for custom content. Our final product is still in iterative development and beta testing, but is available to download through Microsoft’s Hockey App portal. Compared to the legacy Remote Desktop app distributed through the Mac App Store, the redesigned experience provides a highly-visual way to manage your PC workspaces with modern Microsoft branding and naturally native Mac controls.
The redesigned Remote Desktop app for Mac docks to the menu bar for light-weight switching between PCs.
The redesigned Remote Desktop app for Mac docks to the menu bar for light-weight switching between PCs.
The redesigned Remote Desktop app for Mac docks to the Menu Bar for light-weight switching between PCs.
Outcome:
During the two years I worked on the Remote Desktop product suite, I led our teams to new levels of design consistency and ease of use across our Remote Desktop applications for iPhone, iPad, Android, and Mac while streamlining and formalizing their design and delivery processes.
This work was collaboratively created with the following designers:
Rachel Shepard, David Walker, Brian Oakley (Research), & Paul Sim
This work was collaboratively created with the following designers:
Rachel Shepard, David Walker, Brian Oakley (Research), & Paul Sim