Library Page
About this case study
This case study goes over the update we did to the Library page, where users manage their quizzes.
About Socrative
Socrative has a long history of being one of the most simplest, but powerful freemium quizzing apps that teachers trust. Socrative was founded in 2010 and acquired by Showbie in 2018. I joined the team in 2020 and have been gradually replacing legacy UI with modernized design.
Responsibilities
User interviews
Product Research
User flow
Define problem
Problems to solve
Actions are not easily discoverable and don’t follow WCAG (Web Content Accessibility Guidelines).
Navigating is complicated because of the multiple ways to navigate.
The UI isn’t aligned to our new brand and fails to meet standard interface usability practices.
Collaboration is cumbersome because multiple users can’t work on the same quiz.
Research
Unmoderated user interviews
Unmoderated user interviews we also conducted to observe navigation behaviour. We got users to share their screen to show their Socrative library. Then we asked questions that prompt the user to show aspects of their library’s organization and structure.
The research found that the sidebar folder navigation was causing interruptions in the experience because it was an additional and unnecessary way to navigate. It wasn’t necessary to have so many tools for navigating when users only ever have one to three levels of folders.
User data collected from the unmoderated user interviews
Moderated user interviews
Moderated user interviews were chosen to understand the nuance of user sharing needs. The user interviews discovered various use cases (personas).
Collaborator
I want a Share a quiz, so we can work on it together.
Collector
I want to collect quiz content, so I can edit them to fit my own needs and/or get started quickly.
Contributor
I want to contribute quizzes, so I can provide content that onboards new users and helps them create quizzes at a specific education standard.
Design discovery research
File management is not a unique experience, so we made sure to do exhaustive research on products with similar file management systems.
We drew inspiration from various products, including Google Drive, Dropbox, Loom, Typeform, Miro, Notion, Spotify, and IBM's Carbon Design System.
Our team was confident that by adopting common patterns and gradually releasing the new UI, we would be able to assess whether our customers would successfully adopt the new Library UI.
Retrospective thought: Users had difficulty finding the Search action. They were looking for an input, but we hid search behind a search icon button. Conducting tasks in a user interview would have discovered whether users were able to find Search successfully.
Here’s an example of notes written on top from Miro’s Deleted files.
User Flows
Flows were often shown using user flow diagrams or real designs like the flow you see here for Importing a Quiz.
Design Discovery
Contact me to talk about the discover of the many screens that include creating shared libraries, inviting members, and quiz limit paywalls that all needed to be thought through for a successful rebuild of our library.
However, I will focus on the quiz listing page to keep this case study concise. Below, you will find before and after images illustrating UX problems and solutions we came up with.
Before: Bulk actions
Bulk actions are visible and selectable even when no item is selected. Copy, Download, and Share repeats on each table row. These actions don’t appear in the bulk actions where you expect to see them.
After: Bulk actions
Bulk actions only reveal when items are selected. The bulk actions conserve space by replacing the table header when they appear. Bulk actions responsive design will slowly move actions into a “...” dropdown menu as the screen becomes smaller.
Before: Folders
Navigating folders was complicated because you can navigate using the item tree in the sidebar or the rows in the main column. The sidebar depicts a "Quizzes" tab as a folder that cannot be renamed and the "Trash" page didn’t belong under the “Folders” heading.
After: Folders
The “Quizzes” folder is appropriately turned into a tab, and “Trash” is placed beside it. Research discovered users only create 1-3 layers of folders that are easy to navigate with the table.
Before: Sharing
Sharing a quiz with another user was limited. You could use the share button above send a copy to a user, but there wasn’t a way for both users to edit the same quiz together.
After: Sharing
The item tree of folders was replaced with a sidebar of libraries. User now have the ability to create libraries and invite others as members to collaborate on content. Administrators can utilize libraries to onboard new users into a school curriculum or meet specific educational standards. Users can still share a copy of a quiz by hovering over a row to reveal the Share action.
Before: Rename folders
It wasn’t clear that the pencil icon was a selectable action.
After: Rename folders
Renaming a folder can be found in the “…” menu or by selecting the quick action that appears on hover.
Before: Item actions
The three icon buttons take up valuable horizontal space and are not easily understood because the button labels only appear in the table header.
After: Item actions
The number of table columns are cut in half now that Copy, Download, and Share appear overtop the row on hover and are nested within the “…” menu. The “...” button include Launch, Share, Duplicate, Copy to, Move to, Download, and Delete.
Before: Date modified
The date format can be difficult to interpret, making it unclear which number represents the day, month, and year.
After: Date modified
Dates are presented in a format that is easier to compare and determine when it was last modified.
Before: Creating folders
Creating folders is not in an obvious location and could be consolidated into the “Add Quiz” action so all actions that add to your library can be found in one location.
After: Creating folders
Selecting “Add” provides all possible ways to add to your library.
Before: Iconography
The left alignment of the table names are broken up by the indentation created by the folder icon.
After: Iconography
A clean left alignment was achieved creating a quiz icon to match the Folder icon. The file icons and select box share the same column; hovering over a row replaces the file icon with the select box.
Responsive
Socrative is built for desktop and mobile. A good handoff is often done in a meet, with clear and detailed documentation outlining functionality and flows.
Above is a handoff example of the responsive library page.
Results
New Library UI
Majority of users welcomed the new UI, and we collected meaningful feedback on the discoverability of search.
User feedback showed us the Search action is hard to find because the magnifying glass icon button is being overlooked. Users were expecting to find a search input, but because it took the shape of a magnifying glass, their eyes would completely miss it.
Shared Library
Shared Libraries created 1360 conversions totalling a revenue of $170,700 Three months after release.
Shared Libraries has been growing in usage at an average growth of 20.97% per month.
Shared Libraries users Activated 3x more than non-Shared Library users.
10.1% of Pro Users have used Shared Libraries.
We predicted new users would become onboarded to retrieve content from current customer’s Shared Libraries, but user acquisition only improved by 0.13% in the first month.
Contact me to see more of the process and progress of Socrative.