Microsoft Surface Duo DAX team had made UI component code library to support 3-rd party developer adapting their app to Surface Duo 2 and other foldable mobile hardware. More app optimized for foldable devices would help increase user satisfaction using Surface product and increase sales. With a goal of creating a design system for foldable devices, the project Surface Duo Design was kicked off.
We have User Researcher and Design Researcher in related team to consult research insight with. However, since the research resource was tight, we only get information on a survey Fluent Design System 2021. But since the team also hold 3-rd party app design workshop, I was able to talk to some of the designers there about the usability of Surface Duo Design Kit.
🙁 “It a bit hard to choose a specific component variant.” ——— product designer from VLC app
🤨 “Why isn’t placeholder icon and elements linked? I need to detach the instance most of the time to change something.” ——— comment via Figma community
Microsoft has a core design team working on Fluent Design System. In Fluent Design System Family, there is Fluent Android. Surface Duo Design Kit is based on Fluent Android and Surface Duo Platform Design Team’s local design interpretation. Surface Duo Design Kit Version 2.1 and previous inherited the component structure used in these two design systems. However, a handy tool for the internal designer team doesn’t mean a good design kit for the community.
We studied Polaris Design System and Ant Design System to see how these open source design system organize component structure. We also researched the latest Figma support on component feature.
Previously, we provided Surface Duo 2 variants for some of the components in the design kit. In this version, we completed all components with Surface Duo 2 variants and utilized Figma’s component set feature to help you quickly seek out the right model, orientation, theme, and type that you intended to use. I will take the App bar component as an example to showcase the added new variants and organization structure.
Imagine you are building your app for Surface Duo 2 and want to grab an app bar from our design kit. With the 2.1 version, when you searched for App bar in your Asset panel, there would be a list of 32 very similar app bar thumbnails that would appear with long wrapped names for each one of them to indicate their properties. This organization structure was certainly something we wanted to improve. In v2.2, we utilized Figma’s component set feature making this searching process more straightforward and efficient. Now when you search, there will be only one App bar thumbnail result showing on your Asset panel. And from there, you can choose from the property drop down menus to find what you need.
For example, I need a dark theme app bar for Surface Duo 2 in landscape mode. I would select Surface Duo 2 in Model dropdown; Dark in Mode dropdown; Single in Screen dropdown; and Landscape in Orientation dropdown. And there you go! The component is ready for you to fill in with your design contents.
There is also blog post in Microsoft Developer Blogs to further share this version update and provide further explanation towards.
After a recent reorg in Microsoft, the Developer and App Experience (DAX) team is now under Android Microsoft Platform Experience (AMPX) team. The team’s focus is now shifted. However, this is not a goodbye. With further development, we wish we can pick it up from our backlog and keep working on it!
