RSS Reader

A Universal Windows App sample that showcases best practices, personality and inclusive design.

Traditionally, App samples for developers are crafted to showcase functionality. They severely lack design and the samples though showing features lack the UX guidance that most devs are often seeking. Hence, we took to task to redesign a simple existing app sample called the RSS Reader. We scoped the opportunity based on what external developers were asking from us. We being the engagement team were constantly listening to the community via conferences, blogs and other feedback channels.

This is how the sample looked like before we showered our TLC.

We created 3 versions of the App. Starting with mobile. All wireframes were sketched as the app was simple enough. Here are a few screens. A playful voice, tone and look was chosen to add some personality to an otherwise dry experience.

Next, the tablet version was laid out. We chose to keep three breakpoints so that the app could showcase both responsive and adaptive screens. Attention to detail was key. We also took the opportunity to design error screens as well as edge cases.

Lastly, the desktop version was laid out. The app heavily used a common pattern-The SplitView control which most 1st party apps on Windows use as well. This is also what external developers were needing as guidance.

For the ideal experience, we pushed the design more than a traditional sample. A curated view with a serif font for chosen for reading. Elegant text fields replaced the regular boxes. In terms of accessibility, the app supported a High Contrast light theme view as well. We also envisioned the sample using dynamic data to create icons on the split view. Based on the engineering time and resources we had, some of these features carried through production. Others were kept for a later release. The goal was to show devs how design and code should be balanced and best practices across both fronts were captured in this sample.

For this project, I switched gears and along with the interaction, I took on the role of a dev designer. This was a good project for me to learn Visual Studio Blend and I coded the XAML for the UI. I was accompanied by a developer for the backend magic as well as a visual designer for visual & motion explorations. This was a great learning exercise for me as I went through the pain points of what developers go through when coding our designs as well as understood how easy or difficult it was to create universal apps. It was a on-grounds experience to evaluate our documentation around Universal Apps as well.
We chose a prototyping heavy process and I would code simultaneously as the screens were being designed. This way, we would test a lot of crazy ideas in code before we would discuss them with the developer. The biggest learning moment for me was to amount of extra work that is needed to support inclusivity in apps. It took as several iterations, to limit the no. of colors and pair them appropriately with their counterparts for high contrast mode. Here’s a walkthrough of the prototype while getting built.

By the end of this project, we uncovered a few irregularities in the way samples were approached and communicated to the community. Hence, we also proposed a framework to approach samples. The framework divided samples into Applets, Mini Apps and Showcase Apps.

We also proposed a comprehensive documentation page that would list out best practices as well as lay out the defaults and custom controls used in the sample. We would also explain where and why we chose to break the rules. The documentation page would serve as a north star to all developers interested in building Universal Windows Apps.

The RSS Reader is the most popular sample averaging about 800 unique visitors each week. Give it try and play with it.