What is Pages?
Pages is SERMO's first foray into opening up the social network for clients. Pages allows clients to create their own page on the network where they can publish content into our membership service and engage in conversations with our members. Pages are free and are controlled off-site on our client portal. The SERMO Client Portal also has survey tools available to paying clients.
I was the lead designer on all enhancements for Pages except for the inclusion of ISI, where I acted as design director.
Addition of patient Cases
When I first joined SERMO, the product had just launched as an MVP. My second project I started working on was the first of the key enhancements to Pages, the addition of Patient Cases. Patient Cases are a special type on SERMO where doctors can contribute their opinions and experiences to help solve hard to solve cases. My goal was to include Patient Cases in the user workflow that would have a minimal impact and could be completed quickly. I opted to update the "create post" link into a larger text to draw more attention and to create a forking option for users to either create a standard post, current functionality, and the new Patient Case.
Addition of a Rich Text Editor
As we were finishing up our work on Patient Cases, it became clear we needed to introduce Rich Text editing features. Users wanted to include links, images, and change specifics of their post that was currently out of their control. I oversaw the inclusion of the Rich Text Editor and updated certain features within the text editor to help make them more user friendly to users.
Addition of Polls
After the completion of the RTE, the team was asked to include polls. Polls are one of the most popular features of the SERMO social network, providing lurking users a low touch way to interact with post content. My task was to research and understand how our Polls API currently works and the limitations we would have implementing it on another platform. After conducting my research I design a solution using similar UI components to how a polls is constructed on the social network.
ENHANCEMENT of Polls and Compliance updates
After the success of single question polls, it became clear we needed to introduce multi-question polls. I create a solution that fell into a standard F-shape pattern design, giving the user the ability to add additional poll questions as soon as they finish writing their first question. I also designed a way for users to review their questions in a similar manner to how users would answer the poll questions. At the same time we also began to onboard our Pharmaceutical clients onto the platform. We became more aware of Pharma regulations on content and needed to start introducing Compliance regulations into the platform. our first regular was post display. We needed to give Pharma companies a choice between displaying the full post content, teaser content, or no content at all and just the post title. This was necessary so that companies could be confident that they were not making a drug "claim" without the followup fair use information getting cut off.
Addition of Important Safety Information
Following the first compliance update it became clear that we also needed to add in product ISI, Important Safety Information. ISI, or black box warnings, is the disclaimer information for drugs that is normally printed on the label or spoken at the end of an advertisement. Since we never know where the drug is going to be mentioned, we needed to introduce a design that allowed for the ISI to be seen at any time without overwhelming the page. This is the only enhancement that I oversaw design instead of doing the design myself.
Addition of Pinned posts
After the addition of ISI, we wanted a way to make sure that companies had a way that they could create a post and keep it at the top of their page to make sure it kept getting views, even if it wasn't the most recent post. i designed a solution that allowed scaleability to allow users to quickly make decisions to pin or unpin a post. I also wanted to design a solution that did not back us into a corner of only allowing a single post to be pinned. I used both a badge as well as color to help identify to users when a post is pinned.
The current UI
When I joined SERMO, my first task was to map out the Pages site map as well as do a UX audit on the platform. The experience was severely lacking in many forms. The breadcrumbs only allowed the user to take 1 step back, so if a user was 4 levels deep into the product, they would have to step back 3 separate times to get to their home page. The messaging was not clear if the page was published or in draft and it was also not clear and confusing because of similar taxonomy if content was published or in draft. The ability to edit page content was only present when the page wasn't live and the action buttons were incredibly confusing. Finally, the responsive design was an afterthought and was almost unusable on mobile.
I took inspiration from Facebook pages, which the concept was modeled after, and used their design template for how the page layout should be handled. I attempted to reskin as much as possible without the need to add additional functionality. I extended the breadcrumbs and create a mobile friendly version. I switched the publish/unpublish page buttons into status indicators instead of actions and used a dropdown to explain the effect of the action to instill confidence in the user that no data will be lost by unpublishing a page. Also I tabbed out the view so the drafts would not be lost in the mingle of all the published posts. I also laid the ground work to eventually bring the page settings out of a hidden, edit only flag. Finally i updated the post feed to be more visually friendly and to feel more dynamic.