Since 2002, MindStretcher has been a cornerstone in Singapore, helping more than 280,000 children master foundational academic and non-academic skills to empower them to achieve their aspirations in life. Beyond its local impact, MindStretcher could serve as a digital platform for individuals looking to sharpen their mental skills, enhance their well-being, or unlock their creative potential worldwide. Whether through games, exercises, resources, or community engagement, it aims to help users stretch their minds and reach new levels of cognitive ability and personal growth.
MindStretcher UX Case Study
Context
Overview
My Role
- Site Architecture
- User Flow
- Wireframing
- Visual Design
- Motion Exploration
Platform
- Web App
Year
- 2022
Challenges
Crafting MindStretcher’s website posed significant challenges, including tight deadlines, effective space utilization, smooth mega navigation flow, and optimizing the basket flow for a seamless user experience. Implementing distinct styles for each grade level required meticulous attention to detail.
We addressed these challenges through a collaborative approach, prioritizing user research and feedback (provided by the client). Through iterative design iterations and rigorous testing, we crafted a user-centric digital experience that balanced engaging content with simplicity, fostered community engagement, and aligned with MindStretcher’s brand values. Adhering to accessibility standards ensured inclusivity, resulting in increased user engagement, positive feedback, improved accessibility ratings, enhanced brand perception, and significant growth in the user base.
Solutions
In tackling the challenges presented in the creation of MindStretcher’s website, we adopted a multi-faceted approach aimed at delivering a seamless user experience and achieving the client’s objectives. Our solutions encompassed various stages of the design process, beginning with the restructuring of the site architecture and the development of intuitive user flows (see the details below).
1. Recreating Site Architecture or Sitemap
We started by conducting a thorough audit of MindStretcher’s existing site architecture and sitemap. Based on user feedback and usability studies, we redesigned the structure to improve navigation and content discoverability. This involved reorganizing pages, simplifying categories, and removing redundant or outdated content to create a more intuitive and user-friendly experience.
Decreased bounce rate due to improved navigation and content discoverability.
Increased average session duration as users could easily find relevant information.
2. Effective Space Utilization in Visual Design
To address the challenge of effective space utilization in visual design, we adopted a minimalist approach, focusing on clean layouts and strategic use of white space. By prioritizing key content and features, we ensured that users could easily find what they were looking for without feeling overwhelmed by clutter. Additionally, we optimized the use of space for responsive design, ensuring a seamless experience across different devices and screen sizes.
Reduced user confusion with cleaner layouts and less cluttered design.
Improved user engagement metrics, such as click-through rates.
3. Mega Navigation Flow Covering All Pages
We revamped the mega navigation menu to provide comprehensive coverage of all links and pages within the sitemap. Through user research and analysis, we identified the most frequently accessed pages and categories, prioritizing them in the navigation menu for easy access. Additionally, we implemented intuitive dropdown menus and search functionality to further enhance navigation and help users quickly find relevant content.
Decreased drop-off rates as users could easily access desired pages from the mega menu.
Enhanced user satisfaction with navigation, resulting increase in page views.
4. Optimizing Basket Flow Experience
To improve the basket flow experience, we conducted a thorough analysis of the user journey from product selection to checkout. We identified pain points and friction areas, such as complex checkout processes or unclear product descriptions, and implemented solutions to streamline the flow. This included optimizing the checkout process that require user to follow-up the checkout via WhatsApp. So, we added the “copy the class basket link” and then user can paste it into the WhatsApp chat.
Reduced cart abandonment rates by providing clear product information and a user-friendly checkout interface.
Increased conversion rates through streamlining the checkout process.
The Process
1. Research
2. Ideate
3. Wireframe
4. Design
5. Prototype
1. Research
While user research is provided by the client sides, our role in this project primarily revolves around observing competitors to glean valuable insights into effective design strategies and user experience trends.
By meticulously analyzing competitor websites and industry trends, we aim to develop a design strategy that effectively positions MindStretcher within the market. Our focus on observing competitor strategies informs subsequent design decisions, including site architecture, user flow mapping, wireframing, UI design, and prototyping. Through this approach, we strive to create a digital platform that not only meets MindStretcher’s objectives but also stands out in the competitive landscape.
2. Ideate
Brainstorm and ideate potential solutions based on the research findings. Develop the site architecture by mapping out the hierarchy of pages and content. Create user flows to visualize the navigation paths users will take to accomplish their goals on the website.
3. Wireframe
Translate the site architecture and user flows into low-fidelity wireframes. Focus on layout, content placement, and functionality without getting into design details. Iterate on the wireframes based on feedback to ensure usability and clarity.
4. Design
Apply visual elements such as colors, typography, imagery, and branding to the wireframes to create high-fidelity UI designs. Ensure consistency and alignment with MindStretcher’s brand identity while prioritizing simplicity and clarity in the design.
5. Prototype
Build interactive prototypes to simulate the user experience and functionality of the website. Test the prototypes with real users to identify any usability issues or areas for improvement. Iterate on the prototypes based on user feedback until the design meets the desired objectives and provides an optimal user experience.
Summary
In crafting MindStretcher’s website, we embarked on a comprehensive design journey that began with thorough research and observation. Through analyzing competitor websites and conducting market analysis, we gained valuable insights into industry standards and identified areas for differentiation. While user research was provided by the client, our focus on observing competitor strategies allowed us to glean additional insights into effective design approaches and user experience trends. This informed our subsequent design decisions, including site architecture, user flow mapping, wireframing, UI design, and prototyping. By leveraging our observations and industry knowledge, we aimed to create a digital platform that not only meets MindStretcher’s objectives but also stands out in the competitive landscape.