Studio91, Design engineering newsletter, December 2021
Design Engineering newsletter header
Welcome to the new chapter of Design Engineering newsletter
Namaste, Here's wishing everyone a Happy new year. We hope you're recharged and ready to take on 2022! Give yourself a pat on the back for the relentless work in the midst of these troubling times. We continue to stand together as one, collaborating, ideating and delivering great experiences across various segments. In this edition of the DE newsletter, we have curated our major contributions in the last quarter.
Greeting top header

MSN Health

Health Hub


Health hub gives you a glimpse of all health and fitness verticals, Hub page consists of entry points for health conditions A to Z, ask professionals, fitness videos, fitness challenges and health articles. All new experiences built on peregrine framework with React. DE team has taken part of component creation and complete UX fit and finish along with accessibility and dark mode.
MSN Health Hub screens

Fitness Workouts Stripe


MSN fitness vertical experience has more than 1700 workouts and mindfulness sessions from popular brands and influencers. DE team has taken complete ownership for creating fitness L2 video page and has done fit and finish for the entire fitness experience.
 
 

Fitness Challenges Stripe


This experience has challenges from fitness trainers curated by experts. Complete UX fit and finish, scroll animations, accessibility and dark mode was done by DE team.

Health Conditions A-Z


STCI Health team have been working on migrating Bing medical conditions experience into MSN health hub. Bing SERP answers and MSN health hub serve as an entry point to Conditions experience. DE team owns complete conditions component creation along with entire page fit and finish, scroll animations, high contrast, dark mode, and accessibility.
Health Conditions A to Z screen

Health Ask Professionals


For the ask professionals experience we have implemented the commonly asked question and their answers using accordions to improve readability and engagement.
Health Ask professionals screen

Health Food A-Z


DE team has implemented smooth micro animations throughout the Food A-Z experience. We have used reusable chat components where user can track their food intake. we are also using rich content to bring delight to this module.
Health Food A to Z screen

Covid Tracker Mobile


With the surge of the 2nd wave the need of the hour was to bring in a mobile friendly covid tracker experience for our users to get live updates on the touch of their hands. Our Design engineers have worked extensively to build this experience in a short amount of time to bring in more traffic on Bing on the mobile front.
Covid tracker mobile screen
Health footer

Travel

Country and State Destination


As of now in travel we have destination page only for cities. So now we have introduced destination page for a particular state and country to give user more information when planning for a tour.
Country and State destination screen

Customized User Experience


After shipping the travel hub, we have added entry points from Windows Lock Screen, Windows Prong, Edge NTP and many more. We have created customized experiences like below as each entry point, users had different intentions like viewing the rich imagery of a destination, top destinations in a country etc. This user specific experience has increased more engagement even on the other features of the travel hub as well.
Travel Customized User Experience

Travel the world virtually


We have added an immersive experience for Bing Travel users to explore various destinations by powering a Panoramic view in all its glory. We have used performant and maintainable tools to achieve this differentiator experience! Customized controls, full screen view and easy access of various 360 images!
Travel world virtually screens

Travel Hub Mobile


Due to an entirely Design Engineering effort, Travel hub is now live on mobile devices in en-US region! Using responsive design, clever transformation of components while preserving existing desktop functionality, we released Travel Hub Mobile's first version in just over a month
travel hub mobile screens
After v1 was shipped, Travel Hub has quickly made its presence felt on mobile by leading to 8% of the traffic.

travel hub mobile metrics screens

Customized Itinerary


A new and improved trip planner that allows user to customize the itinerary has been added with the help of smart components with two-way data flow, smooth loading, and a delightful experience
Customized Itinerary screen

Travel Hub for all


We continue our effort to keep Travel Hub accessible for all! enabling keyboard navigation, support for screen reader, high contrast mode and other essential accessibility compliant requirements.
Travel Hub for all screen
Travel footer

MSB Admin Portal

DE team have complete ownership of MSB admin portal frontend development. We created and ran multiple flights on the configurations page to handle multiple user scenarios. Two of the major efforts were on introducing the ability to switch between school and work service plans and educating our users who wished to opt out of Microsoft search in Bing on our privacy policies.

The entire effort was done in collaboration with Bellevue development team, to power the configurations page with a config driven component load. This effort has reduced the effective development time for any future settings by half.
MSN Admin Portal
Design engineering team header
Design engineering team, Amit, Suri, Srishti, Chandra, Kiran, Mokshith. Thank you.