Category
App Redesign
Duration
3 Months
Back to projects overview
Redesign
Redesign of over 70% of the app to better align it with the needs of new user groups.
What?
A redesign of over 70% of the app to better align it with the needs of trainers and trainees, giving it a more consistent and professional look and feel — without losing the characteristic simpleclub charm.
Why?
With the new target group of trainees and trainers, expectations for professionalism, efficiency, and a consistent user experience have grown. Since these users also have access to exclusive features, a redesign was necessary to ensure these new features seamlessly integrate into the existing structures.
How?
Redesign of the most important areas to better address the new target group
Introduction of design tokens to make the system more maintainable and flexible
Development of responsive designs, since the main usage is no longer limited to smartphones but increasingly takes place on tablets and web browsers
What?
A redesign of over 70% of the app to better align it with the needs of trainers and trainees, giving it a more consistent and professional look and feel — without losing the characteristic simpleclub charm.
Why?
With the new target group of trainees and trainers, expectations for professionalism, efficiency, and a consistent user experience have grown. Since these users also have access to exclusive features, a redesign was necessary to ensure these new features seamlessly integrate into the existing structures.
How?
Redesign of the most important areas to better address the new target group
Introduction of design tokens to make the system more maintainable and flexible
Development of responsive designs, since the main usage is no longer limited to smartphones but increasingly takes place on tablets and web browsers
Before
The cards in the Home section have different layouts and sizes, yet they don’t provide enough information to associate them with a specific content type or feature.
The cards in the Home section have different layouts and sizes, yet they don’t provide enough information to associate them with a specific content type or feature.
After
Each feature has a clear CTA to strengthen visibility. The overflow to the right was removed, and navigation between the cards is now possible using arrows.
Each feature has a clear CTA to strengthen visibility. The overflow to the right was removed, and navigation between the cards is now possible using arrows.
Before
No progress visible within the individual pieces of content of the topic and there is too much topic color (Math here in red) due to the small number of videos.
No progress visible within the individual pieces of content of the topic and there is too much topic color (Math here in red) due to the small number of videos.
After
Better overview of the content and progress within a topic plus cleaner and calmer design by minimizing the use of topic color.
Before
Suboptimal use of horizontal space in the web app. The position of the additional content is not optimized for scrolling (it disappears while scrolling).
Suboptimal use of horizontal space in the web app. The position of the additional content is not optimized for scrolling (it disappears while scrolling).
After
Overall layout improved and the additional content is now always visible in the side panel, which gives a better overview of where you are in your learning journey.
Overall layout improved and the additional content is now always visible in the side panel, which gives a better overview of where you are in your learning journey.
Responsive Layouts
The app designs were developed for different breakpoints – Small, Medium, Large and Extra-Large. With the help of these breakpoints, we were able to adapt the designs depending on the screen size. Content, navigation, and interactions were optimized so that the user experience remains consistent, accessible, and efficient across all devices.
Responsive Layouts
The app designs were developed for different breakpoints – Small, Medium, Large and Extra-Large. With the help of these breakpoints, we were able to adapt the designs depending on the screen size. Content, navigation, and interactions were optimized so that the user experience remains consistent, accessible, and efficient across all devices.
Tokens System
With the new design language, tokens were also introduced. The token structure used is divided into three levels: Core, Semantic, and Component. The Core level represents the underlying color palette, while the semantic and component tokens are used directly in the design process and give more context of the use case.
Tokens System
With the new design language, tokens were also introduced. The token structure used is divided into three levels: Core, Semantic, and Component. The Core level represents the underlying color palette, while the semantic and component tokens are used directly in the design process and give more context of the use case.
Results
Redesign
Through a new concept for presenting the learning content in a calmer, more consistent design, we were able to match the design to the new user needs and achieve a significant improvement in the overall user experience.
Responsive Layout
With the newly defined breakpoints (S, M, L, XL), we were able to test the design solutions on different screen sizes and make targeted adjustments for each format.
Tokens
The comprehensive redesign of over 70% of the app offered the perfect opportunity to introduce design tokens. This significantly improved collaboration between design and development, as well as the maintainability of the system. Since then, the Development-Design-Collaboration benefited from a more efficient process, clear usage guidelines, and a more consistent design language.
Results
Redesign
Through a new concept for presenting the learning content in a calmer, more consistent design, we were able to match the design to the new user needs and achieve a significant improvement in the overall user experience.
Responsive Layout
With the newly defined breakpoints (S, M, L, XL), we were able to test the design solutions on different screen sizes and make targeted adjustments for each format.
Tokens
The comprehensive redesign of over 70% of the app offered the perfect opportunity to introduce design tokens. This significantly improved collaboration between design and development, as well as the maintainability of the system. Since then, the Development-Design-Collaboration benefited from a more efficient process, clear usage guidelines, and a more consistent design language.
Other Projects
UXR, Wireframes and High Fidelity Designs for a completely new Test Feature
User Research
Text
Text
UXR, Wireframes and High Fidelity Designs for a completely new Test Feature
User Research
Text
Text
UXR, Wireframes and High Fidelity Designs for a completely new Test Feature
User Research
Text
Text
Tableau Analysis, Event Documentation and Heuristic Evaluation for central user flows
UX Benchmarking
Text
Text
Tableau Analysis, Event Documentation and Heuristic Evaluation for central user flows
UX Benchmarking
Text
Text
Tableau Analysis, Event Documentation and Heuristic Evaluation for central user flows
UX Benchmarking
Text
Text