Build an Accessible Process Map in Rise with Mighty Studio

Process diagrams are easy to mock up as images but surprisingly painful to maintain. Mighty Studio’s Process Map gives you the same visual orientation inside Rise, with editable text, reusable states, and accessibility built in from the start.

Studio Spotlight: Process Map

If you’ve ever built six nearly identical process graphics, exported each one, uploaded them to Rise, then rewrote alt text after a stakeholder changed one label, this one is for you.

What the Process Map is best for#

The Process Map template is a horizontal process diagram you can add from Mighty Studio’s Discover library. It lets you introduce a process map once, then reuse that same map throughout a Rise course in a few different ways:

• Show the full process as an overview.
• Highlight one stage at a time as learners move through the course.
• Add a detail card to a highlighted stage.
• Turn the whole map into a click-to-reveal interaction with details for each stage.
• Use it as a summary at the end of a lesson or course.

That flexibility is important because processes often need repetition. Learners may see the full model at the beginning, then revisit stage one, stage two, and stage three as separate lesson sections. A consistent visual map helps them answer, “Where am I in the bigger picture?” without you having to rebuild the same graphic again and again.

Add the Process Map to your Rise course#

Start in the Rise course where you want the process diagram to appear.

1. Open the lesson where you want to add the map.
2. Add a Mighty Studio block.
3. Open Discover.
4. Search for process map.
5. Choose one of the Process Map presets and insert it into your course.

There are four separate presets available for Process Map. They show different configurations you can use, but the most efficient workflow is to insert one preset, design your process fully, and then duplicate your finished version wherever you need it.

That way, you are not re-styling the same process six different times. Build once, duplicate, and only change the behavior or highlighted stage.

Step 1: Add an optional title#

Once the module is in your course, decide whether the diagram needs its own label.

1. Open the Process Map settings.
2. Add a Title if you want text to travel with the diagram when you copy it throughout the course.
3. Leave the title blank if the surrounding Rise content already introduces the process clearly.

The title is especially useful when the same map appears repeatedly in different parts of a course. For example, if each lesson section starts with the same “Customer Intake Process” map, keeping that title inside the module makes duplication cleaner.

Step 2: Create your stages#

Next, build the actual process.

1. In the Process Map settings, add the number of stages you need.
2. Edit each stage label with the rich text editor.
3. Apply your preferred font treatment, text color, and formatting to match the course design.

The module is designed as a horizontal stage display. You can add as many stages as you want, and the circles and stages will shrink slightly as you add more. But if your process has eight or ten steps, the layout may start to feel cramped.

For longer processes, consider whether you can group steps into larger phases, or use multiple Process Maps across the lesson.

Step 3: Style each stage shape#

Each stage can have its own visual treatment.

1. Select a stage.
2. Update the shape color.
3. Upload your own icon for that stage.
4. Repeat for the remaining stages.

This is where the module becomes useful for brand-heavy courses. Instead of flattening the whole process into an image, you can keep the labels, colors, and icons editable inside the block.

If a client changes “Assess” to “Evaluate,” or your legal team asks you to swap an icon, you can make the update directly in the module instead of opening a design file, exporting a new image, and replacing it in Rise.

Step 4: Fine-tune icon position if needed#

There is also an Icon Position control for each stage.

Most of the time, you probably won’t need it. But some icons look visually off-center even when they are technically centered inside a circle. The example from the video walkthrough mentions a celebration-style icon: depending on the shape of the icon, it may need a small adjustment so it looks balanced to the eye.

Use this control when an icon feels slightly too high, low, left, or right inside the stage shape. It is a small setting, but it saves you from editing the icon file itself just to make the composition feel right.

Step 5: Choose the Process Map behavior#

The Behavior panel is where you decide how the map functions in the lesson.

You have two main decisions:

1. Whether to show the full process or highlight one stage.
2. Whether to enable click-to-reveal stage details.

Option A: Show the full process

Use the full-process view when you are introducing the model for the first time.

This works well near the beginning of a lesson, before learners zoom into each stage. They can see the entire flow, understand the order, and start building a mental map of what is coming.

Option B: Highlight one stage

Use the highlight behavior when you want to orient learners inside a longer explanation.

For example, you might introduce a five-stage process at the top of the lesson, then duplicate the map before each section. In the first copy, highlight stage one. In the second copy, highlight stage two. Continue that pattern as the lesson moves forward.

