VanArsdel Apps

DESIGN DIRECTION 

VanArsdel apps were an end-to-end Windows sample experience built to showcase the next wave of the Microsoft Fluent Design System. The apps made extensive use of density and new controls, as well as powerful underlying features of the UX framework and composition. The samples showcased how you can build a rich, productive experience for browsing, managing and purchasing IoT devices.

I was asked to have my team and I create the sample experiences featuring the soon to be announced new controls for the Fluent Design Language in time for Build 2018. The request came with limited information and additional stipulations, beyond it needed to be ‘feature rich’ to highlight the latest Fluent controls in the best light and that it needed to be ‘hero worthy’ as it was going to be featured in presentations at Build 2018 and beyond.

Creating a product type

It is important to think about the products that resonated with current trends in the market but also resonated with our users and could work across a diverse variety of potential people leveraging the sample. We want to also make sure that the samples would inspire people with high-end products within the system vs just the average example of an app that felt more common place.

 

After careful consideration and numerous rounds to pick out the proper product we finally concluded that a light company and products would be best as it provided enough variety in product types without encroaching on potential legal rights of other products like headphones, shoes or other major products brands that exist. Especially because this was a fake brand as were the products.

The next step that I need to complete was in defining the company, the mission statement and how best to market them. Here is the mission statement that I created for VanArsdel. Next we need to determine the logo, the mood and the colors that we wanted to use within the brand to create the right vibe for the company.

 

All of the lamps were created in house so we needed to find examples of lamps that we like and then create our own versions of what the final product would be.

Moodboards

I wanted the brand to feel like luxurious so we chose to go with contemporary to futuristic modern products that were minimal with clean lines to create the end result. I and my team pulled numerous inspirational examples of websites and applications to help inspire the direction that we went forward with. You can see in the final UI that some of the inspirational mood board examples truly inspired the final design.

Consumer Experience

This experience was created to highlight what it would be like as a consumer going through an application to find and purchase a modern luxurious lamp. It featured some of the latest fluent design elements and controls that were being released in time for Build 2018. It was also created in order to inspire future development and design within the Windows 10 ecosystem with the use of fluent.


My team went through numerous versions of Wireframes from long-form layouts to more contained ‘application style’ layouts. The final result was UX that was more contained like a typical application with some long-form elements as needed. 

 

The team also went through numerous rounds for the UI in defining how best find that best balance of natural environments with products, elements of products alone and the use of colors. Also looking at having a hero product and highlighting the diverse range of it from day tonight.

 INITIAL UX 1
 INITIAL UX 2
  INITIAL UX
 INITIAL UX 3
UI EXPLORATIONS
   FINAL UI

The final UI came out well-balance between rich environmental photography, beautifully expressive products and clean data rich typography into a well layout design.

 

The final sample consisted of three main areas, including a light section which allows you to customize the lights set up in your personal home and environment. A shop to be able to purchase additional products and a shopping experience to be able to purchase a product.

 

Because it was a sample, we wanted to illustrate the diverse use and range within an application like this, but also ensure that the design would inspire a clean modern take between imagery, labeling and design for other applications.

APPEARANCE

The app was featured in build 2018 and was part of two presentations and featured in the Keynote by Satya. The sample launch on GitHub for the community shortly after Build 2018 and is still being leveraged by developers all over the world.

Enterprise Experience

The VanArsdel Inventory experience showcased a Windows 10 application sample (using the Universal Windows Platform) focused on the Line of Business scenarios, showing how to use the latest Windows capabilities in Desktop applications. The sample highlighted creating and managing customer, orders and products. 

 

My team and I were diligent on ensuring that the enterprise application experience also mirrored what was on the consumer experience. Because of the short timeline worked on designing both a UX and the UI at the same time keeping in mind the importance of showing the right amount of information without creating overly dense UI. The final results turned out looking effortless, clean and easy to navigate. All things that you ideally want to achieve especially for data and text heavy applications.

     UX
   UI
PRESENTATION

The enterprise application was also shown and used in the many presentations for Build 2018 and was released to GitHub after Build 2018. It has helped numerous developers around the world as well as being a poster child to help illustrate enterprise examples for sales when working with potential customers.

PMing the Projects

In addition to leading the creative direction and managing my team I also was in charge of PMing the consumer application process. It involved working with numerous developers, 3-D artists, as well as feature PMs and other design managers across all of Microsoft. The timeline was extremely short and key objectives that need to be completed were extensive. 

I tried to maintain an agile process throughout the whole project and adjusted as needed based on the requirements and changes within scope based on the fluctuating modifications to Fluent/development and stakeholder feedback.

 

The VanArsdel App was also extremely unique and special because it was a sample that served two purposes. One, to illustrate the possibilities within the Windows 10 ecosystem. And two, to feature the up-and-coming fluent design controls that were being launched at the same time as the sample for Build 2018. The team needed to work succinctly with all fluent engineering and design teams as they were developing the fluent controls Which created an environment of constant change, rapid prototyping and fluid timelines.

© 2020 by LReed. All rights reserved.