An online learning platform that invites the student to create content to enhance the learning.

Rapid prototyping for an online learning platform

Perhaps it is the pandemic, with the worldwide school closures, that in 2021 highlighted the online learning platform as a way to capitalize on an existing business events platform.

But would a learning platform be the proper next business move to gain success? Well, why not? It was worth prototyping before our client took the strategic decision.

With a prototype-first method, we quickly uncovered what was working and what wasn't.

We were a team of four UX professionals who visualized possibilities for a client using research, user journey, user flow, mockups, and prototypes. The deadline was tight. With just a couple of weeks, the team organized an agile way of working with a joint Miro board and daily connections via social chatting and digital meetings.

Workflow

Challenge: All you need in just “one-stop.”

Our goal was to create an interactive prototype of an accessible, exciting, and engaging “one-stop-shop” for students to participate, access course content actively, and connect with fellow students or faculty.

Early in the process, we took the path of a prototypical user. We prioritized a prototype for a thought school workspace, which is indicated with the blue arrow line.

Before deciding what to prototype, we took a user’s path to sketch the flow from the entry point through the different sets of steps.

Our client’s landing portal is designed to its current design guidelines and introduces future students to a menu of exciting courses.

Approach: Empathize, define, ideate and prototype

Researching competing products, interviewing students at the global learning provider Hyper Island, developing a user journey map and a user flow gave us an inside track in designing the proper mockups and prototypes. We created the style guide, components, and mockups in Figma, user journey in Custellence, and the prototyping in Axure RP.

To agree on a persona was a great way to get a quick start and make a better product.

Even with tight deadlines and remote work, UX research is priceless and essential to good design. We focused on exploring the educational area, generating ideas based on user needs, and testing the lo-fi prototype during our interviews.

It is essential to identify user goals and needs and not to consider user research as optional.

Our user journey map delves into all aspects of navigation and interaction in a user-centered fashion. We worked back and forth between the wireframing and the UJM. You find this student journey map at https://custellence.com/app/public/46168989

Our user journey map delves into all aspects of navigation and interaction in a user-centered fashion. We worked back and forth between wireframing and the user journey map to address realistic concerns and move the project forward with the wireframes.

Our research discerned that interviewees start exploring features grouped on top and inside an area with a clearly defined boundary. They do so before considering what kind of information they are seeking.

Our prototype with hi-fi wireframes

The UI and UX of the educational web portal

We pursued inspiration from well-known educational platforms so that the users can focus on their tasks rather than on learning new models. In our design, the pages consist of rectangular areas where color is used to frame so that it is perceived as a single unit compared with other elements. The law of unified connectedness guides the user to grasp the content quickly. When testing our prototype, the interviewees often started exploring the features grouped on top and inside an area with a clearly defined boundary.

Our prototype makes the learning prominent for the student.

We highlight “Next event” on top to intuitively guide the student on what to do.

The overview timeline breaks down the curriculum into smaller steps to decrease the cognitive load.

The study material is structured in tabs depending on the time to complete, type, and the student’s notes or assessments.

In each tab folder, we continue to organize content into smaller chunks to help users process, understand, and memorize quickly.

With this design, we present what to do without the student having too many choices. It’s common sense, although often neglected in a rush to cram too much functionality into a site or application.

We organize content into smaller chunks to help users process, understand, and memorize quickly. To get an overview of the course content, we work with the student’s schedule, timing, type of content, and study material.

With the progress bars and checkboxes, we enhance the motivation by visually representing progress and completion, which is especially important for studies and learning. During the UX testing, our interviewees appreciated this feature.

In contrast, our interviewees did not appreciate badges — so that was something that we removed from the prototype. As often the case, simplicity defeated complexity. We tested badges such as Early Bird and Swot, as well as Streaks.

Content is also structured by type. A student that finds it relaxing to watch videos will easily find relevant content.

Podcasts are perfect as entertainment and should therefore be found easily.

With the scrapbook, the student can add all kinds of content to enhance the learning. Our design defines the boundaries.

The scrapbook is a way to give the student space to enhance the learning. We are flexible about the content, and our design defines the boundaries.

Community is undoubtedly a competitive way for schools to connect. We are making it social with plug-ins.

As people recall negative experiences more vividly than positive ones, it might be essential for the company behind the platform to work with the organizations/schools (i.e., the customers paying for the service) on the assessment part.

Summary

With a prototype-first method, we quickly uncovered what was working and what wasn’t. We highlighted the next event and timelines, presented study material in all kinds of chunks, and designed a scrapbook, progress bars, and checkboxes to highlight performance. We excluded badges.

Quickly fabricating via rapid prototyping is a great way to grasp and form ideas or concepts. And an essential piece in making the right business decisions.