A look behind the scenes of Thinkific Platform — at the product design, specs and style-guides.
Thinkific brings beautifully simple course creation, whether you are educating 10 students or 10 million, feel confident that you’ve got the easiest technology and the best support in the business.
Here is how I shaped the product and its interface into a clean, engaging and easy to use experience through a customer driven approach, integrating user-testing and research at every stage.
Challenges
- Could we reduce the effort of on-boarding new users?
- How do we package the release in meaningful increments?
- How often do we update the pattern library?
- Should we accept user feedback?
- What do we name the release?
- Did we achieve what we set out to do?
Impact
Increased success of existing users of Thinkific and improved on-boarding significantly.
Role
- Lead Product Designer
- User experience (UX)
- Creative director
Team
- 1 Project Manager
- 1 User Researcher
- 12 Engineers
I always start with pencil and a sketchbook
Writing and sketching really helps me to focus, and ideas flow from there. To help un-clutter the mind and focus on what’s important, I simply write words associated with the product, or list what it needs to do.
Navigation
Having so many features, navigating through the product was one of the major fallbacks and potential opportunities to lessen cognitive load on the customer and improve on-boarding.
We used quantitative and qualitative research to better understand our customers needs. After a few card-sorts, prototypes and user tests, we were confidently able to drastically simplify the navigation, without sacrificing functionality. Progressively revealing sub-items, resulted in reduced cognitive load, while giving quick access to all features from anywhere in the app.
Data-tables
Some user research sessions later, we confirmed our hypothesis: users weren’t able to make decisions with their data without having to export all data and using external tools to analyze. This was not only causing headache for out customers, but having so many accounts exporting all of their data daily was taking a toll on our servers. We had all this data, but no way for our customer to get at it without exporting everything and analyzing it in external tools. Improving the way we filter and display data was first task on the list.
Bulk actions were introduced as a way to speed up repetitive task as we saw people spending hours on FullStory trying to modify hudreds of records, one at a time.
Page layouts
Key pages and templates were identified and prototype was created in order to test all new visual language.
Specifications
UI toolkit that is used for constructing all design mockups and prototypes, ensuring all elements are consistent. It was used by both the development team to create modular components that could be used to quickly and easily construct any page of the app.
A sketch design pattern library was also created and shared, so that other product designers could get on board and start designing other pages and features.
Pattern Library
Using the design specifications, the dev team created a pattern library that they could use across the entire dev team to keep the app consistent and modular. If we decided to make any changes, they would simply propagate through the app. Using the modular components the team could now quickly and easily construct any page of the app.
Content breakpoints
Key break-points were established using session data. We then explored how all page layouts would respond to various screen sizes and final approach was determined.
Consolidated Settings
Easily manage all the settings from one place. Customers no longer had to hunt through many different setting locations, as we decided to place all settings in the same place. We improved the IA and allowed greater control.