COSI Conundrum is a non-profit Website Redesign

And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.

The COSI Conundrum


In this COSI website redesign project, our goal was to enhance user experience and increase brand awareness. By streamlining navigation, simplifying ticket purchases, and implementing a modern design, we achieved improved user satisfaction, increased engagement, and a stronger COSI brand presence.

Project Overview

COSI is a renowned ,non-profit science center located in Ohio, dedicated to inspiring curiosity, fostering lifelong learning, and providing hands-on science education for visitors of all ages.

However it's existing website suffered with outdated UI elements, cluttered navigation, and a lack of visual appeal, which hindered the overall user experience. In this redesign project we aimed to establish a platform that seamlessly conveyed COSI's mission of inspiration and education while engaging visitors and facilitating effortless access to the diverse educational and entertaining offerings at COSI.

Project Details

Timeline:

3 Weaks

My Role & Responsibilities:

  • UX/UI Designer:
    Conducted user research, created wireframes and prototypes, and designed the visual interface.
  • Researcher:
    Gathered user insights, conducted competitor analysis, and identified areas for improvement.

    • Tools Used:

    Figma,Figma Interactive Components,Invision,Miro,Canva.

    Project Type:

    Group Project

    Uncovering the Challenges

    The previous COSI website posed several significant challenges, leading to a suboptimal user experience and limited brand awareness. Users encountered numerous usability issues, particularly in navigation, ticket purchases, and comprehending the organization's mission. The website failed to effectively communicate COSI's philanthropic nature, hindering donation efforts and limiting the impact of their initiatives. These challenges presented an opportunity for our team to step in and address these critical areas for improvement.

    Designing a Transformative Solution

    Our project aimed to tackle these challenges head-on by embarking on a comprehensive website redesign journey. We set out to improve the overall user experience, increase brand awareness, and optimize online donations and ticket sales. To achieve these objectives, we adopted a user-centered design approach, placing the needs and preferences of COSI's diverse audience at the forefront. By implementing strategic changes and leveraging user-centered design principles, our goal was to create an engaging and intuitive website.

    Setting the Objectives for the Redesign

    • Enhance User Experience
    • Increase Brand Awareness
    • Optimize Donations and Ticket Sales
    • Improve Responsiveness and Accessibility

      • These objectives guided our decision-making and served as a roadmap for the redesign project, allowing us to focus on key areas of improvement and deliver a website that aligns with COSI's goals and user expectations.

    Research and Insights


    Conducting User Research:

    The team conducted interviews to assess the brand awareness of COSI among the target audience and stakeholder. These interviews were designed to understand users' perceptions, preferences, and pain points related to COSI as both a science center and a nonprofit organization as well as to gather input from stakeholders regarding organizational goals and website functionalities.



    Additional Research:

    In addition to user interviews, we conducted extensive research to gather a comprehensive understanding of the competitive landscape and industry trends. This research included a thorough analysis of competitor websites, where we studied their design approaches, features, and user experiences.
    Swot Analysis:Parallel to our user research and competitor analysis, we conducted a SWOT (Strengths, Weaknesses, Opportunities, and Threats) analysis to assess COSI's internal strengths and weaknesses, as well as external opportunities and threats. This analysis provided valuable insights into COSI's position in the science center landscape and helped shape our design decisions.

    Crafting the Solution

    After gathering valuable insights from user research and conducting a thorough analysis, we transitioned into the ideation phase and,

    • Created user personas and defined their needs and goals.
    • Developed a value proposition that aligned with user desires for ease of use and philanthropic impact.
    • Crafted UX scenarios and storyboards to visualize user emotions and experiences.
    • Conducted card sorting exercises to refine the website's navigation structure.

    Userflow

    • To ensure a seamless and intuitive user experience, we crafted a user flow that outlines the step-by-step journey of the users on the website.
    • The user flow represents the ideal path that users would take to accomplish their goals and engage with the various features and functionalities of the website.

    Wireframing & Prototyping


    Paper Sketches

    To kickstart the design process, we began with paper sketches to quickly explore and iterate on different layout ideas and content arrangements. These sketches allowed us to visualize the overall structure of the website and make initial design decisions.

    Mid-fidelity Prototyping

    • After creating paper sketches and low-fidelity prototypes, we conducted user testing to gather feedback and insights.
    • Based on the findings, we iterated on the design and developed a mid-fidelity prototype.
    • This prototype served as a more detailed representation of the final product, allowing us to refine the user experience further.

    Laptop Prototype

    • Throughout the design process, we followed a mobile-first approach, considering the needs and constraints of mobile users as a priority.
    • However, we also recognized the importance of delivering a seamless experience across different devices.
    • As a result, we simultaneously designed for both mobile and laptop screens, ensuring that the website would be responsive and optimized for various screen sizes.
    • This approach allowed us to create a consistent user experience across different devices, accommodating the preferences and usage habits of our diverse audience.

    Design Exploration: Color Palette and Navigation Bar Refinements

    • After user testing the mid-fidelity prototype, we iterated the design, improving the overall user experience.
    • We carefully selected a color palette that aligns with COSI's brand identity, combining curiosity, vibrancy, and professionalism.
    • The palette features shades of orange and teal, evoking energy, innovation, and creativity, complemented by white and black for a visually captivating and cohesive design.
    • In order to streamline the navigation experience, we reduced the main navigation menu tabs from nine to five, ensuring a more focused and intuitive user journey.
    • We introduced a floating main navigation bar in the laptop version to provide easy access to primary website sections.
    • To enhance the navigation further, we implemented secondary navigation using mega menus.
    • These mega menus offer a comprehensive and organized way for users to explore additional content and features.
    • Through careful consideration of both color and navigation elements, we have created an engaging and user-friendly design that aligns with COSI's goals and delights its visitors.

    Final Design

    Outcomes and Impact

    • Simplified Navigation Structure: By streamlining the website's navigation, we reduced user confusion and enhanced ease of use. Users can now navigate the site more seamlessly, finding the information they need with greater efficiency.
    • Streamlined Ticket Purchase Process: We optimized the ticket purchase process. Users can now easily select and purchase tickets, contributing to a more frictionless transaction experience.
    • Enhanced Brand Awareness and Philanthropic Communication: The redesign effectively conveyed COSI's philanthropic nature and increased brand awareness. Users now have a clearer understanding of COSI's mission and are more inclined to support the organization through donations, leading to greater fundraising opportunities.
    • Optimized User Experience for Parents: The redesigned website provides a user-friendly platform for parents, catering to their specific needs and preferences. Parents can effortlessly access educational resources, explore family-friendly events, and plan visits, fostering a positive and engaging experience for both children and adults.

    Reflections and Future Plans

    Lessons Learned & Key Takeaways:

    • Throughout the project, I learned the importance of user-centered design and the value of iterative testing and feedback.
    • Collaboration and effective communication within the team were crucial for successful outcomes.
    • Additionally, incorporating data-driven design decisions and considering accessibility guidelines played a significant role in creating an inclusive and engaging website.

    Opportunities for Future Enhancements:

    • Personalized User Experience: Implement user profiles and personalized recommendations for a tailored website experience.
    • Personalized User Experience: Implement user profiles and personalized recommendations for a tailored website experience.
    • Community Engagement: Foster community collaboration through user-generated content and online forums.
    • Accessibility Enhancements: Improve accessibility features for an inclusive user experience.
    • Integration of Emerging Technologies: Explore VR and AR integration for innovative science education experiences.