"Tagging" has been a long-requested feature for managing content in Studio, and now OpenCraft is finally designing and building it for Axim Collaborative! While there are big plans, the first release will be a user-friendly, minimal viable product. Here are some of the things everyone can look forward to:
So, get ready for more organized learning content. Tagging will make it easier for you to find, curate, and build relationships between course content. Your learners will thank you too! Think of courses that are effortlessly searchable and primed for personalization.
Contact us if you’d like to know more about the project.
A feature that will be released soon is copying and pasting course content. Talk about saving content authors more time! OpenCraft is very excited to be involved in the UX and development of this project. Ultimately, the feature will allow authors to copy sections, subsections, units and components, and then paste them into different locations within the same course or into a different course. No more duplicate work - whoop!
Keep your eye on the Open edX forum for the official public release of this feature.
We’re proud to announce that during the first six months of this year, three more OpenCrafters were bestowed the Core Contributor title. We now have 13 Core Contributors!
The Open edX Core Contributor program allows members to participate in defining and deciding the direction of the platform through design, coding, marketing, and more. To become a member you need to embody commitment to the project, exemplary conduct, and high caliber contributions. Well done to the following three team members:
Code Contributors:
UX and UI Contributor
Meet our amazing Chief Technology Officer! Braden hails from Vancouver, Canada. When he’s not doing awesome things with code, you’ll catch him hiking the glorious mountains right on his doorstep.
Braden started his journey at OpenCraft in 2014. But his journey in open source started with his first contribution at age 14! He loves being a part of the Open edX community, and the community loves him! He was made a Core Contributor in 2020. Projects that have received a lot of his attention are things related to XBlocks and how they're stored, including Modular Learning and Content Libraries. In fact, he’s super happy about being involved with the Modular Learning efforts where he’s building functionality that he and the community have wanted for a long time. Braden particularly loves being involved in architecture discussions. You’ll often catch him being extremely helpful on the Open edX forum.
Outside of OpenCraft and the Open edX community, Braden likes to work on open source JavaScript/TypeScript projects. He’s a big fan of Deno, TypeScript, and Next.js. He’s also the co-founder of Neolace and TechNotes, and owner of MacDonald Thoughtstuff Inc.
As I mentioned, Braden is really active on the Open edX forum, so reach out to him there!
Listaflow is a new open source tool being built by our team here at OpenCraft. Although it is still in its early stages, Listaflow is already being put to good use by the Open edX community.
In this post, I’ll give a brief overview of:
OpenCraft is a remote company, with team members based all over the world – from Adelaide, to Vancouver. Needless to say, real-time meetings are not an option for us. We need to make sure our team members are on the same page, even though they’re on different continents.
Enter Listaflow, the open source workflow tool for remote team collaboration, and reporting.
Now, I know what you’re thinking…
“Another workflow tool?! But, why? Process Street and monday.com already do everything I need.”
Well, it really depends on what's important to your organization. At OpenCraft, we are passionate about open source (in fact, we contribute the majority of the code we write to the public version of the Open edX® learning platform). So, although tools like monday.com are fantastic, many of them are closed source, and whenever presented with the option of closed vs open source software, open source wins every time!
Additionally, many of the products on offer didn’t have the features we were looking for. Not only did we need an asynchronous way to plan our development sprints, but we also wanted to give the whole team an overview of how everyone else’s sprint was going (without needing to contact them and potentially interrupt their focus). Very few services checked all the boxes, and the few that did, were all proprietary. We soon realized that, if we wanted an open source tool with everything we need to manage our remote team, we would have to build it ourselves.
And so the idea of Listaflow was born. We were thrilled! By building our own tool, we are no longer subject to decisions made by external teams. We can also guide the direction of Listaflow, and adjust our efforts based on actual user feedback. By following a “user first” approach, we aim to create a first-class user experience for our users.
Listaflow is still in its early stages and we expect its feature list to evolve over time. We want to keep things agile, and allow the tool to evolve alongside the needs of our users. For now though, here is a quick summary of the features we are working on:
OpenCraft started contributing to the Open edX platform all the way back in 2013. Over the years, we’ve made thousands of code contributions, and have become an important part of the Open edX community.
One of the many Open edX projects we are involved in, is the Core Contributor Program. The idea behind the program is to entrust specific members of the Open edX Community with advancing the development and adoption of the platform.
When Friday (the tool that the Core Contributors were using for their asynchronous sprint check-ins), announced that they were closing shop, we knew we needed a reliable alternative. Listaflow was the obvious choice - not only was it already in development, but it only required a few tweaks before it could effectively fill Friday’s shoes! What’s more, many of the people working on Listaflow were Core Contributors themselves, so already understood the process and what was needed. The rest is history. The Core Contributors became the first Open edX team to start using Listaflow, closely followed by the Marketing Working Group.
Today, both of these teams use Listaflow for their end-of-sprint check-ins. This is how it works: towards the end of the sprint, each team member receives an email encouraging them to complete their sprint check-in. The check-in is a quick and simple questionnaire asking a few questions about the previous sprint. It includes things like, “What did you accomplish during the previous sprint?”, and, “Is there anything where you could use help from others?”. Team members can choose to go into as much, or as little detail as they like, and most of the questions are optional.
Even if team members choose to answer only the required questions, Listaflow can still generate meaningful reports of the responses. Reports take all of the feedback received from the check-ins, collate it, and transform it into an easy-to-digest visual representation of a team's responses. They are a great way to get an overview of how the sprint went, and to identify any pain points or action items. What’s more, reports are also filterable and downloadable, giving users the ability to generate reports that suit their specific needs, and save them for their records, or share them with people who may not have a Listaflow account.
With two Open edX teams actively using Listaflow, we are getting a lot of priceless user feedback. This is helping us to make incremental improvements, all based on real feedback from real users. The next step? Continue to onboard more and more teams within the Open edX community, and expand outward from there. Once Listaflow is working like a well-oiled machine within the Open edX Community, we plan to open it up to external teams, allowing us to tap into the needs of remote teams worldwide.
So, there you have it - the first chapter of the Listaflow story. Although we don’t know exactly what’s in store for the rest of the tale, we do know that Listaflow users will be the protagonists. They will guide our decisions and steer our feature list. In return, we hope to provide them with a fantastic tool - a tool that gives them the peace of mind that everything is organized and accounted for, so that they can focus their energy on the right things at the right time.
Featured Image PSD Mockup by Pixeden
When you search Google images for “UX design process” you’ll probably see something a little like this:
I wish the UX design process was that simple. In my experience it looks more like this:
Yup, that’s right! It’s a mess. Just the sight of it makes the control freak in me break out into a sweat! But that’s what user experience is - a messy road full of infinite twists and turns.
In this article, I’m going to tell you about a project with a process that has been, what my mother might say, "messier than a bowl of spaghetti." At OpenCraft we’re in the process of building a theme that we hope will live up to the Open edX promise of “delivering inspiring learning experiences.” We want the experience to delight course creators and learners alike. To do that, we’ve had to discover what these users really want and need. In the end, we hope this theme is not only beautiful to look at, but also removes barriers, and creates a delightful learning experience.
So let’s dive in and see just how messy the process has been so far.
To kick off the project, my team and I undertook a little UX espionage. Granted, I’m no James Bond; there are no tuxes, gadgets, or martinis; well, at least not until lunch time 😉. My spycraft normally involves a comfy chair, coffee, and a fast internet connection. My mission: evaluate the competition. This is a great way to see what can be emulated and what should be avoided. After all, we don’t want to make the same mistakes that other services have made, nor do we want to miss out on the insight we can gain from their UX victories! In other words “Don’t reinvent the wheel; redesign it!”
There is certainly no shortage of inspiration out there. We were particularly inspired by the edX, Coursera, Udemy, and HubSpot’s UX strategies. Here’s why…
Why we liked the edX Course Overview page:
Why we liked Coursera’s learning area:
Why we liked Hubspot’s course navigation:
Why we liked Udemy’s learning area:
The intel gathered when scoping out the competition is a nifty way to get your creative juices flowing ahead of the design phase. But before starting the design, it’s important to check in with your target users. That intel can be pure gold.
If we don’t speak to our users, we’re just guessing what they need, what they want, and how they’ll interact with a product. User research is key to building successful products. It can feel like a massive undertaking, but it doesn’t need to be. With just a little effort you can gain valuable insights. In the case of this project, we turned to the Open edX community. I posted a thread on the Open edX forum hoping to get some input.
The feedback we received was eye-opening and incredibly useful. Here are some of the major points that came up:
A picture was starting to form in our minds, summarized nicely by what one user said, “The interface should get out of my way so I can focus on learning.” The design shouldn’t distract learners from their learning goal; it should help them achieve that goal. Users are there to learn, not to be wowed by interesting design or distracted by fancy animations.
At this point in the process we needed to take everything we’d learned and start designing.
I’ve found that the best way for me to process user research is to start with wireframes. It’s a great way to throw all your thoughts on a page so you can start aligning concepts according to user feedback.
We started with the most important part of the interface first: the learning experience.
You might be familiar with the edX interface below; this was the major source of inspiration for our first attempt.
We kept edX’s basic layout but simplified it. This is the resulting wireframe:
Here’s what we did:
Overall, this attempt felt clean and distraction free. But now we had to decide what would happen if a user selects a section, like Visionary Leadership, for example. This is what we came up with:
As you can see a full-page drawer appears over the Course Outline page with a sidebar that clearly labels the contents of the section. And to minimize distraction, we’ve removed items that aren’t essential. So the site’s main navigation is replaced by the course title and section title.
The next step was to explore how the designs would translate to mobile:
As you can see:
Overall, we really liked this attempt, but we felt we could do even better. After countless iterations, we came up with the latest version of the wireframes. Here’s what they look like:
Once a user has selected a course from the My learning page, they are navigated to a distraction-free course page, where everything relates to the learning material. The main navigation is gone, and in its place we have a simple course navigation. If the user wants to exit the learning experience, they can easily do so by selecting the back arrow, located at the top left of the page.
Let’s take a closer look…
This wireframe aligns nicely to the user research we initially gathered, because:
The design was a clear winner! The next step was to see how it would translate to mobile:
Mobile feels clean and uncluttered. We have one page with two icons in the main navigation. One links to the Course Outline, and the other, the Course Menu.
With a basic idea of how the learning experience would work, we moved on to some of the other key pages.
The theme Home page is the perfect place for course creators to market their courses. It sets the tone for the learning experience.
We took this:
And gave it a bit of a user experience facelift:
From there, we worked on the Course’s About page which provides learners with information about a course. Some of you might be familiar with the current Lilac Release of the Course About page:
Our theme’s version of the page will look something like this:
The design feels clean and simple, and highlights all the key course information right at the top of the page.
When users scroll down, the sub-navigation sticks to the top. This makes it easier for people to navigate through the course information no matter where they are on the page. To make it even easier, we decided the course price and length should stick to the top too; that way, this info is always visible and the user can enrol at any time.
With some key areas of the theme wireframed, it was high time to check in with our target users. Taking baby steps, we decided to dress up the theme Home page and Course About page to see how users responded. This was the first look-and-feel of the Course About page:
Nothing too groundbreaking! We quickly went back to the drawing board to see if we could push our design limits a bit more.
In our next attempt we envisioned a theme with two color options which users could modify if they wanted to:
It was time to test the waters - we wanted to know how people felt about this design direction. This is some of the feedback we received:
This was great feedback! So we wiped the slate clean, yet again 😂, and created a "light” and “dark” version of the theme. This will give users the choice of two neutral bases to work with.
Here's the top section of the "light" version of the theme:
Here's the top section of the "dark" version of the theme:
Here's another section of the "light" version of the theme:
Here's the same section in the "dark" version of the theme:
Here's the bottom section of the "light" version of the theme:
Here's the bottom section of the "dark" version of the theme:
Here’s what’s changed:
Generally, we’ve received positive feedback on this new aesthetic. Here’s how this look-and-feel has been applied to the theme Home page:
And here’s the design applied to the My Courses page, where users manage their courses:
Now that we have a solid design direction in place, we plan to make some good headway on development. This will allow us to have a clickable interface to test with our users. While the developers are hard at work, our design team will flesh out the rest of the theme.
We still have a fair way to travel on our epic mountain journey. Although the climbs will become less steep, and the rocks less icy, the UX process is never truly over. I hope by sharing our messy process, you are reassured that things don’t always have to go as originally planned. You can veer from the path as long as you follow the continuous process of testing, tweaking, retesting, and improving.
Here’s to designing better user experiences for all edX learners!