The nice part is that you only need to build the process once. After the first version is styled and complete, duplicate it and change which stage is highlighted.

This is especially helpful in Rise courses where a process is explained across several blocks or lesson sections. The repeated map becomes a “you are here” marker for learners.

Step 6: Add detail cards to highlighted stages#

If a highlighted stage needs a little more context, add details for that stage.

1. Select the stage you want to expand.
2. Add text in the stage’s details field.
3. Format the details using the rich text editor.

The details appear in a matching card below the process map. This gives you room for a few key points without turning the process map into a wall of text.

Use this when learners need a quick reminder, such as:

• A definition of the stage.
• Two or three actions that happen during the stage.
• A common mistake to avoid.
• A decision rule or handoff point.

Keep these cards focused. If a stage requires a full explanation, that content probably belongs in the surrounding Rise blocks, with the Process Map acting as orientation.

Step 7: Turn it into a click-to-reveal interaction#

Here’s the fun part: the Process Map can also work like a more sophisticated diagram interaction.

1. Open the Behavior panel.
2. Enable Click to reveal.
3. Add detail text to the stages you want learners to explore.

Once a stage has text in its details field, it becomes clickable. Learners can select a stage and see a matching detail card below the map.

This is a good fit when your process does not need a full lesson section for each stage. Instead of creating several separate blocks, you can let learners explore the stages inside one compact interaction.

It can also work beautifully as an end-of-lesson review. After learners have completed the full process explanation, add a click-to-reveal Process Map so they can revisit the key points from each stage.

Step 8: Adjust the shape and connector styling#

The Process Map includes a few style controls that let you change the feel of the diagram without rebuilding it.

Stage corner rounding

Use Stage corner rounding to control the shape of each stage marker.

• Set it to 50 for a circle.
• Lower it for a rounded square.
• Set it to 0 for a sharp-cornered square.

This gives you a simple way to match different visual systems. A course with soft, rounded UI elements may call for circles or rounded squares. A more technical course might feel better with sharper corners.

Icon size

Use the icon size control to make the stage icons larger or smaller based on your design.

If the process labels are doing most of the work, smaller icons may be enough. If the icons are important visual anchors, increase the size until they feel appropriately prominent.

Line thickness

The Process Map includes a gradient-style line connecting the stages. You can adjust Line thickness up to 10.

If you do not want the connector line at all, set the thickness to 0. The line disappears, but the rest of the module still works the same way.

This is useful when the stage shapes already create enough visual connection, or when your layout feels cleaner without a connector.

Detail card corner rounding

You can also adjust the detail card corner rounding. Match it to your stage shapes if you want the whole module to feel cohesive.

For example, if your stages are circular, you may want the detail cards to be more rounded. If your stages use sharp corners, you may want the cards to follow that same visual language.

Why this matters for accessibility and maintenance#

The old workaround for this kind of effect was usually image-based: design multiple process states in a tool like Figma, export each state, upload the images to Rise, and add alt text manually.

That can work, but it creates friction:

• Every process change means updating multiple image files.
• Every exported image needs appropriate alt text.
• Text inside images is harder to maintain and localize.
• Small stakeholder edits can turn into a full re-export cycle.

The Process Map avoids much of that because the content remains editable in the module. You can change labels, details, colors, icons, and highlighted stages without recreating the whole diagram as a static image.

And like other Mighty Studio modules, the Process Map is designed to be accessible out of the box. That does not remove your responsibility to write clear labels and meaningful details, but it does reduce the amount of manual accessibility cleanup you would normally face with a graphic-based process map.

A simple build pattern to use in your next course#

If you aren’t sure where to start, try this sequence:

1. Add a Process Map near the beginning of the lesson to show the full process.
2. Style every stage, label, icon, and connector until the map matches your course design.
3. Duplicate that finished map before each major section.
4. In each duplicate, highlight only the stage covered in that section.
5. Add a short detail card if the stage needs a quick reminder.
6. At the end of the lesson, duplicate the map again and enable click-to-reveal for a compact review.

That gives learners a consistent visual thread from overview to instruction to review, without asking you to manage a stack of exported graphics.

Search process map in Mighty Studio’s Discover library, add it to your next Rise course, then let the map do the orientation work while you focus on the learning.