The previous state of Praktio Author is shown above. The number of hacks and workarounds required to produce quality content to fit course specifications are innumerable. Because so many courses have been produced with this version of Author, the new version had the additional challenge of accounting for migration and making editing previously created content possible.
Bringing in secondary personas here (with different roles and backgrounds) was critical as a reminder for the team that our focus should be on designing for a wider user base.
After developing personas, I relied on them as I dove into journey mapping with the qualitative data I'd collected on the course development process. I mapped across different contributors, technologies, potential roadblocks and different timelines to help my team identify core-critical features and transition periods we'd need to account for with our solution. After I developed the initial draft, I collaborated with my team (include developers and business stakeholders) to flag related activities with potential solutions, like "outline tools" and "collaboration/review capabilites" and together, we drew a box around the part of the process that we needed to solve for in our MVP.
As part of this mapping process, we identified opportunities for efficiency: in existing flows, users had to take the same series of steps twice (once in Author and once in our learning management system, or LMS), which wasted time and opened the door for manual error. Ultimately, we decided to integrate Author with our LMS entirely. While the change to the site structure would mean some model changes and a new navigation, the tradeoff was worth it to reduce load times and mitigate risk by enabling the user to edit, test, and publish with a single source of truth.
02 design
Deciding to incorporate Author into the LMS meant a restructure of existing information architecture. I proposed a role-based navigation leveraging a rail that would allow quicker access to relevant content, and allow admins to control permissions across different roles. This update reduced the number of clicks required to navigate to the most nested content by an average of 1.5 across four page trees.
With a firmer understanding of user needs and the project goals, I started initial sketching alongside user flows. During this process, I looked to platforms we expected our new user base to be familiar with (Microsoft Word and PowerPoint, Google Docs and Slides, Articulate Storyline, etc.) to identify common patterns and solutions for some of the features we were dealing with. Relying on these common patterns throughout this process helped to lower the expected learning curve in the new platform.
We moved forward with designing landing pages for Courses, Modules, Slides, and Resources in the LMS. After talking through requirements and initial brainstorming, I handed off the design of Resources to my junior designer to own. We built out an initial version of the content pages following existing patterns in the LMS, then went back to our users with a prototype for some usability testing (utilizing our design system made this prototype feel very tangible).
Our testing was fruitful here and we returned with two main insights:
Users had a hard time finding the access point to upload resources.
This was likely because our designs using the tabbed approach defaulted to Courses instead of Resources. After discussing with my junior designer, we decided to include an option to upload resources as a dropdown with the "New Course" action button, a place where several of our testers initially looked to complete this task.
We needed more validation baked into the process.
We got several comments like "Did that work?"… "Did this save?" that prompted us to include toast messages to confirm success at several key points, including initial creation and saving changes to a course, module, slide, or resource.
After iterating, we ended up with Courses and Resources pages that presented actions more contextually and utilized existing patterns from our design system to ease the lift for our devs.
We went back and forth defining the MVP requirements of the doc editor. We needed to include features beyond a traditional text editor, but debated the value of bringing over certain features from the old software. There were many features we ultimately eliminated so as to not introduce unnecessary complexity, even for the sake of migration.
One of the core features of Author is the document editor—a word editor where content authors can build out the documents they'll be using. The Author document editor, unlike Google Docs or Microsoft Word, gives admins a greater level of control over the types of text blocks and styles the users have access to, because Praktio training relies so heavily on documents—very specifically formatted documents that learners will analyze closely as part of their learning experience.
Because most of our anticipated future user base will be in the platform to work on specific courses, and maybe a year later or never again, our learning curve has to be small. We relied heavily on design patterns from other parts of our platform and familiar patterns from Google Docs and Microsoft word, like the use of a toolbar and hierarchy-based styling options.
Unique to Author's document editor is the Annotation toolbar, where users can apply specific annotations (visual and contextual changes to the document that reflect what learners would see in the wild) they intend to use wherever that document is in place, which may be in multiple parts of a course.
The slide builder is the heart of Author, where users are creating the actual learning content that learners will see. Users can access the toolbar to make time-based changes locally in the document—we chose to keep the annotation creation flows as consistent as possible across both the slide builder and document editor, again with the goal of minimizing that learning curve.
In the slide builder, the user can:
• Use time-based annotations on documents to illustrate learning principles
• Add takeaways to underscore those principles
• Manipulate those annotations and takeaways tangible on a timeline
• Include narration that can be synced with what the learner sees on the screen
The slide builder was another place where we pulled from existing patterns, especially for the timeline. Any user who's seen the inside of iMovie or Adobe Premier will feel very at home with a simplified version of duration drag.
One change we made from the wireframes to the MVP, in both the document editor and slide builder, was the move of annotation cards from an overlay into their own pane (much like the layers pane in any WYSWIG editor). This removed some context, but allowed users to easily preview all of the annotations in a single place. Because of this tradeoff, in an effort to bring some context back in, one important feature I prioritized throughout every iteration that followed was a synced highlight: at any given moment, the user may be looking a the same thing (annotation, takeaway) in up to three places: in the document, in the annotation pane, and on the timeline. Whenever the user selects that object in one of those places, the object is also shown as selected in the others.
03 impact
Initial testing with our content pages has our team optimistic that our solution is more scalable than its predecessor. By reducing the barrier to entry, we open the doors for more content creators to bring their knowledge to Praktio's eLearning courses.
The document editor and slide builder are currently undergoing alpha testing with the goal to bring this platform to a wider audience by the end of Q2 2024.
Personally, this was the first redesign I had the lead on from discovery to delivery. I worked closely with my developers to make design decisions that balanced the most user-friendly solution with the lowest-effort one in order to get a workable piece of software out the door while keeping that door open for improvement. I also had the opportunity to mentor a junior designer and work through higher-level solutions together while enabling her to take the lead on execution.