Redesigning CMS for Style Guide Documentation
Challenge:
Rocket is a UX agency that constantly designs aesthetically Design Systems for complex products. They needed a well-structured CMS where they could manage the elements of the style guide and all related documentation. These CMS also needed to be easy to use and provide access to different collaborators from the project.
Sprint: 2 Weeks • Team: 3
Problem:
Rocket choose to use a CMS called Apostrophe for Satcom project style guide documentation, but when they started using it, they encountered an unintuitive navigation and a lack of clean administration of the user responsibilities and permissions within the CMS.
Client: www.rocketcom.com
Solution:
Redesign the site navigation by establishing primary tasks
Define a roles hierarchy and permissions within the CMS
CMS with customizable documentation tools
Role:
With my UI background and with atomic design experience, it was easy to understand the needs of the content from a style guide. Also with my empathetic view for finding the user needs from the different background of a collaborative team. And finally as UX Research to find a creative and strategic solution considering the coding and budget constraints.
Research
User interviews
We conducted in-depth user interviews and observed how the users interacted with the CMS. These allow us to discover the user goal and the primary tasks of the different roles on the CMS.
We also conduct interviews with other agencies that launch successfully style guidelines and manage them constantly to understand their needs when updating and how they were solving these needs.
Competitive Analysis
We needed to understand how the other CMS were providing the solutions to our manage content, roles and tasks. We found that the main common roles across the CMS's were: a user that managed all other users, a user that published content, and a user that created and edited content.
Heuristic Evaluation
We conducted an heuristic evaluation, based on 10 User Interface Design Heuristics by Jakob Nielsen, to find usability problems from the current user interface CMS, to guide our efforts on the most critical problems in redesigning the CMS.
After the analysis we decided to focus our solution in:
Providing the user visual feedback after every action, to help him to be informed of the actual status of the content/versions.
Help users to accomplish their tasks in a flexible and efficient way
Make the ui more clear and consistent
And help users understand the actions behind the labels
Problem Statement
User Problem
Unintuitive navigation in the CMS. The flow to complete tasks is confusing and not efficient for the content.
Client Problem
The CMS lacks a user hierarchy. The absence of defined roles in the CMS amplifies the unclear user flows and responsibilities.
Solution Statement
Define responsibilities and permissions to each role and help them to accomplish specific tasks with an easy and usable navigation through the CMS.
Synthesize
We updated the sitemap to help the users accomplish their tasks and mapped the user flows for each different role.
Iterations
We sketch different versions and solutions of the ideal CMS.
Wireframes
Blueprints for prototype
MockUps
Concept 01
Concept 02
