Layout Optimisation

Class Tag, USA

2022

Web Platform
Research
Personas
Card Sorting
Heuristic Analysis
A/B Testing

Situation

The initial research shows that ~10% of announcements were created with additional functionality (e.g. schedule, broadcast, or audience settings).

Overview

As the product designer, I closely collaborate with the product manager and development team to create the initial version and iterate it to develop a functional prototype for deploying to the staging.

Task / Problem space

Simplifying the main interface
Declutter layouts
Increase flow success rate
Decrease cognitive load

Action 1

I deep dived into current flow and project’s goals. After a discussion with the team, I understood which areas can be changed and which should remain the same. In addition to this, we organised a closed card-sorting session that helped identify some information architecture issues.

Action 2

I followed the design heuristics to simplify the initial screen and optimised primary cases to design a layout that allows teachers to focus on creating content.

Action 3

For secondary cases I decided to hide settings and addressing functionality within a modality. I had hypothesis that this action help teachers focus more on the primary task, but also they give access to the additional features when they need them.

Action 4

I slightly changed attached file icons for phones and tablets and keep an eye on elements behaviour and resizing.

Results

I finalised mockups for teacher’s flow, prepared UI states for corner cases, and added all new components into company design library and Storybook.

Conclusion

In A/B testing stage user tests show mostly positive results. We dicided to deploy most crutial changes first, and additional after some back-end optimisation.