Reibus U: Steel Foundations
Reibus International is a platform for buying and selling steel and other metals. Its mission is to streamline the ingrained supply chain problems in the industrial material market.
AGENCY
OVERVIEW
Reibus International came to Studio Simpatico with a challenge: create a learning course for both internal employees and the general public to learn about the production of steel. The team at Reibus provided an industry resource from the AIST called the “Steel Wheel” as inspiration, which visually demonstrates the production of steel.
THE GOAL
Our goal was to design an online learning course that not only encapsulated the steelmaking process but was also easy to navigate, especially for users who were completely new to the world of steelmaking.
RESPONSIBILITIES
Conducted research on the steelmaking process and common e-learning UX/UI paradigms.
Ideated possible solutions based on client and user needs.
Created wireframes that clearly articulated user flows.
Continued ideation on designs based on client feedback.
Conducted quality assurance testing on final product before launch and communicated changes to the development team.
APPROACH
Understanding client and user needs
The team at Reibus expressed their desire for this learning course to be an internal resource for the employees of Reibus as well as to be an external tool for SEO marketing purposes. We knew that we needed to make the course approachable and engaging for users completely new to the steel, but not too simplified that the information architecture became inaccurate to the steelmaking process.
Since this learning course was to be used as both an internal and external resource, the Reibus team also wanted the option for users to create an account to save their progress as they progressed through the modules and quizzes. We needed to make sure that the user experience was optimal for both users—those who chose not to make an account and those who did.
We considered the experience of each edge case when ideating.
PROCESS
E-learning paradigms
From our initial research into e-learning platforms, we drew inspiration from a dashboard model where users could view their progress at a glance, pick up where they left off, and view stats about their learning. As we began to wireframe a dashboard as the home base for the user, we felt that it didn’t quite align with the use case of SEO-driven traffic. It felt jarring for a user who may enter the course through a specific lesson page to then navigate back to a dashboard with stats they didn’t know were being measured. This thinking led us to our next iteration. We really needed to anchor the user in the steelmaking process wherever they may enter the experience, not just through a dashboard that may be missed entirely. Instead of a dashboard model, the homepage served as more of an all-encompassing navigation that helped guide the user but wasn’t detrimental to the user experience. We added UI patterns on lesson pages, such as a top stepper menu to orient the lesson within the steelmaking process and a side “playlist” feature that allowed the user to skip to other lessons within a module.
Site architecture
We spent a lot of time conceptualizing the architecture of this site based on our research of the steelmaking process, as well as the resources provided to us by the client. Both teams went back and forth over whether the site should be a linear progression. The Reibus team had mentioned that often the steelmaking process wasn’t linear, as some materials could be recycled over and over again to make steel. While we thought it would be an interesting idea to incorporate this into the navigation, ultimately, we decided against it. Having a linear framework for navigation made the most sense, as this is what users expect from an e-learning course. The team at Reibus found other ways throughout the course to emphasize the recycled materials in the steelmaking process.
Defining technical requirements
As my first project at Studio Simpatico, the product requirements of this project were a great introduction to learning how important leaving documentation for the development team is as a UX designer. Because this product centered so heavily on tracking a user’s progress through the course and saving this progress, we needed to make sure the requirements were clearly defined up front for our developers. We designed the product to use a local cookie to store users’ progress until they made an account. Upon account creation, that data was transferred. We also needed to track how well users scored on quizzes to ensure they passed the course.
Note re: cookies on wireframes for development team
Takeaways
Designing an e-learning course as my first project at Studio Simpatico was a great way for me to dive head-first into everything UX—extensive research, communicating with clients and stakeholders, creating user flows, and defining technical requirements. While this project was challenging in many aspects, it was really rewarding to see the final product with all the thought that was put into the design.
The full site can be viewed here.