Workspace:
Workspace is a place for personnalisation and collaboration. It allows customers to create dashboards to visualize metrics related to their websites. A dashboard is composed of widgets which represent different visualization types (single numeric value, line chart or page visualizations) and widgets are added to a dashboard using a drag and drop system.
Workspace is a place for personnalisation and collaboration. It allows customers to create dashboards to visualize metrics related to their websites. A dashboard is composed of widgets which represent different visualization types (single numeric value, line chart or page visualizations) and widgets are added to a dashboard using a drag and drop system.
User's needs:
Revamp of the full feature.
First step : The drag and drop system was making it hard for customers to place a widget at a very specific position or to relocate a widget
Revamp of the full feature.
First step : The drag and drop system was making it hard for customers to place a widget at a very specific position or to relocate a widget
Methodologies used:
- Double diamond
- (A lot of) workshops with devs
- OOUX
- (A lot of) workshops with devs
- OOUX
Design steps:
1 - User interviews to define the pain
2 - workshops with devs to define the best solution
3 - First drafts and user testing with all teams
4 - Iterations
5 - User tests with clients
6 - QA paring with devs
3 - First drafts and user testing with all teams
4 - Iterations
5 - User tests with clients
6 - QA paring with devs
Feature improvement solution:
- Replace the drag and drop system with a swap and move system
A lot of ideas was generated, here is a small sample
What was tested with users on a Figma prototype:
- Would an edit mode be acceptable and understandable for users ?
- Would an edit mode be acceptable and understandable for users ?
- Create a new widget
- Create a new group of widgets
- Move widgets on the grid
- Create a new group of widgets
- Move widgets on the grid
- Resize widgets
Then the brain teaser started:
How to create a logic, logical to almost everyone and we found many edge cases
How to create a logic, logical to almost everyone and we found many edge cases
Prototype:
Developers created a prototype so we could test, discuss and iterate easily, we opened a slack channel to discuss issues and bugs and to challenge our decisions
Developers created a prototype so we could test, discuss and iterate easily, we opened a slack channel to discuss issues and bugs and to challenge our decisions
User tests:
We did another batch of user test to finalise the ideas and then developed the feature on the existing UI design
We did another batch of user test to finalise the ideas and then developed the feature on the existing UI design
What started as a revamp became a lightweight generic grid library.
All this would not have been possible without a tight collaboration of all the actors within the team. All players contributed to a continuous improvement loop.
The resulting product offers a much-improved user experience compared to what we had before, and the customer feedback is very positive.
The resulting product offers a much-improved user experience compared to what we had before, and the customer feedback is very positive.
