Windows Community Toolkit

UX/UI DESIGN DIRECTION

The Windows Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building Universal Windows Platform apps for Windows 10. The toolkit is used to help developers build apps for Windows 10 devices including PC, Mobile, Xbox, IoT and HoloLens.

Deconstructing the patterns

The Windows toolkit was created in 2015 by a developer for developers. Its purpose was to help developers easily access sample code for controls within the Windows Universal Platform and to modify and test them within the application before deploying code into their own projects.

 

The existing app had roughly 5 main content areas within it and was built summarily to many basic applications during the UWP launch time. Vast majority of the pages consisted of left panel navigation and a main content area. However, some content pages had an additional right panel for code or properties view depending on the purpose.

 

The Toolkit was considered functional for the basic needs that most developers had but had major issues around the navigation and 'ease of use' within the when moving between pages, also there were limitations to the modifications that could be made to the widgets, controls and services.

EXISTING APP

App Content

Animations

  • Blur

  • Offset

  • Fade

  • Rotate

  • Scale

Controls

  • AdaptiveGridView

  • HamburgerMenu

  • HeaderedTextBlock

  • ImageEx

  • PullToRefreshListView

  • RadialGauge

  • RangeSelector

  • RotatorTile

  • SlideableListItem

Code Helpers

  • Colors

  • Connection

  • Converters

  • ImageCache

  • StorageFiles

  • Streams

  • VisualTreeExtensions

  • WeakEventListener

Services

  • Bing

  • Facebook

  • Twitter

Notifications

  • Tiles

  • Toasts

Enhancing the experience

In 2016, I was asked to have myself and my team jump in to help re-design the experience. 

In order to ensure that we were successful in this project, we researched around the needs the developers had as well as talked to numerous developers around what they were looking for. There was also a ton of community feedback from the developer community which helped in getting a full breath of the different types of requests issues that we needed to consider.

 

From there we brainstormed around a couple different patterns and concepts. I then had one of my designers focus on doing some additional research by conducting questionnaires to ensure that the initial thinking and ideas were founded on concrete facts not theory. My team then proceeded to create rough wire frames around two approaches that made the most sense and could easily adapt based on the research findings and feedback from the developer community. From there we reached out to get additional feedback from developers to ensure that the approaches were on target.

 

After additional testing, it clear that the best choice was to create a top-level navigation with a drop down to allow for maximum amount of visibility of the content area and to be able to select an item and get immediately back to the current page.

 

We maintained right panels on the pages (as before) because developers really liked the feature and did not want to deviate from it. We also upgraded the right panel by adding in an additional document tab, enhancing the controls within the properties to provide clarity and optimization when modifying controls.

In addition to the initial five content areas, as before, 4 additional areas were added to enhance the offerings during the redesigning of the system.

UX
MOODBOARDS

The theme chosen for the app was 'modern simplicity'. Focused on clean lines, minimal aesthetics with punches of color only used to indicate prominence of hierarchy or importance within the design as needed. 

DESIGN

With the launch of the ‘next wave’ of Fluent Design being introduced same time as VanArsdel apps for Build2018. The apps became even more important as they were the first sample apps through the Microsoft Design organization to feature the next wave of Fluent Design. The final apps and designs highlighted elements which created depth, dimension and additional visual hierarchy to represent the Fluent language. As well as new features like light/dark theme for controls, dynamic background with image switcher, and app template container with solid or acrylic selector and the ability for developers or designers to work together and view a control with all permutations before building it out. The team also worked on templates for the controls to sit in and enhancements to the look and feel of each control.

REVIEWS

© 2020 by LReed. All rights reserved.