Stödhjulet
Designing an accessible and usable education/onboarding platform with a huge focus on the users
Stödhjulet is an onboarding and educational platform launched by Move&Walk, which offers conductive education for people with motor function variations.
The main goal of this project was to redesign the current platform which needed an improvement in usability and accessibility.
.png)
.png)
Click on image to
view the interactive prototype
Project details
Timeline
Feb - May 2024
My role
UX/UI designer
Platforms used
Figma
Challenges
1. One of the biggest challenges was creating a design that minimized the platform's cognitive overload while presenting the necessary content/features.
2. Another challenge was to make the platform more usable and accessible while making it easily understandable for staff who may not have high technical skills and are newly employed.
Solutions
The solution to these problems was to create a variety of UI elements - such as module tabs, slides and expandable content - that focused on creating a platform with easily understandable content while making it visually appealing.
Another solution was to create a design that motivates users to learn. This was accomplished through features such as a progress bar, the ability to resume courses where they left off, saving courses to a "My Courses" page, and a filter function to help find the right content or course.
The process
The process followed Mattias Arvola's (2020) design process, which consists of the concept, processing, and detailing phases. This process takes the design project from the unknown to the clarity of the designed product.
Interview with the company and brainstorming
Heuristic evalutation
Creating persona and wireframes
High-fidelity prototype
Concept phase
Processing phase
Detailing phase
Heuristic (expert) evaluation and requirements
After conducting an explorative interview with the company, a heuristic evaluation was done. Based on the evaluation, we have created a requirement list.
Here are some requirements that were created after the evaluation:
01
Adapt the website's content so that the most novice user can read and understand all the information presented.
03
Create a visual structure that helps the user navigate through the content from the most important to the less important.
02
The ability to leave the current course or return to the section one was in, as well as browse the content more easily.
04
The ability to navigate the menu more easily with an understanding of the icons and categories. Use familiar/universal icons.
Wireframes
Click on the next picture to view the slideshow.
 |  |  |  |
|---|
High-fidelity prototype
Home page
Before
After
.png)
Interactive cards with progress bar and
the possibility to mark as a favorite
Course page
Before
After
Breadcrumbs for a better understanding of where the user is on the page
Slider
A more structured menu that can be expanded and closed
.png)
A document handling section
where users can download
all documents at once
or individually
.png)
Expandable content for internal documents: view all content on one readable page without zooming. Downloading is also available.
Onboarding page
Before
After
Module tabs for easier navigation on the onboarding site.
Possibility to choose content according to city of work residence.
.png)
Progress bar
Users must confirm they understand the content before proceeding, rather than at the end.
Support page
This page has been created from scratch. Instead of an email popping up, users can find FAQs and directly ask questions that can be forwarded to the appropriate person.
Video of the interactive prototype
