2023–2024
Admin panel
redesign
redesign
Admin panel redesign
about
the product
the product
This admin panel was developed to manage the website of a business media outlet (online publication). The main users of the site are correspondents, editors, photo editors. With the help of this tool, articles are published, the main page of the site is filled, photo galleries are created, etc.
In recent years, the functionality of the admin panel has become outdated and no longer meets current needs, so a redesign was needed.
In recent years, the functionality of the admin panel has become outdated and no longer meets current needs, so a redesign was needed.
MY TASKS
IN A STARTUP
IN A STARTUP
- increased productivity
- speeding up basic actions (publishing news, etc.)
- improving usability
- more intuitive design
- new technical requirements
Stage 1. Audit
and research
and research
First of all, we run research to understand internal user workflows, identify usability issues, and prioritize design improvements based on real needs. Interviews and usability tests were conducted with various users of the admin panel (editors, newsmen, photo editors, etc.) to understand their work process, as well as to find out what problems they encounter when working with the current admin panel. Each interview was recorded on video, and there was also a text transcript.
We looked at the metrics that needed to be improved as a result of the redesign, which were primarily related to the speed of journalists' work in the admin panel and the number of steps that needed to be completed to achieve a goal.
We looked at the metrics that needed to be improved as a result of the redesign, which were primarily related to the speed of journalists' work in the admin panel and the number of steps that needed to be completed to achieve a goal.
Stage 1. Audit
and research
and research
First of all, we run research to understand internal user workflows, identify usability issues, and prioritize design improvements based on real needs. Interviews and usability tests were conducted with various users of the admin panel (editors, newsmen, photo editors, etc.) to understand their work process, as well as to find out what problems they encounter when working with the current admin panel. Each interview was recorded on video, and there was also a text transcript.
We looked at the metrics that needed to be improved as a result of the redesign, which were primarily related to the speed of journalists' work in the admin panel and the number of steps that needed to be completed to achieve a goal.
We looked at the metrics that needed to be improved as a result of the redesign, which were primarily related to the speed of journalists' work in the admin panel and the number of steps that needed to be completed to achieve a goal.
Based on the interviews, we identified the main scenarios for using the admin panel, created the current CJM for different roles, and identified redundant actions and unnecessary or non-automated steps (for example, request for photos from photo editors was not automated, this slows down the process of writing articles, to add a plot to the material, you need to go to an additional page, etc.)
We conducted benchmarking research studying the admin panels of other publications, information about which was publicly available.
Next, we made hypotheses about how we could speed up the process of working in the admin panel and reduce the number of steps in the main scenarios, and proceeded to the next stage.
stage 2.
UX design
and ui concept
UX design
and ui concept
We found that the scenarios for creating a regular news, breaking news, and creating a gallery were the most important. Accordingly, first of all it was necessary to develop a page for creating and editing text, a page for creating a gallery, and a page for listing documents. Then we drew wireframes.
We ran this project using the Agile methodology with two-week sprints and retros at the end of each sprint.
We ran this project using the Agile methodology with two-week sprints and retros at the end of each sprint.
stage 2.
UX design
and ui concept
UX design
and ui concept
We found that the scenarios for creating a regular news, breaking news, and creating a gallery were the most important. Accordingly, first of all it was necessary to develop a page for creating and editing text, a page for creating a gallery, and a page for listing documents. Then we drew wireframes.
We ran this project using the Agile methodology with two-week sprints and retros at the end of each sprint.
We ran this project using the Agile methodology with two-week sprints and retros at the end of each sprint.
First of all, we thought out the navigation system and designed its main elements — the side and top menu, which will be displayed on all pages of the admin panel
We worked through those scenarios where a lot of time was lost, and also added such functionality as autosave and convenient drag and drop.
During all the development we collaborated with front-end developers to ensure the implementation of designed interfaces.
During all the development we collaborated with front-end developers to ensure the implementation of designed interfaces.
We created low-fidelity wireframes and prototype. Then we conducted usability testing and incorporate feedback into iterative design improvements. After that, we completed high-fidelity mockups.
For example, we simplified the process of creating a gallery, which previously required visiting several pages and constantly scrolling to the desired element. Now all the photos that may be needed in a specific document are in the panel on the right (the build editor sends them there in advance). To create a gallery, the editor only needs to select all the necessary ones with checkboxes and drag them all into the content area.
We also worked out a convenient way to insert announcements into the body of the article, by embedding a search for materials right inside the admin panel. Thus, the editor will be able to insert announcements directly on this page, without switching to other pages.
As for the rightmost column, to determine the location of its components, I used the Card Sorting method(which was very fun and unusual for my fellow journalists):
Step 2:
Step 1:
The menu can stretch to half the screen
Step 4:
Step 3:
As a result, we decided that the sidebar would be made wider or narrower, and each user would be able to customize its additional parameters independently:
stage 3.
final UX tests
Throughout the design process, we showed the target audience what we were doing every two weeks and received their feedback. Once the page design was ready, we prepared clickable prototypes and started conducting UX tests to identify what else needed to be improved.
For example, we asked to complete one of the main flows — create and publish news:
stage 4.
development and testing
When some large element like a menu or a page was ready, we passed the layouts to the developers.
Design systems and component libraries based on Ant were also prepared.
At the end of each two-week sprint, we gave our feedback on the finished layout and functionality.
Design systems and component libraries based on Ant were also prepared.
At the end of each two-week sprint, we gave our feedback on the finished layout and functionality.
Results
- The first shortened version of the admin panel with basic functions and main pages has been developed
- The number of steps for basic flows has been reduced
- The design has become more intuitive
- A design system has been created