Index
/
This project involved a full end-to-end redesign of MinForening, a club management application used by administrators and members. The goal was to modernize the experience, streamline core workflows such as event creation, membership handling, and communication, and introduce a clearer information structure. Through research, flow restructuring, and a complete UI overhaul, the new design improves usability, improves communication, and supports a more scalable product foundation. Throughout the case study, selected screenshots and before-and-after comparisons illustrate how core workflows and interface elements were improved in the redesign.
The project lacked foundational design resources—no existing design files, design system, component library, documentation, or information architecture. This necessitated reverse-engineering the product’s structure, workflows, and visual language entirely from screenshots and exploratory testing of the current application, making the redesign process particularly challenging and comprehensive.
The existing application presented several key usability and design challenges that hindered user experience and product scalability:
Lack of centralized club view
The app doesn’t provide a page for each club’s own communications and payments. These items are aggregated on global pages and cannot be filtered or searched, making it difficult for users to find club-specific information.
Excessive color usage
The interface employed multiple brand colors across buttons and components, which created visual noise and reduced clarity. The redesign streamlined the color palette to maintain a friendly, vibrant feel while improving hierarchy and readability.
Inconsistent sizing and spacing
The interface lacks consistency in typography scale and spacing, which breaks visual rhythm. I introduced defined size and spacing tokens to improve structure and overall polish.
Non-standard UI elements
The app uses inconsistent and unconventional component styles that reduce clarity, like input fields that look like blank areas with only a “+Add” placeholder. These were replaced with standardized, recognizable patterns aligned with best practices.
The redesign process began with exploratory testing of the existing application and analysis of screenshots to understand workflows and pain points. I conducted heuristic evaluations and reviewed user feedback to identify key areas for improvement. The new design was iterated through wireframes and high-fidelity prototypes, incorporating consistent UI components and design tokens. User testing sessions validated the improved flows and interface clarity.
The sign-in and forgot password screens received minor updates to improve clarity and consistency. The account creation process, originally a single screen, was restructured into a four-step flow covering account details, personal information, child account additions, and acceptance of terms and privacy policies. This multi-step approach enabled earlier data validation and reduced cognitive load by breaking the process into manageable segments.
While the activity wheel was a unique feature of the original app, it introduced inconsistent and confusing interactions. Its appearance changed drastically when no upcoming events were available, and it was the only navigation method to user profiles and club pages. In the redesign, I removed the activity wheel and enhanced the existing list view of upcoming events to provide clearer and more consistent navigation.
I redesigned the user profile page to consolidate all relevant account information and provide straightforward access for making changes. Previously, important data and actions—such as logging out—were hidden behind a settings menu at the top of the page, reducing discoverability. Additionally, management of child and related accounts was located elsewhere in the app, which users identified as a significant pain point. By centralizing these features within the profile page, I improved usability and streamlined account management based on direct user feedback.
The original home screen focused mainly on events the user participated in, displayed through the activity wheel, which limited content discoverability. The redesigned home and club pages consolidate communications, events, and payment information into separate, streamlined feeds. This restructuring enhances the information architecture, giving users immediate access to relevant content and facilitating deeper exploration through dedicated club pages.
The existing club page had limited functionality, showing only basic club details. The redesign consolidates all club-related events, communications, payments, and detailed club and user information into a holistic view. This approach improves communication within the app and makes it easier for users to find club-specific content.
I applied consistent spacing, typography, and styling across event and message pages to create a cohesive and polished user experience. These improvements help users navigate content intuitively and reduce visual distractions.
Payment pages were redesigned to clearly present key information such as payment status and details. Completed payments are displayed on a dedicated page styled to resemble physical payment stubs, enhancing familiarity and ease of reference.
The chat feature received a visual refresh to create a cleaner, more polished messaging experience. Beyond UI improvements, the redesign introduces threaded replies, enabling users to respond directly to specific messages for clearer conversations. Chat settings were also expanded to support essential management tasks, including leaving group chats, updating chat details, and managing participants more easily. These enhancements make communication more intuitive and give users greater control over their conversations.
The notification system remains largely unchanged, except for uncoupling notifications from payments to clarify context. Each notification now includes an image representing the relevant user or club, improving clarity and visual recognition.
The new content creation flow leverages a Floating Action Button menu, enabling users to easily create multiple content types from a single entry point. The previous UI limited users to creating events only, and required manually selecting a club even when the correct one was already chosen. A significant enhancement is the addition of payment creation directly within the app—a feature previously available only on the web—streamlining user workflows and expanding functionality.
The club creation process was improved by replacing non-standard input fields with standardized components used throughout the redesign. A visual update across the app included consistent use of elliptical user profile pictures and square club cover images. Since club pages display the cover image as a header, the creation flow now shows this image in full, providing a clear preview during setup.
To enhance usability, I replaced full-screen selection flows and multi-button popups with standardized bottom sheets. This change reduces visual clutter, ensures design consistency, and offers users a clearer, more focused way to make selections.
The redesign significantly improved the app’s usability and information clarity. User feedback highlighted better navigation and easier access to club-specific content. The standardized design system and tokens provide a scalable foundation for future development. Challenges included working without prior design documentation, which strengthened my skills in product analysis and reverse engineering. Future iterations will focus on adding more personalization features and enhancing accessibility.
Below is the interactive Figma prototype of the redesigned MinForening app, featuring separated flows for each key interaction such as account creation, home navigation, and club management. The prototype highlights improvements in usability and information architecture, demonstrating how users can efficiently access communications, events, payments, and profile settings within a clearer, more intuitive interface.
The prototype was created using the free version of Figma, which introduced some limitations but still enabled effective testing and collaboration. It played a crucial role during exploratory testing and internal reviews, helping validate design decisions and ensure alignment between stakeholders, developers, and users.
I’d love to hear from you! If you’re looking for someone to bring thoughtful, user-centered solutions to your team, I’d love to hear from you.
Check out my other case studies on the Cases page or head over to the About page to get a better sense of who I am and how I work.