Our team at Internet Brands audited and cleaned up features on the ‘Settings’ pages of our Content Management System.
Performed competitive analysis.
Prototyped designs.
Led user testing.
Internet Brands builds websites for medical businesses using its own content management system, similar to a Wordpress or Squarespace.
Below is an example of a website to give an idea of the end product. This website in particular is using a theme I designed (typography, color, layout).
On the website, the businesses can post informational blogs (shown below).
Blog Example
I met with the product managers to go over a few changes we wanted to make on the Settings pages and I worked with them to mock up the designs.
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
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
I reorganized information on the 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.
My process is shown below, starting with the Information Architecture.
After the initial meeting with our Product Managers, I worked on reorganizing information on the 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.
I researched how other blog sites set up interactions to Save as Draft, Publish, and Schedule and eventually landed on an ux pattern that Instagram users use to manage their posts.
In that interaction, shown in the images below, users would click on a carrot next to the ‘Publish’ button and a menu would show on top (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.1
Instagram example pt.2
I tried to implement the carrot and expanded menu into my design and the video below shows the flow of the design. In the design, I had a separate ‘Save as Draft’ button and placed a ‘Publish’ button with a carrot next to it.
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
I revised a few similar pages, set up prototypes and put together a script for a user testing session. We met on Google Meet 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.
Schedule Post Interaction v1
I went into another round of revisions for the interaction. I still wanted the button placements on the top right of the screen and my primary goal was making sure users could just complete all three actions easily - Save as Draft, Publish, and Schedule.
I saw that Wordpress used a carrot dropdown within their Publish button instead of having it separated and I tried to implement this into my new design.
Wordpress Carrot Dropdown Example
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
The slightly unusual part about this interaction is that the page no longer has an outright publish button. However, I user tested coworkers in my department just 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.
This is the current proposed solution - we’ll eventually user test this and a few other changes and iterate until we get to a good point to hand it off.
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.
