Social Selling On
Facebook And Instagram
Social surfaces have transformed product discovery and selling. For digitally native brands, storytelling is selling. Surface interactions - likes, comments, sharing, direct messaging, events, payments - have unified marketing and sales pipelines for millions of startups and small businesses.
What does the future of social selling require? How can interactions on social surfaces become more meaningful and drive great impact? As a member of the Facebook Pages and Instagram Shopping teams, I designed new experiences for business owners eager to connect with an audience of 2 billion people.
What does the future of social selling require? How can interactions on social surfaces become more meaningful and drive great impact? As a member of the Facebook Pages and Instagram Shopping teams, I designed new experiences for business owners eager to connect with an audience of 2 billion people.
2017
Social / B2BB2C
iOS, Android, & Web, Product Design, Prototyping, Usability Testing
Designing For 90 Million
Facebook Pages is one of the oldest social surfaces facilitating interactions and creating real-world impact for small business owners and brands. Leading the FAQ tab redesign across iOS, Android, and Web, I sought to leverage interaction design, optimize functionality and ensure accessibility across devices.
With a focus on simplicity and legibility, I designed quick and meaningful interactions across two different persona types — page admins & page visitors.
With a focus on simplicity and legibility, I designed quick and meaningful interactions across two different persona types — page admins & page visitors.
Designing With Motivations In Mind
I mapped core motivations at the beginning of my design process. I found that page admins, who wear multiple hats across a business, have motivators around saving time. My hypothesis was that page admins would likely want to copy and paste their FAQ content from another source such as their website. For page visitors, the main motivators are around optimizing their time. I assumed that they would likely discover a page through Facebook search, then a quickly scan the content on a Facebook Page.
For page admins, I designed an interaction flow that limited the number of steps required for them to title, categorize, and quickly copy and paste FAQ content from another source into their Facebook page. For page visitors, I designed a surface and an interaction flow to increase FAQ tab discoverability and added a touch point to reach out to a business if a question was not listed in the FAQ. In order to confirm the FAQ’s overall helpfulness, I leveraged the use a visual facepile.
Designing across Android proved to be challenging due to dimension inconsistencies across devices. I leveraged design patterns across the Facebook visual library to create interaction flows. However, building a consistent experience across Samsung 8, Pixel and Nexus devices created complexity. To resolve this I focused on leveraging existing components in addition to focusing on interactions to communicate how to complete steps within the flow. A focus on legibility informed the type design of form fields for page admins to copy and paste content easily, this was accompanied by design thinking specific to how to edit, and manage a FAQ after its creation.
For page admins, I designed an interaction flow that limited the number of steps required for them to title, categorize, and quickly copy and paste FAQ content from another source into their Facebook page. For page visitors, I designed a surface and an interaction flow to increase FAQ tab discoverability and added a touch point to reach out to a business if a question was not listed in the FAQ. In order to confirm the FAQ’s overall helpfulness, I leveraged the use a visual facepile.
Designing across Android proved to be challenging due to dimension inconsistencies across devices. I leveraged design patterns across the Facebook visual library to create interaction flows. However, building a consistent experience across Samsung 8, Pixel and Nexus devices created complexity. To resolve this I focused on leveraging existing components in addition to focusing on interactions to communicate how to complete steps within the flow. A focus on legibility informed the type design of form fields for page admins to copy and paste content easily, this was accompanied by design thinking specific to how to edit, and manage a FAQ after its creation.
Page Admins — UX Research + Product Design Collaboration
I collaborated with a UX researcher to test the redesigned FAQ tab for performance and usability. I prototyped the flow and all interactions in Origami, where I was able to airdrop designs into a real device for testing and live interaction. I designed the flows for two different devices — the page admin flow was tested on Android, while the page visitor flow was tested on iOS.
I contributed to the development of the testing research script with questions that explored the creation of an FAQ tab, frequency of use, discoverability and FAQ interactions on the surface. Testing was structured to gain insight into whether the design was signaling positively (participants understood and valued the design) or negatively (participants found the design to be confusing or unnecessary).
The initial designs signaled well for usability and solved for the hypothesis I had developed around making it easy to quickly copy and paste content from other surfaces.
Based on feedback from testing participants, I refined the visual and interaction design of the flow, which included tapping on a FAQ card to reveal more text and removing the ability to categorize a FAQ with adding the question and the answer instead.
I contributed to the development of the testing research script with questions that explored the creation of an FAQ tab, frequency of use, discoverability and FAQ interactions on the surface. Testing was structured to gain insight into whether the design was signaling positively (participants understood and valued the design) or negatively (participants found the design to be confusing or unnecessary).
The initial designs signaled well for usability and solved for the hypothesis I had developed around making it easy to quickly copy and paste content from other surfaces.
Based on feedback from testing participants, I refined the visual and interaction design of the flow, which included tapping on a FAQ card to reveal more text and removing the ability to categorize a FAQ with adding the question and the answer instead.
Page Visitors — UX Research + Product Design Collaboration
Page visitors have a range of search options for content, including google search and yelp. The goal of the page visitor interaction flow was to make discoverability quick and convenient. I also had to address how to best use the horizontal space. Through the use of different card styles and simple interactions, I designed a flow that made it easy to scan content across a listed view of all FAQs. Based on participant feedback from testing I refined the design of the interaction flow to include Facebook Messenger as a means to contact a page admin if a questions remained unanswered.
Designing For Web
Facebook Web can have a different look and feel then the mobile app. The design language on Facebook Web is older and it’s larger horizontal view differentiates the use of the visual library. Solving for the same challenges that existed for page admins on mobile, required more innovative thinking. I was able to prototype various ways to organize the FAQ tab on web as well as ways to add and edit a question.
While the facepile can be leveraged on mobile, in this visual lockup it proved to be more distracting than useful. The removal of the facepile allowed for consistency in the right aligned view. This view leverages a vertical bar to ensure content will be legible and clear regardless of the length (short form vs. long form). This created less distractions and created a simplified clean interaction when a page visitor selected “yes” or “no” if a question was marked as helpful.
While the facepile can be leveraged on mobile, in this visual lockup it proved to be more distracting than useful. The removal of the facepile allowed for consistency in the right aligned view. This view leverages a vertical bar to ensure content will be legible and clear regardless of the length (short form vs. long form). This created less distractions and created a simplified clean interaction when a page visitor selected “yes” or “no” if a question was marked as helpful.
