Challenge
The multiple design requests were “patches” that eventually led to fundamental usability issues. There are many features on the platform that cluttered the interface. As a result, I initiated an audit and heuristic review of the platform.
Audit and Heuristic Review
Difficult to Navigate:
• Too many clicks to access courses and lessons, and it takes users too long to find relevant content. (see image below)
• Switch workspace was time-consuming and unclear to new users what workspace they were currently in.
Difficult to Navigate: Too many clicks to access courses and lessons, and it takes users too long to find relevant content.
Process
The process took involved several cycles of meetings.
1. Share the audit with stakeholders and align with areas of confusion.
2. Working with a learning designer and product manager to come up with the correct taxonomy and information architecture.
3. Create versions of improvements and align with stakeholders.
4. Validate with current and new users.
5. Update design, create specs, and socialize with the Dev team to create an MVP roadmap.
Seeking Alignment for product design intiative.
Confidence addressing the essential usability design will in terms address the request form product. I conducted a workshop to seek business, user, and design overlaps.
After finding the overlap, I advocated on the table the secondary and tertiary priorities; and led us to the immediate need: Product Efficiency. Which will improve most users’ navigation experience and hence improve product efficiency.
Diagraming overlaps: graphing out the commonalities among business, user, and heuristic design review produces the essential product design initiative.
2 versions for persona needs
I created 2 versions based on user based on the initial interview and requirements.
Version 1: Start with the workspace dropdown, which fulfills users' needs to determine which workspace they need to go to. This version keeps the left side clean and emphasizes content producers' need to work on 1-2 workspaces at any given time.
Version 2: Reveals all the features and workspaces available to the user. Showing the workspaces at one glance saves extra clicks and deciding which workspace to go in. I also keep giving a collapsable function for the workspace so the sidebar won't be overly cluttered.
A/B Testing: 2 versions that pronounce workspace and 'recent' feature differently based on persona needs.
A/B Testing
I conducted A/B testing among 5 internal lead producers, as well as 5 academic institutional designers (for fresh eyes and usability). There was a higher preference towards version 2 among current and new users.
The current Bronte users find Recent and Shared With Me helpful. However, feel indifferent about the expanded workspace.
Version 1 workspace dropdown was intuitive, however, 30% of users thought the recent, favorite section was only showing what's in the selected workspace. Version 2 collapsed workspace design was not noticeable to 15% of users; Version 2 drop-down labels were also confusing to most users. In fact, some users expressed they don't have many workspaces and do not see the need to collapse the workspace list.
Iterated Wireframe Based on Finding
With the test findings, collectively, the version 2 layout was more intuitive and satisfied the needs of most users. I removed the label and the collapsable feature and showed the workspaces. The feedback was very well received by stakeholders and the product team. One feedback from the content producer was that the wireframe was that the workspace labels seem too similar to the top section features; so a visual differentiator is required.
Iteration: Moving forward with version 2 and improve the design based on user findings.
Final design
I took the design and socialized with the product owner and director. Create quick-access sections
The recent section allowed users to return to previously accessed content.
Favorite section & favorite ability provides content author and QA who oversee multiple projects.
Shared with me section & sharing access help users stay on top of the new projects that delegates to them, this provides business value for the lack of a notification feature.
Prototype
Final design: Final approved design with spec (spacing, states) and explanations on responsive design if needed.
Results
I took the design and socialized with the product owner and director. Create quick-access sections
The recent section allowed users to return to previously accessed content.
Favorite section & favorite ability provides content author and QA who oversee multiple projects.
Shared with me section & sharing access help users stay on top of the new projects that delegates to them, this provides business value for the lack of a notification feature.
We shared the newly designed workspace with 3 Admins, 5 content producer leads, and 15 content producers.
3/3 Admins and 4/5 thought the new helped them quickly navigate between workspaces. 14/15 content producers show positive feedback on the Recent, Favorites features. Asking the test participants to locate a course in the old environment, then asking users to try out the new environment, we see 92% of users were able to locate a course quickly, and 30% increase in time efficiency in locating and opening the course with ease.
Sarah Peterson, Content Director
"It's much more easier to go between each discipline and projects now"
Sree Achatz, Content producer
"The recent feature in side bar helped me quickly get back to my content."