top of page
TopNav-vanarsdel

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.

VanArsdel_Logo.jpg

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.

vanarsdel_hero.png

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.

Contoso_Samples_Page_06.jpg
Contoso_Samples_Page_04.jpg

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.

Van DeskLamps Consumer ROOM B.png
Van DeskLamps Shop Category Page.png
Van DeskLamps Consumer-2.png

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.

Contoso_Samples_Page_09.jpg
Contoso_Samples_Page_13.jpg
Contoso_Samples_Page_11.jpg

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.

VanArsdel_lightApp-lg.jpg
 INITIAL UX 1
NStar_concept1-01.jpg
NStar_concept1-02.jpg
NStar_concept1-07.jpg
 INITIAL UX 2
NStar_concept2-08.jpg
NStar_concept2-09.jpg
NStar_concept2-10.jpg
NStar_concept2-11.jpg
NStar_concept2-12.jpg
  INITIAL UX
NStar_concept1-03.jpg
NStar_concept1-06.jpg
NStar_concept1-05.jpg
 INITIAL UX 3
wf_PD_0.png
UI EXPLORATIONS
Shop0.png
Shop1.png
Shop3.png
Shop3.png
Shop4.png
Shop4.png
   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.

Shop.jpg
MyLights.jpg
Shop-category.jpg
PDP-Customizer.jpg
design_Buy2.png
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.

satya-va-consumer.png
paul-va-consumer_1.png
paul-va-consumer_2.png
VanArsdel_Logo.jpg

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.

​

Vanarsdel_Hero.jpg
     UX
wf_dashboard.png
wf_orders.png
wf_ordersSelected.png
wf_products.png
wf_add-product.png
wf_customers.png
   UI
Dashboard_1.1_2x.jpg
Customers_1.2_2x.jpg
Orders_1.2.3_2x.jpg
Products_1.1.1_2x.jpg
Orders_1.2.3_2x.jpg
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.

build_va-enterprise1.png
build_tim_va-enterprise2.png
build_tim_va-enterprise1.png
bottom-padding.png

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.

eShop_Build_ShowcaseSample-ResourceOverv
eShop_Build_ShowcaseSampleTimeline_Page_
Build2018_ShowcaseSampleApps-Timeline_Pa
eShop_Build_ShowcaseSampleTimeline_Page_
bottom of page