Blog Settings - Internet Brands
WORK
/
INTERNET BRANDS - BLOG SETTINGS
Internet Brands builds websites for medical businesses using its own content management system. In that system is an interface to manage Blog Settings. I designed, user-tested, and iterated on the Settings page to provide a smooth flow to perform necessary actions.
The Challenge
We needed an interface where users could publish, schedule, or save a blog post.
Our Approach
I reorganized information on the Settings page and mocked up prototypes for different interactions. Following the redesign, we held a user testing session where I walked users through actions from three different prototypes including this Blog Settings page. After receiving feedback, we gathered the information to create another iteration of the design.
INFORMATION ARCHITECTURE
After the initial meeting with our Product Managers, I worked on reorganizing information on the page, including the 'Save as Draft' and 'Publish' interactions.
Fixed Left Menu Bar
One of the main changes they wanted to make for the Settings pages was to have a fixed blue bar to the left where users could navigate to different pages in the Settings easily. Below is a screenshot that shows the fixed blue bar to the left.
Blog Settings Page with Fixed Left Menu Bar
Blog Post Page
In the current Blog Settings page, there was a drawer that listed specific blog settings to the left (highlighted in blue in the image below) so we wanted to find a different place for that information.
Current Blog Settings Page
These are some of the changes we made.
In this case study, I’m focusing on the ‘Save as Draft’ and ‘Publish’ interaction shown at the top right of the image below.
Changes to the Blog Settings Page
RESEARCH
I researched how other blog sites set up interactions to Save as Draft, Publish, and Schedule.
Instagram Flow
I checked out the UX pattern that Instagram users used to manage their posts. For Instagram, users would click on a carrot next to the ‘Publish’ button and a menu would show on top (Instagram example pt.1).
Instagram example pt.1
When a user clicks on the ‘Schedule’ row, the schedule option would expand to show the date and time and the button would also change to ‘Schedule’ (Instagram example pt.2).
Instagram example pt.2
PROTOTYPE V1
I tried to implement the carrot and expanded menu into my design.  In the design, I had a separate ‘Save as Draft’ button and placed a ‘Publish’ button with a carrot next to it.  
Publishing Interaction v1
In the video below, when the user clicks on the carrot, the menu drops down and they could select the ‘Schedule’ option. The schedule section expands and the button changes from ‘Publish’ to ‘Schedule’.
Publishing Interaction v1
USER TESTING
I revised a few similar pages, set up prototypes and put together a script for a user testing session.
Google Meet Session
We had a Google Meet session and I ran three users separately through a few page redesigns. Here is a screenshot of us going through one of the flows.
Google Meet Session
When I asked users to see how they would schedule a post, most people found the carrot next to the ‘Publish’ button. They would click on it and then click on the schedule option which prompted the button to change to ‘Schedule’. But some users got stuck here.  My intention was for users to click on the ‘Schedule’ button to complete the action which would schedule the post and bring them to the next screen showing all blog posts but it was taking users time to figure out those steps.
PROTOTYPE V2
I went into another round of revisions for the interaction. My primary goal was making sure users could just complete all three actions easily - Save as Draft, Publish, and Schedule.
Wordpress Carrot Dropdown
I saw that Wordpress used a carrot dropdown within their Publish button instead of having it separated. I tried to implement this into my new design.
Wordpress Carrot Dropdown Example
Publishing Interaction v2
Below is my revised design where users could see a dropdown for ‘Publishing Options’. Once they click on the ‘Publishing Options’, the dropdown would expand and the user would select whether they would like to ‘Publish’ or Schedule’ and they would see a confirmation button right below it.
Publishing Interaction v2
I did one more round of user testing to check if this would be a possible solution and there was far less confusion on what to click to publish and schedule a post.
Conclusion
Collaborating with the product managers and user testing participants to mock up and prototype the designs showed me the importance of presenting specific designs and getting feedback on the interactions.