Higher Logic
Drag & drop page editor
About the Project
Team: 1 Project Manager, 3 UX Designers
My Role: Lead UX Designer
Project Duration: 4 Months
Tools: Figma
Problem: The Higher Logic Community platform gives clients the ability to create micro-sites for their associations and act as a hub for their members to gather online. The problem was the editor the super admins used to create and edit their community pages. Both excruciatingly slow and archaic in a UI sense, an overhaul was needed to help alleviate frustrations.
Solution Summary: A drag-and-drop editor was designed to accommodate all of the original page editor functions. The UI was modernized using current standards, settings were simplified and the overall time required to build a new page was greatly reduced.
Screens from the old editor
Research
Over the course of the first two weeks, the team conducted interviews with 8 of our Super Users (clients that were the most active and engaged). The main goal was to identify pain points with the current user interface and hopeful improvements that I might make to the tool.
The interviewees fell into one of three buckets:
The editor needs to be simplified.
I only ever use HTML and CSS to build the pages. Everything else is unnecessary.
Don't change anything. I am too busy to learn a new interface.
This meant that for our requirements I needed to keep the interface streamlined and easy to use. Whether a page was being edited by a long-time or new user, the core solution was an increase in productivity.
Additionally, I studied similar editors and following their customer reviews, online forums, and industry publications to gain insights into users' experiences and identify any common pain points or areas of praise. Through this comprehensive research approach, I gained valuable knowledge about the strengths and weaknesses of other editors, enabling me to make informed decisions and improvements in my own project.
Samples from the wireframe iterations
IDEATION
In order to understand how I arrived at our new drag-and-drop editor, you need a little context. Prior to the start of this project, Higher Logic acquired the company that I was working for at the time, Informz. This acquisition was ostensibly to be able to add Marketing Automation to Higher Logic's product offering. The heads of Higher Logic's product team liked the email campaign editor that I had designed and wanted to find a way to incorporate that into the community platform.
With that in mind, I began to brainstorm how to rework the email editor to fit the needs of the community page editor users. This would ultimately give me a base, albeit stripped down, to work on the redesign. From the old community page editor, I identified which elements needed to be included:
Layout Rows: There were 32 static page layouts that users would have to choose from in the old editor.
Content: Hyperlinks, Javascript, Syndicated Content, File Uploads, HTML (a WYSIWYG editor that also allows for HTML/CSS code to be used.
Widgets: These included a whole host of custom content types that could be added to a page and configured such as graphs, blog posts, tabs, etc.
Properties: This needed to be dynamic as there were settings for both the page and content-specific elements.
Site Navigation: Quick access to edit the community navigation and the pages within the microsite.
Flexibility: The whole interaction had to be wrapped into a modal experience. While this was not ideal, this was the only way to ensure that the page editor could be surfaced from various locations in the Higher Logic product without any glitches.
Final UI Designs
Takeaways
Iterative design coupled with consistent team feedback is the best way to take a step back during a project to see the overall impact you are designing for the end-user. Even scrapped ideas can often lend credence to the path you take with a product.
There is also room for improvement with regards to different panels being able to scroll independently. Perhaps restricting the "Build" panel to only open one content category at a time would have eliminated the need to have a secondary scrollable area. I would have liked to work on this problem further.
Lastly, there were too many buttons on the bottom right of the modal. Visually they are distracting at best. Having a button with secondary functions accessed from a dropdown would have helped, but the concern was hiding those functions from users not expecting them to be hidden.
8
Client Interviews
16
Project Iterations
34
Cups of Coffee
2+
Future Changes