Designed reusable components that were used on multiple feature areas such as social feed & team selection for different product offerings. These offerings included Enterprise, Consumer and Education.
Social Feed, Accessibility AA Compliance, Design System
Framework Design Lead
iOS / Android
Enterprise employees & consumer
While working at Microsoft, I develop UX models and components using large-scale telemetry and qualitative user research. One of my projects involved creating the Feed Card, which is a component designed to display written content and media attachments from social feed posts.
To ensure its effectiveness, we conducted multiple A/B tests to understand what elements needed to be included in each card. Although there were basic functional requirements for the Feed Card to be useful, we needed to consider specific factors such as triggers that would prompt users to view and respond to posts or individuals they know.
Examples of interactive elements tested were: Emoji reactions, Share button, Flag reporting, pin and bookmark. As improving WAU was the goal in this card, Emoji reactions were prioritized as they yielded the highest engagement from having an explicit button. Other elements which were lower but performed less frequently were moved to an overflow to continue maintaining good relative MAU engagement.
Examples of non-interactive consumption elements were: ‘Important’ markers, ‘Mention’ indicators and posts from self. In all of these elements, I used custom color and shapes to differentiate between each type of non-interactive data.
Once all of these elements were in place, I created an accessibility spec for them and worked with engineers to implement them for iOS / Android. I also planned the configuration of this component to be used for different product SKUs relative to their available backend services.
In this content card component, I worked with feature designers early in the ideation process to understand and define it's purpose. The main goals of this cad were as follows:
1. Primary action item on page
2. Show media thumbnail for content clarity / engagement
3. Flexible to accomodate short / long names of teams and events
4. Provide additional support for descriptions, banners, and tags
With these requirements, I collaborated with PMs and Engineers to create the component architecture in a way that would scale for simple and full feature use.
After each component was live in internal production builds, I continued to meet with stakeholders to stress test each component in brown bag sessions to report any bugs or design inconsistencies.
While this component was built to scale for a full set of features, not all backend services were available. As I had already planned this with PMs and Engineers, the component successfully helped each product SKUs without creating any future dependencies or limitations.